stylelint-browser-compat
Yet another linter rule to detect compatibility of CSS features.
This plugin checks if the CSS you're using is supported by the browsers you're targeting.
It uses @mdn/browser-compat-data to detect browser support.
:warning: This plugin is beta. USE AT YOUR OWN RISK.
Table of Contents
Background
stylelint-no-unsupported-browser-features
(using doiuse
) is available to detect compatibility of CSS features.
However, doiuse
have not been maintained for a long time.
This library provides another alternative to detect compatibility of CSS features.
Although doiuse
detects compatibility from caniuse
data, this library uses @mdn/browser-compat-data
to do so.
Install
$ npm install --dev browserslist stylelint stylelint-browser-compat
$ yarn add --dev browserslist stylelint stylelint-browser-compat
Usage
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
allow: {
features: ['at-rules.supports'],
flagged: false,
partialImplementation: false,
prefix: true,
},
browserslist: ['last 2 versions'],
},
],
},
};
Options
browserslist
(string or array, optional)
- Accepts browserslist queries for target browsers.
- By default, browserslist automatically loads the configuration file (e.g.
package.json
, .browserslistrc
).
allow.features
(array, optional)
- Accepts an array of features to allow.
- Feature names are from @mdn/browser-compat-data.
- For example, if you want to use
@supports
at-rules, pass at-rules.supports
.
allow.flagged
(boolean, optional)
- Allows features that are available when the browser's feature flags is enabled.
false
by default
allow.partialImplementation
(boolean, optional)
- Allows features that are partial implementations.
false
by default
allow.prefix
(boolean, optional)
- Allows features with vendor prefix.
true
by default
Contributing
PRs accepted.
License
MIT (c) 3846masa