CSS get bundled which breaks with custom properties

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® Core™ 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

[sidonaldson]

I’ve added a PR to cure my specific issue but not to allow any overrides to be passed through https://github.com/facebook/create-react-app/pull/8106

[sidonaldson]

I’m facing a similar issue too. Would be good to be able to override the nano defaults. In my case they are minifying the font-face declaration which then breaks fonts in IE11