babel-plugin-styled-components

What is babel-plugin-styled-components?

The babel-plugin-styled-components npm package is a plugin for Babel that improves the development and user experience when using styled-components. It provides better debugging, server-side rendering support, minification of styles, and other enhancements.

What are babel-plugin-styled-components's main functionalities?

Improved debugging

This feature adds readable class names to your styled components, making it easier to debug your styles in the browser's dev tools.

/* Before using the plugin */
const Button = styled.button`color: blue;`;
/* After using the plugin, the class name includes the component name */
// <button class="Button-sc-__sc-1vu0deq-0 gKZCfK" />

Server-side rendering

It ensures that server-side rendering of styles is consistent with client-side rendering, preventing checksum mismatches and improving performance.

/* The plugin adds unique identifiers to the styles which helps with consistent rehydration of server-side rendered styles to the client. */

Minification

This feature minifies the styles by removing comments and whitespace, leading to a smaller bundle size and faster load times.

/* The plugin can remove comments and whitespace from your CSS to reduce payload size. */

Preprocessing

The plugin allows you to write your styles with nesting and other preprocessing features, which it then converts into valid CSS.

/* You can write your styles in a nested manner similar to Sass, and the plugin will preprocess it into valid CSS. */
const Button = styled.button`
  color: blue;
  &:hover {
    color: red;
  }
`;

Other packages similar to babel-plugin-styled-components

babel-plugin-emotion

This package is similar to babel-plugin-styled-components but is tailored for the Emotion library. It offers source maps, SSR support, and other optimizations specific to Emotion.

README

babel-plugin-styled-components

This plugin adds support for server-side rendering, for minification of styles and gives you a nicer debugging experience when using styled-components.

⚠️ This plugin is only necessary if you're server-side rendering, you can use styled-components perfectly fine without it! ⚠️

Usage

THIS ISN'T PUBLISHED YET, WIP

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

Then in your babel configuration (probably .babelrc):

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

Features

• Server-side rendering
• Better debugging
• Minification

Server-side rendering

This option is turned off by default

By adding a unique identifier to every styled component this plugin avoids checksum mismatches due to different class generation on the client and on the server. If you do not use this plugin and try to server-side render styled-components React will complain.

If you want server-side rendering support you can enable it with the ssr option:

{
  "plugins": [
    ["styled-components", {
      "ssr": true
    }]
  ]
}

Better debugging

This babel plugin adds the components' name to the class name attached to the DOM node. In your browsers DevTools you'll see <button class="sc-Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

This also adds support for showing your components' real name in the React DevTools. Tget will normally show <styled.button> for all of your components, but with this pluginthey show <MyButton />.

This makes it easier to find your components and to figure out where they live in your app.

If you don't need this feature, you can disable it with the displayName option:

{
  "plugins": [
    ["styled-components", {
      "displayName": false
    }]
  ]
}

Preprocessing (Experimental ⚠️ )

This plugin preprocesses your styles with stylis and uses the no-parser.js entrypoint on styled-components.

This effectively removes stylis from your runtime bundle and should slightly improve runtime performance and shrink your bundle size.

It automatically disables the minify option, since stylis already does some minifcation on your CSS.

This is experimental and we don't yet know of all limitations and bugs! Consider this non-production ready for now.

You can enable preprocessing with the preprocess option:

{
  "plugins": [
    ["styled-components", {
      "preprocess": true
    }]
  ]
}

Minification

This plugin minifies your styles in the tagged template literals, giving you big bundle size savings. (note that you will not see the effect of minification in generated <style> tags, it solely affects the style strings inside your JS bundle)

This operation may potentially break your styles in some rare cases, so we recommend to keep this option enabled in development if it's enabled in the production build.

You can disable minification with the minify option:

{
  "plugins": [
    ["styled-components", {
      "minify": false
    }]
  ]
}

We also transpile styled-components tagged template literals down to a smaller representation than what Babel normally does, because styled-components template literals don't need to be 100% spec compliant. (see minification.md for more information about that) You can use the transpileTemplateLiterals option to turn this feature off.

License

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

See LICENSE.md for more information.