React: Conditionally required CSS file always included in build - reactjs

Question

For testing purposes I include a CSS file that disables animation for certain CSS class, this is used so that differencify tests do not produce spurious diffs. This CSS file is only included if certain environmental variables are set:
if (process.env.REACT_APP_BACKEND_URL === 'localhost') {
// Use a fixed clock against local backend
moment.now = () => 1558396800000;
// Disable animations when running localcd to avoid diff on visual tests
if (process.env.REACT_APP_DISABLE_ANIMATIONS === 'true') {
require('./disable-animations.css');
}
}
ReactDOM.render(<App />, document.getElementById('root'));
This works perfectly when running locally, the animations are disabled when backend is localhost and enabled when running against other backends. But for some reason the animations are also disabled in the deployed code that is built using react-scripts build. moment.now() is not overriden in the built code, so it seems that react-scripts build will include all resources passed to require() regardless of their conditionality? Is there a way to avoid that? Is there a better way to achieve this?

Answer 1

if (process.env.REACT_APP_DISABLE_ANIMATIONS === 'true') {
require('./disable-animations.css');
}
In the above if condition, the evaluation is dynamic, the compiler does not know this is a compile time directive, it will only know to evaluate at runtime.
If using webpack there is a way to tell the compiler this is a build time constant, an example of that is the process.env.NODE_ENV, with this the compiler will evaluate this value at build time and not runtime. It does this by replacing what's in NODE_ENV with it's value, so for example.
if (process.env.NODE_ENV !== 'production') {
require('./disable-animations.css');
}
During production the above will actually get converted to ->
if ('production' !== 'production') {
require('./disable-animations.css');
}
As such the require('./disable-animations.css'); will be excluded from build.
If you have more complicated build time constants you want to use, there is also the https://webpack.js.org/plugins/define-plugin/ , with this you can have even finer control than just development & production, eg. you might want a production build with logging enabled, etc.

Answer 2

All require() will add static files in the final build, whether they are there on true or false conditions. I would say that the workaround could be such that you use StyleSheet.create() instead and make CSS dynamic in there. You should be able to control any CSS property logically, and even output an empty StyleSheet object in the end, thus not including anything unrelated in the build.
From https://facebook.github.io:
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
In your case it could look like this:
const isIncluded = true;
const styles = isIncluded ? StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
}) : null;
EDIT: While for the majority of cases this will be true, as #Keith has pointed out, "...that's not strictly true, eg.. if you did if (false) { require("something"); } the compiler will know this is dead code an will exclude it...". In other words, in the cases where compiler will be sure that this code will never be reached, require() will not be included in the build