microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 61 forks source link

docs: cleanup docs about shorthands usage & limitations #549

Closed layershifter closed 6 months ago

layershifter commented 6 months ago

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[bot] commented 6 months ago

📊 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