{"id":19716,"library":"eslint-plugin-css","title":"eslint-plugin-css","description":"An ESLint plugin that provides rules to verify CSS definition objects in JavaScript and TypeScript. Version 0.12.0 (released 2025-01-??) supports ESLint 10, flat config, and ships TypeScript declarations. It targets CSS-in-JS patterns like objects used in Vue, React (JSX), and styled-components style objects, offering an alternative to Stylelint for JS object styles. The plugin is actively maintained with regular releases (last few per year) and covers common CSS pitfalls such as invalid properties, property casing, and no-dupe-properties. Requires ESLint >=7.0.0 and Node.js >=12.22.0.","status":"active","version":"0.12.0","language":"javascript","source_language":"en","source_url":"https://github.com/ota-meshi/eslint-plugin-css","tags":["javascript","eslint","eslintplugin","eslint-plugin","css","vue","react","css-in-js","typescript"],"install":[{"cmd":"npm install eslint-plugin-css","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for plugin functionality","package":"eslint","optional":false}],"imports":[{"note":"Plugin has no default export; use namespace import for flat config.","wrong":"import cssPlugin from 'eslint-plugin-css'","symbol":"default","correct":"import * as cssPlugin from 'eslint-plugin-css'"},{"note":"Flat config uses 'flat/recommended' key. Legacy configs available under 'recommended' for .eslintrc.","wrong":"cssPlugin.configs.recommended","symbol":"flat/recommended config","correct":"cssPlugin.configs['flat/recommended']"},{"note":"Individual rules accessed via rules object; rule names prefixed with 'css/'.","wrong":"cssPlugin.default.rules","symbol":"rules","correct":"cssPlugin.rules['css/no-shorthand-property-overrides']"}],"quickstart":{"code":"// eslint.config.js\nimport * as cssPlugin from 'eslint-plugin-css'\n\nexport default [\n  cssPlugin.configs['flat/recommended'],\n  {\n    rules: {\n      'css/no-invalid-color-hex': 'error',\n      'css/no-dupe-properties': 'error',\n      'css/property-casing': ['warn', 'camelCase']\n    }\n  }\n];","lang":"typescript","description":"Shows how to set up eslint-plugin-css with flat config in an ESLint v9+ project, enabling recommended rules and customizing selected rules."},"warnings":[{"fix":"Use eslint.config.js with flat config as shown in quickstart.","message":"Legacy .eslintrc configs (e.g., 'plugin:css/recommended') are deprecated in favor of flat config.","severity":"deprecated","affected_versions":">=0.10.0"},{"fix":"Use namespace import (import * as cssPlugin) instead of default import.","message":"Default export missing: import * as cssPlugin from 'eslint-plugin-css' is required, not default import.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Access via cssPlugin.configs['flat/recommended'].","message":"Flat config key is 'flat/recommended', not just 'recommended'.","severity":"gotcha","affected_versions":">=0.11.0"},{"fix":"Review rule changes for ESLint 10 compatibility, especially if upgrading from earlier plugin versions.","message":"ESLint 10 support added in v0.12.0, but some rules may have changed behavior.","severity":"breaking","affected_versions":">=0.12.0"},{"fix":"Always prefix rule names with 'css/' inside rules object.","message":"Rules are prefixed with 'css/' when used in rules object (e.g., 'css/no-invalid-color-hex').","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install eslint-plugin-css --save-dev' and ensure it's in node_modules.","cause":"Plugin not installed or ESLint cannot resolve it.","error":"Error: Failed to load plugin 'css': Cannot find module 'eslint-plugin-css'"},{"fix":"Change 'import cssPlugin from ...' to 'import * as cssPlugin from ...'.","cause":"Using default import instead of namespace import.","error":"TypeError: cssPlugin is not a function"},{"fix":"Use 'error' or ['error', ...options] instead of naked severity.","cause":"Wrong severity format in flat config (should be string, not array).","error":"Configuration for rule 'css/no-dupe-properties' is invalid: Value \"error\" should be string|number|boolean|object|null."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}