Avoid global polyfill injection in babel configuration for injected bundles

[coderabbitai[bot]]

trafficstars

Problem

The babel configuration in both extended-css/rollup.config.js and the scriptlets codebase uses @babel/preset-env with useBuiltIns: 'usage' and corejs, which injects global polyfills into the target page context. This can cause conflicts and breakage when the bundle is injected as an IIFE into web pages.

Affected Files

• extended-css/rollup.config.js (lines 24-38)
• Scriptlets codebase (similar babel configuration)

Current Configuration

babel({
  babelHelpers: 'bundled',
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.2%, not dead',
        useBuiltIns: 'usage',
        corejs: '3.41',
      },
    ],
  ],
  // ...
})

Recommended Solution

Option 1: Disable global polyfills

presets: [
  [
    '@babel/preset-env',
    {
      targets: '> 0.2%, not dead',
      useBuiltIns: false,
    },
  ],
],

Option 2: Use pure polyfills (if polyfills are needed)

Install and configure babel-plugin-polyfill-corejs3 with usage-pure behavior to inject polyfills without mutating the global scope.

Context

This issue was identified during code review of PR #434. Since injected bundles run in the context of third-party web pages, they should avoid mutating global scope to prevent conflicts with existing page functionality.

References

• Original discussion: https://github.com/ZenPrivacy/zen-desktop/pull/434#discussion_r2325509094
• PR: https://github.com/ZenPrivacy/zen-desktop/pull/434