Babel Plugin and StyleLint
Learn how to debug better using the Babel plugin and style better with Stylelint.
We'll cover the following...
We’ve seen how Babel can bring new features like JSX syntax to JavaScript. But Babel’s language-bending abilities can also be used for subtler purposes, tailoring your code to the needs of specific libraries. That’s what the official styled-components Babel plugin does. It’s a recommended addition for any project that uses styled-components.
-
Install the plugin with npm:
$ npm install --save-dev babel-plugin-styled-components@1.9.2 + babel-plugin-styled-components@1.9.2
-
Then add it to your Babel config:
// .babelrc.js module.exports = { presets: ['@babel/preset-react', '@babel/preset-env'], plugins: [ '@babel/plugin-proposal-class-properties', 'babel-plugin-styled-components', ], };
-
Restart your dev server, and inspect the element again:
Notice the difference? For one thing, the short class name has changed. (To reiterate: never copy class names generated by styled-components into your code) But more importantly, the formerly sc-
prefixed class name is now prefixed with CarouselSlide__Img-
. Thanks to the Babel plugin, you can now see the module name (CarouselSlide
) and component name (Img
) associated with every element styled by styled-components. Note, ...