fix: scope css with only pseudo selectors (#1100)

Co-authored-by: ematipico <[email protected]>

Author: HiDeoo

.changeset/shiny-walls-grab.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": patch
+---
+
+Fixes a CSS scoping issue when a selector contains only pseudo selectors.

internal/transform/scope-css_test.go

@@ -166,6 +166,21 @@ func TestScopeStyle(t *testing.T) {
 			source: ".class\\:class:focus{}",
 			want:   ".class\\:class:where(.astro-xxxxxx):focus{}",
 		},
+		{
+			name:   "only pseudo element",
+			source: ".class>::before{}",
+			want:   ".class:where(.astro-xxxxxx)>:where(.astro-xxxxxx)::before{}",
+		},
+		{
+			name:   "only pseudo class + pseudo element",
+			source: ".class>:not(:first-child)::after{}",
+			want:   ".class:where(.astro-xxxxxx)>:where(.astro-xxxxxx):not(:first-child)::after{}",
+		},
+		{
+			name:   "nested only pseudo element",
+			source: ".class{& .other_class{&::after{}}}",
+			want:   ".class:where(.astro-xxxxxx){& .other_class:where(.astro-xxxxxx){&:where(.astro-xxxxxx)::after{}}}",
+		},
 		// the following tests assert we leave valid CSS alone
 		{
 			name:   "attributes",

lib/esbuild/css_printer/astro_features.go

@@ -66,6 +66,8 @@ func (p *printer) printCompoundSelector(sel css_ast.CompoundSelector, isFirst bo
 		}
 	}
 
+	var onlyPseudoSubclassSelectors *bool
+
 	for i, sub := range sel.SubclassSelectors {
 		whitespace := mayNeedWhitespaceAfter
 
@@ -126,6 +128,22 @@ func (p *printer) printCompoundSelector(sel css_ast.CompoundSelector, isFirst bo
 			p.print("]")
 
 		case *css_ast.SSPseudoClass:
+			if sel.TypeSelector == nil && onlyPseudoSubclassSelectors == nil {
+				onlyPseudoSubclassSelectors = new(bool)
+				*onlyPseudoSubclassSelectors = true
+				for _, ss := range sel.SubclassSelectors {
+					_, ok := ss.(*css_ast.SSPseudoClass)
+					if !ok {
+						*onlyPseudoSubclassSelectors = false
+						break
+					}
+				}
+			}
+			// If there is no type selector and all subclass selectors are pseudo
+			// selectors, we need to add the scope before the first pseudo selector.
+			if sel.TypeSelector == nil && *onlyPseudoSubclassSelectors && i == 0 && s.Name != "global" && s.Name != "root" {
+				scoped = p.printScopedSelector()
+			}
 			p.printPseudoClassSelector(*s, whitespace)
 			if s.Name == "global" || s.Name == "root" {
 				scoped = true