From c93fec2259ca0eb34b9bb4f6011e3297cf345102 Mon Sep 17 00:00:00 2001
From: DOUGES <madou@users.noreply.github.com>
Date: Tue, 23 Mar 2021 12:31:46 +1100
Subject: [PATCH] chore: add extraction info to readme (#663)

* chore: add extraction info to readme

* Update README.md
---
 README.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

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`
 </ClassNames>
 ```
 
+### 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 = () => (
+-  <CC>
+-   <CS>{[_, _2]}</CS>
+    <span className="_syaz1q9v _1wybfyhu">Hello world</span>
+-  </CC>
+);
+```
+
+```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.