solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
32.55k stars 932 forks source link

Custom selectors not working only on solidjs ( unocss ) #1449

Closed siduck closed 1 year ago

siduck commented 1 year ago

Describe the bug

hi there, Im using unocss and i use this syntax to add classes for all span elements in a div [&_span]:bg-red , this will add bg-red to all span elements of the parent div

that syntax works in unocss playground

Where as it doesnt work when used with solidjs only

https://codesandbox.io/s/weathered-bush-nhq6ov?file=/src/index.jsx

Some examples provided by @high1 ( stackbiltz examples, look at the siduck text color, its not highlighted in only solid-js )

https://stackblitz.com/edit/github-4lynj1?file=src%2FClockFace.svelte%3AL69 ( svelte ) https://stackblitz.com/edit/github-hnrwfp?file=src%2FClockFace.tsx%3AL66 ( voby ) https://stackblitz.com/edit/github-prvqmz?file=src%2FClockFace.tsx%3AL71 ( solidjs )

@high1 affirmed me that this was a bug in solid-js, so made an issue here!

Your Example Website or App

https://codesandbox.io/s/weathered-bush-nhq6ov?file=/src/index.jsx

Steps to Reproduce the Bug or Issue

https://codesandbox.io/s/weathered-bush-nhq6ov?file=/src/index.jsx

https://github.com/eeek76/uno

Expected behavior

Custom selectors should work with unocss.

Platform

All browsers

ryansolid commented 1 year ago

I don't really understand enough what unocss is doing to speak to this. But inspecting the elements I don't see any difference just the CSS rules missing. I grabbed the HTML from the working example and inserted it in the DOM in the Solid example and it didn't work, and grabbed the HTML from Solid example and dropped it in the Svelte example and it did work.

So this points to something in how unocss detects styles...

Oh I figured it out. Put uno plugin first in vite.config. It must be reading off the compiled template strings and not be able to parse the escaped ampersands if you process after our transform.