css-has-pseudo (#473)

* css-has-pseudo * preset-env * update tests * fixes * docs * docs * changelog * fix * fix * fix * fix
csstools · romainmenke · Jan 24, 2023 · Jun 13, 2022 · Jun 18, 2022 · Jun 18, 2022
commit 9a0ab6c5e35099b165957ccbfeaf7b19a2e33285
diff --git a/package-lock.json b/package-lock.json
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -269,7 +269,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css
@@ -269,7 +269,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -189,7 +189,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css
@@ -188,7 +188,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css
@@ -181,7 +181,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css
@@ -181,7 +181,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -292,7 +292,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -185,7 +185,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
@@ -173,7 +173,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -301,7 +301,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css
@@ -290,7 +290,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css
@@ -276,7 +276,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css
@@ -524,7 +524,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
@@ -157,7 +157,7 @@
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css
@@ -190,7 +190,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css
@@ -178,7 +178,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -297,7 +297,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)] {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-1.expect.css b/plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-1.expect.css
@@ -10,7 +10,7 @@
 	order: 3;
 }
 
-[\:has\(.a\)] {
+[csstools-has-1m-2w-2p-37-14-1a-2p-15] {
 	order: 4;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-2.expect.css b/plugin-packs/postcss-preset-env/test/client-side-polyfills.stage-2.expect.css
@@ -10,7 +10,7 @@
 	order: 3;
 }
 
-[\:has\(.a\)] {
+[csstools-has-1m-2w-2p-37-14-1a-2p-15] {
 	order: 4;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/disable-client-side-polyfills.disabled.expect.css b/plugin-packs/postcss-preset-env/test/disable-client-side-polyfills.disabled.expect.css
@@ -6,7 +6,7 @@ input:blank {
 	order: 1;
 }
 
-a[\:has\(\%3E\%20img\)] {
+[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) {
 	order: 2;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -474,7 +474,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	background-color: yellow;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css
@@ -535,7 +535,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	background-color: yellow;
 }
 
-.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
 	background-color: yellow;
 }
 

diff --git a/plugins/css-has-pseudo/.gitignore b/plugins/css-has-pseudo/.gitignore
@@ -1,14 +1,6 @@
 node_modules
-dist
 package-lock.json
 yarn.lock
-browser.js
-!src/browser.js
-*.log*
 *.result.css
 *.result.css.map
-!.editorconfig
-!.gitignore
-!.rollup.js
-!.tape.js
-!.travis.yml
+dist/*
diff --git a/plugins/css-has-pseudo/.tape.mjs b/plugins/css-has-pseudo/.tape.mjs
@@ -1,5 +1,8 @@
 import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
 import plugin from 'css-has-pseudo';
+import postcssLogical from 'postcss-logical';
+import postcssNesting from 'postcss-nesting';
+import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
 
 postcssTape(plugin)({
 	'basic': {
@@ -11,11 +14,64 @@ postcssTape(plugin)({
 			preserve: false
 		}
 	},
+	'basic:specificity-matching-name': {
+		message: 'supports { specificityMatchingName: "other-thing-that-does-not-exist" } usage',
+		options: {
+			specificityMatchingName: 'other-thing-that-does-not-exist'
+		}
+	},
+	'examples/example': {
+		message: 'minimal example',
+	},
+	'examples/example:preserve-false': {
+		message: 'minimal example',
+		options: {
+			preserve: false
+		}
+	},
 	'generated-selector-cases': {
 		message: 'correctly handles generated cases',
 		warnings: 1,
 		options: {
 			preserve: false
 		}
 	},
-})
+	'browser': {
+		message: 'prepare CSS for chrome test',
+		options: {
+			preserve: false
+		}
+	},
+	'plugin-order-logical:before': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [postcssLogical({ preserve: false }), postcssDirPseudoClass({ preserve: false }), plugin({ preserve: false })],
+	},
+	'plugin-order-logical:after': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [plugin({ preserve: false }), postcssLogical({ preserve: false }), postcssDirPseudoClass({ preserve: false })],
+	},
+	'plugin-order-logical:before:preserve': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [postcssLogical({ preserve: true }), postcssDirPseudoClass({ preserve: true }), plugin({ preserve: true })],
+	},
+	'plugin-order-logical:after:preserve': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [plugin({ preserve: true }), postcssLogical({ preserve: true }), postcssDirPseudoClass({ preserve: true })],
+	},
+	'plugin-order-nesting:before': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [postcssNesting({ preserve: false }), plugin({ preserve: false })],
+	},
+	'plugin-order-nesting:after': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [postcssNesting({ preserve: false }), plugin({ preserve: false })],
+	},
+	'plugin-order-nesting:before:preserve': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [plugin({ preserve: true }), postcssNesting({ preserve: true })],
+	},
+	'plugin-order-nesting:after:preserve': {
+		message: 'works with other plugins that modify selectors',
+		plugins: [plugin({ preserve: true }), postcssNesting({ preserve: true })],
+	}
+});
diff --git a/plugins/css-has-pseudo/CHANGELOG.md b/plugins/css-has-pseudo/CHANGELOG.md
@@ -1,5 +1,32 @@
 # Changes to CSS Has Pseudo
 
+### Unreleased (major)
+
+[Read the full changelog](https://github.com/csstools/postcss-plugins/wiki/PostCSS-Preset-Env-8)
+
+- Breaking: removed old CDN urls
+- Added: 'hover' options for browser polyfill
+- Added: 'observedAttributes' options for browser polyfill
+- Added: 'forcePolyfill' options for browser polyfill
+- Added: Rules within `@supports selector(:has(something))` won't be transformed.
+- Fix: Use base36 encoding to support all possible selectors.
+
+#### How to migrate :
+
+##### Re-build your CSS with the new version of the library.
+
+##### If you use a CDN url, please update it.
+
+```diff
+- <script src="https://unpkg.com/css-has-pseudo/browser"></script>
++ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
+```
+
+```diff
+- <script src="https://unpkg.com/css-has-pseudo/browser.min"></script>
++ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
+```
+
 ### 3.0.4 (February 5, 2022)
 
 - Rebuild of browser polyfills