improve specificity calculation (#129)

Author: romainmenke

experimental/css-has-pseudo/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Has Pseudo
 
+### Unreleased
+
+- Improved : selector specificity calculation
+
 ### 0.1.1 (January 5, 2022)
 
 - Added : support for id and tag selector specificity.

experimental/css-has-pseudo/src/index.js

@@ -131,10 +131,39 @@ function selectorSpecificity(node) {
 			case ':has':
 			case ':not':
 				{
-					const pseudoSpecificity = selectorSpecificity(node.nodes[0]);
-					a += pseudoSpecificity.a;
-					b += pseudoSpecificity.b;
-					c += pseudoSpecificity.c;
+					if (node.nodes && node.nodes.length > 0) {
+						let mostSpecificListItem = {
+							a: 0,
+							b: 0,
+							c: 0,
+						};
+
+						node.nodes.forEach((child) => {
+							const itemSpecificity = selectorSpecificity(child);
+							if (itemSpecificity.a > mostSpecificListItem.a) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							} else if (itemSpecificity.a < mostSpecificListItem.a) {
+								return;
+							}
+
+							if (itemSpecificity.b > mostSpecificListItem.b) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							} else if (itemSpecificity.b < mostSpecificListItem.b) {
+								return;
+							}
+
+							if (itemSpecificity.c > mostSpecificListItem.c) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							}
+						});
+
+						a += mostSpecificListItem.a;
+						b += mostSpecificListItem.b;
+						c += mostSpecificListItem.c;
+					}
 					break;
 				}
 

plugins/postcss-nesting/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Nesting
 
+### Unreleased
+
+- Improved : selector specificity calculation
+
 ### 10.1.1 (January 2, 2022)
 
 - Removed Sourcemaps from package tarball.

plugins/postcss-nesting/src/lib/merge-selectors/specificity.js

@@ -66,10 +66,39 @@ export function selectorSpecificity(node) {
 			case ':has':
 			case ':not':
 				{
-					const pseudoSpecificity = selectorSpecificity(node.nodes[0]);
-					a += pseudoSpecificity.a;
-					b += pseudoSpecificity.b;
-					c += pseudoSpecificity.c;
+					if (node.nodes && node.nodes.length > 0) {
+						let mostSpecificListItem = {
+							a: 0,
+							b: 0,
+							c: 0,
+						};
+
+						node.nodes.forEach((child) => {
+							const itemSpecificity = selectorSpecificity(child);
+							if (itemSpecificity.a > mostSpecificListItem.a) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							} else if (itemSpecificity.a < mostSpecificListItem.a) {
+								return;
+							}
+
+							if (itemSpecificity.b > mostSpecificListItem.b) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							} else if (itemSpecificity.b < mostSpecificListItem.b) {
+								return;
+							}
+
+							if (itemSpecificity.c > mostSpecificListItem.c) {
+								mostSpecificListItem = itemSpecificity;
+								return;
+							}
+						});
+
+						a += mostSpecificListItem.a;
+						b += mostSpecificListItem.b;
+						c += mostSpecificListItem.c;
+					}
 					break;
 				}