Lint the CSS in your styled components with stylelint!
JavaScript
Latest commit 9d904c9 Oct 27, 2016 @mxstbr mxstbr committed on GitHub Merge pull request #7 from styled-components/fix-bugs
Fix indentation problem
Permalink
Failed to load latest commit information.
src Fix indentation Oct 27, 2016
test Skip failing test for now Oct 27, 2016
.editorconfig Add .editorconfig Oct 20, 2016
.eslintignore Fix linting πŸ™ˆ Oct 23, 2016
.eslintrc Add JSX support to ESlint Oct 23, 2016
.gitignore Ignore coverage/ Oct 23, 2016
.npmignore Add .npmignore Oct 23, 2016
.travis.yml Dont run on node 4.0 Oct 23, 2016
LICENSE.md Initial commit Oct 19, 2016
README.md Update README Oct 26, 2016
package.json 0.0.4 Oct 26, 2016

README.md

stylelint-processor-styled-components

Lint the CSS in your styled components with stylelint!

Build Status Coverage Status

Video of project in use

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!

Usage

Installation

You need:

  • stylelint (duh)
  • This processor (to add styled-components support)
  • The standard config for stylelint (or any config you like)
npm install --save-dev stylelint-processor-styled-components stylelint stylelint-config-standard

Setup

Add a .stylelintrc file to the root of your project:

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": "stylelint-config-standard",
  "syntax": "scss"
}

Setting the syntax to scss is 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

License

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!