ESLint now checks CSS against Baseline availability

ESLint’s JavaScript linting has long been a project staple, and the tool recently extended its reach to stylesheets. Along with general CSS linting support, ESLint now ships a require-baseline rule that ties linting directly to the Baseline project status. The rule lets you enforce that any CSS features used in your stylesheets meet either the Baseline Newly available or Widely available threshold.

The setup follows ESLint’s usual pattern. Start by installing the @eslint/css package, then import it into your existing ESLint configuration. From there, you add the require-baseline rule and set its available property to define which Baseline threshold you want to enforce: "newly" requires features to be at least Baseline Newly available, while the default "widely" setting generates warnings for anything not yet at the Widely available level.

Once your config is in place, run ESLint from your project root and inspect the output. Warnings will flag any CSS that falls below your chosen Baseline threshold, which can be an eye-opener when you check what Baseline features your project actually relies on.

Fitting CSS linting into existing workflows

Because this functionality lives inside ESLint itself, you can drop it into any tooling chain that already uses ESLint. For example, webpack projects can surface the linting output during builds by wiring up the eslint-webpack-plugin. The ability to enforce Baseline support in CSS without changing your existing ESLint-based pipeline makes the rule a low-friction addition to frontend projects.

For those ready to try it, the require-baseline rule documentation covers the details of using the rule and the values it accepts.