CLI tool to update caniuse-lite to refresh target browsers from Browserslist config

Overview

Update Browserslist DB

Browserslist logo by Anton Lovchikov

CLI tool to update caniuse-lite with browsers DB from Browserslist config.

Some queries like last 2 version or >1% depends on actual data from caniuse-lite.

npx update-browserslist-db@latest
Sponsored by Evil Martians

Why You Need to Call it Regularly

npx update-browserslist-db@latest updates caniuse-lite version in your npm, yarn or pnpm lock file.

This update will bring data about new browsers to polyfills tools like Autoprefixer or Babel and reduce already unnecessary polyfills.

You need to do it regularly for three reasons:

  1. To use the latest browser’s versions and statistics in queries like last 2 versions or >1%. For example, if you created your project 2 years ago and did not update your dependencies, last 1 version will return 2 year old browsers.
  2. Actual browsers data will lead to using less polyfills. It will reduce size of JS and CSS files and improve website performance.
  3. caniuse-lite deduplication: to synchronize version in different tools.
Comments
  • Suppress the warning in reproducible environment

    Suppress the warning in reproducible environment

    Hi there, thank you for this awesome ecosystem of packages.

    I am a developer in the NixOS ecosystem where we package a lot of Node.js-based projects and I encounter a lot in some build phase or install phase a warning of the form:

    Why you should do it regularly:
    https://github.com/browserslist/browserslist#browsers-data-updating
    Browserslist: caniuse-lite is outdated. Please run:
    npx browserslist@latest --update-db
    

    I think it is relevant, but I wonder if there is a way to have an environment variable to prevent them from appearing as in a highly reproducible environment, it is too late to worry about update or not, all dependencies are pinned and most of the time, we are in an offline environment without network access. Having such a thing would greatly improve the quality of build logs and make it easier to read for users and maintainers.

    What do you think?

    opened by RaitoBezarius 11
  • Cannot find module

    Cannot find module "browserslist" on Windows 10

    When I try command "npx update-browserslist-db@latest" I got error: "Error: Cannot find module 'browserslist'". I suppose it occurs because package is installing every time I try this command (because in package.json of update-browserslist-db name of command is browserslist-lint) and package tries to require("browserslist") which can't be find from global scope. I tried npm i -g browserslist but no result. Command "npx browserslist-lint" works correctly. Is regulary installing of update-browserslist-db expected?

    opened by alexanderanchishkin 7
  • TypeError: Cannot read properties of undefined (reading 'replace')

    TypeError: Cannot read properties of undefined (reading 'replace')

    When I build my app I get prompted (several times) to run npx browserslist@latest --update-db. However, when I do I get an error TypeError: Cannot read properties of undefined (reading 'replace')

    Steps to reproduce

    git clone [email protected]:captbaritone/webamp.git
    cd webamp
    yarn
    npx browserslist@latest --update-db
    

    Actual outcome

    ╭─[00:00]: captbaritone at moffo in ~/tmp/webamp on branch*
    ╰─➤ npx browserslist@latest --update-db
    Browserslist: caniuse-lite is outdated. Please run:
      npx browserslist@latest --update-db
      Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
    Latest version:     1.0.30001412
    /Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:155
              ? lines[3].replace(
                         ^
    
    TypeError: Cannot read properties of undefined (reading 'replace')
        at /Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:155:22
        at Array.forEach (<anonymous>)
        at updateYarnLockfile (/Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:141:10)
        at updateLockfile (/Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:226:12)
        at updatePackageManually (/Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:232:22)
        at updateDB (/Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/update-db.js:327:5)
        at Object.<anonymous> (/Users/captbaritone/tmp/webamp/node_modules/@babel/core/node_modules/browserslist/cli.js:42:3)
        at Module._compile (node:internal/modules/cjs/loader:1120:14)
        at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
        at Module.load (node:internal/modules/cjs/loader:998:32)
    
    Node.js v18.7.0
    

    Versions

    ╭─[00:00]: captbaritone at moffo in ~/tmp/webamp on branch*
    ╰─➤ node --version
    v18.7.0
    ╭─[00:00]: captbaritone at moffo in ~/tmp/webamp on branch*
    ╰─➤ yarn --version
    1.22.10
    ╭─[00:00]: captbaritone at moffo in ~/tmp/webamp on branch*
    ╰─➤ npm --version
    8.15.0
    ╭─[00:00]: captbaritone at moffo in ~/tmp/webamp on branch*
    ╰─➤ npx --version
    8.15.0
    

    Observation

    I was prompted to report this issue here via this tweet but in filing this issue I realized that the command I was prompted to run npx browserslist@latest --update-db is different than the on in this repository's readme, which is: npx update-browserslist-db@latest.

    If I run npx update-browserslist-db@latest I get a better outcome (full output of that can be found in this gist)

    opened by captbaritone 5
  • lost package-lock.json indentation

    lost package-lock.json indentation

    Line of code: here You can see that 2-space-indentation is hardcoded for new package-lock.json file. Is it possible to detect package-lock.json indentation? And if no is it possible to make option "tabWidth" for set this value?

    opened by alexanderanchishkin 3
  • Prevent scripts from running pre or post install

    Prevent scripts from running pre or post install

    To aid developers we have a variety of preinstall scripts present. These do not work similarly on CI (which is where we run this script). Would it be an option to disable running the scripts on yarn add altogether?

    opened by rogierslag 3
  • pnpm info instead of npm show

    pnpm info instead of npm show

    Fix browserslist/update-db#12

    I tried to run cli.js on our pnpm repository and it succeeded, so it seems the fix does the job 🙌.

    $ node ../contrib/browserslist-update-db/cli.js 
    Latest version:     1.0.30001416
    Updating caniuse-lite version
    $ pnpm up caniuse-lite
    caniuse-lite has been successfully updated
    
    No target browser changes
    

    The unit tests succeeded when run on my machine, I'm not sure how to add another one for the new condition though. If you have any advice for that, I'm keen to hear it. You probably already know that but the tests also produced a lot of warnings like the following. It looks like it is a transitive dependency:

    npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
    
    opened by Hyzual 2
  • Messed up lock file formatting when using CRLF EOL

    Messed up lock file formatting when using CRLF EOL

    After the first run of npx -y update-browserslist-db@latest in our project, it messed up package-lock.json formatting, see:

    This is on my colleague's PC (windows, I believe) image

    This is on my PC (Ubuntu, WSL2): image

    This is my output: image

    After that, I changed nothing re-running the command worked just fine. Can't reproduce anymore.

    opened by Maxim-Mazurok 2
  • Error thrown when `npm` is not installed

    Error thrown when `npm` is not installed

    Hi, I'm using pnpm and trying to update my browserslist db. I tried running $ pnpm dlx update-browserslist-db but it throws an error because it tries to run npm at some point:

    /home/myuser/.local/share/pnpm/store/v3/tmp/dlx-415634/node_modules/.pnpm/[email protected]/node_modules/update-browserslist-db/cli.js:39
          throw e
          ^
    
    Error: Command failed: npm show caniuse-lite --json
        at checkExecSyncError (node:child_process:871:11)
        at Object.execSync (node:child_process:943:15)
        at getLatestInfo (/home/jmasson/.local/share/pnpm/store/v3/tmp/dlx-415634/node_modules/.pnpm/[email protected]/node_modules/update-browserslist-db/index.js:72:18)
        at updateDB (/home/jmasson/.local/share/pnpm/store/v3/tmp/dlx-415634/node_modules/.pnpm/[email protected]/node_modules/update-browserslist-db/index.js:259:16)
        at Object.<anonymous> (/home/jmasson/.local/share/pnpm/store/v3/tmp/dlx-415634/node_modules/.pnpm/[email protected]/node_modules/update-browserslist-db/cli.js:34:5)
        at Module._compile (node:internal/modules/cjs/loader:1119:14)
        at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
        at Module.load (node:internal/modules/cjs/loader:997:32)
        at Module._load (node:internal/modules/cjs/loader:838:12)
    

    I don't have npm installed which explains why the command fails. From quickly reading the code it looks like this command has a yarn version but not a pnpm one. Is there a workaround to this issue ?

    https://github.com/browserslist/update-db/blob/dd50e379d141a0bf4c259a2bc07d3bc1e68705f7/index.js#L59-L72

    opened by Hyzual 1
  • Changes CRLF to LF in lock file

    Changes CRLF to LF in lock file

    I have package-lock.json with CRLF EOL. After running npx -y update-browserslist-db@latest it gets converted into LF. Same for npx -y browserslist@latest --update-db.

    Will create PR to address this shortly.

    opened by Maxim-Mazurok 0
Owner
Browserslist
Common config to set target browsers of your project
Browserslist
Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

null 8 Nov 30, 2022
caniuse.com but for PHP - a searchable list of new and deprecated features in recent PHP versions

caniphp.com caniphp.com is like caniuse.com but for PHP features. It's a simple search of PHP features that added, deprecated and removed in recent ve

Ross Wintle 95 Dec 25, 2022
Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Stephanie Eckles 65 Nov 2, 2022
A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and configure Typescript on it.

CTSP- Create TS Project A CLI tool to create a NodeJS project with TypeScript CTSP is a CLI tool to make easier to start a new NodeJS project and conf

Jean Rodríguez 7 Sep 13, 2022
JOSE ZEPEDA 10 Nov 18, 2022
🎯 Wallet Lite is a Quick and Simple way to use your Tokens of Lunes Blockchain in a light Chrome extension

Lunes Wallet Lite Offered by: Lunes Installing Web store: Lunes Lite will be available on Chrome Web Store Build: Requisites NodeJS (16 or higher) Git

Lunes Platform 10 Oct 25, 2022
Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill).

