{"id":15020306,"url":"https://github.com/exogen/jest-styled-components-stylelint","last_synced_at":"2025-10-25T12:30:19.476Z","repository":{"id":57147150,"uuid":"123756447","full_name":"exogen/jest-styled-components-stylelint","owner":"exogen","description":"Run stylelint on your styled-components styles at runtime.","archived":false,"fork":false,"pushed_at":"2018-03-09T03:19:00.000Z","size":771,"stargazers_count":24,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T01:35:11.245Z","etag":null,"topics":["jest","styled-components","stylelint"],"latest_commit_sha":null,"homepage":null,"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/exogen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-04T04:23:15.000Z","updated_at":"2024-02-13T15:01:29.000Z","dependencies_parsed_at":"2022-09-05T16:50:13.322Z","dependency_job_id":null,"html_url":"https://github.com/exogen/jest-styled-components-stylelint","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fjest-styled-components-stylelint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fjest-styled-components-stylelint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fjest-styled-components-stylelint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exogen%2Fjest-styled-components-stylelint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exogen","download_url":"https://codeload.github.com/exogen/jest-styled-components-stylelint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238137813,"owners_count":19422702,"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":["jest","styled-components","stylelint"],"created_at":"2024-09-24T19:54:53.251Z","updated_at":"2025-10-25T12:30:19.121Z","avatar_url":"https://github.com/exogen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jest-styled-components-stylelint\n\nA helper for running stylelint on your styled-components styles **at runtime**.\n\nThat means it lints the styles _after_ all your dynamic interpolations are\nresolved! So it doesn’t get tripped up or need annotations, and will more\naccurately reflect the styles you’re actually shipping.\n\n![Screenshot](./screenshot.png)\n\n## Usage\n\nIn a Jest setup file like `setupTestFramework.js`:\n\n```js\nimport configure from 'jest-styled-components-stylelint'\n\n// NOTE: This should be configured before `styled-components` and `stylis` are\n// imported anywhere!\nconfigure({ failOnError: true })\n```\n\nOr simply:\n\n```js\nrequire('jest-styled-components-stylelint')()\n```\n\nThen in your tests, just make sure something renders your components:\n\n```js\nimport TestRenderer from 'react-test-renderer'\n\ntest('renders successfully', () =\u003e {\n  const wrapper = TestRenderer.create(\u003cButton /\u003e)\n  expect(wrapper.toJSON()).toMatchSnapshot()\n})\n```\n\nAny stylelint errors will cause the test to fail – or if `failOnError` is\n`false`, they will simply be logged.\n\n### Options\n\n#### failOnError\n\nWhether there should be an automatic assertion at the end of every test (added\nvia `afterEach`) that asserts there were no stylelint errors when running the\ntest.\n\nIf `true`, stylelint errors will cause the test to fail. The failure message\nwill include the formatted lint errors.\n\nIf `false`, stylelint errors will be logged to stderr but the test won’t fail.\n\nDefault: `true`\n\n#### formatterOptions\n\nBy default, this package uses its own custom stylelint formatter (seen in the\nscreenshot above). It shows the styles inline so they’re easier to find and fix.\nYou can tune some aspects of the formatter:\n\n* `collapseLines`: Whether each line of code with warnings will be printed just\n  once, or multiple times (once for each warning). Defaults to `true`.\n\nSee below if you’d like to change the stylelint formatter completely.\n\n#### More…\n\nAll remaining options are passed along to [stylelint’s `lint()` function][lint].\n\nYou can use this to pass a custom `formatter` (or any of the defaults from\nstylelint, like `string`).\n\n[lint]: https://github.com/stylelint/stylelint/blob/master/docs/user-guide/node-api.md#options\n\n## Troubleshooting\n\n**It’s not doing anything!**\n\nIf you’re using this with `jest-styled-components`, make sure to import and\n`configure()` this module _first_, before importing `jest-styled-components`.\nOtherwise, the necessary modules aren’t mocked in time.\n\n---\n\n**There are a lot of errors, but my code looks fine.**\n\nAre they spacing errors, like `declaration-block-semicolon-space-after`?\n\n\u003e Expected single space after \";\" in a single-line declaration block\n\nIf so, this is because `babel-plugin-styled-components` ships with the `minify`\noption enabled by default, so your styles come pre-minified.\n\nYou can try disabling this in your test environment by modifying your Babel\nconfiguration:\n\n```js\nplugins: [\n  ['styled-components', { ssr: true, minify: process.env.NODE_ENV !== 'test' }]\n]\n```\n\n(As a last resort, you could disable the `stylelint` rules in question.)\n\n---\n\n**I’m including some third-party CSS in my template strings and I don’t care\nabout linting it.**\n\nYou can try putting normal stylelint comment directives around it, they should\nwork just fine:\n\n```css\n/* stylelint-disable */\n${someExternalCSS}\n/* stylelint-enable */\n```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Fjest-styled-components-stylelint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexogen%2Fjest-styled-components-stylelint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexogen%2Fjest-styled-components-stylelint/lists"}