trim magnet
I have totally bog-standard CSS. Nothing weird. I've used it before without problems. Now I tried adding layers to it using @layer and started noticing that, e.g., a selector from my reset will go from this:
*,
*::before,
*::after {}
To this in compiled output (using run dev):
*:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), *:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after, *:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before {
viscid tulipBOT
Hi @trim magnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information provided in the extracts, it seems like you're encountering a bug that was reported in Astro version 1.0.5. This bug is related to the improper escaping of the \ character in CSS when using the @layer directive. Astro incorrectly converts these to :not(#\\#), which is not the same thing as the selector no longer matches.
Here is the link to the reported issue for more details: Github Issue #4339 (https://github.com/withastro/astro/issues/4339)