stylelint-plugin-use-baseline

Disallow CSS features not in Baseline.

npm install stylelint-plugin-use-baseline --save-dev

Note: stylelint is a peer dependency, so you need to install it as well.

1. Create or update your Stylelint configuration file, for example .stylelintrc.js.
2. Add "stylelint-plugin-use-baseline" to the plugins array.
3. Enable the rule by adding "plugin/use-baseline" to your rules.

A minimal .stylelintrc.js might look like this:

/** @type {import("stylelint").Config} */
export default {
  plugins: ["stylelint-plugin-use-baseline"],
  rules: {
    "plugin/use-baseline": [
      true,
      {
        // "widely" (default), "newly", or YYYY (e.g. 2023)
        available: "widely",
      },
    ],
  },
};

Run Stylelint in your project (e.g., npx stylelint "src/**/*.css").

This rule reports the following cases:

• CSS properties not in Baseline, unless enclosed in a @supports block.
• At-rules that aren't widely available.
• Media conditions inside @media that aren't widely available.
• CSS property values that aren't widely available or aren't enclosed in a @supports block (currently limited to identifiers only).
• CSS functions that aren't widely available.
• CSS pseudo-elements and pseudo-classes that aren't widely available.

The data is sourced from web-features.

Note: Although cursor is not yet labeled as Baseline, it has broad support. By default, this plugin does not flag cursor because it is expected to be added to Baseline soon.

{
  "plugin/use-baseline": true
}

The following patterns are considered problems:

/* accent-color is not widely available */
a {
  accent-color: red;
}

/* abs() is not widely available */
.box {
  width: abs(20% - 100px);
}

/* :has() is not widely available */
h1:has(+ h2) {
  margin: 0;
}

/* property value doesn't match @supports indicator */
@supports (accent-color: auto) {
  a {
    accent-color: abs(20% - 10px);
  }
}

/* device-posture is not widely available */
@media (device-posture: folded) {
  a {
    color: red;
  }
}

The following patterns are not considered problems:

/* using @supports for accent-color */
@supports (accent-color: auto) {
  a {
    accent-color: auto;
  }
}

/* @supports indicates limited availability */
@supports selector(:has()) {
  h1:has(+ h2) {
    margin: 0;
  }
}

/* widely supported properties */
a {
  color: red;
  background-color: blue;
  transition: none;
}

Specify which level of Baseline availability to enforce.

• "widely" (default) – Allows features supported in all Baseline browsers for at least 30 months.
• "newly" – Allows features supported in all Baseline browsers for less than 30 months. Limited availability features still trigger warnings.
• YYYY – Allows features that became Baseline newly available that year, or earlier. For example, 2023.

Allows features supported in all Baseline browsers for at least 30 months.

Given:

{
  "plugin/use-baseline": [true, { "available": "widely" }]
}

Allows features supported in all Baseline browsers for less than 30 months. Limited availability features still trigger warnings.

Given:

{
  "plugin/use-baseline": [true, { "available": "newly" }]
}

The following patterns are not considered problems:

h1:has(+ h2) {
  margin: 0;
}

Allows features that became Baseline newly available that year, or earlier. For example, 2023.

Given:

{
  "plugin/use-baseline": [true, { "available": 2023 }]
}

The following patterns are not considered problems:

div {
  @starting-style {
    opacity: 0;
  }
}

{ "ignoreSelectors": ["array", "of", "selectors", "/regex/"] }

Given:

{
  "plugin/use-baseline": [true, { "ignoreSelectors": ["nesting", "/^has/"] }]
}

The following patterns are not considered problems:

a {
  img {
    width: 100%;
  }
}

h1:has(+ h2) {
  margin: 0;
}

h1:has-slotted {
  color: red;
}

{ "ignoreProperties": ["array", "of", "properties", "/regex/"] }

Given:

{
  "plugin/use-baseline": [
    true,
    { "ignoreProperties": ["accent-color", "/^animation-/"] }
  ]
}

The following patterns are not considered problems:

a {
  accent-color: red;
}

div {
  animation-composition: add;
}

div {
  animation-range: 20%;
}

{ "ignoreAtRules": ["array", "of", "at-rules", "/regex/"] }

Given:

{
  "plugin/use-baseline": [true, { "ignoreAtRules": ["container", "/^font-/"] }]
}

The following patterns are not considered problems:

@container (min-width: 800px) {
  a {
    color: red;
  }
}

@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

@font-palette-values --foo {
  font-family: Bixa;
  override-colors:
    0 red,
    1 blue;
}

eslint/css use-baseline

MIT