Emotion 11: Width resolution in Firefox ("fit-content")

[matt-koevort]

Current behavior:

In Firefox, width: fit-content is not resolving to the expected width: -moz-fit-content when using Emotion 11.

To reproduce:

https://codesandbox.io/s/emotion-issue-template-forked-6bl2g?file=/src/index.js

1. (In Firefox) Inspect the text, the width of the container is not set.

Expected behavior:

The width of the the text container should be width: -moz-fit-content but instead get:

width: -webkit-fit-content;
width: -moz-content;
width: fit-content;

None of which work in Firefox.

Environment information:

• react version: 16.8.6
• @emotion/react version: 11.1.1
• @emotion/styled version: 11.0.0

[Andarist]

This is a duplicate of thysultan/stylis#245 and the fix is on the way thysultan/stylis#246 . Please follow those threads to be notified when it lands.

[Andarist]

The fix for this issue has just been released in stylis@4.0.4