Merge pull request #36 from merkle-open/feature/css-selector-parser-v3

feat(#35): update css-selector-parser to v3.3.0

Author: ernscht

lib/css-selector-classes.js

@@ -1,12 +1,11 @@
 'use strict';
 
 const createParser = require('css-selector-parser').createParser;
-const parse = createParser({ syntax: 'progressive' });
-
-/* eslint-disable complexity */
+const parse = createParser({ syntax: 'progressive', strict: false });
 
 /**
- * Recursively visits nodes in a CSS rule tree and applies a function to each rule node.
+ * Recursively visits nodes in a CSS rule tree and applies a function to each rule node item.
+ * (Classes as attributes are ignored.)
  *
  * @param {Object} node - The root node of the CSS rule tree.
  * @param {function} fn - The function to apply to each rule node.
@@ -20,30 +19,18 @@ function visitRules(node, fn) {
 		node.rules.forEach((rule) => visitRules(rule, fn));
 	}
 
-	if (node.nestedRule?.pseudoClasses) {
-		node.nestedRule.pseudoClasses.forEach((pseudo) => visitRules(pseudo.argument, fn));
+	if (node.nestedRule) {
+		visitRules(node.nestedRule, fn);
 	}
 
-	if (node.attributes) {
-		const classAttribute = node.attributes.find((attribute) => attribute.name === 'class');
-		if (classAttribute?.value?.value) {
-			fn({ classNames: [classAttribute.value.value] });
+	node.items?.forEach((item) => {
+		if (item.type === 'ClassName') {
+			fn(item.name);
+		} else if (item.type === 'PseudoClass') {
+			visitRules(item.argument, fn);
 		}
-	}
-
-	if (node.pseudoClasses) {
-		node.pseudoClasses.forEach((pseudo) => {
-			if (pseudo.argument?.rules) {
-				pseudo.argument.rules.forEach((rule) => visitRules(rule, fn));
-			}
-		});
-	}
-
-	if (node.type === 'Rule') {
-		fn(node);
-	}
+	});
 }
-/* eslint-enable complexity */
 
 /**
  * Return all the classes in a CSS selector.
@@ -52,13 +39,11 @@ function visitRules(node, fn) {
  * @returns {string[]} An array of every class present in the CSS selector
  */
 function getCssSelectorClasses(selector) {
-	let list = [];
+	const list = [];
 	const ast = parse(selector);
-	visitRules(ast, (ruleSet) => {
-		if (ruleSet.classNames) {
-			list = list.concat(ruleSet.classNames);
-		}
-	});
+
+	visitRules(ast, (className) => list.push(className));
+
 	return Array.from(new Set(list));
 }
 

package-lock.json

@@ -34,7 +34,7 @@
   "author": "Merkle Inc.",
   "license": "MIT",
   "dependencies": {
-    "css-selector-parser": "2.3.2",
+    "css-selector-parser": "3.3.0",
     "postcss-resolve-nested-selector": "0.1.6"
   },
   "peerDependencies": {

package.json

@@ -86,10 +86,6 @@ testRule({
 			code: '.z-block {}',
 			message: `Expected class name "z-block" to start with a valid prefix: "a-", "m-", "o-", "l-", "g-", "h-", "state-". (${ruleName})`,
 		},
-		{
-			code: '.0-block {}',
-			message: `Expected class name "0-block" to start with a valid prefix: "a-", "m-", "o-", "l-", "g-", "h-", "state-". (${ruleName})`,
-		},
 		{
 			code: '.-block {}',
 			message: `Expected class name "-block" to start with a valid prefix: "a-", "m-", "o-", "l-", "g-", "h-", "state-". (${ruleName})`,