diff --git a/README.md b/README.md index a8257fac8..dd2536d36 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,35 @@ const StyledButton = styled.button` ``` +### Extract styles + +Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet. + +```diff +-import { CC, CS } from '@compiled/react/runtime'; +- +-const _2 = '._syaz1q9v{color: hotpink}'; +-const _ = '._1wybfyhu{font-size: 48px}'; +- +export const LargeHotPinkText = () => ( +- +- {[_, _2]} + Hello world +- +); +``` + +```css +._1wybfyhu { + font-size: 48px; +} +._syaz1q9v { + color: hotpink; +} +``` + +See [CSS extraction](https://compiledcssinjs.com/docs/css-extraction-webpack) for more information. + ## Installation Install the [React](https://reactjs.org/) package.