cssnano calc will break the Radio style

[djyde]

It's not a bug. But I spend some time figure out how thing was happend. Hope this issue could save someone's time.

I found when I cssnano my css, the Radio will become:

And I tried to disable some cssnano optimization option and finally figure out is the calc rule break this.

Different part:

[snowystinger]

We've had some issues with cssnano in the past, you might try a different version as well. Or the upstream postcss-calc.
I don't recognize this particular one, it might be helpful if you could log a bug with one of those projects

[devongovett]

😉 https://github.com/adobe/react-spectrum/blob/main/cssnano.config.js

[mischnic]

underlying postcss-calc issue: postcss/postcss-calc#107

[itaylor]

Might be worth noting that this happens to apps built using create-react-app out of the box, but only in production mode, not developer mode. I tried, but couldn't find a way to change the config without ejecting the create-react-app config and modifying the webpack configuration.

If you're using cra want to work the bug, around first yarn eject your create-react-app, then modify the config/webpack.config.js file. Change the settings for the default preset of cssProcessorPluginOptions under the OptimizeCSSAssetsPlugin to include calc: false,

Here's what my fixed version of that section looks like:

cssProcessorPluginOptions: {
  preset: ['default', { calc: false, minifyFontValues: { removeQuotes: false } }],
},

[mischnic]

I've opened a PR for postcss-calc to fix this: postcss/postcss-calc#114

[mischnic]

I've just verified that this is fixed with cssnano 7.0.4. Bump your lockfile