← All tasks
javascriptemotion-js/emotion #2943Not a task: not reproduced

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

envgap__emotion-js__emotion-2943

01 / FAILURE SIGNATURE

As reported upstream

No identifying execution failure has been captured.
Not a benchmark task.
  • In a clean container the reported failure did not reproduce, or the known fix did not make the project run.

02 / ENVIRONMENT RECIPE

Base commit
149194e6969b9a6a7e091fb6d9d6e05fd1509f63
Manifest
packages/babel-plugin/package.json
Reproduce
Awaiting issue-specific recipe
Run under trace
Awaiting a meaningful runtime command

03 / ORIGINAL ISSUE TEXT

emotion-js/emotion #2943 · read the original issue
<!--

    Thanks for your interest in the project.

    Please make sure that you are familiar with and follow the Code of Conduct

    for this project (found in the CODE_OF_CONDUCT.md file).



    Please fill out this template with all the relevant information so we can

    understand what's going on and fix the issue.



    I'll probably ask you to submit the fix (after giving some direction).

    If you've never done that before, that's great! Check this free short

    video tutorial to learn how: http://kcd.im/pull-request

-->



**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 -



![image](https://user-images.githubusercontent.com/974035/202289205-6425a8db-12e6-440a-8142-15ad12310b50.png)



**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

![image](https://user-images.githubusercontent.com/974035/202288320-c81988da-0473-4734-b67c-238e3e94dc72.png)



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



![image](https://user-images.githubusercontent.com/974035/202289795-4666388b-7d5b-4605-b66f-07246da25bc1.png)



You can copy-paste CSS from BrokenExample into some [CSS Validator](https://www.cssportal.com/css-validator/) to see this invisible char -



<img width="915" alt="image" src="https://user-images.githubusercontent.com/974035/202288939-23c75dc3-4bf6-4abd-9fc5-1051aa30a141.png">





**Expected behavior:**



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



**Environment information:**



<!-- Provide the `react` and `@emotion/*` packages versions -->



- `react` version: 18.2.0

- `@emotion/react` version: 11.10.5

- `@emotion/styled` version: 11.10.5

Continue on GitHub ↗

04 / LABELS

Labels from the report text only; not yet run

No supported category has been assigned.

Label rules and the text that matched
[]