From bbcc1e7479466f6de97f2b40651f5e4a66ea7b57 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 22 Jun 2021 22:03:56 +0800
Subject: [PATCH] disallow multiple selectors inside :global() (#6428)
---
src/compiler/compile/css/Selector.ts | 13 +++++++++++++
.../css-invalid-global-selector/errors.json | 17 +++++++++++++++++
.../css-invalid-global-selector/input.svelte | 12 ++++++++++++
3 files changed, 42 insertions(+)
create mode 100644 test/validator/samples/css-invalid-global-selector/errors.json
create mode 100644 test/validator/samples/css-invalid-global-selector/input.svelte
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 14b6f95a4e..d7e80f5499 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -143,6 +143,19 @@ export default class Selector {
});
}
}
+
+ for (const block of this.blocks) {
+ for (const selector of block.selectors) {
+ if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+ if (/[^\\],/.test(selector.children[0].value)) {
+ component.error(selector, {
+ code: 'css-invalid-global-selector',
+ message: ':global(...) must contain a single selector'
+ });
+ }
+ }
+ }
+ }
}
get_amount_class_specificity_increased() {
diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json
new file mode 100644
index 0000000000..2998f09cfa
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector/errors.json
@@ -0,0 +1,17 @@
+[
+ {
+ "code": "css-invalid-global-selector",
+ "message": ":global(...) must contain a single selector",
+ "start": {
+ "line": 5,
+ "column": 5,
+ "character": 58
+ },
+ "end": {
+ "line": 5,
+ "column": 24,
+ "character": 77
+ },
+ "pos": 58
+ }
+]
diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte
new file mode 100644
index 0000000000..6f92027612
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector/input.svelte
@@ -0,0 +1,12 @@
+<style>
+ div :global(.h1\,h2\,h3) {
+ color: red;
+ }
+ div :global(h1, h2, h3) {
+ color: red;
+ }
+</style>
+
+<div>
+ <h1>hello world</h1>
+</div>
\ No newline at end of file