diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
index 8c282e4c35..42e9b1fe6b 100644
--- a/src/compiler/compile/css/Selector.ts
+++ b/src/compiler/compile/css/Selector.ts
@@ -142,6 +142,15 @@ export default class Selector {
}
}
+ this.validate_global_with_multiple_selectors(component);
+ }
+
+ validate_global_with_multiple_selectors(component: Component) {
+ if (this.blocks.length === 1 && this.blocks[0].selectors.length === 1) {
+ // standalone :global() with multiple selectors is OK
+ return;
+ }
+
for (const block of this.blocks) {
for (const selector of block.selectors) {
if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
diff --git a/test/validator/samples/css-invalid-global-selector-5/errors.json b/test/validator/samples/css-invalid-global-selector-5/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-5/errors.json
@@ -0,0 +1,17 @@
+[
+ {
+ "code": "css-invalid-global-selector",
+ "message": ":global(...) must contain a single selector",
+ "start": {
+ "line": 5,
+ "column": 1,
+ "character": 54
+ },
+ "end": {
+ "line": 5,
+ "column": 20,
+ "character": 73
+ },
+ "pos": 54
+ }
+]
diff --git a/test/validator/samples/css-invalid-global-selector-5/input.svelte b/test/validator/samples/css-invalid-global-selector-5/input.svelte
new file mode 100644
index 0000000000..67d4b9928a
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-5/input.svelte
@@ -0,0 +1,12 @@
+
+
+
+
hello world
+
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector-6/errors.json b/test/validator/samples/css-invalid-global-selector-6/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-6/errors.json
@@ -0,0 +1,17 @@
+[
+ {
+ "code": "css-invalid-global-selector",
+ "message": ":global(...) must contain a single selector",
+ "start": {
+ "line": 5,
+ "column": 1,
+ "character": 54
+ },
+ "end": {
+ "line": 5,
+ "column": 20,
+ "character": 73
+ },
+ "pos": 54
+ }
+]
diff --git a/test/validator/samples/css-invalid-global-selector-6/input.svelte b/test/validator/samples/css-invalid-global-selector-6/input.svelte
new file mode 100644
index 0000000000..e0b2ffd597
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-6/input.svelte
@@ -0,0 +1,12 @@
+
+
+
+
hello world
+
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json
index 2998f09cfa..7b2d5123b0 100644
--- a/test/validator/samples/css-invalid-global-selector/errors.json
+++ b/test/validator/samples/css-invalid-global-selector/errors.json
@@ -3,15 +3,15 @@
"code": "css-invalid-global-selector",
"message": ":global(...) must contain a single selector",
"start": {
- "line": 5,
+ "line": 11,
"column": 5,
- "character": 58
+ "character": 143
},
"end": {
- "line": 5,
+ "line": 11,
"column": 24,
- "character": 77
+ "character": 162
},
- "pos": 58
+ "pos": 143
}
]
diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte
index 6f92027612..0ec337edfb 100644
--- a/test/validator/samples/css-invalid-global-selector/input.svelte
+++ b/test/validator/samples/css-invalid-global-selector/input.svelte
@@ -2,6 +2,12 @@
div :global(.h1\,h2\,h3) {
color: red;
}
+ :global(h1, h2, h3) {
+ color: red;
+ }
+ div, :global(h1, h2, h3) {
+ color: red;
+ }
div :global(h1, h2, h3) {
color: red;
}