@sanity/client Javascript client for Sanity. Works in node.js and modern browsers (older browsers needs a Promise polyfill). Requirements Sanity Clien

Sanity 23 Nov 29, 2022
This package generates a unique ID/String for different browsers. Like chrome, Firefox and any other browsers which supports canvas and audio Fingerprinting.

Broprint.js The world's easiest, smallest and powerful visitor identifier for browsers. This package generates a unique ID/String for different browse

Rajesh Royal 68 Dec 25, 2022
A simple calculator for how many units of insulin to take with a meal depending on current and target blood sugar levels.

Insulin-Calculator One of my first programs, made to try building javascript-read HTML forms. A simple calculator for how many units of insulin to tak

Athena 1 Dec 26, 2021
Init a target by promise only once.

once-init ?? Let Promise Function Executed Only Once. The Promise will be executed when the attribute target is called for the first time, and the Pro

Xmo 65 Dec 26, 2022
Based on Google Chrome recorder, implement UI interface capture and notify the result to the target mailbox

chrome-recoder-crawler README-CN Modify the .js file exported by Google Chrome recorder. By default, the innerText property of the node operated in th

wudu 4 Oct 18, 2022
Calculates dependencies for a Go build-target and submits the list to the Dependency Submission API

Go Dependency Submission This GitHub Action calculates dependencies for a Go build-target (a Go file with a main function) and submits the list to the

