CSS string values do not work with extracted CSS

[dslovinsky]

Issue:

When extracting styles, quotes in CSS strings (ex. for content or font-family) seem to get converted to their HTML entity versions + a newline, which creates invalid CSS. This does not happen client-side, so the styles will still work via a duplicate class created client-side, but this clutters up the style sheet.

Steps to reproduce:

Extract CSS as per docs. Then,

const Control = styled('div')({
  fontFamily: '"Gill Sans", sans-serif',
  '&::after': {
    content: '"asdasd"',
  },
});

const Test = () => <Control>Control</Control>;

Output:

[cristianbote]

Hey @dslovinsky thanks for opening this issue. Interesting behaviour. Looking into it to see what's happening.

[cristianbote]

@dslovinsky I went ahead and tried to replicate this issue with a the official example of goober with NextJS so I can see if the extract function is messing up and I can't see any weird escaping going on. Here's the link with the example https://stackblitz.com/edit/github-sfbznb?file=pages%2Findex.tsx.

Would you be able to re-create the issue in a codesandbox, stackblitz, or anywhere and share it here? That would be helpful

[dslovinsky]

@cristianbote Nevermind, found it. I was trying to avoid using dangerouslySetInnerHTML and passed css into the style tag as a child. Since that worked fine until now I left it that way then forgot. This issue doesn't happen when using dangerouslySetInnerHTML, so we can close this.

Out of curiosity, what is the purpose of the concatenated space before css?

[cristianbote]

Out of curiosity, what is the purpose of the concatenated space before css?

😅 that's a little trick that goober makes use of to skip having to waste bytes on creating an textNode instance and appending it to the style tag.