@wessberg/browserslist-generator

A library that makes generating and validating Browserslists a breeze!

Description

This is a library that makes it easier to work with browserslists. It can do things like generating a Browserslist that targets only browsers that support - or don't support - specific required features, or even generate a Browserslist from a User Agent string! It can also do the same in reverse - match a Browserslist on a user agent. A Feature is anything that can be found on caniuse or MDN.

Install

NPM

$ npm install @wessberg/browserslist-generator

Yarn

$ yarn add @wessberg/browserslist-generator

Run once with NPX

$ npx @wessberg/browserslist-generator

Usage

Generating a Browserslist based on features

When deciding which Browsers and environments to support, it is quite common to make the decision based on feature support. With this library, you no longer have to neither look up Browser support and manually write a Browserslist, nor make sure to keep it up-to-date. Instead, simply declare the features that should be available:

import {browsersWithSupportForFeatures} from "@wessberg/browserslist-generator";
// Generate a browserslist for browsers that support all of the given features
const browserslist = browsersWithSupportForFeatures(
  "es6-module",
  "shadowdomv1",
  "custom-elementsv1"
);

It also works in reverse - You can simply use browsersWithoutSupportForFeatures instead.

Checking if a User Agent supports a specific feature

This library offers simple ways that you can check if a given User Agent supports any amount of features. This could be useful, among other things, for conditional bundle serving:

import {userAgentSupportsFeatures} from "@wessberg/browserslist-generator";
if (userAgentSupportsFeatures(userAgentString, "javascript.builtins.Promise.finally")) {
  doA();
} else {
  doB();
}

Checking if a Browserslist supports a specific feature

Given an existing Browserslist, this library can check if it supports one or more features. This could be useful, among other things, for conditional bundle serving:

import {browserslistSupportsFeatures} from "@wessberg/browserslist-generator";
if (browserslistSupportsFeatures(browserslist, "es6-module")) {
  useModernBundle();
} else {
  useLegacyBundle();
}

Contributing

Do you want to contribute? Awesome! Please follow these recommendations.

Maintainers

• Frederik Wessberg: Maintainer

FAQ

What is some cool example of a use case for this library?

Well, here's one I think is pretty neat: You're building an app, and you care about serving the smallest amount of code to your users. You've decided to build two bundles: One for browsers with, and one for browsers without ES-module support. You can now generate two Browserslists via @wessberg/browserslist-generator:

browsersWithSupportForFeatures("es6-module");
browsersWithoutSupportForFeatures("es6-module");

Now, you can then pass each one into tools like @babel/preset-env and postcss. On the server, you can use the function userAgentSupportsFeatures to check if the same features are supported and respond with resources that points to the right bundle.

Backers 🏅

Become a backer and get your name, logo, and link to your site listed here.

License 📄

MIT © Frederik Wessberg

API Reference

browsersWithSupportForFeatures (...features: string[]): string[]

Takes any amount of caniuse or MDN features and generates a browserslist that targets all browsers that support these features

browsersWithoutSupportForFeatures (...features: string[]): string[]

Takes any amount of caniuse or MDN features and generates a browserslist that targets all browsers that doesn't support these features

browserslistSupportsFeatures (browserslist: string[], ...features: string[]): boolean

Returns true if the given browserslist supports all of the given caniuse or MDN features

matchBrowserslistOnUserAgent (userAgent: string, browserslist: string[]): boolean

Will check if the given user agent string matches the given browserslist and return true if so.

userAgentSupportsFeatures (useragent: string, ...features: string[]): boolean

Checks if the given user agent string supports all of the given caniuse or MDN features.

normalizeBrowserslist (browserslist: string[]|string): string[]

Generates a normalized Browserslist from the given one.