helper-compliation-targets merges desktop and mobile browsers

Bug Report

• I would like to work on a fix!

@babel/helper-compliation-targets is used by @babel/preset-env to transform the browsers/targets property into a list that can be actioned. In this process, it appears that and_chr and and_ff will be resolved to just chrome or firefox which results in the wrong targets being resolved.

Current Behaviour

last 1 firefoxandroid versions
last 3 firefox versions

results in the following output when using the debug flag:

Using targets:
{
  "firefox": "81"
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { "firefox":"81" }
  syntax-nullish-coalescing-operator { "firefox":"81" }
  syntax-optional-chaining { "firefox":"81" }
  syntax-json-strings { "firefox":"81" }
  syntax-optional-catch-binding { "firefox":"81" }
  syntax-async-generators { "firefox":"81" }
  syntax-object-rest-spread { "firefox":"81" }
  syntax-dynamic-import { "firefox":"81" }
  syntax-export-namespace-from { "firefox":"81" }
  syntax-top-level-await { "firefox":"81" }

Expected Behaviour

last 1 firefoxandroid versions
last 3 firefox versions

resolves to a target of:

{
  "firefox": "81",
  "firefox android": "83"
}

Possible Solution

Update the browserNameMap to give distinction to mobile versions. For example if I change it to be:

and_ff: "firefox android",

Then my resulting output from running @babel/preset-env with the debug flag is correct:

Using targets:
{
  "firefox": "81",
  "firefox android": "83"
}

Using modules transform: false

Using plugins:
  proposal-numeric-separator { "firefox android":"83" }
  proposal-logical-assignment-operators { "firefox android":"83" }
  proposal-nullish-coalescing-operator { "firefox android":"83" }
  proposal-optional-chaining { "firefox android":"83" }
  proposal-json-strings { "firefox android":"83" }
  proposal-optional-catch-binding { "firefox android":"83" }
  transform-parameters { "firefox android":"83" }
  proposal-async-generator-functions { "firefox android":"83" }
  proposal-object-rest-spread { "firefox android":"83" }
  transform-dotall-regex { "firefox android":"83" }
  proposal-unicode-property-regex { "firefox android":"83" }
  transform-named-capturing-groups-regex { "firefox android":"83" }
  transform-async-to-generator { "firefox android":"83" }
  transform-exponentiation-operator { "firefox android":"83" }
  transform-template-literals { "firefox android":"83" }
  transform-literals { "firefox android":"83" }
  transform-function-name { "firefox android":"83" }
  transform-arrow-functions { "firefox android":"83" }
  transform-block-scoped-functions { "firefox android":"83" }
  transform-classes { "firefox android":"83" }
  transform-object-super { "firefox android":"83" }
  transform-shorthand-properties { "firefox android":"83" }
  transform-duplicate-keys { "firefox android":"83" }
  transform-computed-properties { "firefox android":"83" }
  transform-for-of { "firefox android":"83" }
  transform-sticky-regex { "firefox android":"83" }
  transform-unicode-escapes { "firefox android":"83" }
  transform-unicode-regex { "firefox android":"83" }
  transform-spread { "firefox android":"83" }
  transform-destructuring { "firefox android":"83" }
  transform-block-scoping { "firefox android":"83" }
  transform-typeof-symbol { "firefox android":"83" }
  transform-new-target { "firefox android":"83" }
  transform-regenerator { "firefox android":"83" }
  transform-member-expression-literals { "firefox android":"83" }
  transform-property-literals { "firefox android":"83" }
  transform-reserved-words { "firefox android":"83" }
  proposal-export-namespace-from { "firefox android":"83" }
  syntax-dynamic-import { "firefox":"81", "firefox android":"83" }
  syntax-top-level-await { "firefox":"81", "firefox android":"83" }

Additional context

Given a browserslist of:

last 1 firefoxandroid versions
last 3 firefox versions

This resolves to (when using the debug flag of @babel/preset-env) to:

Using targets:
{
  "firefox": "81"
}

Using modules transform: false

Using plugins:
  syntax-numeric-separator { "firefox":"81" }
  syntax-nullish-coalescing-operator { "firefox":"81" }
  syntax-optional-chaining { "firefox":"81" }
  syntax-json-strings { "firefox":"81" }
  syntax-optional-catch-binding { "firefox":"81" }
  syntax-async-generators { "firefox":"81" }
  syntax-object-rest-spread { "firefox":"81" }
  syntax-dynamic-import { "firefox":"81" }
  syntax-export-namespace-from { "firefox":"81" }
  syntax-top-level-await { "firefox":"81" }

This isn’t correct though as it should resolve to Firefox 81, and Firefox Android 83 (at the time of writing).

The issue occurs in the getLowestVersions function:

https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/index.js#L209-L216

This function attempts to normalize the incoming browser name, and in do so, loses the distinction between the mobile and desktop version. While this function gets the correct browsers:

[ 'and_ff 83', 'firefox 83', 'firefox 82', 'firefox 81' ]

It loses it once it’s normalized:

https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/index.js#L74

This is because the targets map will cast and_ff to be just firefox:

https://github.com/babel/babel/blob/4f3fcf11101d52e9bb27042708080bf5c619e201/packages/babel-helper-compilation-targets/src/targets.js#L7

This also affects and_chr, ie_mob and op_mob.

[JLHwung]

For most engine support information we use compat-table, as you can see compat-table does not support firefox android. However, MDN maintains engine informations (the most important piece is how we should map the firefox android version to Gecko version) about firefox android: https://github.com/mdn/browser-compat-data/blob/master/browsers/firefox_android.json, I will be very appreciate if you can prepare a PR to https://github.com/kangax/compat-table which ports the MDN data to compat-table. After compat-table supports Firefox Android, Babel will update @babel/compat-table for android firefox support.

Update: I don’t think it is worthy to maintain another android firefox support since except Android Firefox 2, which maps to Gecko 4. All other versions of android firefox maps to the same Gecko engine versions.

[JLHwung]

Closing this issue as the upstream one is resolved.