#\# being improperly escaped in CSS

[mayank99]

What version of astro are you using?

1.0.5

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Windows / Stackblitz

Describe the Bug

I'm trying to use @csstools/postcss-cascade-layers which works by generating selectors that look like this: :not(#\#). Astro incorrectly converts these to :not(#\\#) which is not the same thing (the selector no longer matches).

The same thing happens in both dev server as well as prod build.

Compare with vite which can handle it correctly: https://stackblitz.com/edit/vitejs-vite-7cdd3b?file=style.css,vite.config.js,index.html

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ja8xka?file=src%2Fpages%2F_style.css,src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

I believe this is a duplicate of withastro/compiler#502