RFC: align browser naming conventions to caniuse format

[cdaringe]

What

Context

Various web tooling solutions have begun to orient around browserslist & caniuse data. Browserslist github page calls out a few of the high impact projects, such babel, eslint, and (unlisted) swc! These awesome projects share the common goal of this awesome project, which is fundamentally enabling an excellent browser compatibility experience for developers.

Problem

The underlying tooling supporting polyfill.io uses a disjoint set of browser conventions than browserlists does, creating an incomplete compatibility strategy if you use both toolkits.

Consider the following browser support strategy:

• define a browserslist query
  • this expands to a list of browsers, eg$ npx browserslists # [chrome 95, chrome 94, edge 95, ios_saf 15, ...]
• compile application with browserslist, which emits tailored CSS & JS artifacts
• for each of the browsers listed by the browserslist query, create targeted polyfill bundles

This is more or less the strategy I am adoptiong. However, the two browser name mapping conventions and checked in version datas are disjoint.

Details

explain what prompted ...

See above

describe the feature

I did a union between these two toolkits. The following table assesses where these two systems already have overlap for browser names, and where they do not. It would be awesome to converge these two conventions. Even further, to start using caniuse-lite datas to drive the compatibility values that are currently manually maintained in TOML files! None the less, here is the diff.

• browserslist is case insensitive
• both tools can have aliases for the same browser, hence a set intersection on lowercase names indicates a compatibility between tools

const BROWSERSLIST_POLYFILLIO_BROWSER_NAME_MAPPING: [string[], string[]][] = [
  [["Android"], ["android"]], // ✅
  [["Baidu"], []], // ❌ polyfill.io missing
  [["BlackBerry", "bb"], ["bb", "blackberry"]], // ✅
  [["Chrome"], ["chrome"]], // ✅
  [["ChromeAndroid", "and_chr"], []], // ❌ polyfill.io missing
  [["Edge"], ["edge"]], // ✅
  [[], ["edge_mob"]], // ❌ browserslist missing
  [["Electron"], []], // 🏁 may be out of scope, needs more analysis
  [["Firefox", "ff"], ["firefox"]], // ✅
  [["FirefoxAndroid", "and_ff"], []], // ❌ polyfill.io missing
  [[], ["firefox_mob"]], // ❌ browserslist uses and_ff and ??? for other for mobile firefox browsers? needs more analysis
  [["Explorer", "ie"], ["ie"]], // ✅
  [["ExplorerMobile", "ie_mob"], ["ie_mob"]], // ✅
  [["ios_chr"], []], // ❌ polyfill.io missing
  [["iOS", "ios_saf"], ["ios_saf"]], // ✅
  [["kaios"], []], // ❌ polyfill.io missing
  [["Node"], []],  // 🏁 may be out of scope, needs more analysis
  [["OperaMini", "op_mini"], ["op_mini"]], // ✅
  [["OperaMobile", "op_mob"], ["op_mob"]], // ✅
  [["Opera"], ["opera"]], // ✅
  [["QQAndroid", "and_qq"], []],  // ❌ polyfill.io missing
  [["Safari"], ["safari"]], // ✅
  [["Samsung"], []], // ❌ polyfill.io missing
  [[], ["samsung_mob"]], // ❌ browserslist missing
  [["UCAndroid", "and_uc"], []] // ❌ polyfill.io missing
]

Just as I finished authoring this, I did find #940 :) there are a few diffs between our tables, so I'm submitting this eagerly and closing as a record, then taking the conversation over there.