[Bug]: Update minified css file @charset at-rule

tudorpopams commented 1 year ago

Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

The currently minified fabric.min.css file does not specify the @charset at-rule correctly based on the official documentation (one, two). This is causing issues for some of our icons, as specified in #27777 .

Have you discussed this feature with our team

@justslone, @jurokapsiar

Additional context

No response

Validations

[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

microsoft-github-policy-service[bot] commented 8 months ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.

Mhbuur commented 7 months ago

Just want to mention that I experience what seems to be the same issue. It is discussed here: https://github.com/microsoft/fluentui/discussions/30145

So far I haven't been able to reproduce the issue if I add the encoding info manually to my compiled css file (I'm using an older node-sass version).

Hotell commented 5 months ago

this has a workaround. lowering the priority to Low. do we still plan to address this @tudorpopams ?

tudorpopams commented 5 months ago

Yes, I think @marcosmoura already did some work on this. Can you please update?

marcosmoura commented 3 months ago

I couldn't find the fix for it yet. I planned the fix for the next iteration.

Mhbuur commented 3 months ago

Please don't give up on this one - this problem still lingers. @Hotell what is the workaround you refer to? @marcosmoura why not simply correct the charset instruction - is it the minification process that introduces the problem?

I have still not found a consistent way to reproduce the scenario where the browser auto-detects a wrong encoding. I suspect it has to do with either load order due to changes in response timings or change of load source due to cache expires. The icons show up fine most of the time, then suddently start to break and continue to do that for x number of refreshes, and then at some point fall into place again.

I'd like to add that the issue seem to relate to memory caching in the browser: the problem always goes away after a browser restart, even though it is exactly the same css file being served. Either the cached version is mutated in a way that corrupts/changes the content-type/encoding, or something changes the way the css encoding auto detection mechanism work (utf-8 should be fallback, https://www.w3.org/TR/css-syntax-3/#input-byte-stream).

A similar problem is discussed here: https://github.com/GoogleChrome/lighthouse/issues/10060

microsoft / fluentui