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

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

eslint/css use-baseline

MIT