From c3fca96ecf8644f6377ad47c7588e278005cb3c4 Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Fri, 12 Apr 2024 00:15:54 +0800 Subject: [PATCH 1/2] fix: support attribute selector inside :global() --- .changeset/tricky-onions-double.md | 5 +++++ packages/svelte/src/compiler/compile/css/Selector.js | 2 +- .../test/css/samples/global-attribute-selctor/expected.css | 1 + .../test/css/samples/global-attribute-selctor/input.svelte | 6 ++++++ .../samples/css-invalid-global-placement-6/errors.json | 1 + .../samples/css-invalid-global-placement-6/input.svelte | 6 ++++++ 6 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 .changeset/tricky-onions-double.md create mode 100644 packages/svelte/test/css/samples/global-attribute-selctor/expected.css create mode 100644 packages/svelte/test/css/samples/global-attribute-selctor/input.svelte create mode 100644 packages/svelte/test/validator/samples/css-invalid-global-placement-6/errors.json create mode 100644 packages/svelte/test/validator/samples/css-invalid-global-placement-6/input.svelte diff --git a/.changeset/tricky-onions-double.md b/.changeset/tricky-onions-double.md new file mode 100644 index 000000000000..4245e7814d88 --- /dev/null +++ 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 index a1c58515d726..98c16380ddc9 100644 --- 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 new file mode 100644 index 000000000000..f8ae79fe5024 --- /dev/null +++ b/packages/svelte/test/css/samples/global-attribute-selctor/expected.css @@ -0,0 +1 @@ +.anim-checkbox.svelte-xyz[data-state='checked']{background-color:red} \ No newline at end of file diff --git a/packages/svelte/test/css/samples/global-attribute-selctor/input.svelte b/packages/svelte/test/css/samples/global-attribute-selctor/input.svelte new file mode 100644 index 000000000000..f821f82fc65f --- /dev/null +++ b/packages/svelte/test/css/samples/global-attribute-selctor/input.svelte @@ -0,0 +1,6 @@ + +
\ No newline at end of file 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 new file mode 100644 index 000000000000..fe51488c7066 --- /dev/null +++ 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 new file mode 100644 index 000000000000..f821f82fc65f --- /dev/null +++ b/packages/svelte/test/validator/samples/css-invalid-global-placement-6/input.svelte @@ -0,0 +1,6 @@ + +
\ No newline at end of file From 7044db7497d67eb0c09b533d2e91889c5b6c8c75 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sat, 13 Apr 2024 12:07:28 +0800 Subject: [PATCH 2/2] Update Selector.js --- packages/svelte/src/compiler/compile/css/Selector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/compiler/compile/css/Selector.js b/packages/svelte/src/compiler/compile/css/Selector.js index 98c16380ddc9..9593d1ed63bf 100644 --- 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); }