Description
With react-scripts build
some css longhand properties get merged to a shorthand.
This is not always the desired result and is breaking with css custom properties.
It would be nice if we could disable some compression options on a react build via a config.
Example also with the calc minification from css nano
Or this behavior gets fixed.
Input:
.some-class {
border-width: var(--border-width, 0 0 1px);
border-style: var(--border-style, solid);
border-color: var(--border-color, #eee);
}
Becomes this:
.some-class {
border:
var(--border-width, 0 0 1px)
var(--border-style, solid)
var(--border-color, #eee);
}
Expected:
.some-class {
border: var(--border-style, solid) var(--border-color, #eee);
border-width: var(--border-width, 0 0 1px);
}
Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Binaries:
Node: 10.16.0 - /usr/local/opt/node@10/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/opt/node@10/bin/npm
Browsers:
Chrome: 78.0.3904.34
Firefox: Not Found
Safari: 13.0.1
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: ^3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: 3.0.1