CRA - React production build with dynamic CSS imports - css

Question

The issue:
Using the out-of-the-box react-scripts package included with create-react-app to build a production build of React, dynamically imported CSS files get ignored and instead all CSS seems to get compiled into the production build.
Example of what is happening:
/* styles/desktop.css */
.some-class {
background-color: white;
margin: 0;
}
/* styles/mobile.css */
.some-class {
border: 1px solid black;
margin: 1em;
}
.another-class {
background-color: black;
padding: 3px;
}
Note we are using require() with template strings as the import statement only accepts string literals and cssEnv could be any number of things which would make a conditional statement untenable.
/* config.js */
const cssEnv = 'desktop';
require(`./styles/${cssEnv}.css`);
We build our production build.
$ npm run build
In the build folder, we find our compiled CSS. Note how all our CSS files have been compiled into one (including even CSS we never imported).
/* compiledCSS.chunk.css */
.some-class {
background-color: white;
border: 1px solid black;
margin: 0;
}
.another-class {
background-color: black;
padding: 3px;
}
A similar SO question I found in Googling for a solution:
react-scripts build ignores conditional css imports

Answer 1

I'm immediately answering my own question because I've already solved it, but also because I had a bit of a Homer Simpson "d'oh!" moment when I finally found the solution after scouring Google and documentation far and wide. This is why I posted the question, in hopes of saving other people that time searching for a solution that wasn't super obvious (and doesn't seem to be addressed anywhere that I have found).
So I didn't realize that the import statement had a dynamic importing functionality via import(). So the solution was simply to replace require() with import().
/* config.js */
const cssEnv = 'desktop';
import(`./styles/${cssEnv}.css`);
Now when we build our production build, we get the correct compiled CSS
/* compiledCSS.chunk.css */
.some-class {
background-color: white;
margin: 0;
}
So my best guess as to what is happening is that react-scripts treats require() differently than import(), where providing a template string with variables to require() causes the variables to act like wildcards (*). So when we were building the production build earlier,
require(`./styles/${cssEnv}.css`);
got treated like
require(`./styles/*.css`);
Hence all css files in the styles folder were compiled together.
I'm not entirely sure of the intimate inner workings of what is happening here, so I wouldn't mind getting input from folks like Dan Abramov and others who might better understand what exactly is happening to clarify this.