: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.

[matthewp]

This seems to work: https://stackblitz.com/edit/withastro-astro-pl9vyx?file=src%2Fpages%2Findex.astro

[matthewp]

New reproduction: https://stackblitz.com/edit/withastro-astro-3qrvob?file=src%2Fpages%2Findex.astro

• Discussion: How do postcss-nesting work now with the 2024-02 edition? csstools/postcss-plugins#1474

[FrancoJavierGadea]

New strange behavior:

Stackblitz link

Issue:

I'm using CSS nesting in an Astro project, and I've noticed an inconsistency in the scoped styles when using the & symbol.

Example:

When using the & symbol for nesting, the component's scoped styles are correctly applied in the transpiled CSS:

.Container-1 {
    /* Works fine with '&' */
    & p {
        font-size: 22px;
        color: red;
    }
}

/* Resulting CSS */
.Container-1[data-astro-cid-lntfltpf] {
    & p[data-astro-cid-lntfltpf] {
        font-size: 22px;
        color: red;
    }
}

However, if I omit the & symbol, the scoped style is lost, and the rule behaves as if it's in the global scope:

.Container-2 {
    /* Doesn't work without '&' */
    p {
        font-size: 22px;
        color: red;
    }
}

/* Resulting CSS */
.Container-2[data-astro-cid-c7xfxlmo] {
    p {
        font-size: 22px;
        color: red;
    }
}

Astro version: 4.15.12

[matthewp]

Triage bot, can you take a look at this and see if you can find a fix?

[github-actions]

I was able to reproduce this issue. All three bug variants described in the issue were confirmed on Astro 6.0.0-beta.11 (current main): (1) :global(h1) without & prefix is not unwrapped and appears as literal invalid CSS in the output, (2) & :global(h1) placed after a sibling rule is also not unwrapped, and (3) nested selectors like p { ... } without & are not scoped with the component's data-astro-cid-* attribute, effectively leaking to global scope.

Fix: I was able to fix this issue. A normalizeCSSNesting() PostCSS preprocessing step was added to packages/astro/src/core/compile/style.ts that ensures all nested CSS rules use the explicit & prefix before the compiler applies scoping, working around the compiler's CSS parser limitation. All 6 test cases now produce correct output and 109 existing CSS-related tests pass with 0 failures. View Fix

Cause: The @astrojs/compiler's CSS parser (parseListOfDeclarations() in the vendored esbuild CSS parser) only recognizes nested selector rules that start with the & token — all other tokens fall through to parseDeclaration(), which treats them as CSS property declarations, producing RBadDeclaration nodes that bypass scoping and :global() unwrapping entirely.

Impact: Any Astro user using CSS nesting syntax without the explicit & prefix in scoped <style> blocks is affected — their :global() selectors are not unwrapped (producing invalid CSS) and their nested selectors are not scoped (styles leak globally). This has been present since at least Astro 4.5.16 and affects all versions through 6.0.0-beta.11.

Full Triage Report

Triage Report: Issue #10721 — :global selector in CSS nesting

Issue Summary

Title: :global selector in css nesting
URL: #10721
Original Reporter's Astro Version: 4.5.16 (later confirmed on 4.15.12 in comments)
Tested Astro Version: 6.0.0-beta.11 (current main)

Description

Astro's CSS scoping does not correctly handle the :global() selector when used inside CSS nesting rules. Specifically:

1. :global(selector) without the & prefix inside a nested block is not processed — the literal text :global(...) remains in the output CSS, which is invalid CSS.
2. & :global(selector) when preceded by other CSS rules inside the same nesting block is also not processed correctly.
3. Nested selectors (e.g., p { ... }) without the & prefix don't get scoped with the component's data-astro-cid-* attribute, meaning they effectively leak to global scope.

Expected Behavior

• :global(h1) inside a nested CSS rule should be unwrapped to just h1 (no scoping attribute), regardless of whether it uses & prefix.
• Nested selectors without & should still be scoped with the component's data attribute.

Actual Behavior

• :global(h1) without & is left as-is in the output, producing invalid CSS.
• & :global(h1) after other rules is also left as-is.
• Nested selectors without & are not scoped.

Environment

• Astro: 6.0.0-beta.11 (workspace main branch)
• Node.js: v22 (CI environment)
• Platform: Linux (CI)
• Output: Static
• Adapter: None
• Package Manager: pnpm

Reproduction Steps

1. Create an Astro component with a <style> block containing CSS nesting.
2. Use :global() selectors inside nested CSS rules, both with and without the & prefix.
3. Build the project with astro build.
4. Inspect the output HTML/CSS.

Reproduction File

src/pages/index.astro contains six test cases:

