 Jeremy Wagner [GitHub](https://github.com/malchata) [LinkedIn](https://www.linkedin.com/in/malchata) [Homepage](https://jlwagner.net/)
Published: March 12, 2025, Last updated: March 26, 2025
> [!NOTE]
> **Note:** As of [0.6.0 release of ESLint](https://github.com/eslint/css/releases/tag/css-v0.6.0) The `require-baseline` rule name has changed to `use-baseline`.
[ESLint](https://eslint.org/) 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](https://eslint.org/blog/2025/02/eslint-css-support/) 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:
```text
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:
```javascript
// 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.
> [!NOTE]
> **Note:** If you wanted ESLint to throw errors instead in this scenario, you can change the `"warn"` value to `"error"`
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:
```text
npx eslint
```
Once finished, ESLint will provide any warnings about your project's CSS, which looks like the following:
```text
/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`](https://webpack.js.org/plugins/eslint-webpack-plugin/):
```javascript
// 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](https://github.com/eslint/css/blob/main/docs/rules/use-baseline.md).