Cannot use the content: element(name) CSS rule

[rymarren]

Current behavior:

This error happens when using the MUI GlobalStyles component on @mui/material=5.10.4. Let me know if I should instead file a bug for the MUI folks, but it seems the root issue is coming from emotion.

When using the content: element(name) CSS property in an EmotionGlobal component, I am getting the error Uncaught Error: You seem to be using a value for 'content' without quotes, try replacing it with 'content: '"element(name)"''

To reproduce:

Example: https://codesandbox.io/s/emotion-issue-template-forked-sqqrsw?file=/src/App.tsx

1. Use the emotion Global component to try and render the following:

   <Global
        styles={{
          "@page": {
            "@top-center": {
              content: "element(name)",
              textAlign: "left"
            }
          }
        }}
      />

Expected behavior:

For context, this little used part of CSS is part of the CSS Paged Media standards. The @page rule is defined in the css-page-3 spec, and the content: element(name) rule is defined in css-gcpm-3.

A workaround is to just pass a string to the Global component. This appears to bypass some validation added in this PR: #1435 (comment). This isn't great since we lose type checking and linting, which makes it hard to edit the CSS.

Would be great to remove that check or perhaps change it to accept an element() function as well.
Environment information:

• react version:
• @emotion/react version:

[Andarist]

PR is up: #2896

[rymarren]

Thanks for the fast turn around!