Package Exports

babel-plugin-styled-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-styled-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`babel-plugin-styled-components`

Babel plugin for styled-components. This is not necessary at all to use styled-components, it just adds some nice features to enhance the experience.

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

Add `displayNames` to your components

By showing your components' real name in the React DevTools it's much easier to debug your applications.

We take the name of the variable you assign your styled-components to and add it as the displayName to the resulting React component.

const MyBtn = styled.button``;
// Plugin does this for you:
MyBtn.displayName = 'MyBtn';

When rendering this button, the React DevTools will normally just show <styled.button>. By enabling this plugin, the DevTools show <MyBtn />.

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

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

Add server-side rendering support

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 don't need server-side rendering, you can disable it with the ssr option:

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

License

See LICENSE.md for more information.