Babel Plugin and StyleLint

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: