ESLint Now Officially Supports CSS, JSON, and Markdown

Following up on plans to turn ESLint into a general-purpose linter, the ESLint team recently announced official support for the CSS language. The support comes in addition to recently added support for JSON and Markdown linting.

The built-in CSS linting rules include checking against duplicate @import rules, empty blocks, invalid at-rules, invalid properties, and enforcing the use of @layer. CSS layers are a new addition to the CSS standard (see CSS Cascading and Inheritance Level 5) that give designers more control over the cascade so the resulting styles are predictably applied instead of being unexpectedly overridden by other rules in other places. A 2020 survey by Scout APM measured that developers spend over 5 hours per week on average debugging CSS issues with cascade/specificity bugs poised to be a major contributing factor.

However, the key lint rule addition is arguably the require-baseline rule, which lets developers specify which CSS features to check against, depending on their level and maturity of adoption across browsers.

Baseline is an effort by the W3C WebDX Community Group to document which features are available in four core browsers: Chrome (desktop and Android), Edge, Firefox (desktop and Android), and Safari (macOS and iOS). As part of this effort, Baseline tracks which CSS features are available in which browsers. Widely available features are those supported by all core browsers for at least 30 months. Newly available features are those supported by all core browsers for less than 30 months. An example of linter configuration for a widely available baseline is as follows:

// 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"  // <- this here
      }]
    },
  },
];

CSS linting is accomplished using the @eslint/css plugin:

npm install @eslint/css -D

Developers are encouraged to review the release note for a fuller account of the features included in the release together with technical details and code samples.

ESLint is an OpenJS Foundation project and is available as open-source software under the MIT license. Contributions are welcome via the ESLint GitHub repository. Contributors should follow the ESLint contribution guidelines.