GitHub Actions 33 Dec 7, 2022
Invadium runs exploit playbooks against vulnerable target applications in an intuitive, reproducible, and well-defined manner.

Invadium Invadium runs exploits against one or more target applications in an intuitive, reproducable, and well-defined manner. It focuses on bridging

Dynatrace Open Source 10 Nov 6, 2022
EasyPen is a GUI program which helps pentesters do target discovery, vulnerability scan and exploitation

EasyPen Alpha 1.0.5 Do not use EasyPen for illegal purposes, this tool is for research only 查看中文 EasyPen is a GUI program which helps pentesters do ta

null 486 Dec 25, 2022
Building #dotnet code to target WASM in the browser

WASM Running .NET in a Browser This solution shows you can compile .NET to target a WASM app bundle that can be used independently of a dotnet applica

Khalid Abuhakmeh 9 Oct 14, 2022
Forked from hayes0724/shopify-packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, compatible with Slate and existing websites.

Shopify Packer Modern development tool for Shopify using Webpack 5. Easy to extend and customize, zero build config, comes with starter themes and com

Web & Mobile | eCommerce | Full-Stack Developer 4 Nov 24, 2022
This project is about Leaderboard list app, that allows users to add score to the list and refresh the list.

Leaderboard This project is about Leaderboard list app, that allows users to add score to the list and refresh the list. Built With JavaScript HTML CS

Mihreteab Misganaw 3 Dec 19, 2021
Refresh - Simple browser reload on file change middleware for your Deno web applications.

refresh Simple browser reload on file change middleware for your Deno web applications. Usage To use refresh middleware, just add a few extra lines to

Craig Morten 13 Dec 19, 2022
Google Cloud Platform Refresh Token

Google Cloud Platform Refresh Token gcp-refresh-token is a cli util from plasmo to retrieve a refresh token as specified in Google's OAuth 2.0 Refresh

Plasmo 3 Jun 7, 2022