rework attribute selector matching to not use regexes (sveltejs#1710) [WIP]

Author: Conduitry

src/compiler/compile/css/Selector.ts

@@ -150,7 +150,7 @@ function apply_selector(stylesheet: Stylesheet, blocks: Block[], node: Node, sta
 		}
 
 		if (selector.type === 'ClassSelector') {
-			if (!attribute_matches(node, 'class', selector.name, '~=', false) && !class_matches(node, selector.name)) return false;
+			if (!attribute_matches(node, 'class', selector.name, '~=', false) && !node.classes.some(c => c.name === selector.name)) return false;
 		}
 
 		else if (selector.type === 'IdSelector') {
@@ -206,14 +206,21 @@ function apply_selector(stylesheet: Stylesheet, blocks: Block[], node: Node, sta
 	return true;
 }
 
-const operators = {
-	'=' : (value: string, flags: string) => new RegExp(`^${value}$`, flags),
-	'~=': (value: string, flags: string) => new RegExp(`\\b${value}\\b`, flags),
-	'|=': (value: string, flags: string) => new RegExp(`^${value}(-.+)?$`, flags),
-	'^=': (value: string, flags: string) => new RegExp(`^${value}`, flags),
-	'$=': (value: string, flags: string) => new RegExp(`${value}$`, flags),
-	'*=': (value: string, flags: string) => new RegExp(value, flags)
-};
+function test_attribute(operator, expected_value, case_insensitive, value) {
+	if (case_insensitive) {
+		expected_value = expected_value.toLowerCase();
+		value = value.toLowerCase();
+	}
+	switch (operator) {
+		case '=': return value === expected_value;
+		case '~=': return ` ${value} `.includes(` ${expected_value} `);
+		case '|=': return `${value}-`.startsWith(`${expected_value}-`);
+		case '^=': return value.startsWith(expected_value);
+		case '$=': return value.endsWith(expected_value);
+		case '*=': return value.includes(expected_value);
+		default: throw new Error(`this shouldn't happen`);
+	}
+}
 
 function attribute_matches(node: Node, name: string, expected_value: string, operator: string, case_insensitive: boolean) {
 	const spread = node.attributes.find(attr => attr.type === 'Spread');
@@ -227,29 +234,22 @@ function attribute_matches(node: Node, name: string, expected_value: string, ope
 	if (attr.chunks.length > 1) return true;
 	if (!expected_value) return true;
 
-	const pattern = operators[operator](expected_value, case_insensitive ? 'i' : '');
 	const value = attr.chunks[0];
 
 	if (!value) return false;
-	if (value.type === 'Text') return pattern.test(value.data);
+	if (value.type === 'Text') return test_attribute(operator, expected_value, case_insensitive, value.data);
 
 	const possible_values = new Set();
 	gather_possible_values(value.node, possible_values);
 	if (possible_values.has(UNKNOWN)) return true;
 
-	for (const x of Array.from(possible_values)) { // TypeScript for-of is slightly unlike JS
-		if (pattern.test(x)) return true;
+	for (const value of possible_values) {
+		if (test_attribute(operator, expected_value, case_insensitive, value)) return true;
 	}
 
 	return false;
 }
 
-function class_matches(node, name: string) {
-	return node.classes.some((class_directive) => {
-		return new RegExp(`\\b${name}\\b`).test(class_directive.name);
-	});
-}
-
 function unquote(value: Node) {
 	if (value.type === 'Identifier') return value.name;
 	const str = value.value;