The problem

The requirement to double-quote content values leads to hard-to-spot bugs in pseudo-elements.

For example, this code won't work:

<div
  css={{
    '::after': {
      content: ' ',
    }
  }}
/>

The required double quotes are tricky to spot and unintuitive:

  <div
    css={{
      '::after': {
-       content: ' ',
+       content: '" "',
      }
    }}
  />

Proposed solution

I think a backwards-compatible workaround for this would be adding a check like this for content values:

const wrapString = str => {
  const raw = str.match(/^['"].*?['"]$/) ? JSON.parse(str) : str;
  return JSON.stringify(raw);
}

wrapString('test'); //=> "test"
wrapString('"test"'); //=> "test"
wrapString(''); //=> ""
wrapString('""'); //=> ""

This would be a great DX improvement and would avoid surprising, hard-to-track bugs (anecdotally, I'm here because I spent an hour debugging this earlier). 😄

Alternative solutions

I imagine there are lots of different ways to solve this problem — the above is just the first thing that came to mind.