twind (next) SSR versions not parsing pseudo selectors

Hey there! I was doing some testing in both SSR (Remix) and client-side locally and noticed pseudo selectors like ::before are not being parsed correctly:

Remix example

https://codesandbox.io/s/cool-dawn-r8gm4?file=/app/routes/index.tsx

In app/routes/index.tsx I’ve added before:content-['test'] but it’s not showing up next to the title

Client side example

https://codesandbox.io/s/ancient-thunder-uidxu

In index.html I’ve added before:content-['test'] and it shows up correctly next to the title.

---

Is this potentially something to do with the inline function? The VS Code extension (which I think I remember reading elsewhere that it needs to be updated) is parsing this as:

before:content-['*']
.before\:content-\[\'\*\'\]:before{align-content:['*']}

So this may be unrelated, but wanted to mention that as well. Are there any examples of using SSR with the “library” mode; as I’m curious if the inline function would be used in that case. Thanks as always!

[sastan]

If you don’t want to process class names than do not call consume. Only use stringify.

[danielweck]

For what it’s worth, I tested this edge case in my Preact app using JSX class="before:content-['*']" as well as class={"before:content-['*']"}, no problems:

.before\:content-\[\'*\'\]:before{--tw-content:"*";content:var(--tw-content)}

Mind you, this is with Preact WMR so the JSX is compiled to htm, then executed at pre-rendering time (SSG) through my custom Preact options.vnode() interceptor … so quite a different dataflow to Remix SSR.