{"id":14990671,"url":"https://github.com/bmatcuk/eslint-plugin-postcss-modules","last_synced_at":"2025-04-12T02:37:59.437Z","repository":{"id":34932212,"uuid":"189899126","full_name":"bmatcuk/eslint-plugin-postcss-modules","owner":"bmatcuk","description":"Checks that you are using the classes exported by your css modules using postcss.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:54:13.000Z","size":547,"stargazers_count":21,"open_issues_count":23,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T02:37:48.799Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bmatcuk.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":"2019-06-02T21:55:09.000Z","updated_at":"2024-02-14T14:55:54.000Z","dependencies_parsed_at":"2023-01-15T10:45:21.867Z","dependency_job_id":null,"html_url":"https://github.com/bmatcuk/eslint-plugin-postcss-modules","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/bmatcuk%2Feslint-plugin-postcss-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Feslint-plugin-postcss-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Feslint-plugin-postcss-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmatcuk%2Feslint-plugin-postcss-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmatcuk","download_url":"https://codeload.github.com/bmatcuk/eslint-plugin-postcss-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507083,"owners_count":21115533,"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":[],"created_at":"2024-09-24T14:20:34.104Z","updated_at":"2025-04-12T02:37:59.420Z","avatar_url":"https://github.com/bmatcuk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Release](https://img.shields.io/npm/v/eslint-plugin-postcss-modules.svg)](https://www.npmjs.com/package/eslint-plugin-postcss-modules)\n[![Build Status](https://travis-ci.com/bmatcuk/eslint-plugin-postcss-modules.svg?branch=master)](https://travis-ci.com/bmatcuk/eslint-plugin-postcss-modules)\n[![codecov.io](https://img.shields.io/codecov/c/github/bmatcuk/eslint-plugin-postcss-modules.svg?branch=master)](https://codecov.io/github/bmatcuk/eslint-plugin-postcss-modules?branch=master)\n\n# eslint-plugin-postcss-modules\nLike [eslint-plugin-css-modules], this plugin helps you lint your css modules.\nIt adds a new eslint rule that detects if you are trying to use a class that is\nnot exported by your css module.\n\nThe major difference between this plugin and the aforementioned plugin is that\nthis plugin uses [postcss] to parse the css files and determine what classes\nare exported. There are a couple of benefits to this:\n\n1. Under the hood, [css-loader] is also using postcss with a few plugins to\n   determine which classes are exported. This plugin uses the same group of\n   plugins to guarantee that the classes that are linted are the same as the\n   classes css-loader exports.\n2. Through plugins, postcss can handle a variety of complex input css files.\n   While eslint-plugin-css-modules has excellent support for most major css\n   grammars (such as sass), it does not support all of the inputs that postcss\n   can handle and probably never will. If you are using postcss for your\n   project, chances are good that eslint-plugin-css-modules will choke on your\n   files.\n\nThe downside is that, while postcss is very battle-tested and fast for\n_building_ css, it _may_ be slower than eslint-plugin-css-modules for linting\npurposes. I don't have benchmarks, but welcome them.\n\n## Installation\n```bash\nyarn add -D eslint-plugin-postcss-modules\nnpm install -D eslint-plugin-postcss-modules\n```\n\n## Usage\nIn your eslint config:\n```json\n{\n  \"extends\": [\n    \"plugin:postcss-modules/recommended\"\n  ],\n}\n```\n\nThe recommended configuration will set `no-undef-class` to errors and\n`no-unused-class` to warnings. The recommended configuration is equivalent to:\n```json\n{\n  \"plugins\": [\"postcss-modules\"],\n  \"rules\": {\n    \"postcss-modules/no-undef-class\": \"error\",\n    \"postcss-modules/no-unused-class\": \"warn\"\n  }\n}\n```\n\n### Settings\nThere are a couple settings you can tweak in your eslint config. Below are\nexamples of the options and their default values:\n```json\n{\n  \"settings\": {\n    \"postcss-modules\": {\n      \"postcssConfigDir\": \"cwd\",\n      \"baseDir\": \"cwd\",\n      \"camelCase\": false,\n      \"defaultScope\": \"local\",\n      \"include\": \"**/*.css\",\n      \"exclude\": \"**/node_modules/**/*\"\n    }\n  }\n}\n```\n\n* **postcssConfigDir** _(default: cwd)_\n  \u003e _postcssConfigDir_ sets the starting point to search for the postcss config\n  \u003e file, as determined by [postcss-load-config]. Searching will start with\n  \u003e this directory and work its way up recursively until it finds a config file\n  \u003e or hits your home directory. See [cosmiconfig] for more info.\n  \u003e\n  \u003e I recommend that you create a pared down version of your postcss config\n  \u003e that only includes plugins that could affect the structure of the file and\n  \u003e the class names that might be exported in order to reduce the amount of\n  \u003e time linting takes. For example, postcss-preset-env is really a collection\n  \u003e of plugins under the hood. The only plugins that affect the structure and\n  \u003e classes that would be exported are probably postcss-custom-selectors and\n  \u003e postcss-nesting.\n\n* **baseDir** _(default: cwd)_\n  \u003e _baseDir_ is used to resolve imports to your css files. If the import is\n  \u003e relative (ie, starts with `./`), the path of the current file will be used\n  \u003e to resolve the import. However, if the import is not relative, this\n  \u003e _baseDir_ will be used to resolve the path.\n\n* **camelCase** _(default: `false`)_\n  \u003e The _camelCase_ option should match the [camelCase option] or\n  \u003e [localsConvention option] that you have set for css-loader, depending on\n  \u003e which version you are using. Here's a description of the options and what\n  \u003e they do:\n\n  | option                        | description                                                              |\n  | ----------------------------- | ------------------------------------------------------------------------ |\n  | `false` or `\"asIs\"`           | Do not camelCase exported classes                                        |\n  | `true` or `\"camelCase\"`       | Export both the original class name and the camelCased version           |\n  | `\"camelCaseOnly\"` or `\"only\"` | Export only the camelCased class names                                   |\n  | `\"dashes\"`                    | Convert dashed-names to camelCase and export both                        |\n  | `\"dashesOnly\"`                | Convert dashed-names to camelCase and only export the camelCased version |\n\n* **defaultScope** _(default: `\"local\"`)_\n  \u003e The _defaultScope_ option determines scope (global or local) of any css\n  \u003e classes which are not explicitly declared as being global or local using\n  \u003e `:global` or `:local`. The default is `\"local\"`.\n\n* **include** _(default: `\"**/*.css\"`)_\n  \u003e An [anymatch] matcher to determine what files should be parsed for\n  \u003e css-module exports. Any file which matches _include_ but does not match\n  \u003e _exclude_ will be parsed. Note that due to the way eslint combines\n  \u003e settings, you cannot use a regex here.\n\n* **exclude** _(default: `\"**/node_modules/**/*\"`)_\n  \u003e An [anymatch] matcher to determine what files should _not_ be parsed for\n  \u003e css-module exports. Any file which matches _include_ but does not match\n  \u003e _exclude_ will be parsed. Note that due to the way eslint combines\n  \u003e settings, you cannot use a regex here.\n\n[anymatch]: https://github.com/micromatch/anymatch\n[camelCase option]: https://github.com/webpack-contrib/css-loader/tree/v2.1.1#camelcase\n[cosmiconfig]: https://github.com/davidtheclark/cosmiconfig\n[css-loader]: https://github.com/webpack-contrib/css-loader\n[eslint-plugin-css-modules]: https://github.com/atfzl/eslint-plugin-css-modules\n[localsConvention option]: https://github.com/webpack-contrib/css-loader/tree/v3.0.0#localsconvention\n[postcss]: https://postcss.org/\n[postcss-load-config]: https://github.com/michael-ciniawsky/postcss-load-config\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmatcuk%2Feslint-plugin-postcss-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmatcuk%2Feslint-plugin-postcss-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmatcuk%2Feslint-plugin-postcss-modules/lists"}