Conditional require produces invalid output

[ross-pfahler]

🐛 bug report

When conditionally loading css via commonjs the resulting code is invalid.

🎛 Configuration (.babelrc, package.json, cli command)

Parcel with no .parcelrc

🤔 Expected Behavior

Code should compile without error.

😯 Current Behavior

The output code is invalid, which causes Terser to throw an unexpected token error (see Code Sample)

💁 Possible Solution

Not sure!

🔦 Context

I'm trying to load a library that conditionally includes CSS based on a environment variable

💻 Code Sample

Full repro at https://github.com/ross-pfahler/parcel-2-demos/tree/require-condition using yarn build --no-optimize

if (process.env.a) {
  require('./a.css');
} else {
  require('./b.css');
}

turns into:

if (undefined) {};
else {};

🌍 Your Environment

Software	Version(s)
Parcel	2.6
Node	16
npm/Yarn	yarn
Operating System	osx

[101arrowz]

This is a limitation of our CSS packaging strategy that I anticipate will be very difficult to resolve. Conditional CSS implies loading the CSS only when a branch is taken, but to do it synchronously you'd have to download both CSS files in advance and only apply them when their branch is taken.

Also note that Parcel's strategy for process.env replacement is kind of cheating in that it just replaces with the actual value and lets Terser do the dead code elimination, so we can't currently statically determine which CSS file needs to be used. Actually for this case it should be fine and is a bug.

Is there a practical use case for this? If you really need this functionality you can just do:

const aCSS= require("bundle-text:./a.css")
if (branch) {
  const style = document.createElement('style');
  style.innerText = aCSS;
  document.head.appendChild(style);
}

(Though even that is blocked by #7941).

[mischnic]

No, we actually run swc'a DCE in the transformer before we collect all of the require calls (for exactly this usecase).
Some recent swc upgrade might has broken this

[101arrowz]

Oh OK, does SWC's DCE work the same as Terser? Sorry for the bad info!