Fix handling of CSS `content` property

[dddlr]

Fixes #1650, where quotes are incorrectly added around the value in situations like content: url(...) and content: counter(...)

Thanks to @mattcompiles for suggesting this approach to fixing the bug.

Based on https://github.com/vanilla-extract-css/vanilla-extract/blob/a623c1c65a543afcedb9feb30a7fe20452b99a95/packages/css/src/transformCss.ts#L266

For the curious:

• here is how Emotion handles the content property: https://github.com/emotion-js/emotion/blob/f4640f6a7cbe77f790e07706b287cb29342fd0ea/packages/serialize/src/index.js#L83
  • Emotion throws an error if a value does not have extra quotes surrounding it and it's not a recognised CSS value (e.g. url(...), content(...), initial, none...)
• styled-components v6 never adds quotes around the content property (and I think styled-components v3 too)

---

• [x] Add tests
• [x] Check for potential regressions in atlassian codebases
• [x] Check how this handling differs from styled-components
• [x] Add changeset
• [x] Check why vanilla-extract checks whether the value is an array or not??

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 7dabece2823a2150e247be7fd8902fb44797f393

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ---------------------- | ----- | | @compiled/babel-plugin | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mattcompiles]

Nice one @dddlr I'd consider porting the test across here as well. We based most of ours off the examples on MDN.