:global selector in css nesting

[FrancoJavierGadea]

Astro Info

Astro                    v4.5.16
Node                     v20.11.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react

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

No response

Describe the Bug

This examples work fine

.container {

    & :global(h1) {

        color: #fff;
    }
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {
    & h1 {
        color: #fff;
    }
}

.container {

    & :global(h1) {
        color: #fff;
    }

    span {}
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {

    & h1 {
        color: #fff
    }

    span {}
}

This examples not work

.container {

    :global(h1) {

        color: #fff;
    }
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {
    :global(h1) {
        color: #fff;
    }
}

.container {

    span {}

    & :global(h1) {

        color: #fff;
    }
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {
    span {}

    & :global(h1) {
        color: #fff;
    }
}

What's the expected result?

.container {

    :global(h1) {

        color: #fff;
    }
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {
    h1 {
        color: #fff;
    }
}

.container {

    span {}

    & :global(h1) {

        color: #fff;
    }
}

/*Output css*/
.container[data-astro-cid-j7pv25f6] {
    span {}

    & h1 {
        color: #fff;
    }
}

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-8wzk1y?file=src%2Fpages%2Findex.astro

Participation

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

[bluwy]

I'm not sure if this is a compiler issue since it may not handle CSS nesting syntax well. This problem should be able to be worked around by setting up postcss-nesting or postcss-nested in a postcss.config.cjs file though.