eslint-plugin-css

0.12.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause Plugin not installed or ESLint cannot resolve it.

fix

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

error TypeError: cssPlugin is not a function ↓

cause Using default import instead of namespace import.

fix

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

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

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

fix

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

Warnings

deprecated Legacy .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.

gotcha Default 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.

gotcha Flat config key is 'flat/recommended', not just 'recommended'. ↓

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

breaking ESLint 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.

gotcha Rules 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.

Install

npm install eslint-plugin-css

yarn add eslint-plugin-css

pnpm add eslint-plugin-css

Imports

default

wrong

import cssPlugin from 'eslint-plugin-css'

correct

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

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

flat/recommended config
wrong
```
cssPlugin.configs.recommended
```
correct
```
cssPlugin.configs['flat/recommended']
```
Flat config uses 'flat/recommended' key. Legacy configs available under 'recommended' for .eslintrc.
rules
wrong
```
cssPlugin.default.rules
```
correct
```
cssPlugin.rules['css/no-shorthand-property-overrides']
```
Individual rules accessed via rules object; rule names prefixed with 'css/'.

Quickstart

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']
    }
  }
];