Browserslist: Where is the source of data? And how it works?

[Ajmdag]

label Question please @ai

I want to figure out how this tool works, can you help me?

Where tools that using browserslist get relevant information about browsers? I suppose CanIUse provides such API. If yes, people that work with CanIUse gather information by hands, testing all the browsers? If not, how?

For example:

1. Autoprefixer get data from browserslist about browsers I want to support (strings like last 2 versions, not dead, > 1% or not?).
2. Inside Autoprefixer implemented logic to deal with something that we got from browserslist on previous step.
3. Autoprefixer generates the resulting CSS.

[ai]

1. Browser’s developers send PR to caniuse repository.
2. When Can I Use maintainer accepts that PR he releases caniuse-db npm package.
3. @ben-eb script monitors caniuse-db package releases and repack them into more compact caniuse-lite.
4. autoprefixer npm packages has caniuse-lite in their dependencies. Every time when you install it, you install also the latest caniuse-lite. Every time when you call npm update or yarn update you update caniuse-lite.
5. When you call Autoprefixer, Autoprefixer calls Browserslist. Browserslist finds Browserslist config (.browserslistrc or browserslist key in package.json) and reads target browsers (or use default). It will be query like last 2 versions, not dead, > 1%.
6. Browserslist use browsers data from caniuse-lite to get list browser versions.
7. Then Autoprefixer uses PostCSS to parses CSS string into a tree of objects (AST). Then it iterates through these object in the tree and changes them. In the end, Autoprefixer calls PostCSS to generate new CSS string from changes objects tree.