stylelint-plugin-styled-components

A Stylelint plugin for the styled-components Library

Installation

npm install --save-dev stylelint-plugin-styled-components postcss postcss-styled-syntax

Configuration

Add this config to your .stylelintrc:

{
    "customSyntax": "postcss-styled-syntax",
    "plugins": ["stylelint-plugin-styled-components"],
    "rules": {
        "plugin/styled-components-enforce-ampersand": true
    }
}

Rules

plugin/styled-components-enforce-ampersand

Usage:

This rule helps to find all pseudo elements and toast an error in console if this pseudo element does't have ampersand. If you pass the --fix option, it will add the ampersand to all the pseudo elements that don't have it.

Purpose:

• when updating the styled-components from v5 to v6 there are a breaking changes.

Source: https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6

The problem is that you will not notice any error on the console when updating to v6. However, the styles will not work as you expected!

Suggestions

If you have any suggestion for a new rule to enhance DX when using styled-components library, you are welcome to open an issue.

Known Issues Realated to postcss-styled-syntax Library