Skip to content

docs: cleanup docs about shorthands usage & limitations#549

Merged
layershifter merged 2 commits intomicrosoft:mainfrom
layershifter:docs/shorthands
May 2, 2024
Merged

docs: cleanup docs about shorthands usage & limitations#549
layershifter merged 2 commits intomicrosoft:mainfrom
layershifter:docs/shorthands

Conversation

@layershifter
Copy link
Member

@layershifter layershifter commented May 2, 2024 •
edited
Loading

This PR cleanups docs about CSS shorthands limitations & deprecates the most of CSS shorthands functions as they are natively supported (see #531 for codemod).

Before

import { shorthands } from '@griffel/react';

const useClasses = makeStyles({
  root: {
    ...shorthands.padding('2px'),
  },
});

After

import { shorthands } from '@griffel/react';

const useClasses = makeStyles({
  root: {
    padding: '2px',
  },
});

Fixes #531.

@github-actions
Copy link

github-actions bot commented May 2, 2024 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
core
__resetStyles (makeResetStyles)		 273 B
197 B
core
__styles (makeStyles)		 1.727 kB
832 B
core
makeResetStyles (runtime)		 17.14 kB
6.569 kB
core
makeStyles (runtime)		 25.905 kB
9.238 kB
core
mergeClasses		 1.865 kB
900 B
core
shorthands.padding()		 4.781 kB
1.537 kB
react
__css		 1.723 kB
812 B
react
__styles		 4.187 kB
1.832 kB
react
makeResetStyles (runtime)		 19.64 kB
7.562 kB
react
makeStaticStyles (runtime)		 9.576 kB
4.182 kB
react
makeStyles (runtime)		 28.41 kB
10.227 kB
shadow-dom
createShadowDOMRenderer		 4.085 kB
1.724 kB
🤖 This report was generated against 0f2eb5e6f199314b47c5a6cb0ef652f3eaa9ea08

@layershifter layershifter marked this pull request as ready for review May 2, 2024 12:45
@layershifter layershifter requested a review from a team as a code owner May 2, 2024 12:45
@layershifter layershifter merged commit e7e8d06 into microsoft:main May 2, 2024
@layershifter layershifter deleted the docs/shorthands branch May 2, 2024 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

core: add support for CSS shorthands

1 participant

@layershifter