Emotion SWC Plugin - Spaces between expressions are being stripped

[JohnDaly]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:34:37 PST 2022; root:xnu-8020.101.4~2/RELEASE_X86_64
Binaries:
  Node: 14.17.0
  npm: 6.14.13
  Yarn: 1.19.1
  pnpm: N/A
Relevant packages:
  next: 12.1.1
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When using Emotion with SWC, spaces between template strings expressions are being stripped. This can cause invalid CSS to be generated.

Expected Behavior

There should be spaces preserved between expressions, to ensure that valid CSS is generated

To Reproduce

Input

const unitNormal = '1rem';
const unitLarge = '2rem';

const Example = styled.div`
  margin: ${unitNormal} ${unitLarge};
`;

Output

var unitNormal = '1rem';
var unitLarge = '2rem';
var Example = /*#__PURE__*/ (0,_emotion_styled__WEBPACK_IMPORTED_MODULE_0__["default"])("div", {
    target: "e1s94g990",
    label: "Example"
})("margin:", unitNormal, unitLarge, ";");

This results in the following CSS:

.next-19a10xq-Example {
    margin: 1rem2rem;
}

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.