{"id":15651265,"url":"https://github.com/ota-meshi/eslint-plugin-css","last_synced_at":"2025-04-13T15:35:44.930Z","repository":{"id":37082586,"uuid":"426079450","full_name":"ota-meshi/eslint-plugin-css","owner":"ota-meshi","description":"An ESLint plugin that provides rules to verify CSS definition objects.","archived":false,"fork":false,"pushed_at":"2024-04-19T06:14:46.000Z","size":465,"stargazers_count":33,"open_issues_count":7,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-05-01T21:19:08.174Z","etag":null,"topics":["css","eslint-plugin","react","vue"],"latest_commit_sha":null,"homepage":"https://ota-meshi.github.io/eslint-plugin-css/","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/ota-meshi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ota-meshi"}},"created_at":"2021-11-09T03:34:06.000Z","updated_at":"2024-05-08T23:36:51.700Z","dependencies_parsed_at":"2023-01-20T22:47:49.825Z","dependency_job_id":"812b6e9b-a530-4656-a8e9-3ad960da63c4","html_url":"https://github.com/ota-meshi/eslint-plugin-css","commit_stats":{"total_commits":102,"total_committers":3,"mean_commits":34.0,"dds":0.2941176470588235,"last_synced_commit":"03e41a6d918a48523fd1926e1bc96a9d2e92556b"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ota-meshi%2Feslint-plugin-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ota-meshi%2Feslint-plugin-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ota-meshi%2Feslint-plugin-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ota-meshi%2Feslint-plugin-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ota-meshi","download_url":"https://codeload.github.com/ota-meshi/eslint-plugin-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248737222,"owners_count":21153724,"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":["css","eslint-plugin","react","vue"],"created_at":"2024-10-03T12:37:45.234Z","updated_at":"2025-04-13T15:35:44.903Z","avatar_url":"https://github.com/ota-meshi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ota-meshi"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Introduction\n\n[eslint-plugin-css](https://www.npmjs.com/package/eslint-plugin-css) is an ESLint plugin that provides rules to verify CSS definition objects.\n\n[![NPM license](https://img.shields.io/npm/l/eslint-plugin-css.svg)](https://www.npmjs.com/package/eslint-plugin-css)\n[![NPM version](https://img.shields.io/npm/v/eslint-plugin-css.svg)](https://www.npmjs.com/package/eslint-plugin-css)\n[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads\u0026colorB=green\u0026suffix=/day\u0026query=$.downloads\u0026uri=https://api.npmjs.org//downloads/point/last-day/eslint-plugin-css\u0026maxAge=3600)](http://www.npmtrends.com/eslint-plugin-css)\n[![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-css.svg)](http://www.npmtrends.com/eslint-plugin-css)\n[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-css.svg)](http://www.npmtrends.com/eslint-plugin-css)\n[![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-css.svg)](http://www.npmtrends.com/eslint-plugin-css)\n[![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-css.svg)](http://www.npmtrends.com/eslint-plugin-css)\n[![Build Status](https://github.com/ota-meshi/eslint-plugin-css/workflows/CI/badge.svg?branch=main)](https://github.com/ota-meshi/eslint-plugin-css/actions?query=workflow%3ACI)\n[![Coverage Status](https://coveralls.io/repos/github/ota-meshi/eslint-plugin-css/badge.svg?branch=main)](https://coveralls.io/github/ota-meshi/eslint-plugin-css?branch=main)\n\n::: **WORKING IN PROGRESS** :::\n\n## :name_badge: Features\n\nThis ESLint plugin provides linting rules to verify CSS definition objects.\n\n- Find the wrong usage of CSS definition objects, and their hints.\n- Support for Vue and JSX (React).\n- Partial support for [styled-components] style objects.\n\nYou can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-css/playground/).\n\n\u003cimg alt=\"vue\" src=\"./images/vue.png\" height=\"150px\" style=\"height: 150px; display: inline-block;\"\u003e\u003cimg alt=\"jsx\" src=\"./images/jsx.png\" height=\"150px\" style=\"height: 150px; display: inline-block;\"\u003e\n\n[styled-components]: https://styled-components.com/docs/advanced#style-objects\n\n## :question: Why is it ESLint plugin?\n\n[Stylelint] partially supports CSS in JS, but some issues haven't been resolved for a long time.  \nAlso, CSS definitions using template literals are similar to CSS syntax, but CSS definitions using JavaScript objects are not. ESLint may work better for linting JavaScript objects.\n\n[Stylelint]: https://stylelint.io\n\n\u003c!--DOCS_IGNORE_START--\u003e\n\n## :book: Documentation\n\nSee [documents](https://ota-meshi.github.io/eslint-plugin-css/).\n\n## :cd: Installation\n\n```bash\nnpm install --save-dev eslint eslint-plugin-css\n```\n\n\u003e **Requirements**\n\u003e\n\u003e - ESLint v7.0.0 and above\n\u003e - Node.js v12.22.x, v14.17.x, v16.x and above\n\n\u003c!--DOCS_IGNORE_END--\u003e\n\n## :book: Usage\n\n\u003c!--USAGE_SECTION_START--\u003e\n\nAdd `css` to the plugins section of your `.eslintrc` configuration file (you can omit the `eslint-plugin-` prefix)\nand either use one of the two configurations available (`recommended` or `all`) or configure the rules you want:\n\n### The recommended configuration (`eslint.config.js`)\n\nThe `plugin.configs[\"flat/recommended\"]` config enables a subset of [the rules](#white_check_mark-rules) that should be most useful to most users.\n*See [lib/configs/flat/recommended.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/flat/recommended.ts) for more details.*\n\n```js\n// eslint.config.js\nimport * as cssPlugin from \"eslint-plugin-css\"\nexport default [\n    cssPlugin.configs[\"flat/recommended\"],\n];\n```\n\n### The recommended configuration (`.eslintrc.*`)\n\nThe `plugin:css/recommended` config enables a subset of [the rules](#white_check_mark-rules) that should be most useful to most users.\n*See [lib/configs/recommended.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/recommended.ts) for more details.*\n\n```js\n// .eslintrc.js\nmodule.exports = {\n    \"plugins\": [\n        \"css\"\n    ],\n    \"extends\": [\n         // add more generic rulesets here, such as:\n         // 'eslint:recommended',\n        \"plugin:css/recommended\"\n    ]\n}\n```\n\n### The standard configuration (`eslint.config.js`)\n\nThe `plugin.configs[\"flat/standard\"]` config enables a subset of [the rules](#white_check_mark-rules) and superset of `plugin.configs[\"flat/recommended\"]` config that apply a subjective style.\n*See [lib/configs/flat/standard.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/flat/standard.ts) for more details.*\n\n```js\n// eslint.config.js\nimport * as cssPlugin from \"eslint-plugin-css\"\nexport default [\n    cssPlugin.configs[\"flat/standard\"],\n];\n```\n\n### The standard configuration (`.eslintrc.*`)\n\nThe `plugin:css/standard` config enables a subset of [the rules](#white_check_mark-rules) and superset of `plugin:css/recommended` config that apply a subjective style.\n*See [lib/configs/standard.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/standard.ts) for more details.*\n\n```js\n// .eslintrc.js\nmodule.exports = {\n    \"plugins\": [\n        \"css\"\n    ],\n    \"extends\": [\n        \"plugin:css/standard\"\n    ]\n}\n```\n\n### Advanced Configuration\n\nOverride/add specific rules configurations. *See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring)*.\n\n```js\n// eslint.config.js\nimport * as cssPlugin from \"eslint-plugin-css\"\nexport default [\n    {\n        plugins: { css: cssPlugin },\n        rules: {\n            // Override/add rules settings here, such as:\n            \"css/rule-name\": \"error\"\n        }\n    }\n];\n```\n\n```js\n// .eslintrc.js\nmodule.exports = {\n    \"plugins\": [\n        \"css\"\n    ],\n    \"rules\": {\n        // Override/add rules settings here, such as:\n        \"css/rule-name\": \"error\"\n    }\n}\n```\n\n### Using `\"plugin:css/all\"`\n\nThe `plugin.configs[\"flat/all\"]` / `plugin:css/all` config enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.\n\n### How does ESLint detect CSS objects?\n\nAll CSS-related rules are applied to code that passes any of the following checks:\n\n- `style={ {} }` JSX attribute expression\n\n    ```jsx\n    const jsx = \u003cdiv\n        style={ {/* JSX attribute expression */} }\n    /\u003e\n    ```\n\n- `v-bind:style=\"{}\"` Vue directive\n\n    ```vue\n    \u003ctemplate\u003e\n        \u003cdiv\n            v-bind:style=\"{/* Vue directive */}\"\n        /\u003e\n    \u003c/template\u003e\n    ```\n\n- CSS definition function call for [styled-components](https://styled-components.com/docs/advanced#style-objects)\n\n    e.g.\n\n    ```js\n    import styled, { css, createGlobalStyle } from 'styled-components'\n\n    styled.input({/* CSS */})\n    styled.input.attrs({})({/* CSS */})\n    css({/* CSS */})\n    createGlobalStyle({/* CSS */})\n    ```\n\n- According to [`settings.css.target` settings](../settings/index.md#target).\n\nHowever, if you want to take advantage of the rules in any of your custom objects that are CSS objects, you might need to use the special comment `// @css` that marks an object in the next line as a CSS object in any file, e.g.:\n\n```js\n// @css\nconst myStyle = {\n  height: '100px'\n}\n```\n\n\u003c!--USAGE_SECTION_END--\u003e\n\n## :white_check_mark: Rules\n\n\u003c!--RULES_SECTION_START--\u003e\n\nThe `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) automatically fixes problems reported by rules which have a wrench :wrench: below.  \nThe rules with the following star :star: are included in the `plugin:css/recommended` config and the `plugin:css/standard` config.  \nThe rules with the following lipstick :lipstick: are included in the `plugin:css/standard` config.\n\n\u003c!--RULES_TABLE_START--\u003e\n\n### Possible Errors\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [css/no-dupe-properties](https://ota-meshi.github.io/eslint-plugin-css/rules/no-dupe-properties.html) | disallow duplicate properties | :star: |\n| [css/no-invalid-color-hex](https://ota-meshi.github.io/eslint-plugin-css/rules/no-invalid-color-hex.html) | disallow invalid hex colors | :star: |\n| [css/no-shorthand-property-overrides](https://ota-meshi.github.io/eslint-plugin-css/rules/no-shorthand-property-overrides.html) | disallow shorthand properties that override related longhand properties | :star: |\n| [css/no-unknown-property](https://ota-meshi.github.io/eslint-plugin-css/rules/no-unknown-property.html) | disallow unknown properties | :star: |\n| [css/no-unknown-unit](https://ota-meshi.github.io/eslint-plugin-css/rules/no-unknown-unit.html) | disallow unknown units | :star: |\n\n### Best Practices\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [css/named-color](https://ota-meshi.github.io/eslint-plugin-css/rules/named-color.html) | enforce named colors | :wrench: |\n| [css/no-length-zero-unit](https://ota-meshi.github.io/eslint-plugin-css/rules/no-length-zero-unit.html) | disallow units for zero lengths | :lipstick::wrench: |\n| [css/no-useless-color-alpha](https://ota-meshi.github.io/eslint-plugin-css/rules/no-useless-color-alpha.html) | disallow unnecessary alpha-channel transparency value | :star::wrench: |\n| [css/prefer-reduce-shorthand-property-box-values](https://ota-meshi.github.io/eslint-plugin-css/rules/prefer-reduce-shorthand-property-box-values.html) | require reduction in box values of shorthand property | :lipstick::wrench: |\n\n### Stylistic Issues\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [css/color-hex-style](https://ota-meshi.github.io/eslint-plugin-css/rules/color-hex-style.html) | enforce hex color style | :lipstick::wrench: |\n| [css/no-number-trailing-zeros](https://ota-meshi.github.io/eslint-plugin-css/rules/no-number-trailing-zeros.html) | disallow trailing zeros in numbers. | :lipstick::wrench: |\n| [css/number-leading-zero](https://ota-meshi.github.io/eslint-plugin-css/rules/number-leading-zero.html) | require or disallow a leading zero for fractional numbers less than 1 | :lipstick::wrench: |\n| [css/property-casing](https://ota-meshi.github.io/eslint-plugin-css/rules/property-casing.html) | enforce specific casing for CSS properties | :lipstick::wrench: |\n\n\u003c!--RULES_TABLE_END--\u003e\n\u003c!--RULES_SECTION_END--\u003e\n\n## :gear: Settings\n\nSee [Settings](https://ota-meshi.github.io/eslint-plugin-css/settings/).\n\n\u003c!--DOCS_IGNORE_START--\u003e\n\n\u003c!-- TODO v1.0.0\n\n## :traffic_light: Semantic Versioning Policy\n\n**eslint-plugin-css** follows [Semantic Versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).\n\n--\u003e\n\n## :beers: Contributing\n\nWelcome contributing!\n\nPlease use GitHub's Issues/PRs.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md).\n\n### Development Tools\n\n- `npm test` runs tests and measures coverage.\n- `npm run update` runs in order to update readme and configurations.\n- `npm run new [new rule name]` runs to create the files needed for the new rule.\n- `npm run docs:watch` starts the website locally.\n\n\u003c!--DOCS_IGNORE_END--\u003e\n\n## :lock: License\n\nSee the [LICENSE](LICENSE) file for license rights and limitations (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fota-meshi%2Feslint-plugin-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fota-meshi%2Feslint-plugin-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fota-meshi%2Feslint-plugin-css/lists"}