Registry / testing / eslint-plugin-css-custom-properties

eslint-plugin-css-custom-properties

library1.1.0jsnpmunverified

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.

testing

npm install eslint-plugin-css-custom-properties

package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-CSS-

eslint-plugin-css-custom-properties

testingjavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

rules

✓ import { rules } from 'eslint-plugin-css-custom-properties'

✗ const rules = require('eslint-plugin-css-custom-properties/rules')

ESM-only since v1.1.0; the package exports 'rules' for programmatic use.

configs

✓ import { configs } from 'eslint-plugin-css-custom-properties'

✗ const configs = require('eslint-plugin-css-custom-properties').configs

Available for predefined rule configurations.

plugin

✓ import plugin from 'eslint-plugin-css-custom-properties'

✗ const plugin = require('eslint-plugin-css-custom-properties')

Default export provides the plugin object with rules and configs.

Configures ESLint to lint CSS custom properties in JavaScript strings and shows a lint error for unknown variables.

// .eslintrc.cjs module.exports = { plugins: ['css-custom-properties'], rules: { 'css-custom-properties/no-unknown': 'error', }, }; // Check a file with unknown custom property const styles = ` color: var(--unknown-var); `; // This will trigger a lint error if --unknown-var is not defined in CSS

Debug

Known issues

breakingESM-only: dropping CJS support in v1.1.0

fix

Use import instead of require; update Node to >=14.17.0 or >=16.0.0 or >=18.0.0.

affects: >=1.1.0

gotchaRule names must be prefixed with 'css-custom-properties/' in ESLint config

fix

Use 'css-custom-properties/no-unknown' instead of just 'no-unknown'.

affects: >=0.0.0

gotchaPlugin ignores CSS custom properties in regular CSS files; only processes strings in JS/TS files

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.

affects: >=0.0.0

deprecatedSome rule configurations may change between minor versions; check changelog

fix

Pin dependency version if using programmatic rule options.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Failed to load plugin 'css-custom-properties' declared in '.eslintrc': Cannot find module 'eslint-plugin-css-custom-properties'

Plugin not installed or not in node_modules.

fix

Run npm install eslint-plugin-css-custom-properties --save-dev

TypeError: Cannot read properties of undefined (reading 'no-unknown')

Using require() on the plugin's rules directly while the package is ESM-only.

fix

Use import instead: import { rules } from 'eslint-plugin-custom-properties' or configure the plugin with plugin name in plugins array.

ESLint configuration error: Configuration for rule 'css-custom-properties/no-unknown' is invalid

Rule severity set to a number but rule expects 'off', 'warn', or 'error'.

fix

Use string values: 'error' instead of 2, etc.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

eslintrequiredpeer dependency; plugin requires ESLint >=7 to function

Agent activity

2 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/eslint-plugin-css-custom-properties ↗