add : disablePolyfillReadyClass

plugins/css-blank-pseudo/.tape.mjs

@@ -24,6 +24,12 @@ postcssTape(plugin)({
 			replaceWith: '#css-blank'
 		}
 	},
+	'basic:disable-polyfill-ready-class': {
+		message: 'supports { disablePolyfillReadyClass: true } usage',
+		options: {
+			disablePolyfillReadyClass: true
+		}
+	},
 	'examples/example': {
 		message: 'minimal example',
 	},
@@ -39,6 +45,12 @@ postcssTape(plugin)({
 			replaceWith: '.css-blank'
 		}
 	},
+	'examples/example:disable-polyfill-ready-class': {
+		message: 'minimal example',
+		options: {
+			disablePolyfillReadyClass: true
+		}
+	},
 	'browser': {
 		message: 'css for browser tests',
 	},

plugins/css-blank-pseudo/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Blank Pseudo
 
+### Unreleased
+
+- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-blank-pseudo` from being added.
+
 ### 4.0.0 (July 8, 2022)
 
 - Updated: The polyfill now only attaches a single listener to the body so it's

plugins/css-blank-pseudo/README.md

@@ -97,6 +97,33 @@ input:blank {
 Note that changing this option implies that it needs to be passed to the
 browser polyfill as well.
 
+### disablePolyfillReadyClass
+
+The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
+This class is only set on your document if the polyfill loads and is needed.
+
+By default this option is `false`.
+Set this to `true` to prevent the class from being added.
+
+```js
+postcssBlankPseudo({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+input:blank {
+	background-color: yellow;
+}
+
+/* becomes */
+
+input[blank], input[blank] {
+	background-color: yellow;
+}
+input:blank {
+	background-color: yellow;
+}
+```
+
 ## Browser
 
 ```js
@@ -109,7 +136,7 @@ or
 
 ```html
 <!-- When using a CDN url you will have to manually update the version number -->
-<script src="https://unpkg.com/css-blank-pseudo@3.0.3/dist/browser-global.js"></script>
+<script src="https://unpkg.com/css-blank-pseudo@4.0.0/dist/browser-global.js"></script>
 <script>cssBlankPseudoInit()</script>
 ```
 

plugins/css-blank-pseudo/docs/README.md

@@ -70,6 +70,26 @@ the `:blank` pseudo. By default is `[blank]`
 Note that changing this option implies that it needs to be passed to the
 browser polyfill as well.
 
+### disablePolyfillReadyClass
+
+The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
+This class is only set on your document if the polyfill loads and is needed.
+
+By default this option is `false`.
+Set this to `true` to prevent the class from being added.
+
+```js
+<exportName>({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+<example.css>
+
+/* becomes */
+
+<example.disable-polyfill-ready-class.expect.css>
+```
+
 ## Browser
 
 ```js

plugins/css-blank-pseudo/src/index.ts

@@ -2,7 +2,7 @@ import type { PluginCreator } from 'postcss';
 import parser from 'postcss-selector-parser';
 import isValidReplacement from './is-valid-replacement.mjs';
 
-type pluginOptions = { preserve?: boolean, replaceWith?: string };
+type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean };
 
 const POLYFILL_READY_CLASSNAME = 'js-blank-pseudo';
 const PSEUDO = ':blank';
@@ -13,6 +13,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 		{
 			preserve: true,
 			replaceWith: '[blank]',
+			disablePolyfillReadyClass: false,
 		},
 		// Provided options
 		opts,
@@ -80,7 +81,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 				// becomes:
 				// html.js-blank-pseudo > .foo:focus-within,
 				// .js-blank-pseudo html > .foo:focus-within
-				{
+				if (!options.disablePolyfillReadyClass) {
 					if (selectorAST.nodes?.[0]?.nodes?.length) {
 						for (let i = 0; i < selectorAST.nodes[0].nodes.length; i++) {
 							const node = selectorAST.nodes[0].nodes[i];

plugins/css-blank-pseudo/test/basic.disable-polyfill-ready-class.expect.css

@@ -0,0 +1,82 @@
+[blank], [blank] {
+	order: 1;
+}
+
+:blank {
+	order: 1;
+}
+
+[blank],
+[blank],
+[blank] test,
+[blank] test,
+test [blank],
+test [blank],
+test test[blank],
+test test[blank],
+test [blank] test,
+test [blank] test,
+test test[blank] test,
+test test[blank] test,
+test [blank] [blank] test,
+test [blank] [blank] test,
+test :matches([blank]) test,
+test :matches([blank]) test,
+test :matches([blank] test) test,
+test :matches([blank] test) test,
+test :matches(test [blank]) test,
+test :matches(test [blank]) test,
+test :matches(test test[blank]) test,
+test :matches(test test[blank]) test,
+test :matches(test [blank] test) test,
+test :matches(test [blank] test) test,
+test :matches(test test[blank] test) test,
+test :matches(test test[blank] test) test,
+test :matches(test [blank] [blank] test) test,
+test :matches(test [blank] [blank] test) test {
+	order: 2;
+}
+
+:blank,
+:blank test,
+test :blank,
+test test:blank,
+test :blank test,
+test test:blank test,
+test :blank :blank test,
+test :matches(:blank) test,
+test :matches(:blank test) test,
+test :matches(test :blank) test,
+test :matches(test test:blank) test,
+test :matches(test :blank test) test,
+test :matches(test test:blank test) test,
+test :matches(test :blank :blank test) test {
+	order: 2;
+}
+
+:ignore-blank,
+:blank-ignore,
+:ignoreblank,
+:blankignore {
+	order: 3;
+}
+
+:blank(ignore) {
+	order: 4;
+}
+
+test:not([blank]), test:not([blank]) {
+	order: 5;
+}
+
+test:not(:blank) {
+	order: 5;
+}
+
+uppercase [blank], uppercase [blank] {
+	order: 6;
+}
+
+uppercase :BLaNK {
+	order: 6;
+}

plugins/css-blank-pseudo/test/examples/example.disable-polyfill-ready-class.expect.css

@@ -0,0 +1,6 @@
+input[blank], input[blank] {
+	background-color: yellow;
+}
+input:blank {
+	background-color: yellow;
+}

plugins/css-has-pseudo/README.md

@@ -11,7 +11,7 @@
 
 /* becomes */
 
-[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
 	margin-bottom: 1.5rem;
 }
 .title:has(+ p) {
@@ -62,7 +62,7 @@ postcssHasPseudo({ preserve: false })
 
 /* becomes */
 
-[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
 	margin-bottom: 1.5rem;
 }
 ```
@@ -143,11 +143,11 @@ or
 
 ```html
 <!-- When using a CDN url you will have to manually update the version number -->
-<script src="https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js"></script>
+<script src="https://unpkg.com/css-has-pseudo@4.0.0/dist/browser-global.js"></script>
 <script>cssHasPseudo(document)</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js`
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@4.0.0/dist/browser-global.js`
 Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [PostCSS Has Pseudo] works in all major browsers, including
@@ -277,7 +277,7 @@ replacing them with an alternative `[csstools-has-]` selector.
 
 /* becomes */
 
-[csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
+.js-has-pseudo [csstools-has-1a-38-2x-38-30-2t-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist) {
 	margin-bottom: 1.5rem;
 }
 .title:has(+ p) {

plugins/css-prefers-color-scheme/README.md

@@ -133,11 +133,11 @@ or
 
 ```html
 <!-- When using a CDN url you will have to manually update the version number -->
-<script src="https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js"></script>
+<script src="https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js"></script>
 <script>prefersColorSchemeInit()</script>
 ```
 
-⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js`
+⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js`
 Without the version, you might unexpectedly get a new major version of the library with breaking changes.
 
 [Prefers Color Scheme] works in all major browsers, including Safari 6+ and
@@ -211,7 +211,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true });
 ```
 
 ```html
-<script src="https://unpkg.com/css-prefers-color-scheme@6.0.3/dist/browser-global.js"></script>
+<script src="https://unpkg.com/css-prefers-color-scheme@7.0.0/dist/browser-global.js"></script>
 <script>prefersColorSchemeInit('light', { debug: true })</script>
 ```
 

plugins/postcss-focus-visible/.tape.mjs

@@ -11,6 +11,12 @@ postcssTape(plugin)({
 			replaceWith: '[data-focus-visible-added]'
 		}
 	},
+	'basic:disable-polyfill-ready-class': {
+		message: 'supports { disablePolyfillReadyClass: true } usage',
+		options: {
+			disablePolyfillReadyClass: true
+		}
+	},
 	'basic:preserve': {
 		message: 'supports { preserve: false } usage',
 		options: {
@@ -42,4 +48,10 @@ postcssTape(plugin)({
 			replaceWith: '[focus-visible]'
 		}
 	},
+	'examples/example:disable-polyfill-ready-class': {
+		message: 'minimal example',
+		options: {
+			disablePolyfillReadyClass: true
+		}
+	},
 });

plugins/postcss-focus-visible/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Focus Visible
 
+### Unreleased
+
+- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-focus-visible` from being added.
+
 ### 7.0.0 (July 8, 2022)
 
 - Breaking: Changed generated classes so it prepends `.js-focus-visible` to the 

plugins/postcss-focus-visible/README.md

@@ -103,6 +103,33 @@ Note that if you want to keep using [focus-visible polyfill], the only
 acceptable value would be `[data-focus-visible-added]`,
 given that the polyfill does not support arbitrary values.
 
+### disablePolyfillReadyClass
+
+The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
+This class is only set on your document if the polyfill loads and is needed.
+
+By default this option is `false`.
+Set this to `true` to prevent the class from being added.
+
+```js
+postcssFocusVisible({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* becomes */
+
+:focus:not(.focus-visible), :focus:not(.focus-visible) {
+	outline: none;
+}
+:focus:not(:focus-visible) {
+	outline: none;
+}
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#focus-visible-pseudo-class
 [discord]: https://discord.gg/bUadyRwkJS

plugins/postcss-focus-visible/docs/README.md

@@ -83,6 +83,26 @@ Note that if you want to keep using [focus-visible polyfill], the only
 acceptable value would be `[data-focus-visible-added]`,
 given that the polyfill does not support arbitrary values.
 
+### disablePolyfillReadyClass
+
+The `disablePolyfillReadyClass` option determines if selectors are prefixed with an indicator class.
+This class is only set on your document if the polyfill loads and is needed.
+
+By default this option is `false`.
+Set this to `true` to prevent the class from being added.
+
+```js
+<exportName>({ disablePolyfillReadyClass: true })
+```
+
+```pcss
+<example.css>
+
+/* becomes */
+
+<example.disable-polyfill-ready-class.expect.css>
+```
+
 <linkList>
 [Selectors Level 4 specification]: <specUrl>
 [focus-visible polyfill]: https://github.com/WICG/focus-visible