Closed dslovinsky closed 1 year ago
Hey @dslovinsky thanks for opening this issue. Interesting behaviour. Looking into it to see what's happening.
@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
@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
?
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.
Issue:
When extracting styles, quotes in CSS strings (ex. for
content
orfont-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,
Output: