Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    wessberg/browserslist-generator has been renamed to browserslist-generator. Please use browserslist-generator instead

    @wessberg/browserslist-generator
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.47 • Public • Published
    Logo

    A library that makes generating and validating Browserslists a breeze!

    Downloads per month NPM version Dependencies Contributors code style: prettier License: MIT Support on Patreon

    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.

    Features

    • Generating a Browserslist based on features
    • Generating a Browserslist based on an ECMA version
    • Generating a browserslist based on a User Agent string
    • Checking if a User Agent string supports specific features
    • Checking if a browserslist supports specific features
    • Checking if a browserslist supports a specific ECMA version
    • Getting the most appropriate ECMA version for a browserslist

    Backers

    Become a sponsor/backer and get your logo listed here.

    Bubbles Christopher Blanchard Ideal Postcodes Xerox
    Bubbles
    Twitter: @usebubbles
    Christopher Blanchard Ideal Postcodes Xerox

    Patreon

    Patrons on Patreon

    Table of Contents

    Install

    npm

    $ npm install @wessberg/browserslist-generator
    

    Yarn

    $ yarn add @wessberg/browserslist-generator
    

    pnpm

    $ pnpm add @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");

    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();
    }

    Generating a Browserslist based on a ECMAScript version

    When deciding which Browsers and environments to support, it is quite common to make the decision based on a specific version of ECMAScript to target. For example, with the Typescript Compiler, the target option takes an ECMAScript version and the Typescript Compiler then knows which transformations to apply accordingly.

    import {browsersWithSupportForEcmaVersion} from "@wessberg/browserslist-generator";
    // Generate a browserslist for browsers that support the given version of ECMAScript
    const browserslist = browsersWithSupportForEcmaVersion("es2015");

    Checking if a Browserslist supports a specific ECMAScript version

    Given an existing Browserslist, this library can also check if it supports a specific version of ECMAScript. This could be useful, among other things, for conditional bundle serving:

    import {browserslistSupportsEcmaVersion} from "@wessberg/browserslist-generator";
    if (browserslistSupportsEcmaVersion(browserslist, "es2015")) {
    	useModernBundle();
    } else {
    	useLegacyBundle();
    }

    Getting the most appropriate ECMAScript version for a Browserslist

    Given an existing Browserslist, this library can detect the most appropriate ECMAScript version to target. This could be useful, for example, when using the Typescript compiler based on a Browserslist.

    import {getAppropriateEcmaVersionForBrowserslist} from "@wessberg/browserslist-generator";
    
    const typescriptOptions = {
    	// ...
    	target: getAppropriateEcmaVersionForBrowserslist(browserslist)
    };

    Possible ECMAScript versions

    All of the possible ECMAScript versions are:

    • es3
    • es5
    • es2015
    • es2016
    • es2017
    • es2018
    • es2019
    • es2020

    Contributing

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

    Maintainers

    Frederik Wessberg
    Frederik Wessberg
    Twitter: @FredWessberg
    Github: @wessberg
    Lead Developer

    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.

    License

    MIT © Frederik Wessberg (@FredWessberg) (Website)

    Install

    npm i @wessberg/browserslist-generator

    DownloadsWeekly Downloads

    9,902

    Version

    1.0.47

    License

    MIT

    Unpacked Size

    401 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar