- 
          
- 
                Notifications
    You must be signed in to change notification settings 
- Fork 27.1k
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-widthandborder-color.
- Programmatically set border-widthto 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.