This package contains a plugin that allows you to natively lint CSS files using ESLint.

Important: This plugin requires ESLint v9.6.0 or higher and you must be using the new configuration system.

For Node.js and compatible runtimes:

npm install @eslint/css -D
# or
yarn add @eslint/css -D
# or
pnpm install @eslint/css -D
# or
bun install @eslint/css -D

For Deno:

deno add @eslint/css

In your eslint.config.js file, import @eslint/css and include the recommended config:

// eslint.config.js
import css from "@eslint/css";

export default [
	// lint CSS files
	{
		files: ["**/*.css"],
		language: "css/css",
		...css.configs.recommended,
	},

	// your other configs here
];

Note: This plugin does not provide formatting rules. We recommend using a source code formatter such as Prettier for that purpose.

In order to individually configure a rule in your eslint.config.js file, import @eslint/css and configure each rule with a prefix:

// eslint.config.js
import css from "@eslint/css";

export default [
	{
		files: ["**/*.css"],
		plugins: {
			css,
		},
		language: "css/css",
		rules: {
			"css/no-empty-blocks": "error",
		},
	},
];

You can individually config, disable, and enable rules in CSS using comments, such as:

/* eslint css/no-empty-blocks: error */

/* eslint-disable css/no-empty-blocks -- this one is ok */
a {
}
/* eslint-enable css/no-empty-blocks */

b { /* eslint-disable-line css/no-empty-blocks */
}

/* eslint-disable-next-line css/no-empty-blocks */
em {
}

In order to individually configure a language in your eslint.config.js file, import @eslint/css and configure a language:

// eslint.config.js
import css from "@eslint/css";

export default [
	{
		files: ["**/*.css"],
		plugins: {
			css,
		},
		language: "css/css",
		rules: {
			"css/no-empty-blocks": "error",
		},
	},
];

Apache 2.0

The following companies, organizations, and individuals support ESLint's ongoing maintenance and development. Become a Sponsor to get your logo on our READMEs and website.