stylelint-processor-styled-components

Lint your styled components with stylelint!

[![Build Status][build-badge]][build-url]
[![Coverage Status][coverage-badge]][coverage-url]
[![Greenkeeper][greenkeeper-badge]][greenkeeper-url]

!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!

`json
{
"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!

[build-badge]: https://travis-ci.org/styled-components/stylelint-processor-styled-components.svg?branch=master
[build-url]: https://travis-ci.org/styled-components/stylelint-processor-styled-components
[coverage-badge]: https://coveralls.io/repos/github/styled-components/stylelint-processor-styled-components/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/styled-components/stylelint-processor-styled-components?branch=master
[greenkeeper-badge]: https://badges.greenkeeper.io/styled-components/stylelint-processor-styled-components.svg
[greenkeeper-url]: https://greenkeeper.io/