`babel-plugin-styled-components`

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

Requirements

This plugin is tested against:

@babel/core ^7 and ^8
styled-components >= 6 (earlier majors may still work but aren't exercised in CI)

Install the plugin first:

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

Then add it to your babel configuration:

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

Full option reference lives on the styled-components documentation site. A couple worth flagging here:

topLevelImportPaths (string[]): additional module specifiers whose styled export should be recognized alongside styled-components. Useful for libraries that re-export the styled-components API.
cssPropImportPath (string, default 'styled-components'): which package the css-prop transform should auto-import styled from when the file doesn't already have a styled import. Set to 'styled-components/native' for React Native targets.

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

See LICENSE.md for more information.