Adding global class to CSS Blank (#524)

Antonio-Laguna · web-flow · commit d12612a408cf · 2022-07-07T19:56:38.000+02:00
* Better handling for classList

* Refactoring to reuse code

* Appending `js-blank-pseudo` on load

* Only apply if not applied before to avoid double classes

* Updating docs

* Class should happen always

* Ensuring ready class is handled via plugin

* Updating tests

* Updating docs

* Handling preset-env tests for blank pseudo

* Conflicting test
diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css
@@ -261,7 +261,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -261,7 +261,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -181,7 +181,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -180,7 +180,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -173,7 +173,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -173,7 +173,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -284,7 +284,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -177,7 +177,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -165,7 +165,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -293,7 +293,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -282,7 +282,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -268,7 +268,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -516,7 +516,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -149,7 +149,7 @@
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -182,7 +182,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -170,7 +170,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -289,7 +289,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank] {
+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {
 	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
@@ -1,4 +1,4 @@
-[blank] {
+[blank].js-blank-pseudo, .js-blank-pseudo [blank] {
 	order: 1;
 }
 
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
@@ -1,4 +1,4 @@
-input[blank] {
+input[blank].js-blank-pseudo, .js-blank-pseudo input[blank] {
 	order: 1;
 }
 
diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css
@@ -466,7 +466,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+.test-blank-pseudo-class[blank].js-blank-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-blank-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-blank-pseudo-class[blank] {
 	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
@@ -527,7 +527,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 }
 
-.test-blank-pseudo-class[blank]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+.test-blank-pseudo-class[blank].js-blank-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#), .js-blank-pseudo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .test-blank-pseudo-class[blank] {
 	background-color: yellow;
 }
 
diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md
@@ -12,7 +12,7 @@ input:blank {
 
 /* becomes */
 
-input[blank] {
+input[blank].js-blank-pseudo, .js-blank-pseudo input[blank] {
 	background-color: yellow;
 }
 input:blank {
@@ -63,7 +63,7 @@ input:blank {
 
 /* becomes */
 
-input[blank] {
+input[blank].js-blank-pseudo, .js-blank-pseudo input[blank] {
 	background-color: yellow;
 }
 ```
@@ -149,6 +149,9 @@ cssBlankPseudoInit({ replaceWith: '.css-blank' });
 ```
 
 This option should be used if it was changed at PostCSS configuration level.
+Please note that using a class, leverages `classList` under the hood which 
+might  not be supported on some old browsers such as IE9, so you may need 
+to polyfill `classList` in those cases.
 
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#blank-pseudo-class
diff --git a/plugins/css-blank-pseudo/docs/README.md b/plugins/css-blank-pseudo/docs/README.md
@@ -122,6 +122,9 @@ cssBlankPseudoInit({ replaceWith: '.css-blank' });
 ```
 
 This option should be used if it was changed at PostCSS configuration level.
+Please note that using a class, leverages `classList` under the hood which 
+might  not be supported on some old browsers such as IE9, so you may need 
+to polyfill `classList` in those cases.
 
 <linkList>
 [Selectors Level 4]: <specUrl>
diff --git a/plugins/css-blank-pseudo/src/browser.js b/plugins/css-blank-pseudo/src/browser.js
@@ -1,6 +1,8 @@
 /* global document,window,self,MutationObserver */
 import isValidReplacement from './is-valid-replacement.mjs';
 
+const CSS_CLASS_LOADED = 'js-blank-pseudo';
+
 // form control elements selector
 function isFormControlElement(element) {
 	if (element.nodeName === 'INPUT' || element.nodeName === 'SELECT' || element.nodeName === 'TEXTAREA') {
@@ -114,17 +116,29 @@ export default function cssBlankPseudoInit(opts) {
 	} catch (ignoredError) { /* do nothing and continue */ }
 
 	const handler = generateHandler(options.replaceWith);
+	const bindEvents = () => {
+		if (document.body) {
+			document.body.addEventListener( 'change', handler );
+			document.body.addEventListener( 'input', handler );
+		}
+	};
+	const updateAllCandidates = () => {
+		Array.prototype.forEach.call(
+			document.querySelectorAll('input, select, textarea'),
+			node => {
+				handler({ target: node });
+			},
+		);
+	};
 
 	if (document.body) {
-		document.body.addEventListener('change', handler);
-		document.body.addEventListener('input', handler);
+		bindEvents();
 	} else {
-		window.addEventListener('load', () => {
-			if (document.body) {
-				document.body.addEventListener('change', handler);
-				document.body.addEventListener('input', handler);
-			}
-		});
+		window.addEventListener('load', bindEvents);
+	}
+
+	if (document.documentElement.className.indexOf(CSS_CLASS_LOADED) === -1) {
+		document.documentElement.className += ` ${CSS_CLASS_LOADED}`;
 	}
 
 	observeValueOfHTMLElement(self.HTMLInputElement, handler);
@@ -133,12 +147,7 @@ export default function cssBlankPseudoInit(opts) {
 	observeSelectedOfHTMLElement(self.HTMLOptionElement, handler);
 
 	// conditionally update all form control elements
-	Array.prototype.forEach.call(
-		document.querySelectorAll('input, select, textarea'),
-		node => {
-			handler({ target: node });
-		},
-	);
+	updateAllCandidates();
 
 	if (typeof self.MutationObserver !== 'undefined') {
 		// conditionally observe added or unobserve removed form control elements
@@ -155,22 +164,9 @@ export default function cssBlankPseudoInit(opts) {
 			});
 		}).observe(document, { childList: true, subtree: true });
 	} else {
-		window.addEventListener('load', () => {
-			Array.prototype.forEach.call(
-				document.querySelectorAll('input, select, textarea'),
-				node => {
-					handler({ target: node });
-				},
-			);
-		});
-
-		window.addEventListener('DOMContentLoaded', () => {
-			Array.prototype.forEach.call(
-				document.querySelectorAll('input, select, textarea'),
-				node => {
-					handler({ target: node });
-				},
-			);
-		});
+		const handleOnLoad = () => updateAllCandidates();
+
+		window.addEventListener('load', handleOnLoad);
+		window.addEventListener('DOMContentLoaded', handleOnLoad);
 	}
 }
diff --git a/plugins/css-blank-pseudo/src/index.ts b/plugins/css-blank-pseudo/src/index.ts
diff --git a/plugins/css-blank-pseudo/test/basic.expect.css b/plugins/css-blank-pseudo/test/basic.expect.css
diff --git a/plugins/css-blank-pseudo/test/basic.preserve.expect.css b/plugins/css-blank-pseudo/test/basic.preserve.expect.css
diff --git a/plugins/css-blank-pseudo/test/basic.replacewith.expect.css b/plugins/css-blank-pseudo/test/basic.replacewith.expect.css
diff --git a/plugins/css-blank-pseudo/test/browser.expect.css b/plugins/css-blank-pseudo/test/browser.expect.css
diff --git a/plugins/css-blank-pseudo/test/browser.replacewith.expect.css b/plugins/css-blank-pseudo/test/browser.replacewith.expect.css
diff --git a/plugins/css-blank-pseudo/test/examples/example.expect.css b/plugins/css-blank-pseudo/test/examples/example.expect.css
diff --git a/plugins/css-blank-pseudo/test/examples/example.preserve-false.expect.css b/plugins/css-blank-pseudo/test/examples/example.preserve-false.expect.css
diff --git a/plugins/css-blank-pseudo/test/examples/example.replacewith.expect.css b/plugins/css-blank-pseudo/test/examples/example.replacewith.expect.css
diff --git a/plugins/postcss-focus-within/README.md b/plugins/postcss-focus-within/README.md
diff --git a/plugins/postcss-focus-within/docs/README.md b/plugins/postcss-focus-within/docs/README.md

Original file line number	Diff line number	Diff line change
`@@ -261,7 +261,7 @@`
`261`	`261`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`262`	`262`	`}`
`263`	`263`
`264`		`-.test-blank-pseudo-class[blank] {`
	`264`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`265`	`265`	`background-color: yellow;`
`266`	`266`	`}`
`267`	`267`
Original file line number	Diff line number	Diff line change
`@@ -181,7 +181,7 @@`
`181`	`181`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`182`	`182`	`}`
`183`	`183`
`184`		`-.test-blank-pseudo-class[blank] {`
	`184`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`185`	`185`	`background-color: yellow;`
`186`	`186`	`}`
`187`	`187`
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`180`	`180`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`181`	`181`	`}`
`182`	`182`
`183`		`-.test-blank-pseudo-class[blank] {`
	`183`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`184`	`184`	`background-color: yellow;`
`185`	`185`	`}`
`186`	`186`
Original file line number	Diff line number	Diff line change
`@@ -173,7 +173,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te`
`173`	`173`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`174`	`174`	`}`
`175`	`175`
`176`		`-.test-blank-pseudo-class[blank] {`
	`176`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`177`	`177`	`background-color: yellow;`
`178`	`178`	`}`
`179`	`179`
Original file line number	Diff line number	Diff line change
`@@ -284,7 +284,7 @@`
`284`	`284`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`285`	`285`	`}`
`286`	`286`
`287`		`-.test-blank-pseudo-class[blank] {`
	`287`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`288`	`288`	`background-color: yellow;`
`289`	`289`	`}`
`290`	`290`
Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@`
`177`	`177`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`178`	`178`	`}`
`179`	`179`
`180`		`-.test-blank-pseudo-class[blank] {`
	`180`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`181`	`181`	`background-color: yellow;`
`182`	`182`	`}`
`183`	`183`
Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,7 @@`
`165`	`165`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`166`	`166`	`}`
`167`	`167`
`168`		`-.test-blank-pseudo-class[blank] {`
	`168`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`169`	`169`	`background-color: yellow;`
`170`	`170`	`}`
`171`	`171`
Original file line number	Diff line number	Diff line change
`@@ -293,7 +293,7 @@`
`293`	`293`	`background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);`
`294`	`294`	`}`
`295`	`295`
`296`		`-.test-blank-pseudo-class[blank] {`
	`296`	`+.test-blank-pseudo-class[blank].js-blank-pseudo, .js-blank-pseudo .test-blank-pseudo-class[blank] {`
`297`	`297`	`background-color: yellow;`
`298`	`298`	`}`
`299`	`299`