Skip to content

Epic: Loshadka project #432

@ai

Description

@ai

Browserslist is an industry-standard config and ecosystem around it to specify what browsers (and Nodejs version) are supported in this project. It has 60M downloads per month. Large projects use it like Autoprefixer (to find what vendor prefixes add to CSS), Babel (for JS polyfills in babel-preset-env) and postcss-preset-env (for CSS polyfills). Create React App and Angular CLI use it by default.

Since this project has a significant effect on the web dev ecosystem, we need a big project of improving security and promoting best practices.

1434352158136310

Improving Security

Browserslist relies on caniuse-lite npm package with Can I Use data. We can’t use caniuse-db directly because of its big size. We have a script, which tracks new releases of caniuse-db, repack them into a compact format, and release the new caniuse-lite version to npm.

Unfortunately, there are a few security concerns about this script. We need to refactor it to avoid using it for malicious package publishing as we had with ESLint.

  • Move script from Digital Ocean server to GitHub Actions.
  • Split package into caniuse-lite-json (with only static JSONs) and caniuse-lite. GitHub Actions will have access only to release caniuse-lite-json. Unpacking scripts will be released manually.
  • Talk to npm team to add “This project doesn’t have postinstall script” settings to prevent publishing packages with scripts.
  • Fix the problem is caniuse-lite licensing by keep using non-software license for caniuse-lite-json and using MIT for unpacking scripts in caniuse-lite.

Promoting Best Practices

Browserslist was created to prevent developers from supporting popular browsers. It is a common practice of ignoring browsers, which is not popular in your country. For instance, many US developers prefer to avoid UC browsers. However, the UC browser has a market more than Firefox and desktop Safari.

In Browserslist, we are promoting queries like last 2 version instead of selecting browsers manually (like it was in babel-preset-env before: "chrome": "31").

We are already promoting browser diversity (check our interview of Google’s The State of the Web) and speak with the local community in Afrika, Asia, and Russia about their browsers.

Unfortunately, a lot of users do not know about this problem, this mission of Browserslist and .browserslistrc best practices. We need to educate the community about browsers in different countries and why and how they should help browser diversity.

  • Add npx browserslist lint CLI tool to show lint config against the most popular mistakes.
  • Add this lint messages to browserl.ist website.
  • Make an article about Browserslist, browsers in different countries.
  • Make a talk and try to talk about Browserslist at conferences.

Extra Features

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions