Description
Preface
First of all, I'd like to apologize if this issue is not related to create-react-app
itself. Please redirect me to the proper package if it isn't. I am not particularly knowledgeable when it comes to packages and setup.
Describe the bug
When creating an optimized build (npm build
) I get erroneous CSS optimization (I assume "something" is optimizing incorrectly, but I have no idea what). This does not reproduce when simply running locally through npm start
.
This is the CSS in question:
.selector {
border-width: var(--border-width);
border-color: var(--border-color);
}
it gets optimized into:
.selector {
border: var(--border-width) solid var(--border-color);
}
which may seem correct at first, except border-width
can be a set of values for the different "sides" of the border, and that does not work with the shorthand. (border: 20px 0 30px 0 solid red
is not valid, for instance). So the properties should not be getting aggregated. At least as far as my understanding goes.
Environment
current version of create-react-app: 3.4.1
System:
OS: Windows 10 10.0.19041
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 8.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.19041.1.0
Internet Explorer: Not Found
npmPackages:
react: ^16.12.0 => 16.13.1
react-dom: ^16.12.0 => 16.13.1
react-scripts: 3.4.1 => 3.4.1
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
In "description". Essentially:
- Create a CSS class that contains variable
border-width
andborder-color
. - Programmatically set
border-width
to represent multiple "sides" (10px 20px 0 30px
). - Run
npm start
. Observe correct CSS. - Run
npm build
. Observe incorrect CSS.
For brevity, here's how to do step 2:
const rootStyle = document.documentElement.style;
rootStyle.setProperty("--border-width", "10px 20px 0 30px");
Reproducible demo
You can find my published, erroneously optimized page here:
https://protos.now.sh
Inspect any "input" and you'll see the CSS is incorrect.