eslint-cssicorn

eslint-cssicorn

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.

Install

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

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

Usage

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',
		},
	},
	// …
]);

Embedded CSS

To lint fenced CSS blocks in Markdown, configure the @eslint/markdown processor. The presets match its extracted .css files. Lint Markdown prose separately.

import markdown from '@eslint/markdown';
import cssicorn from 'eslint-cssicorn';

export default [
	{
		files: [
			'**/*.md',
		],
		plugins: {
			markdown,
		},
		language: 'markdown/commonmark',
		processor: 'markdown/markdown',
	},
	cssicorn.configs.recommended,
];

Rules

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.

Name	Description
consistent-compound-selector-order	Enforce consistent ordering of compound selector components.
consistent-custom-property-fallbacks	Enforce consistent fallbacks for configured custom properties.
consistent-layer-order	Enforce consistent ordering of cascade layer statements.
consistent-property-order	Enforce consistent ordering of CSS properties.
consistent-value-order	Enforce consistent ordering of CSS value components.
lowercase	Enforce lowercase CSS syntax.
no-clamped-values	Disallow CSS values that browsers silently clamp.
no-declarations-after-nested-rules	Disallow declarations after nested rules.
no-deprecated-features	Disallow deprecated CSS features.
no-descending-specificity	Disallow lower-specificity selectors from following higher-specificity selectors that set the same property.
no-disabled-pinch-zoom	Disallow touch-action values that disable browser pinch zoom.
no-duplicate-at-rule-definitions	Disallow duplicate named at-rule definitions.
no-duplicate-font-family-names	Disallow duplicate font family names.
no-duplicate-properties	Disallow duplicate properties within CSS declaration blocks.
no-duplicate-selectors	Disallow duplicate CSS selectors.
no-ineffective-keyframe-declarations	Disallow ineffective declarations in keyframes.
no-ineffective-overrides	Disallow state and conditional overrides blocked by cascade priority.
no-ineffective-properties	Disallow properties that have no effect given other declarations or shorthand defaults.
no-ineffective-selector-properties	Disallow properties that cannot affect their selected targets.
no-ineffective-supports-conditions	Disallow supports conditions that do not test their value functions.
no-ineffective-transitions	Disallow transition targets that cannot transition under the declared behavior.
no-invalid-media-features	Disallow unknown media features, invalid values, and invalid notation.
no-invalid-property-references	Disallow invalid property references in transitions and will-change.
no-layout-animations	Disallow animating properties that can affect layout.
no-nesting-with-mixed-specificity	Disallow mixed specificity in nesting parents and selector-list pseudo-classes.
no-overflow-axis-coercion	Disallow overflow values that are coerced by the other axis.
no-overridden-animation-properties	Disallow properties overridden by overlapping animations.
no-redundant-functions	Disallow redundant function calls and arguments.
no-redundant-longhand-properties	Disallow longhand properties that can be combined into a shorthand.
no-redundant-nested-style-rules	Disallow nested style rules that do not modify the parent selector.
no-redundant-nesting-selector	Disallow redundant nesting selectors.
no-redundant-shorthand-values	Disallow redundant values in CSS shorthand properties.
no-self-referencing-custom-properties	Disallow cyclic dependencies in CSS custom properties.
no-unknown-animations	Disallow unknown animations.
no-unknown-annotations	Disallow unknown and noncanonical CSS annotations.
no-unknown-pseudo-selectors	Disallow unknown pseudo-class and pseudo-element selectors.
no-unknown-type-selectors	Disallow unknown type selectors.
no-unscoped-nesting-selector	Disallow unscoped CSS nesting selectors.
no-useless-is	Disallow unnecessary :is() wrappers.
no-zero-length-unit	Disallow units on zero CSS lengths.
prefer-aspect-ratio	Prefer aspect-ratio over zero-height percentage-padding workarounds.
prefer-clamp	Prefer clamp() over nested min() and max().
prefer-current-color	Prefer currentcolor over repeating the foreground color.
prefer-existing-custom-properties	Prefer existing custom properties over matching literal values.
prefer-explicit-viewport-units	Prefer explicit viewport units.
prefer-individual-transform-properties	Prefer individual transform properties over transform functions.
prefer-light-dark	Prefer light-dark() over paired light and dark color declarations.
prefer-longhand-overrides	Prefer longhand properties when overriding one shorthand component.
prefer-media-feature-range-syntax	Prefer modern media feature range syntax.
prefer-merged-rules	Prefer merging adjacent rules with identical declarations or conditions.
prefer-modern-syntax	Prefer modern CSS color and pseudo-element syntax.
prefer-nesting	Prefer CSS nesting for structural :is() groups and rules extending an existing parent.
prefer-relative-colors	Prefer relative colors for alpha variants of existing color custom properties.
prefer-short-hex-color	Prefer short hexadecimal color notation.
prefer-subgrid	Prefer subgrid over repeated parent grid track definitions.
require-prefers-reduced-motion	Require motion effects inside prefers-reduced-motion: no-preference media queries.
require-property-descriptors	Require descriptors in CSS @property rules.
require-selector-scope	Require a positive scoping boundary for every selector.

Preset configs

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.

Recommended config

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

Unopinionated config

This plugin exports an unopinionated config with bug checks and straightforward simplifications.

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

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

All config

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

Related

• 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.
• eslint-soml — ESLint rules for SOML config files.