Registry / testing / eslint-plugin-css

eslint-plugin-css

library0.12.0jsnpmunverified

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.

testing

npm install eslint-plugin-css

github ↗package ↗

INSTALL

IMPORT

SIG · ESLINT-PLUGIN-CSS

eslint-plugin-css

testingjavascriptv0.12.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

default

✓ import * as cssPlugin from 'eslint-plugin-css'

✗ import cssPlugin from 'eslint-plugin-css'

Plugin has no default export; use namespace import for flat config.

flat/recommended config

✓ cssPlugin.configs['flat/recommended']

✗ cssPlugin.configs.recommended

Flat config uses 'flat/recommended' key. Legacy configs available under 'recommended' for .eslintrc.

rules

✓ cssPlugin.rules['css/no-shorthand-property-overrides']

✗ cssPlugin.default.rules

Individual rules accessed via rules object; rule names prefixed with 'css/'.

Shows how to set up eslint-plugin-css with flat config in an ESLint v9+ project, enabling recommended rules and customizing selected rules.

// eslint.config.js import * as cssPlugin from 'eslint-plugin-css' export default [ cssPlugin.configs['flat/recommended'], { rules: { 'css/no-invalid-color-hex': 'error', 'css/no-dupe-properties': 'error', 'css/property-casing': ['warn', 'camelCase'] } } ];

Debug

Known issues

deprecatedLegacy .eslintrc configs (e.g., 'plugin:css/recommended') are deprecated in favor of flat config.

fix

Use eslint.config.js with flat config as shown in quickstart.

affects: >=0.10.0

gotchaDefault export missing: import * as cssPlugin from 'eslint-plugin-css' is required, not default import.

fix

Use namespace import (import * as cssPlugin) instead of default import.

affects: >=0.0.0

gotchaFlat config key is 'flat/recommended', not just 'recommended'.

fix

Access via cssPlugin.configs['flat/recommended'].

affects: >=0.11.0

breakingESLint 10 support added in v0.12.0, but some rules may have changed behavior.

fix

Review rule changes for ESLint 10 compatibility, especially if upgrading from earlier plugin versions.

affects: >=0.12.0

gotchaRules are prefixed with 'css/' when used in rules object (e.g., 'css/no-invalid-color-hex').

fix

Always prefix rule names with 'css/' inside rules object.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Failed to load plugin 'css': Cannot find module 'eslint-plugin-css'

Plugin not installed or ESLint cannot resolve it.

fix

Run 'npm install eslint-plugin-css --save-dev' and ensure it's in node_modules.

TypeError: cssPlugin is not a function

Using default import instead of namespace import.

fix

Change 'import cssPlugin from ...' to 'import * as cssPlugin from ...'.

Configuration for rule 'css/no-dupe-properties' is invalid: Value "error" should be string|number|boolean|object|null.

Wrong severity format in flat config (should be string, not array).

fix

Use 'error' or ['error', ...options] instead of naked severity.

Upgrade

Version history

0.12.0latest on npm

Audit

Dependencies

eslintrequiredpeer dependency required for plugin functionality

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ota-meshi/eslint-plugin-css ↗

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