stylelint-plugin-use-baseline

Disallow CSS features not in Baseline.

Installation

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

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

Usage

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").

Rule Details

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.
• Unnecessary @supports blocks when all checked features are already available at the configured baseline level.

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.

Options

true

{
  "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;
  }
}

/* unnecessary @supports - display property and flex value are both widely available */
@supports (display: flex) {
  .container {
    display: flex;
  }
}

/* unnecessary @supports - :hover selector is widely available */
@supports selector(:hover) {
  a:hover {
    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;
}

Optional secondary options

available

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.

"widely" (default)

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

Given:

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

"newly"

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;
}

YYYY

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

{ "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

{
  "ignoreProperties": { "property-name": ["array", "of", "values", "/regex/"] }
}

Ignore the specified property and value pairs. Keys in the object indicate property names.

• Empty array []: Skip property baseline check only (values are still checked)
• Array with values: Ignore only those specific values
• Use /^.+$/ to ignore all values

You can specify a regex for a property name, such as { "/^animation-/": [] }.

Given:

{
  "plugin/use-baseline": [
    true,
    {
      "ignoreProperties": {
        "accent-color": [],
        "user-select": ["none", "auto"],
        "/^animation-/": [],
        "clip-path": ["/^fill-/"],
        "backdrop-filter": ["/^.+$/"]
      }
    }
  ]
}

The following patterns are not considered problems:

a {
  accent-color: red;
}

a {
  user-select: none;
}

a {
  animation-timing-function: linear;
}

a {
  clip-path: fill-box;
}

a {
  backdrop-filter: blur(10px);
}

ignoreAtRules

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

Given:

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

The following patterns are not considered problems:

@view-transition {
  navigation: auto;
}

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

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

ignoreFunctions

{ "ignoreFunctions": ["array", "of", "functions", "/regex/"] }

Given:

{
  "plugin/use-baseline": [true, { "ignoreFunctions": ["oklch", "/^light-/"] }]
}

The following patterns are not considered problems:

a {
  color: oklch(0.5 0.2 120);
}

a {
  color: light-dark(black, white);
}

Prior art

eslint/css use-baseline

License

MIT