allow :global(...) selectors to have trailing modifiers

src/utils/css.ts

@@ -1,7 +1,7 @@
 import { Node } from '../interfaces';
 
 export function isGlobalSelector(block: Node[]) {
-	return block.length === 1 && block[0].type === 'PseudoClassSelector' && block[0].name === 'global';
+	return block[0].type === 'PseudoClassSelector' && block[0].name === 'global';
 }
 
 export function groupSelectors(selector: Node) {

src/validate/css/index.ts

@@ -10,17 +10,13 @@ export default function validateCss(validator: Validator, css: Node) {
 	function validateSelector(selector: Node) {
 		const blocks: Node[][] = groupSelectors(selector);
 
-		blocks.forEach((block, i) => {
+		blocks.forEach((block) => {
-			if (block.find((part: Node) => part.type === 'PseudoClassSelector' && part.name === 'global')) {
+			let i = block.length;
-				// check that :global(...) is by itself
+			while (i-- > 1) {
-				if (block.length !== 1) {
+				const part = block[i];
-					validator.error(`:global(...) cannot be mixed with non-global selectors`, block[0].start);
+				if (part.type === 'PseudoClassSelector' && part.name === 'global') {
+					validator.error(`:global(...) must be the first element in a compound selector`, part.start);
 				}
-
-				// check that :global(...) isn't sandwiched by other selectors
-				// if (i > 0 && i < blocks.length - 1) {
-				// 	validator.error(`:global(...) can be at the start or end of a selector sequence, but not in the middle`, block[0].start);
-				// }
 			}
 		});