CSS `content` property is dropped by twind/css directive

[tw-in-js]

CSS `content` property is dropped by twind/css directive

[lukejacksonn]

Good spot, I wonder why.. will look into it. Thanks for the repro 🙇

[lukejacksonn]

Ahh ok, I have seen this before somewhere.. the reason the content keys are being stripped is because the values should be wrapped in quotes and the translate process will strip these usually which makes it invalid CSS.

So the following works because the resolved value is '😊' as supposed to 😊:

const styles = css({
  "&::before": { background: "red", content: "'🙁'" },
  "&::after": { background: "green", content: "'😊'" }
});

[caminad]

Ah that makes sense! Now that you've explained it this feels like normal CSS-in-JS behavior, including in tailwindcss plugins. I'll open a PR to fix the examples in the docs.

[sastan]

The content property can have several values that are not in quotes. User that are using content must use a valid CSS value. In this case '"😊"' (notice the additional ' ).

We should adjust the examples.