@chalbert/babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components

Usage no npm install needed!

<script type="module">
  import chalbertBabelPluginStyledComponents from 'https://cdn.skypack.dev/@chalbert/babel-plugin-styled-components';
</script>

README

`babel-plugin-styled-components`

NOTE: This fork includes a fix that allows using this plugin with styled-components@5 + jest -styled -components@7. See this issue for more details.

This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:

consistently hashed component classNames between environments (a must for server-side rendering)
better debugging through automatic annotation of your styled components based on their context in the file system, etc.
various types of minification for styles and the tagged template literals styled-components uses

Quick start

Install the plugin first:

npm install --save-dev babel-plugin-styled-components

Then add it to your babel configuration:

{
  "plugins": ["babel-plugin-styled-components"]
}

Documentation

The documentation for this plugin lives on the styled-components website!

License

Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.

See LICENSE.md for more information.