Initial render failing with NextJS 14 & Styled Components (latest)

[chrisivo]

Everything appears to work fine when in "dev" mode. However, when deploying using npm export, have noticed that any Tailwind classes that contain certain characters in the CSS seem to fail unless they are "escaped". The CSS that is sent to the browser in the initial page load appears to be fine (if you click on the page in the "Network" tab of Chrome DevTools, it appears correctly). However, there's a post-load styling applied using JS whereby any Tailwind CSS that appears to be unescaped becomes corrupted.

Any styling which then appears in a createGlobalStyle stylesheet after such Tailwind classes are used also fails to present correctly.

Have forked the twin.macros example and added a demo of this happening here:

https://github.com/chrisivo/twin.examples/tree/master/next-styled-components-typescript

To use, open the site with DevTools open and therefore the cache disabled. The page does appear to render correctly on subsequent page reloads with a cache enabled. However the first load of the page seems to corrupt once the JS kicks in.

I think I'm on the right track with this escaped lark. Would try implement a fix myself if I had more time to figure out how twin.macro & Styled Components worked in the background...! Thanks for any time you can spare looking into this.