Warn about unsupported CSS rules based on target browsers (Browserslist)

[npanuhin]

Hi! Is there a Vite or PostCSS setting/plugin that can warn me when I use a CSS rule not supported by the target browsers (e.g. specified in the browserslist key of package.json)? Basically, something that checks CSS features for browser compatibility

[hosanxiv]

Vite does not currently have a built-in Browserslist-based CSS compatibility lint. build.cssTarget controls CSS output/minification transformations; it is not an authoring-time compatibility checker.

For warnings, run Stylelint separately with stylelint-no-unsupported-browser-features:

npm add -D stylelint stylelint-no-unsupported-browser-features

{
  "plugins": ["stylelint-no-unsupported-browser-features"],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      { "severity": "warning" }
    ]
  }
}

The rule uses the project's browserslist configuration automatically. It is best kept at warning severity because it cannot detect whether you supplied a fallback.

Sources: Vite build.cssTarget and the plugin's official usage documentation.