Create-react-app: CSS get bundled which breaks with custom properties

[GrimLink]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[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

[GrimLink]

@sidonaldson yes, that would probably be the best way to handle this issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[GrimLink]

Is anyone of the CRA team looking at this?

[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

[ianschmitz]

I've merged #8106, but i don't believe that will fix this issue.

[sidonaldson]

@ianschmitz indeed. The best possible fix would be the ability to override the CSS minification defaults via package.json. Does CRA import overrides via package.json for any other customisation?

[ianschmitz]

We generally don't. I'd prefer if we find a better default configuration that solves this issue instead of exposing postcss etc.