Lint the CSS in your styled components with stylelint!
NOTE: This is currently in alpha. While unit-tested, it doesn't yet have a lot of real world project exposure, so there'll be some edge cases we haven't covered. Please try it out and submit bug reports!
You need:
stylelint(duh)- This processor (to add
styled-componentssupport) - The standard config for stylelint (or any config you like)
npm install --save-dev stylelint-processor-styled-components stylelint stylelint-config-standard
Add a .stylelintrc file to the root of your project:
{
"processors": ["stylelint-processor-styled-components"],
"extends": "stylelint-config-standard",
"syntax": "scss"
}Setting the
syntaxtoscssis needed for nesting and interpolation support!
Then you need to actually run stylelint.
Add a lint:css script to your package.json. This script will run stylelint with a path to all of your files containing styled-components code:
{
"scripts": {
"lint:css": "stylelint './components/**/*.js'"
}
}NOTE: Don't worry about passing in files that don't contain any styled-components code – we take care of that.
Now you can lint your CSS by running this script! 🎉
npm run lint:css
Licensed under the MIT License, Copyright © 2016 Maximilian Stoiber. See LICENSE.md for more information!
Based on Mapbox' excellent stylelint-processor-markdown, thanks to @davidtheclark!