Skip to content

Yet another linter rule to detect compatibility of CSS features.

License

Notifications You must be signed in to change notification settings

3846masa/stylelint-browser-compat

Repository files navigation

stylelint-browser-compat

stylelint-browser-compat

github sponsors npm license standard-readme compliant

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.

⚠️ 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

About

Yet another linter rule to detect compatibility of CSS features.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Contributors 4

  •  
  •  
  •  
  •  

Languages