Runtime error with quoted content + !important

[ZachAtOneBrief]

Current behavior:

Can't use !important with quoted content in the css prop. Throws a runtime error about the quoted content

You seem to be using a value for 'content' without quotes, try replacing it with `content: '""•" !important"'`

To reproduce:

Codesandbox repro
https://codesandbox.io/p/sandbox/emotion-issue-template-forked-r5ld57?file=%2Fsrc%2FApp.tsx%3A48%2C10

• css strings work e.g.

className={css`
    b:before {
      content: "•" !important;
    }
  `}

• js to css crashes e.g.

css={{
    ["b:before"]: {
      content: '"•" !important', // This crashes
      display: "inline",
      marginRight: "1ch",
    },
  }}

• The suggested fix isn't actually valid content, browser rejects it
• Found a workaround of using a variable to trick the quote lint

content: "var(--bullet) !important"

Expected behavior:

Doesn't crash + produces valid content with the quoted content and !important like

Environment information:

• react version: 17/18
• @emotion/react version: 11.11.4