summaryrefslogtreecommitdiff
path: root/@linaria/packages/interop/README.md
diff options
context:
space:
mode:
Diffstat (limited to '@linaria/packages/interop/README.md')
-rw-r--r--@linaria/packages/interop/README.md45
1 files changed, 45 insertions, 0 deletions
diff --git a/@linaria/packages/interop/README.md b/@linaria/packages/interop/README.md
new file mode 100644
index 0000000..c10fc6e
--- /dev/null
+++ b/@linaria/packages/interop/README.md
@@ -0,0 +1,45 @@
+<p align="center">
+ <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/linaria-logo@2x.png" width="496">
+</p>
+
+<p align="center">
+Zero-runtime CSS in JS library.
+</p>
+
+---
+
+# `@linaria/babel-plugin-interop`
+
+This plugin allows to interpolate Linaria components inside styled-components and Emotion:
+```javascript
+import styled from 'styled-components';
+import { Title } from './Title.styled'; // Linaria component
+
+const Article = () => { /* … */ };
+
+export default styled(Article)`
+ & > ${Title} {
+ color: green;
+ }
+`;
+
+```
+
+## Quick start
+
+Install the plugin first:
+
+```
+npm install --save-dev @linaria/babel-plugin-interop
+```
+
+Then add `@linaria/interop` to your babel configuration *before* `styled-components`:
+
+```JSON
+{
+ "plugins": [
+ ["@linaria/interop", { "library": "styled-components" }],
+ "styled-components"
+ ]
+}
+```