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

tanhauhau · web-flow · commit a510c6a37f78 · 2024-04-17T10:10:24.000+01:00
* fix: support attribute selector inside :global()

* Update Selector.js
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>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'svelte': patch
 +---
++
 +support attribute selector inside :global()
Original file line number	Diff line number	Diff line change
`@@ -214,7 +214,7 @@ export default class Selector {`
`214`	`214`	`index !== 0 &&`
`215`	`215`	`selector.children &&`
`216`	`216`	`selector.children.length > 0 &&`
`217`		`- !/[.:#\s]/.test(selector.children[0].value[0])`
	`217`	`+ !/[.:#[\s]/.test(selector.children[0].value[0])`
`218`	`218`	`) {`
`219`	`219`	`component.error(selector, compiler_errors.css_invalid_global_selector_position);`
`220`	`220`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+.anim-checkbox.svelte-xyz[data-state='checked']{background-color:red}`