{"id":13493945,"url":"https://github.com/styled-components/stylelint-processor-styled-components","last_synced_at":"2025-10-02T12:30:27.425Z","repository":{"id":53104947,"uuid":"71390195","full_name":"styled-components/stylelint-processor-styled-components","owner":"styled-components","description":"Lint your styled components with stylelint!","archived":true,"fork":false,"pushed_at":"2021-04-06T15:36:20.000Z","size":997,"stargazers_count":655,"open_issues_count":22,"forks_count":61,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-05-19T08:43:46.882Z","etag":null,"topics":["linter","linting","styled-components","stylelint"],"latest_commit_sha":null,"homepage":"https://styled-components.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/styled-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-19T19:04:41.000Z","updated_at":"2024-03-19T11:18:31.000Z","dependencies_parsed_at":"2022-08-20T18:10:16.415Z","dependency_job_id":null,"html_url":"https://github.com/styled-components/stylelint-processor-styled-components","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstylelint-processor-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstylelint-processor-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstylelint-processor-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styled-components%2Fstylelint-processor-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styled-components","download_url":"https://codeload.github.com/styled-components/stylelint-processor-styled-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234983192,"owners_count":18917435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["linter","linting","styled-components","stylelint"],"created_at":"2024-07-31T19:01:20.219Z","updated_at":"2025-10-02T12:30:22.085Z","avatar_url":"https://github.com/styled-components.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# `stylelint-processor-styled-components`\n\nLint your [styled components](https://github.com/styled-components/styled-components) with [stylelint](http://stylelint.io/)!\n\n[![Build Status][build-badge]][build-url]\n[![Coverage Status][coverage-badge]][coverage-url]\n[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/styled-components/stylelint-processor)\n[![Greenkeeper][greenkeeper-badge]][greenkeeper-url]\n\n![Video of project in use](http://imgur.com/br9zdHb.gif)\n\n## Setup\n\nYou need:\n\n- `stylelint` (duh)\n- This processor, to extract styles from `styled-components`\n- The [`stylelint-config-styled-components`](https://github.com/styled-components/stylelint-config-styled-components) config to disable stylelint rules that clash with `styled-components`\n- Your favorite `stylelint` config! (for example [`stylelint-config-recommended`](https://github.com/stylelint/stylelint-config-recommended))\n\n```\n(npm install --save-dev \\\n  stylelint \\\n  stylelint-processor-styled-components \\\n  stylelint-config-styled-components \\\n  stylelint-config-recommended)\n```\n\nNow use those in your `.stylelintrc` and run stylelint with your JavaScript files!\n\n```json\n{\n  \"processors\": [\"stylelint-processor-styled-components\"],\n  \"extends\": [\n    \"stylelint-config-recommended\",\n    \"stylelint-config-styled-components\"\n  ]\n}\n```\n\n\u003e **NOTE:** The processor works with Flow- and TypeScript-typed files too! (we'll assume TypeScript usage if your files end in `.ts` or `.tsx`)\n\nAnd it also has some options. Their default values are,\n\n```json\n{\n  \"processors\": [[\"stylelint-processor-styled-components\", {\n    \"moduleName\": \"styled-components\",\n    \"importName\": \"default\",\n    \"strict\": false,\n    \"ignoreFiles\": [],\n    \"parserPlugins\": [\n      \"jsx\",\n      [\"decorators\", { \"decoratorsBeforeExport\": true }],\n      \"classProperties\",\n      \"exportExtensions\",\n      \"functionBind\",\n      \"functionSent\"\n    ]\n  }]]\n}\n```\n\n- Combining with `moduleName`, `importName` and `strict`, you can tell the processor what kinds of tagged template literals to lint.\n\n```\nimport styled, { css, keyframes } from 'styled-components';\n\n// `importName` from `moduleName`, which means where `styled` comes from\nstyled(Component)``;\nstyled('div')``;\nstyled.div``;\n\n// any other imports from `moduleName` (if `strict` is true, they will not be linted)\ncss``;\nkeyframes``;\n\n// special extend calls, which have been deprecated in styled-components v4\nComponent.extend``;\n\n```\n\n- `ignoreFiles` is passed to [micromatch](https://github.com/micromatch/micromatch#api) as the second parameter, which means one or more glob patterns for matching.\n\n- `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 in [Babel's website](https://babeljs.io/docs/en/babel-parser#plugins).\n\n## [Documentation](https://www.styled-components.com/docs/tooling#stylelint)\n\n**Further documentation for this processor lives on [the styled-components website](https://www.styled-components.com/docs/tooling#stylelint)!**\n\n- [Setup](https://www.styled-components.com/docs/tooling#setup)\n- [Webpack](https://www.styled-components.com/docs/tooling#webpack)\n- [Interpolation tagging](https://www.styled-components.com/docs/tooling#interpolation-tagging)\n- [Tags](https://www.styled-components.com/docs/tooling#tags)\n- [sc-custom](https://www.styled-components.com/docs/tooling#sc-custom)\n- [Syntax Notes](https://www.styled-components.com/docs/tooling#syntax-notes)\n\n## F.A.Q.\n\n### Why does it throw `Unexpected token`? Even thought the file didn't import `styled-components`.\n\nYou can custom babel plugins by `option.parserPlugins` now. An API example is [our test](https://github.com/styled-components/stylelint-processor-styled-components/blob/master/test/options.test.js#L211). But if someone can implement [#231](https://github.com/styled-components/stylelint-processor-styled-components/issues/231), that will be much better.\n\nIf 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.\n\n### Why does it throw unexpected lint errors?\n\nThe processor can not always parse interpolations with right things. But you can use [interpolation-tagging](https://www.styled-components.com/docs/tooling#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.\n\nWhat'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.\n\n### I don't want specified tagged template literal to be parsed, i.e. `css`.\n\nYou can set `option.strict`. More examples are in [#258](https://github.com/styled-components/stylelint-processor-styled-components/pull/258).\n\n## License\n\nLicensed under the MIT License, Copyright © 2017 Maximilian Stoiber. See [LICENSE.md](./LICENSE.md) for more information!\n\nBased on Mapbox' excellent [`stylelint-processor-markdown`](https://github.com/mapbox/stylelint-processor-markdown), thanks to @davidtheclark!\n\n[build-badge]: https://travis-ci.org/styled-components/stylelint-processor-styled-components.svg?branch=master\n[build-url]: https://travis-ci.org/styled-components/stylelint-processor-styled-components\n[coverage-badge]: https://coveralls.io/repos/github/styled-components/stylelint-processor-styled-components/badge.svg?branch=master\n[coverage-url]: https://coveralls.io/github/styled-components/stylelint-processor-styled-components?branch=master\n[greenkeeper-badge]: https://badges.greenkeeper.io/styled-components/stylelint-processor-styled-components.svg\n[greenkeeper-url]: https://greenkeeper.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fstylelint-processor-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyled-components%2Fstylelint-processor-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyled-components%2Fstylelint-processor-styled-components/lists"}