Package Exports

stylelint-processor-styled-components
stylelint-processor-styled-components/lib/utils/general
stylelint-processor-styled-components/lib/utils/parse
stylelint-processor-styled-components/lib/utils/styled
stylelint-processor-styled-components/lib/utils/tagged-template-literal

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 the CSS in your styled components with stylelint!

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

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