Package Exports

stylelint-processor-styled-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylelint-processor-styled-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`stylelint-processor-styled-components`

Lint your styled components with stylelint!

Video of project in use

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!

F.A.Q.

Why does it throw `Unexpected token`? Even thought the file didn't import `styled-components`.

You can custom babel plugins by option.parserPlugins now. An API example is our test. But if someone can implement #231, that will be much better.

Why does it throw unexpected lint errors?

The processor can not always parse interpolations with right things. But you can use interpolation-tagging to help it. If you have ideas to make it more intelligent, feel free to send a PR or share your solution by an new issue.

I don't want specified tagged template literal to be parsed, i.e. `css`.

You can set option.strict. More examples are in #258.

License

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