use the new selector specificity package (#353)

* use the new selector specificity package

* npm install

* fix

Author: romainmenke

experimental/css-has-pseudo/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changes to CSS Has Pseudo
 
+### Unreleased
+
+- Use `@csstools/selector-specificity` for specificity calculations.
+- Improve documentation
+
 ### 0.5.0 (April 24, 2022)
 
 - Rules within `@supports` selector check for `:has` won't be transformed. This respects stylesheet author of making the selector conditional:

experimental/css-has-pseudo/README-BROWSER.md

@@ -8,16 +8,6 @@
 [EXPERIMENTAL CSS Has Pseudo] lets you style elements relative to other elements in CSS,
 following the [Selectors Level 4] specification.
 
-```css
-input {
-  /* style an input */
-}
-
-body[\:has\(\:focus\)] {
-  /* style an input without a value */
-}
-```
-
 ## Usage
 
 Add [EXPERIMENTAL CSS Has Pseudo] to your build tool:

experimental/css-has-pseudo/README-POSTCSS.md

@@ -10,12 +10,12 @@ following the [Selectors Level 4] specification.
 
 ```css
 body:has(:focus) {
-  background-color: yellow;
+	background-color: yellow;
 }
 
 /* becomes */
 
-[body\:has\(\:focus\)] {
+[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) {
 	background-color: yellow;
 }
 
@@ -43,7 +43,7 @@ const postcss = require('postcss');
 const cssHasPseudoExperimental = require('@csstools/css-has-pseudo-experimental');
 
 postcss([
-  cssHasPseudoExperimental(/* pluginOptions */)
+	cssHasPseudoExperimental(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
@@ -66,13 +66,13 @@ cssHasPseudoExperimental({ preserve: false });
 
 ```css
 body:has(:focus) {
-  background-color: yellow;
+	background-color: yellow;
 }
 
 /* becomes */
 
-body[\:has\(\:focus\)] {
-  background-color: yellow;
+[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) {
+	background-color: yellow;
 }
 ```
 
@@ -86,7 +86,7 @@ See how `:not` is used to modify [specificity](#specificity).
 
 ```js
 postcss([
-  cssHasPseudoExperimental({ specificityMatchingName: 'something-random' })
+	cssHasPseudoExperimental({ specificityMatchingName: 'something-random' })
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
@@ -102,10 +102,10 @@ Before :
 
 After :
 
-[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5B%5C.x%5C%3Ahas%5C(%5C%253E%5C%2520%5C%2523a%5C%3Ahover%5C)%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist))
+[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist))
 
 ```css
-[\.x\:has\(\%3E\%20\%23a\:hover\)]:not(#does-not-exist):not(.does-not-exist) {
+[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) {
 	order: 11;
 }
 ```
@@ -127,10 +127,10 @@ figure:has(> img)
 
 After :
 
-[specificity 0, 1, 2](https://polypane.app/css-specificity-calculator/#selector=%5Bfigure%5C%3Ahas%5C(%5C%253E%5C%2520img%5C)%5D%3Anot(does-not-exist)%3Anot(does-not-exist))
+[specificity 0, 1, 2](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15%5D%3Anot(does-not-exist)%3Anot(does-not-exist))
 
 ```css
-[figure\:has\(\%3E\%20img\)]:not(does-not-exist):not(does-not-exist)
+[csstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist)
 ```
 
 ### Plugin order
@@ -152,14 +152,14 @@ The experimental plugin must be added after any other plugin that modifies selec
 
 ```js
 plugins: [
-  // other plugins
-  postcssPresetEnv({
-    features: {
-      'css-has-pseudo': false
-    }
-  }),
-  // other plugins
-  cssHasPseudoExperimental(), // last
+	// other plugins
+	postcssPresetEnv({
+		features: {
+			'css-has-pseudo': false
+		}
+	}),
+	// other plugins
+	cssHasPseudoExperimental(), // last
 ]
 ```
 

experimental/css-has-pseudo/README.md

@@ -12,19 +12,19 @@ following the [Selectors Level 4] specification.
 
 ```css
 a:has(> img) {
-  /* style links that contain an image */
+	/* style links that contain an image */
 }
 
 h1:has(+ p) {
-  /* style level 1 headings that are followed by a paragraph */
+	/* style level 1 headings that are followed by a paragraph */
 }
 
 section:not(:has(h1, h2, h3, h4, h5, h6)) {
-  /* style sections that don’t contain any heading elements */
+	/* style sections that don’t contain any heading elements */
 }
 
 body:has(:focus) {
-  /* style the body if it contains a focused element */
+	/* style the body if it contains a focused element */
 }
 ```
 
@@ -55,24 +55,24 @@ replacing them with an alternative `[:has]` selector.
 
 ```css
 body:has(:focus) {
-  background-color: yellow;
+	background-color: yellow;
 }
 
 section:not(:has(h1, h2, h3, h4, h5, h6)) {
-  background-color: gray;
+	background-color: gray;
 }
 
 /* becomes */
 
-[body\:has\(\:focus\)] {
+[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) {
 	background-color: yellow;
 }
 
 body:has(:focus) {
 	background-color: yellow;
 }
 
-[section\:not\(\:has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)\)] {
+[csstools-has-37-2t-2r-38-2x-33-32-1m-32-33-38-14-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15-15]:not(does-not-exist):not(does-not-exist) {
 	background-color: gray;
 }
 
@@ -85,8 +85,8 @@ Next, the [JavaScript library](README-BROWSER.md) adds a `[:has]` attribute to
 elements otherwise matching `:has` natively.
 
 ```html
-<body body:has(:focus)>
-  <input value="This element is focused">
+<body csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15>
+	<input value="This element is focused">
 </body>
 ```
 
@@ -98,14 +98,14 @@ The experimental plugin must be added after any other plugin that modifies selec
 
 ```js
 plugins: [
-  // other plugins
-  postcssPresetEnv({
-    features: {
-      'css-has-pseudo': false
-    }
-  }),
-  // other plugins
-  cssHasPseudoExperimental(), // last
+	// other plugins
+	postcssPresetEnv({
+		features: {
+			'css-has-pseudo': false
+		}
+	}),
+	// other plugins
+	cssHasPseudoExperimental(), // last
 ]
 ```
 

experimental/css-has-pseudo/package.json

@@ -36,6 +36,7 @@
 		"dist"
 	],
 	"dependencies": {
+		"@csstools/selector-specificity": "1.0.0",
 		"postcss-selector-parser": "^6.0.10"
 	},
 	"peerDependencies": {

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

@@ -1,4 +1,5 @@
 import parser from 'postcss-selector-parser';
+import selectorSpecificity from '@csstools/selector-specificity';
 import encodeCSS from './encode/encode.mjs';
 import type { PluginCreator } from 'postcss';
 
@@ -117,114 +118,3 @@ function isWithinSupportCheck(rule) {
 
 	return isSupportCheck;
 }
-
-function selectorSpecificity(node) {
-	let a = 0;
-	let b = 0;
-	let c = 0;
-
-	if (node.type == 'universal') {
-		return {
-			a: 0,
-			b: 0,
-			c: 0,
-		};
-	} else if (node.type === 'id') {
-		a += 1;
-	} else if (node.type === 'tag') {
-		c += 1;
-	} else if (node.type === 'class') {
-		b += 1;
-	} else if (node.type === 'attribute') {
-		b += 1;
-	} else if (node.type === 'pseudo' && node.value.indexOf('::') === 0) {
-		c += 1;
-	} else if (node.type === 'pseudo') {
-		switch (node.value) {
-			case ':after':
-			case ':before':
-				c += 1;
-				break;
-
-			case ':is':
-			case ':has':
-			case ':not':
-			{
-				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;
-			}
-
-			case 'where':
-				break;
-
-			case ':nth-child':
-			case ':nth-last-child':
-				{
-					const ofSeparatorIndex = node.nodes.findIndex((x) => {
-						x.value === 'of';
-					});
-
-					if (ofSeparatorIndex > -1) {
-						const ofSpecificity = selectorSpecificity(parser.selector({ nodes: node.nodes.slice(ofSeparatorIndex + 1), value: '' }));
-						a += ofSpecificity.a;
-						b += ofSpecificity.b;
-						c += ofSpecificity.c;
-					} else {
-						a += a;
-						b += b;
-						c += c;
-					}
-				}
-				break;
-
-			default:
-				b += 1;
-		}
-	} else if (node.nodes && node.nodes.length > 0) {
-		node.nodes.forEach((child) => {
-			const specificity = selectorSpecificity(child);
-			a += specificity.a;
-			b += specificity.b;
-			c += specificity.c;
-		});
-	}
-
-	return {
-		a,
-		b,
-		c,
-	};
-}
-