{"id":25503,"library":"eslint-plugin-css-custom-properties","title":"eslint-plugin-css-custom-properties","description":"ESLint plugin to lint CSS custom properties (CSS variables) in JavaScript template literals and strings. Version 1.1.0, released under MIT. Currently in active development with moderate release cadence. It focuses on detecting unknown, unused, or misused CSS custom properties within JavaScript code, which is useful for projects using CSS-in-JS or template literals for styling. Unlike generic CSS linting tools, this plugin operates inside JS strings, supporting ESLint >=7. Requires Node.js ^14.17.0 || ^16.0.0 || >= 18.0.0.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","eslint","eslintplugin","eslint-plugin","css-variables","css-custom-properties"],"install":[{"cmd":"npm install eslint-plugin-css-custom-properties","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-css-custom-properties","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-css-custom-properties","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin requires ESLint >=7 to function","package":"eslint","optional":false}],"imports":[{"note":"ESM-only since v1.1.0; the package exports 'rules' for programmatic use.","wrong":"const rules = require('eslint-plugin-css-custom-properties/rules')","symbol":"rules","correct":"import { rules } from 'eslint-plugin-css-custom-properties'"},{"note":"Available for predefined rule configurations.","wrong":"const configs = require('eslint-plugin-css-custom-properties').configs","symbol":"configs","correct":"import { configs } from 'eslint-plugin-css-custom-properties'"},{"note":"Default export provides the plugin object with rules and configs.","wrong":"const plugin = require('eslint-plugin-css-custom-properties')","symbol":"plugin","correct":"import plugin from 'eslint-plugin-css-custom-properties'"}],"quickstart":{"code":"// .eslintrc.cjs\nmodule.exports = {\n  plugins: ['css-custom-properties'],\n  rules: {\n    'css-custom-properties/no-unknown': 'error',\n  },\n};\n\n// Check a file with unknown custom property\nconst styles = `\n  color: var(--unknown-var);\n`;\n// This will trigger a lint error if --unknown-var is not defined in CSS","lang":"javascript","description":"Configures ESLint to lint CSS custom properties in JavaScript strings and shows a lint error for unknown variables."},"warnings":[{"fix":"Use import instead of require; update Node to >=14.17.0 or >=16.0.0 or >=18.0.0.","message":"ESM-only: dropping CJS support in v1.1.0","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"Use 'css-custom-properties/no-unknown' instead of just 'no-unknown'.","message":"Rule names must be prefixed with 'css-custom-properties/' in ESLint config","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure you have eslint-plugin-css-custom-properties in the plugins array and run ESLint on JS/TS files containing template literals with CSS.","message":"Plugin ignores CSS custom properties in regular CSS files; only processes strings in JS/TS files","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pin dependency version if using programmatic rule options.","message":"Some rule configurations may change between minor versions; check changelog","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run npm install eslint-plugin-css-custom-properties --save-dev","cause":"Plugin not installed or not in node_modules.","error":"Error: Failed to load plugin 'css-custom-properties' declared in '.eslintrc': Cannot find module 'eslint-plugin-css-custom-properties'"},{"fix":"Use import instead: import { rules } from 'eslint-plugin-custom-properties' or configure the plugin with plugin name in plugins array.","cause":"Using require() on the plugin's rules directly while the package is ESM-only.","error":"TypeError: Cannot read properties of undefined (reading 'no-unknown')"},{"fix":"Use string values: 'error' instead of 2, etc.","cause":"Rule severity set to a number but rule expects 'off', 'warn', or 'error'.","error":"ESLint configuration error: Configuration for rule 'css-custom-properties/no-unknown' is invalid"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}