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

Usage no npm install needed!

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


This is a fork of styled-components/babel-plugin-styled-components with the addion of a bug pach that insuare that all styled-components IDs are prefixed with sc-


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"]


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


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

See LICENSE.md for more information.