Specific style causes infinite loop

Current behavior:

When I add a the style <div css={{ width: 'stackWidth' }} />, the app crashes in an infinite loop and the error

RangeError: Maximum call stack size exceeded

To reproduce:

1. Go to this Sandbox: https://codesandbox.io/s/emotion-issue-template-forked-st77g?file=/src/index.js:464-572
2. Uncomment JSX on line 18 to 20.
3. Error should appear in browser tab within Sandbox

Expected behavior:

The (incorrect) CSS width: stackWidth; should be applied to the element without throwing an error.

Environment information:

• react version: v16.8.6 but seems to happen with all React versions
• @emotion/react version: v11.1.1

More info to bug:

The infinite loop is caused by the stylis prefixer. The prefix function is called with the value width:stackWidth; and length 5 which results in the hashed value 8116. In the switch statement in the case of 8116 the prefix function is called again, causing an infinite recursion.

Background:

The issue came up while testing a component using (a yet unreleased version of) Theme UI.

The Theme UI library uses Emotion behind the scene and allows to use styles like <div sx={{ width: 'stackWidth' }} /> where the CSS value for the width will be resolved through a theme put into the Emotion context, so that Emotion receives <div css={{ width: 560 }} />.

The bug came up in a test where a component using Theme UI was rendered. This component was not wrapped in a theme provider, so the value 'stackWidth' could not be resolved and Emotion received <div css={{ width: 'stackWidth' }} />.

[Andarist]

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

[Andarist]

Thank you for the detailed repro case! I will forward this issue to Stylis - not yet sure how to best handle this given the Stylis generally assumes valid CSS and it cares about its bundlesize greatly.