Incorrect CSS shorthand optimization.

[thewaver]

Preface
First of all, I'd like to apologize if this issue is not related to this package. I came here from 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 run 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: 4.0.3
System:
OS: Windows 10 10.0.19042
CPU: (8) ia32 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 14.17.0 - C:\Program Files (x86)\nodejs\node.EXE
Yarn: Not Found
npm: 7.16.0 - C:\Program Files (x86)\nodejs\npm.CMD
Browsers:
Chrome: 91.0.4472.77
Edge: Spartan (44.19041.964.0), Chromium (91.0.864.41)
Internet Explorer: Not Found
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce
In "description". Essentially:

• Create a CSS class that contains variable border-width and border-color.
• Programmatically set border-width to represent multiple "sides" (10px 20px 0 30px).
• Run npm start. Observe correct CSS.
• Run npm run build && serve -s 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

Use MINIMAL as the "theme style", then inspect any "input" and you'll see the CSS is incorrect.

[KKoukiou]

You need to check what's the version of cssnano you 're using; I think you hit this bug: cssnano/cssnano#1051

It was fixed on cssnano@5.0.4 by cssnano/cssnano#1057

[thewaver]

Sorry for the delay - somehow I did not get notified of your reply.

My project was set up using create-react-app - by looking at my package-lock,json file it appears that the currently installed version is 4.x

I guess that I should contact the creators of create-react-app and ask them to upgrade.

[thewaver]

create-react-app folks have been absolutely silent about this.
Is there some way that I can update the deps tree manually on my end? (i.e. force a higher version of this package to be used without breaking compatibility). I don't see webpack explicitly referenced inside package.json.

I've tried using npm-force-resolutions and using "postcss-merge-longhand": "^5.0.2" - but, as expected, this breaks compatibility with postcss (and I guess cssnano in general...

[KKoukiou]

@thewaver, another WA is to add this rule in the webpack config file in the mini-css-webpack-plugin configuration:

             new CssMinimizerPlugin({                                            
                 minimizerOptions: {                                             
                     preset: ['default', { mergeLonghand: false }]               
                 }                                                               
             })   

However, , I see 5.0.7 is already on package-lock.json https://raw.githubusercontent.com/facebook/create-react-app/main/package-lock.json

[thewaver]

Sorry for the late reply. Somehow GH doesn't notify me of responses. Will have to sort that out at some point.

I don't have access to webpack - I guess I need to eject for that. Haven't done it before, but I suppose that I can figure it out.

What I can't figure out is that I just created a new project using CRA, checked that all packages inside package.json were up-to-date (most importantly react-scripts, and after all that, the version of cssnano in my package-lock.json is 4.11

I am using the typescript template, in case that bares any relevance at all. Not really sure what other info I can provide.