[Bug]: preset-env with "debug: true" lists every target rather than the one which caused the polyfill

[use]

💻

• [ ] Would you like to work on a fix?

How are you using Babel?

@babel/cli

Input code

// code doesn't really matter, it just needs to cause some polyfills
[...document.querySelectorAll('.something')].forEach(
    (el) => el.classList.remove('something')
);

Configuration file name

babel.config.json

Configuration

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "targets": [
          "> 0.25%",
          "not dead",
          "not IE 11"
        ],
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

Current and expected behavior

Current behavior (started in 7.13.0):

preset-env with "debug: true" lists every target next to every applied polyfill, rather than only the target which caused the polyfill.

Example current behavior:

[babel-polyfill-test/src/test.js]
The corejs3 polyfill added the following polyfills:
  es.object.to-string { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  web.dom-collections.for-each { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.symbol { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.symbol.description { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.symbol.iterator { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.array.iterator { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.string.iterator { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  web.dom-collections.iterator { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.array.from { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.array.slice { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.regexp.exec { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }
  es.regexp.test { "android":"4.4.3", "chrome":"92", "edge":"96", "firefox":"94", "ios":"12.2", "opera":"81", "safari":"13.1", "samsung":"15" }

Expected behavior (last working version was 7.12.17):

Show the specific targets which caused each polyfill.

Example expected behavior, which is how it worked up to and including 7.12.17:

[babel-polyfill-test/src/test.js] Added following core-js polyfill:
  web.dom-collections.for-each { "android":"4.4.3" }

Environment

@babel/[email protected] node v16.13.1 npm 8.1.2 Ubuntu 20.04

Possible solution

No response

Additional context

No response

[babel-bot]

Hey @use! 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.

[dreyks]

I don't know which part broke it and when, but babel-preset-env's logPlugin accepts an entire support object (object whose keys are polyfill names and values are support matrixes), but babel-helper-define-polyfill-provider passes just the support matrix for a given polyfill

changing this line https://github.com/babel/babel-polyfills/blob/ce30946033aaed0ae1daf09a75e76acf4d24b8cc/packages/babel-helper-define-polyfill-provider/src/index.ts#L225 to just polyfillsSupport, fixes the issue

however, this would not be a good change. instead, debugLog.polyfills should probably be a Set and just hold the selected polyfills, while the entire polyfillsSupport should be a separate key in debugLog

[nicolo-ribaudo]

however, this would not be a good change. instead, debugLog.polyfills should probably be a Set and just hold the selected polyfills, while the entire polyfillsSupport should be a separate key in debugLog

This sounds like the correct solution! Would you be interested in opening a PR?

[dreyks]

#137