Repository navigation
CSS get bundled which breaks with custom properties #7748
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
Activity
[-]CSS get bundle which breaks with custom properties[/-][+]CSS get bundled which breaks with custom properties[/+]stale commentedon Oct 28, 2019
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 commentedon Oct 30, 2019
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 commentedon Nov 1, 2019
@sidonaldson yes, that would probably be the best way to handle this issue
stale commentedon Dec 1, 2019
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 commentedon Dec 1, 2019
Is anyone of the CRA team looking at this?
sidonaldson commentedon Dec 6, 2019
I've added a PR to cure my specific issue but not to allow any overrides to be passed through #8106
ianschmitz commentedon Dec 9, 2019
I've merged #8106, but i don't believe that will fix this issue.
sidonaldson commentedon Dec 9, 2019
@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 commentedon Dec 9, 2019
We generally don't. I'd prefer if we find a better default configuration that solves this issue instead of exposing postcss etc.
GrimLink commentedon Jul 20, 2022
I am closing this issue, since I have moved from CRA to other options, also the lack of activity is not helping.
If someone is interested to pick this up, please reopen the issue or create a new one.