fix: allow double hyphen css selector names (#15384)

sveltejs · Feb 24, 2025 · 3d59e84 · 3d59e84
1 parent c2ec0d9
commit 3d59e84
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/.changeset/fast-pants-decide.md b/.changeset/fast-pants-decide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow double hyphen css selector names
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js
@@ -566,15 +566,15 @@ function read_attribute_value(parser) {
 }
 
 /**
- * https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+ * https://www.w3.org/TR/css-syntax-3/#ident-token-diagram
  * @param {Parser} parser
  */
 function read_identifier(parser) {
 	const start = parser.index;
 
 	let identifier = '';
 
-	if (parser.match('--') || parser.match_regex(REGEX_LEADING_HYPHEN_OR_DIGIT)) {
+	if (parser.match_regex(REGEX_LEADING_HYPHEN_OR_DIGIT)) {
 		e.css_expected_identifier(start);
 	}
 

diff --git a/packages/svelte/tests/css/samples/double-hyphen/expected.css b/packages/svelte/tests/css/samples/double-hyphen/expected.css
@@ -0,0 +1,4 @@
+
+	.--foo.svelte-xyz {
+		color: red;
+	}
diff --git a/packages/svelte/tests/css/samples/double-hyphen/input.svelte b/packages/svelte/tests/css/samples/double-hyphen/input.svelte
@@ -0,0 +1,7 @@
+<div class="--foo"></div>
+
+<style>
+	.--foo {
+		color: red;
+	}
+</style>