Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-styled-components with all npm packages installed. Try it out:

require("styled-components/package.json"); // styled-components is a peer dependency. var babelPluginStyledComponents = require("babel-plugin-styled-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-styled-components v1.10.6

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

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

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free