Nested styles breaking astro scoped styles

[TahaCoder43]

Astro Info

Astro                    v5.12.0
Node                     v23.6.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/svelte
                         astro:db
                         @astrojs/db/file-url

If this issue only occurs in one browser, which browser is a problem?

I have only tried Microsoft edge

Describe the Bug

CSS nested styles globally style all child components as well

div {
    p {
        color: blue;
    }
}

for example this would effect <p> even if it is in a child component

What's the expected result?

CSS nested styles should only effect elements inside component

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-ecppehajs-xkbaunx4?file=src%2Fpages%2Findex.astrohttps://stackblitz.com/edit/withastro-astro-ecppehajs-xkbaunx4?file=src%2Fpages%2Findex.astrohttps://stackblitz.com/edit/withastro-astro-ecppehajs-xkbaunx4?file=src%2Fpages%2Findex.astrohttps://stackblitz.com/edit/withastro-astro-ecppehajs-xkbaunx4?file=src%2Fpages%2Findex.astrohttps://stackblitz.com/edit/withastro-astro-ecppehajs-xkbaunx4?file=src%2Fpages%2Findex.astro

Participation

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

[ascorbic]

I've moved this to the compiler repo, but there is a simple workaround: change the declaration to use the nesting selector &, which is equivalent, and does work:

div {
    & p {
        color: blue;
    }
}