Handling of `:global` broken in Astro 7

[someonewithpc]

Astro Info

Astro                    v7.0.3
Vite                     v8.1.0
Node                     v24.15.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

With the following Sass in a scoped <style> block:

article  :global(> *) {
  flex-shrink: 0;
  flex-basis: 100%;
  scroll-snap-align: center;
}

With Astro 7, the rules inside :global get silently lost, while it works in Astro 6. For it to work in Astro 7, it must be rewritten as

article > :global(*) {
  flex-shrink: 0;
  flex-basis: 100%;
  scroll-snap-align: center;
}

What's the expected result?

Same behaviour in Astro 6 and Astro 7

Link to Minimal Reproducible Example

https://github.com/someonewithpc/astro-global-combinator-repro

Participation

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

[astrobot-houston]

• Reproduced: Yes
• Exploration: Yes — View branch
• Unit Test: Yes — packages/astro/test/units/compile/rust-compiler.test.ts
• Priority: P4: important. This is a regression from Astro 6 → 7 where valid, documented :global() syntax silently produces empty CSS with no error or warning. While a workaround exists (moving the combinator outside :global()), the silent data loss violates documented behavior.

The root cause is in @astrojs/compiler-rs (the Rust compiler introduced in Astro 7). When :global() contains a leading CSS combinator (>, +, or ~), such as :global(> *), the Rust compiler's CSS scoping logic silently drops the entire CSS rule — producing an empty <style> tag with no error or diagnostic. The previous Go-based compiler (@astrojs/compiler v4, used in Astro 6) handled all these cases correctly. This affects both plain CSS and preprocessed CSS (Sass/SCSS/etc.).

I found a potential fix for this issue. The fix adds a rewriteGlobalCombinators() step in Astro's style preprocessor (packages/astro/src/core/compile/style.ts) that rewrites :global(> *) → > :global(*) (and similarly for + and ~ combinators) before the CSS reaches the Rust compiler. This is semantically equivalent and the Rust compiler handles the rewritten form correctly.

Try this fix

You can test this fix right now without waiting for a release:

npm i https://pkg.pr.new/astro@dd296fb

If this fixes your issue, please leave a comment letting us know (e.g. "confirmed, this fixes it"). We'll then open a pull request to get this merged.

Full Triage Report

Reproduction

Created a minimal .astro component with scoped <style> using article :global(> *) syntax. Built with astro build and confirmed the <style> tag in the output HTML is completely empty — all CSS declarations are silently lost.

Tested multiple combinator variants:

Syntax	Result
article :global(> *) { ... }	❌ Empty CSS
.class :global(+ div) { ... }	❌ Empty CSS
.class :global(~ span) { ... }	❌ Empty CSS
article > :global(*) { ... }	✅ Works
.class :global(ul li) { ... }	✅ Works
.class :global(*) { ... }	✅ Works

The bug occurs with both plain CSS and Sass (lang="scss"), confirming it's not a preprocessor issue.

Diagnosis

The bug is in @astrojs/compiler-rs v0.2.2 (the Rust-based Astro compiler, introduced as the default in Astro 7). The CSS scoping logic fails when :global() contains a combinator (>, +, ~) as its first token.

Verified with the Go compiler: Running the same CSS through the Go compiler's CSS scoping pipeline (.compiler/lib/esbuild/css_parser + css_printer) produces correct output for all combinator variants. This confirms it's a regression in the Rust port.

Key evidence:

• No diagnostics, no errors, no warnings — completely silent data loss
• The Astro 7 changelog mentions "more strict regarding invalid syntax" but makes no mention of any :global() behavior change
• The pattern is consistent: only leading combinators inside :global() trigger the bug

Fix

Added rewriteGlobalCombinators() in packages/astro/src/core/compile/style.ts that transforms :global(COMBINATOR rest) → COMBINATOR :global(rest) before the Rust compiler processes the CSS. This is a workaround at the Astro level since the Rust compiler source is not in this repository.

The regex :global\(\s*([>+~])\s* → $1 :global( handles all three combinator types.

Three new test cases were added to packages/astro/test/units/compile/rust-compiler.test.ts covering >, +, and ~ combinators inside :global(). All 18 tests in the file pass (including 15 pre-existing tests).

Note: The upstream fix should ultimately be in @astrojs/compiler-rs. This workaround can be removed once the Rust compiler handles this case natively.

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[HiDeoo]

Looks like Starlight is hitting a similar issue (but not identical to the initial repro) with our staggered card grids.

Our current CSS looks like this:

.stagger > :global(*):nth-child(2n) {
  transform: translateY(var(--stagger-height));
}

In Astro v6, the CSS ouput was looking like this:

.stagger:where(.astro-ylo6hg35)>*:nth-child(2n) {
  transform: translateY(var(--stagger-height));
}

In Astro v7, the CSS output is now looking like this with the * omitted and replaced with a wrong :where selector:

.stagger:where(.astro-nvii2rkj)>:where(.astro-nvii2rkj):nth-child(2n) {
  transform: translateY(var(--stagger-height))
}

I tested using the AI produced fix but it didn't work.

[someonewithpc]

@HiDeoo Thanks for linking me that issue. I think it's handled in #61 now

[Princesseuh]

Fixed by #61