Gathering detailed insights and metrics for @auvee/stylelint-processor-styled-components
Gathering detailed insights and metrics for @auvee/stylelint-processor-styled-components
Lint your styled components with stylelint!
Installations
npm install @auvee/stylelint-processor-styled-componentsDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.16.3
NPM Version
6.14.5
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
654 Stars
487 Commits
61 Forks
32 Watchers
3 Branches
123 Contributors
Updated on Feb 28, 2025
Maintainers
1
Package Meta Information
Latest Version
1.10.1
Package Id
@auvee/stylelint-processor-styled-components@1.10.1
Unpacked Size
116.00 kB
Size
26.08 kB
File Count
72
NPM Version
6.14.5
Node Version
12.16.3
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
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-componentsconfig to disable stylelint rules that clash withstyled-components - Your favorite
stylelintconfig! (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!
1{ 2 "processors": ["stylelint-processor-styled-components"], 3 "extends": [ 4 "stylelint-config-recommended", 5 "stylelint-config-styled-components" 6 ] 7}
NOTE: The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in
.tsor.tsx)
And it also has some options. Their default values are,
1{ 2 "processors": [["stylelint-processor-styled-components", { 3 "moduleName": "styled-components", 4 "importName": "default", 5 "strict": false, 6 "ignoreFiles": [], 7 "parserPlugins": [ 8 "jsx", 9 ["decorators", { "decoratorsBeforeExport": true }], 10 "classProperties", 11 "exportExtensions", 12 "functionBind", 13 "functionSent" 14 ] 15 }]] 16}
- Combining with
moduleName,importNameandstrict, 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 from
styled(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 v4
Component.extend``;
-
ignoreFilesis passed to micromatch as the second parameter, which means one or more glob patterns for matching. -
parserPluginsis used to make the processor's parser be able to parse new syntaxes. All available babel parser plugins and related options can be found in Babel's website.
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.
If your project includes yarn.lock or package-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.
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.
What's more, if set syntax: css-in-js in stylelint@10, it can extract styles from styled-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.
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
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!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 3/6 approved changesets -- score normalized to 5
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
43 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.8
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More