diff options
Diffstat (limited to '@linaria/packages/interop/README.md')
-rw-r--r-- | @linaria/packages/interop/README.md | 45 |
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" + ] +} +``` |