A Stylelint plugin for the styled-components Library
npm install --save-dev stylelint-plugin-styled-components postcss postcss-styled-syntax
Add this config to your .stylelintrc
:
{
"customSyntax": "postcss-styled-syntax",
"plugins": ["stylelint-plugin-styled-components"],
"rules": {
"plugin/styled-components-enforce-ampersand": true
}
}
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.
- 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!
If you have any suggestion for a new rule to enhance DX when using styled-components library, you are welcome to open an issue.