csstools · romainmenke · Jul 1, 2022 · Jul 1, 2022
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -248,7 +248,7 @@
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -248,7 +248,7 @@
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css
@@ -168,7 +168,7 @@
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -167,7 +167,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -160,7 +160,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -160,7 +160,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css
@@ -271,7 +271,7 @@
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css
@@ -164,7 +164,7 @@
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css
@@ -152,7 +152,7 @@
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css
@@ -278,7 +278,7 @@
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	-ms-flex-order: 26;
 	    order: 26;
 }

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
@@ -269,7 +269,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -255,7 +255,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -495,7 +495,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	-webkit-box-ordinal-group: 27;
 	-webkit-order: 26;
 	   -moz-box-ordinal-group: 27;

diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css
@@ -137,7 +137,7 @@
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -169,7 +169,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -157,7 +157,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	overflow-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css
@@ -276,7 +276,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	word-wrap: break-word;
 }
 
-.js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible, .js-focus-visible .test-focus-visible-pseudo-class.focus-visible {
 	order: 26;
 }
 

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
@@ -2,7 +2,7 @@
 	order: 1;
 }
 
-.js-focus-visible .focus-visible {
+.focus-visible.js-focus-visible, .js-focus-visible .focus-visible {
 	order: 2;
 }
 

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
@@ -2,7 +2,7 @@
 	order: 1;
 }
 
-.js-focus-visible .focus-visible {
+.focus-visible.js-focus-visible, .js-focus-visible .focus-visible {
 	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
@@ -445,7 +445,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	word-wrap: break-word;
 }
 
-.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
 	-webkit-box-ordinal-group: 27;
 	-webkit-order: 26;
 	   -moz-box-ordinal-group: 27;

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
@@ -506,7 +506,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	word-wrap: break-word;
 }
 
-.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
+.test-focus-visible-pseudo-class.focus-visible.js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-focus-visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-focus-visible-pseudo-class.focus-visible {
 	-webkit-box-ordinal-group: 27;
 	-webkit-order: 26;
 	   -moz-box-ordinal-group: 27;

diff --git a/plugins/postcss-focus-visible/README.md b/plugins/postcss-focus-visible/README.md
@@ -20,7 +20,7 @@ the browser's polyfill as well.
 
 /* becomes */
 
-:focus:not(.focus-visible) {
+:focus:not(.focus-visible).js-focus-visible, .js-focus-visible :focus:not(.focus-visible) {
 	outline: none;
 }
 ```
@@ -88,7 +88,7 @@ The `replaceWith` option defines the selector to replace `:focus-visible`. By
 default, the replacement selector is `.focus-visible`.
 
 ```js
-postcssFocusVisible({ replaceWith: '.css-blank' })
+postcssFocusVisible({ replaceWith: '[data-focus-visible-added]' })
 ```
 
 ```pcss
@@ -109,7 +109,7 @@ postcssFocusVisible({ replaceWith: '.css-blank' })
 ```
 
 Note that if you want to keep using [focus-visible polyfill], the only 
-acceptable value would be `[data-focus-visible-addeddata-focus-visible-added]`,
+acceptable value would be `[data-focus-visible-added]`,
 given that the polyfill does not support arbitrary values.
 
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test

diff --git a/plugins/postcss-focus-visible/src/index.ts b/plugins/postcss-focus-visible/src/index.ts
@@ -3,7 +3,7 @@ import type { PluginCreator } from 'postcss';
 
 type pluginOptions = { preserve?: boolean, replaceWith?: string };
 
-const POLYFILL_READY_CLASSNAME = '.js-focus-visible';
+const POLYFILL_READY_CLASSNAME = 'js-focus-visible';
 const PSEUDO = ':focus-visible';
 
 const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
@@ -16,6 +16,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 		// Provided options
 		opts,
 	);
+
 	const replacementAST = parser().astSync(options.replaceWith);
 
 	return {
@@ -25,9 +26,9 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				return;
 			}
 
-			const selectors = rule.selectors.map((selector) => {
+			const selectors = rule.selectors.flatMap((selector) => {
 				if (!selector.includes(PSEUDO)) {
-					return selector;
+					return [selector];
 				}
 
 				let selectorAST;
@@ -40,7 +41,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				}
 
 				if (typeof selectorAST === 'undefined') {
-					return selector;
+					return [selector];
 				}
 
 				let containsPseudo = false;
@@ -58,18 +59,41 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				});
 
 				if (!containsPseudo) {
-					return selector;
+					return [selector];
 				}
 
-				let newSelector = selectorAST.toString();
+				const selectorASTClone = selectorAST.clone();
+
+				// html > .foo:focus-visible
+				// becomes:
+				// html.js-focus-visible > .foo:focus-visible,
+				// .js-focus-visible html > .foo:focus-visible
+				{
+					if (selectorAST.nodes?.[0]?.nodes?.length) {
+						for (let i = 0; i < selectorAST.nodes[0].nodes.length; i++) {
+							const node = selectorAST.nodes[0].nodes[i];
+							if (node.type === 'combinator' || parser.isPseudoElement(node)) {
+								// Insert the class before the first combinator or pseudo element.
+								selectorAST.nodes[0].insertBefore(node, parser.className({ value: POLYFILL_READY_CLASSNAME }));
+								break;
+							}
+
+							if (i === selectorAST.nodes[0].nodes.length - 1) {
+								// Append the class to the end of the selector if not combinator or pseudo element was found.
+								selectorAST.nodes[0].append(parser.className({ value: POLYFILL_READY_CLASSNAME }));
+								break;
+							}
+						}
+					}
 
-				if (newSelector.startsWith('html')) {
-					newSelector = newSelector.replace('html', `html${POLYFILL_READY_CLASSNAME}`);
-				} else {
-					newSelector = `${POLYFILL_READY_CLASSNAME} ${newSelector}`;
+					if (selectorAST.nodes?.[0]?.nodes) {
+						// Prepend a space combinator and the class to the beginning of the selector.
+						selectorASTClone.nodes[0].prepend(parser.combinator({ value: ' ' }));
+						selectorASTClone.nodes[0].prepend(parser.className({ value: POLYFILL_READY_CLASSNAME }));
+					}
 				}
 
-				return newSelector;
+				return [selectorAST.toString(), selectorASTClone.toString()];
 			});
 
 			if (selectors.join(',') === rule.selectors.join(',')) {

diff --git a/plugins/postcss-focus-visible/test/basic.css b/plugins/postcss-focus-visible/test/basic.css
@@ -42,10 +42,38 @@ html :focus-visible {
 	order: 6;
 }
 
+html:focus-visible {
+	order: 6.1;
+}
+
 :not(:focus-visible) {
 	order: 7;
 }
 
 html :not(:focus-visible) {
 	order: 8;
 }
+
+:focus-visible::before {
+	order: 10.0;
+}
+
+:focus-visible .foo {
+	order: 10.1;
+}
+
+:focus-visible > .foo {
+	order: 10.2;
+}
+
+::before:focus-visible {
+	order: 10.3;
+}
+
+.foo :focus-visible {
+	order: 10.4;
+}
+
+.foo > :focus-visible {
+	order: 10.5;
+}