Repository files navigation

Lint yourstyled components withstylelint!

You need:

• stylelint (duh)
• This processor, to extract styles fromstyled-components
• Thestylelint-config-styled-components config to disable stylelint rules that clash withstyled-components
• Your favoritestylelint config! (for examplestylelint-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)

And it also has some options. Their default values are,

{"processors": [["stylelint-processor-styled-components", {"moduleName":"styled-components","importName":"default","strict":false,"ignoreFiles": [],"parserPlugins": ["jsx",      ["decorators", {"decoratorsBeforeExport":true }],"classProperties","exportExtensions","functionBind","functionSent"    ]  }]]}

• Combining withmoduleName,importName andstrict, you can tell the processor what kinds of tagged template literals to lint.

import styled, { css, keyframes } from 'styled-components';// `importName` from `moduleName`, which means where `styled` comes fromstyled(Component)``;styled('div')``;styled.div``;// any other imports from `moduleName` (if `strict` is true, they will not be linted)css``;keyframes``;// special extend calls, which have been deprecated in styled-components v4Component.extend``;

• ignoreFiles is passed tomicromatch as the second parameter, which means one or more glob patterns for matching.

• parserPlugins is used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found inBabel's website.

Further documentation for this processor lives onthe styled-components website!

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

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

If your project includesyarn.lock orpackage-lock.json, an alternative cause can be that babel related dependencies, i.e.@babel/parser and@babel/traverse, are outdated, especially when linting files with new TypeScript syntaxes. You can upgrade them by removing their entries in the lockfile and reinstall dependencies.

The processor can not always parse interpolations with right things. But you can useinterpolation-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.

What's more, if setsyntax: css-in-js in stylelint@10, it can extract styles fromstyled-components without this processor. Even though there are still lots of differences with this processor, we hope this processor's abilities can be migrated to stylelint totally in the future.

You can setoption.strict. More examples are in#258.

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

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