| 1 | # `babel-plugin-styled-components`
|
| 2 |
|
| 3 | This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:
|
| 4 |
|
| 5 | * consistently hashed component classNames between environments (a must for server-side rendering)
|
| 6 | * automatic library usage tweaks that allow for some bytes to be dropped from your bundle
|
| 7 | * better debugging through automatic annotation of your styled components based on their context in the file system, etc.
|
| 8 | * various types of minification for styles and the tagged template literals styled-components uses
|
| 9 |
|
| 10 | ## Quick start
|
| 11 |
|
| 12 | Install the plugin first:
|
| 13 |
|
| 14 | ```
|
| 15 | npm install --save-dev babel-plugin-styled-components
|
| 16 | ```
|
| 17 |
|
| 18 | Then add it to your babel configuration:
|
| 19 |
|
| 20 | ```JSON
|
| 21 | {
|
| 22 | "plugins": ["babel-plugin-styled-components"]
|
| 23 | }
|
| 24 | ```
|
| 25 |
|
| 26 | ## Documentation
|
| 27 |
|
| 28 | **The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**
|
| 29 |
|
| 30 | * [Usage](https://www.styled-components.com/docs/tooling#usage)
|
| 31 | * [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
|
| 32 | * [Minification](https://www.styled-components.com/docs/tooling#minification)
|
| 33 |
|
| 34 | ## License
|
| 35 |
|
| 36 | Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.
|
| 37 |
|
| 38 | See [LICENSE.md](./LICENSE.md) for more information.
|