@lego/browserslist-config

browserslist configuration for external projects

What is Browserslist?

Browserslist is a configuration to share your project's target browsers between different front-end tools.

• Browserslist (Github repo)
• browserl.ist (Browserslist query syntax validation)
• "Browserslist is a Good Idea" (blog post by @chriscoyier)

Installation

$ npm install --save-dev @lego/browserslist-config

Usage

To get started, add this to your package.json file:

"browserslist": [
  ["extends @lego/browserslist-config"]
]

or add a .browserslistrc file which contains:

extends @lego/browserslist-config

Limitations

None

Tools that use Browserslist

Autoprefixer

Autoprefixer is a PostCSS plugin to add vendor prefixes to CSS. It adds only actual prefixes according to Browserslist’s target browsers and Can I Use data.

Babel

Babel is a tool to compile JS files. The most popular way to use it is to compile future JS syntaxes to JS supported by target browsers. From Babel 7.0 @babel/preset-env loads target browsers from the same Browserslist config.

PostCSS Preset Env

postcss-preset-env is a “Babel for CSS.” It compiles future CSS syntax to CSS supported by target browsers. It is similar to cssnext, but more accurate with CSS spec and has stage option.

PostCSS Normalize

Browsers have different default styles. To have same styles in all browsers we need to “normalize” these differences.

postcss-normalize is a fork of popular Normalize.css with 2 differents: it doesn’t have opinionated styles, and it adds only necessary fixes according Browserslist target browsers.

ESLint

ESLint finds mistakes in your JS. eslint-plugin-compat is a plugin to ESLint to warn that JS will not work in all target browsers.

Stylelint

Stylelint is a “ESLint for CSS” to warn you about mistakes in CSS. It also has stylelint-no-unsupported-browser-features plugin to warn you when CSS property will not work in all target browsers.