babel-preset-env: Including 'android' browser when not in browserslist config

[bhollis]

Bug Report

• I would like to work on a fix!

Current Behavior
Upgrading from babel-preset-env (and other babel libraries) from 7.7.4 to 7.7.5 starts including too many transformations. PR here - this adds 10% size to our app. DestinyItemManager/DIM#4814

Our babel config: https://github.com/DestinyItemManager/DIM/blob/master/babel.config.js

Our browserslist config is:

  "browserslist": [
    "last 2 Chrome versions",
    "last 2 ChromeAndroid versions",
    "last 2 FirefoxAndroid versions",
    "last 2 Firefox versions",
    "Firefox ESR",
    "last 2 Safari versions",
    "iOS >= 11",
    "last 2 Edge versions",
    "last 2 Opera versions",
    "unreleased versions"
  ],

Using 7.7.4, debug ouput:

@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "77",
  "edge": "17",
  "firefox": "68",
  "ios": "11",
  "opera": "63",
  "safari": "12.1"
}

Using modules transform: false

Using plugins:
  transform-template-literals { "ios":"11", "safari":"12.1" }
  transform-function-name { "edge":"17" }
  transform-dotall-regex { "edge":"17", "firefox":"68", "ios":"11" }
  transform-unicode-regex { "ios":"11" }
  transform-parameters { "edge":"17" }
  proposal-async-generator-functions { "edge":"17", "ios":"11" }
  proposal-object-rest-spread { "edge":"17", "ios":"11" }
  proposal-unicode-property-regex { "edge":"17", "firefox":"68", "ios":"11" }
  proposal-json-strings { "edge":"17", "ios":"11" }
  proposal-optional-catch-binding { "edge":"17", "ios":"11" }
  transform-named-capturing-groups-regex { "edge":"17", "firefox":"68", "ios":"11" }
  syntax-dynamic-import { "chrome":"77", "edge":"17", "firefox":"68", "ios":"11", "opera":"63", "safari":"12.1" }

Using 7.7.5, debug ouput:

@babel/preset-env: `DEBUG` option

Using targets:
{
  "android": "79",
  "chrome": "77",
  "edge": "17",
  "firefox": "68",
  "ios": "11",
  "opera": "63",
  "safari": "12.1"
}

Using modules transform: false

Using plugins:
  transform-template-literals { "android":"79", "ios":"11", "safari":"12.1" }
  transform-literals { "android":"79" }
  transform-function-name { "android":"79", "edge":"17" }
  transform-arrow-functions { "android":"79" }
  transform-block-scoped-functions { "android":"79" }
  transform-classes { "android":"79" }
  transform-object-super { "android":"79" }
  transform-shorthand-properties { "android":"79" }
  transform-duplicate-keys { "android":"79" }
  transform-computed-properties { "android":"79" }
  transform-for-of { "android":"79" }
  transform-sticky-regex { "android":"79" }
  transform-dotall-regex { "android":"79", "edge":"17", "firefox":"68", "ios":"11" }
  transform-unicode-regex { "android":"79", "ios":"11" }
  transform-spread { "android":"79" }
  transform-parameters { "android":"79", "edge":"17" }
  transform-destructuring { "android":"79" }
  transform-block-scoping { "android":"79" }
  transform-new-target { "android":"79" }
  transform-regenerator { "android":"79" }
  transform-exponentiation-operator { "android":"79" }
  transform-async-to-generator { "android":"79" }
  proposal-async-generator-functions { "android":"79", "edge":"17", "ios":"11" }
  proposal-object-rest-spread { "android":"79", "edge":"17", "ios":"11" }
  proposal-unicode-property-regex { "android":"79", "edge":"17", "firefox":"68", "ios":"11" }
  proposal-json-strings { "android":"79", "edge":"17", "ios":"11" }
  proposal-optional-catch-binding { "android":"79", "edge":"17", "ios":"11" }
  transform-named-capturing-groups-regex { "android":"79", "edge":"17", "firefox":"68", "ios":"11" }
  syntax-dynamic-import { "android":"79", "chrome":"77", "edge":"17", "firefox":"68", "ios":"11", "opera":"63", "safari":"12.1" }

Input Code

DestinyItemManager/DIM#4814
Our babel config: https://github.com/DestinyItemManager/DIM/blob/master/babel.config.js

Expected behavior/code

