Encountering "SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.f10oniif{background-color:rgba(255, 255, 255, 0.5);};}'." after updating the Edge browser to version 129.0.279.52.

[imechZhangLY]

Bug description

We are experiencing an issue where certain CSS styles are not functioning correctly in our web application after updating the Edge browser to version 129.0.279.52. We have identified a “SyntaxError” occurring when calling insertRule(). The error appears to be caused by a CSS rule with multiple closing braces, such as “.f143d684{width:calc(100% - 6.9rem);};}”.

System information

Edge: 129.0.279.52 @griffel/react: 1.5.25

Reproduce steps

You can reproduce this bug by downloading https://github.com/imechZhangLY/griffel-error-demo and following the instructions.

1. Build the project by running npm run build.
2. Open index.html in the dist folder using Edge version 129.0.279.52 or higher.
3. You will see the following error in the console. If the error does not appear immediately, try refreshing the page.

[layershifter]

As I see, it's not related to Griffel itself. Our code generates proper CSS:

---

I checked the repro and it seems to be related to the used minifier (UglifyJs), as once this line is removed:

https://github.com/imechZhangLY/griffel-error-demo/blob/d036145899a49a09f4564c939779b165ae6d3ec7/webpack.config.js#L41

There are no errors anymore. Considering that UglifyJs should not be used in production, closing the issue.

[ling1726]

UglifyJS is no longer maintained and should not be used in production https://github.com/mishoo/UglifyJS/issues/3156#issuecomment-392943058