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.
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``;
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
}]
]
}
Minify styles
By default, plugin minifies styles in template literals. 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 will not see the effect of minification in generated style tags, it solely affects the presentation of styles inside js code.
You can disable minification if you don't need it with minify option:
{
"plugins": [
["styled-components", {
"minify": false
}]
]
}
Transpile template literals
Template literals are not supported yet by some browsers. You'll probably transpile your code with some preset that includes babel-plugin-transform-es2015-template-literals
to make it work in older browsers, but there is one tiny caveat. Output of that plugin is quite wordy. It's done this way to meet specification requirements.
var _templateObject = _taggedTemplateLiteral(['width: 100%;'], ['width: 100%;']);
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Simple = _styledComponents2.default.div(_templateObject);
Styled-components do not require full spec compatibility. So in order to reduce bundle size this plugin will transpile template literals attached to styled-component to the form that works in older browsers but have smaller footprint.
var Simple = _styledComponents2.default.div(['width: 100%;']);
Take a note that it will keep other template literals not related to styled-components as is.
styled.div``
keyframe``
css``
`some text`
styled.div`color: ${ light ? `white` : `black`};`
You can disable this feature with transpileTemplateLiterals
option:
{
"plugins": [
["styled-components", {
"transpileTemplateLiterals": false
}]
]
}
License
Licensed under the MIT License, Copyright © 2016 Vladimir Danchenkov and Maximilian Stoiber.
See LICENSE.md for more information.