I would expect that the transforms wouldn't change between versions, especially minor versions, and that we'd continue only transpiling what's necessary for the browsers in our browserslist config.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

module.exports = function(api) {
  const isProduction = api.env('production');
  const plugins = [
    'lodash',
    'babel-plugin-optimize-clsx',
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-proposal-optional-chaining', { loose: true }],
    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: true }],
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true
      }
    ],
    [
      'transform-imports',
      {
        '@fortawesome/free-brands-svg-icons': {
          transform: (member) => `@fortawesome/free-brands-svg-icons/${member}`,
          preventFullImport: true,
          skipDefaultConversion: true
        },
        '@fortawesome/free-solid-svg-icons': {
          transform: (member) => `@fortawesome/free-solid-svg-icons/${member}`,
          preventFullImport: true,
          skipDefaultConversion: true
        },
        '@fortawesome/free-regular-svg-icons': {
          transform: (member) => `@fortawesome/free-regular-svg-icons/${member}`,
          preventFullImport: true,
          skipDefaultConversion: true
        }
      }
    ]
  ];

  if (isProduction) {
    plugins.push(
      '@babel/plugin-transform-react-constant-elements',
      '@babel/plugin-transform-react-inline-elements'
    );
  } else {
    plugins.push('react-hot-loader/babel');
  }

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false,
          loose: true,
          useBuiltIns: 'usage',
          corejs: 3,
          shippedProposals: true
        }
      ],
      ['@babel/preset-react', { useBuiltIns: true, loose: true, corejs: 3 }]
    ],
    plugins
  };
};

Environment

System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 13.1.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - /usr/local/bin/npm
  npmPackages:
    @babel/core: ^7.0.0 => 7.7.7
    @babel/plugin-proposal-nullish-coalescing-operator: ^7.4.4 => 7.7.4
    @babel/plugin-proposal-object-rest-spread: ^7.0.0 => 7.7.7
    @babel/plugin-proposal-optional-chaining: ^7.6.0 => 7.7.5
    @babel/plugin-syntax-dynamic-import: ^7.0.0 => 7.7.4
    @babel/plugin-transform-react-constant-elements: ^7.0.0 => 7.7.4
    @babel/plugin-transform-react-inline-elements: ^7.0.0 => 7.7.4
    @babel/plugin-transform-runtime: ^7.1.0 => 7.7.6
    @babel/preset-env: ^7.3.1 => 7.7.7
    @babel/preset-react: ^7.0.0 => 7.7.4
    @babel/runtime: ^7.1.2 => 7.7.7
    babel-loader: ^8.0.2 => 8.0.6
    babel-plugin-lodash: ^3.3.2 => 3.3.4
    babel-plugin-optimize-clsx: ^2.5.0 => 2.5.0
    babel-plugin-transform-imports: ^2.0.0 => 2.0.0
    eslint: ^6.0.1 => 6.8.0
    jest: ^24.9.0 => 24.9.0
    webpack: ^4.5.0 => 4.41.5

Possible Solution

It appears that the issue is that babel-preset-env now considers android: 79 to be one of the browsers on our list, and is including transforms for it as a result (and thus including most of the es5 translations). I'm not sure why it's doing this - running npx browserslist gives me:

and_chr 78
and_ff 68
chrome 81
chrome 80
chrome 79
chrome 78
chrome 77
edge 76
edge 18
edge 17
firefox 73
firefox 72
firefox 71
firefox 70
firefox 68
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
ios_saf 12.0-12.1
ios_saf 11.3-11.4
ios_saf 11.0-11.2
opera 64
opera 63
safari 13
safari 12.1
safari TP

Perhaps whatever mapping there is between browserslist and preset-env is misidentifying the android bits of the config. What's weird is the android-specific browsers in that list aren't at version 79 - only Chrome is.

[babel-bot]

Hey @bhollis! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[bhollis]

Note: removing "unreleased versions" from our browserslist query causes the "android" entry to be removed from babel-preset-env, and it will then use the right transforms. Unfortunately we use our browserslist config for more than just babel-preset-env - we also drive a "this browser is not supported" warning from it. So we'd prefer not to remove the "unreleased versions" line.

[JLHwung]

Closing this as a duplicate of #10789, it will be fixed in #10790.

@bhollis It is a nice report. Thank you!

[bhollis]

Thank you!