stylelint-processor-styled-components

Lint your styled components with stylelint!

Setup

You need:

• stylelint (duh)
• This processor, to extract styles from styled-components
• The stylelint-config-styled-components config to disable stylelint rules that clash with styled-components
• Your favorite stylelint config! (for example stylelint-config-recommended)

(npm install --save-dev
  stylelint
  stylelint-processor-styled-components
  stylelint-config-styled-components
  stylelint-config-recommended)

Now use those in your .stylelintrc and run stylelint with your JavaScript files!

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ]
}

NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in .ts or .tsx)

Documentation

Further documentation for this processor lives on the styled-components website!

• Setup
• Webpack
• Interpolation tagging
• Tags
• sc-custom
• Syntax Notes

License

Licensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See LICENSE.md for more information!

Based on Mapbox' excellent stylelint-processor-markdown, thanks to @davidtheclark!