fix: support attribute selector inside :global() (#11135)

* fix: support attribute selector inside :global() * Update Selector.js
sveltejs · Apr 17, 2024 · a510c6a · a510c6a
1 parent ad00cad
commit a510c6a
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 1 deletion.
diff --git a/.changeset/tricky-onions-double.md b/.changeset/tricky-onions-double.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+support attribute selector inside :global()
diff --git a/packages/svelte/src/compiler/compile/css/Selector.js b/packages/svelte/src/compiler/compile/css/Selector.js
@@ -214,7 +214,7 @@ export default class Selector {
 					index !== 0 &&
 					selector.children &&
 					selector.children.length > 0 &&
-					!/[.:#\s]/.test(selector.children[0].value[0])
+					!/[.:#[\s]/.test(selector.children[0].value[0])
 				) {
 					component.error(selector, compiler_errors.css_invalid_global_selector_position);
 				}

diff --git a/packages/svelte/test/css/samples/global-attribute-selctor/expected.css b/packages/svelte/test/css/samples/global-attribute-selctor/expected.css
@@ -0,0 +1 @@
+.anim-checkbox.svelte-xyz[data-state='checked']{background-color:red}
diff --git a/packages/svelte/test/css/samples/global-attribute-selctor/input.svelte b/packages/svelte/test/css/samples/global-attribute-selctor/input.svelte
@@ -0,0 +1,6 @@
+<style>
+	.anim-checkbox:global([data-state='checked']) {
+		background-color: red;
+	}
+</style>
+<div class="anim-checkbox"></div>
diff --git a/packages/svelte/test/validator/samples/css-invalid-global-placement-6/errors.json b/packages/svelte/test/validator/samples/css-invalid-global-placement-6/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/svelte/test/validator/samples/css-invalid-global-placement-6/input.svelte b/packages/svelte/test/validator/samples/css-invalid-global-placement-6/input.svelte
@@ -0,0 +1,6 @@
+<style>
+	.anim-checkbox:global([data-state='checked']) {
+		background-color: red;
+	}
+</style>
+<div class="anim-checkbox"></div>