fix: preserve namespaces in CSS type selectors (#18678)

Fixes #18677.

- preserve namespace prefixes on CSS `TypeSelector` AST nodes
- accept wildcard local names in `svg|*` and `*|*`
- retain namespaces when printing modern ASTs
- keep namespaced universal selectors intact while adding scoped CSS
selectors
- add compile and print regressions covering all four namespace forms

---------

Co-authored-by: svelte-triage-bot <team@svelte.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

.changeset/pink-chairs-matter.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: preserve namespaces in CSS type selectors

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -204,15 +204,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (parser.eat('*')) {
 			let name = '*';
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// * is the namespace (which we ignore)
+				namespace = name;
-				name = read_identifier(parser);
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});
@@ -314,15 +317,18 @@ function read_selector(parser, inside_pseudo_class = false) {
 			});
 		} else if (!parser.match_regex(REGEX_COMBINATOR)) {
 			let name = read_identifier(parser);
+			/** @type {string | undefined} */
+			let namespace;
 
 			if (parser.eat('|')) {
-				// we ignore the namespace when trying to find matching element classes
+				namespace = name;
-				name = read_identifier(parser);
+				name = parser.eat('*') ? '*' : read_identifier(parser);
 			}
 
 			relative_selector.selectors.push({
 				type: 'TypeSelector',
 				name,
+				...(namespace !== undefined && { namespace }),
 				start,
 				end: parser.index
 			});

packages/svelte/src/compiler/phases/3-transform/css/index.js

@@ -355,7 +355,11 @@ const visitors = {
 						continue;
 					}
 
-					if (selector.type === 'TypeSelector' && selector.name === '*') {
+					if (
+						selector.type === 'TypeSelector' &&
+						selector.name === '*' &&
+						selector.namespace === undefined
+					) {
 						context.state.code.update(selector.start, selector.end, modifier);
 					} else {
 						context.state.code.appendLeft(selector.end, modifier);

packages/svelte/src/compiler/print/index.js

@@ -520,6 +520,10 @@ function css_visitors(comments, js_comments) {
 		},
 
 		TypeSelector(node, context) {
+			if (node.namespace !== undefined) {
+				context.write(node.namespace === '*' ? '*' : escape_identifier(node.namespace));
+				context.write('|');
+			}
 			context.write(node.name === '*' ? node.name : escape_identifier(node.name));
 		}
 	};

packages/svelte/src/compiler/types/css.d.ts

@@ -121,6 +121,7 @@ export namespace _CSS {
 	export interface TypeSelector extends BaseNode {
 		type: 'TypeSelector';
 		name: string;
+		namespace?: string;
 	}
 
 	export interface IdSelector extends BaseNode {

packages/svelte/tests/css/samples/namespaced-type-selector/expected.css

@@ -0,0 +1,17 @@
+	@namespace svg url(http://www.w3.org/2000/svg);
+
+	svg|circle.svelte-xyz {
+		fill: red;
+	}
+
+	*|circle.svelte-xyz {
+		stroke: blue;
+	}
+
+	svg|*.svelte-xyz {
+		color: green;
+	}
+
+	*|*.svelte-xyz {
+		opacity: 0.5;
+	}

packages/svelte/tests/css/samples/namespaced-type-selector/input.svelte

@@ -0,0 +1,21 @@
+<svg><circle /></svg>
+
+<style>
+	@namespace svg url(http://www.w3.org/2000/svg);
+
+	svg|circle {
+		fill: red;
+	}
+
+	*|circle {
+		stroke: blue;
+	}
+
+	svg|* {
+		color: green;
+	}
+
+	*|* {
+		opacity: 0.5;
+	}
+</style>

packages/svelte/tests/print/samples/css-namespaced-type-selector/input.svelte

@@ -0,0 +1,10 @@
+<style>
+	@namespace svg url(http://www.w3.org/2000/svg);
+
+	svg|circle,
+	*|circle,
+	svg|*,
+	*|* {
+		fill: red;
+	}
+</style>

packages/svelte/tests/print/samples/css-namespaced-type-selector/output.svelte

@@ -0,0 +1,12 @@
+
+
+<style>
+	@namespace svg url(http://www.w3.org/2000/svg);
+
+	svg|circle,
+	*|circle,
+	svg|*,
+	*|* {
+		fill: red;
+	}
+</style>

packages/svelte/types/index.d.ts

@@ -1774,6 +1774,7 @@ declare module 'svelte/compiler' {
 		export interface TypeSelector extends BaseNode {
 			type: 'TypeSelector';
 			name: string;
+			namespace?: string;
 		}
 
 		export interface IdSelector extends BaseNode {