I have the following sample SCSS code for a React application:
h1 {
font: 500 clamp(3rem, 6.5vw, 10rem) "Ubuntu", "sans-serif";
}
Which works as expected when I run npm start. When I build and serve the app, however, the CSS stops working. The font family, weight, and size get reverted to the defaults. Inspecting the element and checking the styles reveals that this line is crossed out as an Invalid Property Value.
I have found out why this happens. In production, it seems like an extra , is added between clamp() and Ubuntu:
h1 {
font: 500 clamp(3rem, 6.5vw, 10rem), "Ubuntu", "sans-serif";
}
This didn't happen before I added the clamp function and I believe it is due to a bug in React's CSS minifier. I broke apart the font shorthand into its individual font properties, which solved the issue. However, I want to know if there is another way to get around this.