/* Test 1: & :global(h1) - WORKS */
.test1 {
    & :global(h1) {
        color: red;
    }
}

/* Test 2: & :global(h1) with sibling span rule - WORKS */
.test2 {
    & :global(h1) {
        color: green;
    }
    span {}
}

/* Test 3: :global(h1) without & - BROKEN */
.test3 {
    :global(h1) {
        color: blue;
    }
}

/* Test 4: & :global(h1) after span rule - BROKEN */
.test4 {
    span {}
    & :global(h1) {
        color: purple;
    }
}

/* Test 5: nested p with & - WORKS (correctly scoped) */
.container-1 {
    & p {
        font-size: 22px;
        color: orange;
    }
}

/* Test 6: nested p without & - BROKEN (not scoped) */
.container-2 {
    p {
        font-size: 22px;
        color: pink;
    }
}

Build Output Analysis

The built CSS (extracted from dist/index.html) shows:

/* Test 1: CORRECT - :global(h1) unwrapped to h1, no scope attr */
.test1[data-astro-cid-j7pv25f6]{& h1{color:red}}

/* Test 2: CORRECT - :global(h1) unwrapped to h1, no scope attr */
.test2[data-astro-cid-j7pv25f6]{& h1{color:green}}

/* Test 3: BUG - :global(h1) NOT unwrapped, literal :global(h1) in output */
.test3[data-astro-cid-j7pv25f6]{:global(h1){color:#00f}}

/* Test 4: BUG - :global(h1) NOT unwrapped, span{} rule also dropped, & also dropped */
.test4[data-astro-cid-j7pv25f6]{:global(h1){color:purple}}

/* Test 5: CORRECT - p is scoped with data attribute */
.container-1[data-astro-cid-j7pv25f6]{& p[data-astro-cid-j7pv25f6]{font-size:22px;color:orange}}

/* Test 6: BUG - p is NOT scoped, missing data attribute */
.container-2[data-astro-cid-j7pv25f6]{p{font-size:22px;color:pink}}

Key Findings

Test	Input	Expected Output	Actual Output	Status
1	& :global(h1)	& h1	& h1	OK
2	& :global(h1) + sibling after	& h1	& h1	OK
3	:global(h1) (no &)	h1	:global(h1) (literal)	BUG
4	sibling + & :global(h1)	& h1	:global(h1) (literal)	BUG
5	& p	& p[scoped]	& p[scoped]	OK
6	p (no &)	p[scoped]	p (unscoped)	BUG

Diagnosis

Confidence: high

Root Cause

The bug is in the @astrojs/compiler package (v3.0.0-beta.0), specifically in the vendored/modified esbuild CSS parser. The CSS scoping and :global() unwrapping logic is implemented in Go, compiled to WASM. The relevant source files are in the compiler's repository at:

• lib/esbuild/css_parser/css_parser.go — parseListOfDeclarations() function
• lib/esbuild/css_printer/astro_features.go — printCompoundSelector() function (handles :global() unwrapping and scope attribute injection)

Detailed Explanation

The root cause is that the CSS parser's parseListOfDeclarations() function (which parses the contents inside a CSS rule block like .foo { ... }) only recognizes nested selector rules when they begin with the & token (TDelimAmpersand). All other tokens fall through to parseDeclaration(), which treats them as CSS property declarations.

This means:

1. Nested selectors without & are not parsed as selector rules. Per the CSS Nesting specification, nested rules can start with type selectors, pseudo-classes, etc., without requiring the & prefix. The compiler doesn't implement this.

2. :global(h1) without & is parsed as a bad declaration. The :global(h1) tokens pass through as raw text, never reaching the printer where :global() unwrapping happens.

3. p { ... } without & is also parsed as a bad declaration. Since it's never processed as a selector rule, the scope attribute is never injected.

4. & :global(h1) after another non-& rule: When a preceding rule like span {} is parsed as a declaration, the parser's value-recovery mode consumes everything that follows — including the subsequent & :global(h1) rule.

Fix

Approach: PostCSS Preprocessing in Astro

A normalizeCSSNesting() function was added to packages/astro/src/core/compile/style.ts that uses PostCSS to parse CSS and prepend & to any nested rule selector that doesn't already start with &. This runs after Vite's preprocessCSS but before the compiler applies CSS scoping.

Verification Results

All 6 test cases produce correct output after the fix. 109 existing CSS-related tests pass with 0 failures.

Test	Before Fix	After Fix	Status
3	:global(h1) literal	& h1	FIXED
4	:global(h1) literal	& h1	FIXED
6	p (unscoped)	& p[scoped]	FIXED

This report was made by an LLM. Mistakes happen, check important info.