Invisible Unicode Character 'FORM FEED (FF)' (U+000C) is always injected into image-set CSS rule

[voronianski]

Current behavior:

After upgrading to React v18.2.0 and Emotion v11.10.5, Emotion components started to insert an invisible character inside CSS image-set and -webkit-image-set rules. It always appears in the first url() after first & character.

Inserted character looks like some sort of invisible space and breaks CSS. Examples of broken CSS -

To reproduce:

Use this link - https://codesandbox.io/s/confident-water-tsbbj6?file=/src/App.js

1. Check WorkingExample in DevConsole and notice that backround-image CSS is correctly recognized by browser
   

2. Check BrokenExample in DevConsole and notice that backround-image CSS in invalid -

You can copy-paste CSS from BrokenExample into some CSS Validator to see this invisible char -

Expected behavior:

background-image with image-set and -webkit-image-set rules work as expected.

Environment information:

• react version: 18.2.0
• @emotion/react version: 11.10.5
• @emotion/styled version: 11.10.5

[voronianski]

After debugging the CSS string, it looks like 0c unicode char is injected -

Unicode Character 'FORM FEED (FF)' (U+000C) https://www.fileformat.info/info/unicode/char/0c/index.htm

Found out by pasting CSS string into - https://www.soscisurvey.de/tools/view-chars.php

[Andarist]

This is the problem within the parser that we use. We are investigating this here: thysultan/stylis#307

[voronianski]

@Andarist do you think there‘s a way to workaround it somehow, until it gets fixed?

[Andarist]

You could write a Stylis plugin that would replace &\f with & in declaration values and use it with createCache+CacheProvider