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

* fix: support attribute selector inside :global()

* Update Selector.js

.changeset/tricky-onions-double.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+support attribute selector inside :global()

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);
 				}

packages/svelte/test/css/samples/global-attribute-selctor/expected.css

@@ -0,0 +1 @@
+.anim-checkbox.svelte-xyz[data-state='checked']{background-color:red}

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>

packages/svelte/test/validator/samples/css-invalid-global-placement-6/errors.json

@@ -0,0 +1 @@
+[]

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>