Published: March 12, 2025
ESLint has long been the preferred linter for JavaScript, offering a variety of settings and rules that help developers enforce good style for JavaScript in their projects. Recently, ESLint shipped support for linting CSS in projects, offering additional rules for checking aspects of stylesheets.
As a part of launching CSS support, ESLint now offers the require-baseline rule, which lets you specify which Baseline threshold you would like to use when linting CSS in your projects. In this quick post, you'll learn how to use this rule to ensure your CSS is meeting the Baseline Newly and Widely available thresholds.
How to use ESLint to enforce Baseline CSS features
If you've used ESLint before, the process for adding CSS linting to your project should be reasonably quick. To get started, install the @eslint/css package for your project:
npm install @eslint/css --save-dev
Once installed, you'll be able to add CSS linting support to your project by importing the @eslint/css package to your existing ESLint config:
// eslint.config.js
import css from "@eslint/css";
export default [
// Lint css files
{
files: ["src/css/**/*.css"],
plugins: {
css,
},
language: "css/css",
rules: {
"css/no-duplicate-imports": "error",
// Lint CSS files to ensure they are using
// only Baseline Widely available features:
"css/require-baseline": ["warn", {
available: "widely"
}]
},
},
];
While linting for CSS is useful in and of itself, the added value ESLint offers in doing so is through the linter's require-baseline rule. In the preceding code snippet, warnings are generated whenever a feature is encountered that isn't Baseline Widely available. This is specified through the rule's available property, which also accepts a value of "newly" to ensure all CSS features used are at least Baseline Newly available.
Once you have your config set up, you can run ESLint at the root of your project like so to lint your project's CSS:
npx eslint
Once finished, ESLint will provide any warnings about your project's CSS, which looks like the following:
/var/www/my-cool-web-project/src/css/styles.css
269:3 warning Property 'overflow' is not a widely available baseline feature css/require-baseline
427:3 warning Property 'overflow' is not a widely available baseline feature css/require-baseline
444:12 warning Value 'contents' of property 'display' is not a widely available baseline feature css/require-baseline
500:3 warning Property 'resize' is not a widely available baseline feature css/require-baseline
573:5 warning Property 'overflow' is not a widely available baseline feature css/require-baseline
One great outcome of ESLint shipping this functionality is that you can use it in any tooling workflow that uses ESLint. For example, if you use webpack, you can get it to spit out the linter output during project builds by using eslint-webpack-plugin:
// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";
// Webpack config:
export default {
// Prior config code omitted...
plugins: [
new ESLintPlugin({
// Add the `"css"` extension to ensure
// CSS files are linted as well:
extensions: ["js", "css"]
})
]
};
With these useful new additions to ESLint, you'll now be able to ensure that your projects are using Baseline CSS features without much added effort. Give it a shot! You might be surprised to discover some of the Baseline features used in your project. For more information on how this works, read the documentation for the require-baseline rule.