Adding global class to CSS Blank

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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;
 }
 

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

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>

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);
 	}
 }