Babel Plugin and StyleLint
Explore how to improve your React styling by integrating the Babel plugin designed for styled-components and applying Stylelint for CSS linting. Understand the installation process, configuration, and workflow to maintain clean, efficient, and error-free styles within your React projects.
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 ...