stylelint-plugin-baseline

Stylelint plugin for CSS Baseline compatibility checking.

Installation

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

Usage

Add it to your Stylelint config (.stylelintrc.json):

{
  "plugins": ["stylelint-plugin-baseline"],
  "rules": {
    "baseline/no-non-baseline-properties": [
      true,
      {
        "baselineYear": 2023,
        "allowNewly": true
      }
    ],
    "baseline/no-non-baseline-features": [
      true,
      {
        "baselineYear": 2023
      }
    ]
  }
}

Rules

baseline/no-non-baseline-properties

Disallow CSS properties with limited baseline support.

Options:

• baselineYear (number): Target baseline year (default: 2023)
• allowNewly (boolean): Allow newly available properties (default: true)

Examples:

/* ❌ Error (baselineYear: 2021) */
.container {
  container-type: inline-size;
}

/* ❌ Error (allowNewly: false) */
.box {
  -webkit-appearance: none;
}

/* ✅ Valid */
.flex {
  display: flex;
}

baseline/no-non-baseline-features

Disallow CSS features with limited baseline support.

Options:

• baselineYear (number): Target baseline year (default: 2023)

Examples:

/* ❌ Error (baselineYear: 2022) */
.parent:has(.child) {
  color: red;
}

/* ❌ Error (baselineYear: 2022) */
.box {
  width: clamp(200px, 50%, 400px);
}

/* ✅ Valid */
.flex {
  display: flex;
  gap: 1rem;
}

Configurations

Recommended

{
  "extends": ["stylelint-plugin-baseline/recommended"]
}

Balanced defaults that allow newly available features:

• baselineYear: 2023
• allowNewly: true

Strict

{
  "extends": ["stylelint-plugin-baseline/strict"]
}

Strict mode for maximum compatibility:

• baselineYear: 2022
• allowNewly: false

Detected Features

Properties (Limited Support)

• container-type
• container-name
• accent-color
• aspect-ratio
• content-visibility
• overscroll-behavior
• scroll-snap-type
• scroll-snap-align
• Vendor-prefixed properties (-webkit-, -moz-, -ms-)

CSS Features

• :has() pseudo-class
• :is() pseudo-class
• :where() pseudo-class
• clamp() function
• min() function
• max() function

Integration

With ESLint

Use together with eslint-plugin-baseline for complete coverage:

{
  "extends": [
    "plugin:baseline/recommended"
  ],
  "plugins": ["stylelint-plugin-baseline"]
}

With CLI

stylelint "**/*.css" --config .stylelintrc.json

With npm scripts

{
  "scripts": {
    "lint:css": "stylelint '**/*.css'",
    "lint:css:fix": "stylelint '**/*.css' --fix"
  }
}

Development

# Install dependencies
pnpm install

# Build
pnpm build

# Test
pnpm test

# Watch mode
pnpm dev

License

MIT