Powerful ESLint rules for CSS

The rules work with the @eslint/css language plugin.

eslint-plugin-unicorn has more rules that also lint CSS, such as no-zero-fractions and no-shorthand-property-overrides.

Propose a new rule ➡

We do not accept pull requests because of too much AI slop.

npm install --save-dev eslint @eslint/css eslint-cssicorn

Requires ESLint >=10.4, flat config, and ESM.

Use a preset config or configure each rule in eslint.config.js.

If you don't use a preset, set language: 'css/css' and add the @eslint/css plugin, as shown below.

import css from '@eslint/css';
import cssicorn from 'eslint-cssicorn';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	{
		files: ['**/*.css'],
		plugins: {
			css,
			cssicorn,
		},
		language: 'css/css',
		rules: {
			'cssicorn/prefer-short-hex-color': 'error',
			'cssicorn/…': 'error',
		},
	},
	// …
]);

💼 Configurations enabled in.
✅ Set in the recommended configuration.
☑️ Set in the unopinionated configuration.
🔧 Automatically fixable by the --fix CLI option.
💡 Manually fixable by editor suggestions.

See the ESLint docs for more information about extending config files.

Note: The preset configs apply to **/*.css files. They also set language: 'css/css' and add the @eslint/css plugin.

This plugin exports a recommended config that enforces good practices.

import cssicorn from 'eslint-cssicorn';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	// …
	cssicorn.configs.recommended,
	{
		files: ['**/*.css'],
		rules: {
			'cssicorn/no-unknown-animations': 'error',
		},
	},
]);

This plugin exports an unopinionated config. It enables only the rules that catch bugs, without the style rules from the recommended config.

import cssicorn from 'eslint-cssicorn';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	// …
	cssicorn.configs.unopinionated,
]);

This plugin exports an all config that enables every rule.

import cssicorn from 'eslint-cssicorn';
import {defineConfig} from 'eslint/config';

export default defineConfig([
	// …
	cssicorn.configs.all,
	{
		files: ['**/*.css'],
		rules: {
			'cssicorn/prefer-short-hex-color': 'off',
		},
	},
]);

• eslint-plugin-unicorn — More than 300 powerful ESLint rules. Some of them also lint CSS.
• eslint-node-test — ESLint rules for the Node.js built-in test runner.
• eslint-package-json — Powerful ESLint rules for package.json.