diff --git a/plugins/css-blank-pseudo/.tape.mjs b/plugins/css-blank-pseudo/.tape.mjs index 20a53c7d2..71d0cc9d2 100644 --- a/plugins/css-blank-pseudo/.tape.mjs +++ b/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', }, diff --git a/plugins/css-blank-pseudo/CHANGELOG.md b/plugins/css-blank-pseudo/CHANGELOG.md index 37067f90e..004ec0e3d 100644 --- a/plugins/css-blank-pseudo/CHANGELOG.md +++ b/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 diff --git a/plugins/css-blank-pseudo/README.md b/plugins/css-blank-pseudo/README.md index 8729637c7..78ac3d3c2 100644 --- a/plugins/css-blank-pseudo/README.md +++ b/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 - + ``` diff --git a/plugins/css-blank-pseudo/docs/README.md b/plugins/css-blank-pseudo/docs/README.md index 9ddbd33b8..b74e16e1f 100644 --- a/plugins/css-blank-pseudo/docs/README.md +++ b/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 +({ disablePolyfillReadyClass: true }) +``` + +```pcss + + +/* becomes */ + + +``` + ## Browser ```js diff --git a/plugins/css-blank-pseudo/src/index.ts b/plugins/css-blank-pseudo/src/index.ts index 0a7b19c08..7b371b5fe 100644 --- a/plugins/css-blank-pseudo/src/index.ts +++ b/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 = (opts?: pluginOptions) => { { preserve: true, replaceWith: '[blank]', + disablePolyfillReadyClass: false, }, // Provided options opts, @@ -80,7 +81,7 @@ const creator: PluginCreator = (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]; diff --git a/plugins/css-blank-pseudo/test/basic.disable-polyfill-ready-class.expect.css b/plugins/css-blank-pseudo/test/basic.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..0b1d6c28c --- /dev/null +++ b/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; +} diff --git a/plugins/css-blank-pseudo/test/examples/example.disable-polyfill-ready-class.expect.css b/plugins/css-blank-pseudo/test/examples/example.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..9c7c21135 --- /dev/null +++ b/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; +} diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index d19fe1266..424081593 100644 --- a/plugins/css-has-pseudo/README.md +++ b/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 - + ``` -⚠️ 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) { diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md index 91b076bf1..aee0309e9 100644 --- a/plugins/css-prefers-color-scheme/README.md +++ b/plugins/css-prefers-color-scheme/README.md @@ -133,11 +133,11 @@ or ```html - + ``` -⚠️ 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 - + ``` diff --git a/plugins/postcss-focus-visible/.tape.mjs b/plugins/postcss-focus-visible/.tape.mjs index fcacb0d33..d526dbfee 100644 --- a/plugins/postcss-focus-visible/.tape.mjs +++ b/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 + } + }, }); diff --git a/plugins/postcss-focus-visible/CHANGELOG.md b/plugins/postcss-focus-visible/CHANGELOG.md index 00392cbdf..b0e76d4a9 100644 --- a/plugins/postcss-focus-visible/CHANGELOG.md +++ b/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 diff --git a/plugins/postcss-focus-visible/README.md b/plugins/postcss-focus-visible/README.md index b218c1458..6c196f778 100644 --- a/plugins/postcss-focus-visible/README.md +++ b/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 diff --git a/plugins/postcss-focus-visible/docs/README.md b/plugins/postcss-focus-visible/docs/README.md index 9b8f4e205..3d786f967 100644 --- a/plugins/postcss-focus-visible/docs/README.md +++ b/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 +({ disablePolyfillReadyClass: true }) +``` + +```pcss + + +/* becomes */ + + +``` + [Selectors Level 4 specification]: [focus-visible polyfill]: https://github.com/WICG/focus-visible diff --git a/plugins/postcss-focus-visible/src/index.ts b/plugins/postcss-focus-visible/src/index.ts index 7589d55cc..2912ccf8c 100644 --- a/plugins/postcss-focus-visible/src/index.ts +++ b/plugins/postcss-focus-visible/src/index.ts @@ -1,7 +1,7 @@ import parser from 'postcss-selector-parser'; import type { PluginCreator } from 'postcss'; -type pluginOptions = { preserve?: boolean, replaceWith?: string }; +type pluginOptions = { preserve?: boolean, replaceWith?: string, disablePolyfillReadyClass?: boolean }; const POLYFILL_READY_CLASSNAME = 'js-focus-visible'; const PSEUDO = ':focus-visible'; @@ -12,6 +12,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { { preserve: true, replaceWith: '.focus-visible', + disablePolyfillReadyClass: false, }, // Provided options opts, @@ -68,7 +69,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { // becomes: // html.js-focus-visible > .foo:focus-visible, // .js-focus-visible html > .foo:focus-visible - { + 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]; diff --git a/plugins/postcss-focus-visible/test/basic.disable-polyfill-ready-class.expect.css b/plugins/postcss-focus-visible/test/basic.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..d59b848e3 --- /dev/null +++ b/plugins/postcss-focus-visible/test/basic.disable-polyfill-ready-class.expect.css @@ -0,0 +1,173 @@ +.focus-visible, .focus-visible { + order: 1; +} + +:focus-visible { + order: 1; +} + +.focus-visible, +.focus-visible, +.focus-visible test, +.focus-visible test, +test .focus-visible, +test .focus-visible, +test test.focus-visible, +test test.focus-visible, +html[dir="rtl"] .focus-visible, +html[dir="rtl"] .focus-visible, +test .focus-visible test, +test .focus-visible test, +test test.focus-visible test, +test test.focus-visible test, +test .focus-visible .focus-visible test, +test .focus-visible .focus-visible test, +test :matches(.focus-visible) test, +test :matches(.focus-visible) test, +test :matches(.focus-visible test) test, +test :matches(.focus-visible test) test, +test :matches(test .focus-visible) test, +test :matches(test .focus-visible) test, +test :matches(test test.focus-visible) test, +test :matches(test test.focus-visible) test, +test :matches(test .focus-visible test) test, +test :matches(test .focus-visible test) test, +test :matches(test test.focus-visible test) test, +test :matches(test test.focus-visible test) test, +test :matches(test .focus-visible .focus-visible test) test, +test :matches(test .focus-visible .focus-visible test) test { + order: 2; +} + +:focus-visible, +:focus-visible test, +test :focus-visible, +test test:focus-visible, +html[dir="rtl"] :focus-visible, +test :focus-visible test, +test test:focus-visible test, +test :focus-visible :focus-visible test, +test :matches(:focus-visible) test, +test :matches(:focus-visible test) test, +test :matches(test :focus-visible) test, +test :matches(test test:focus-visible) test, +test :matches(test :focus-visible test) test, +test :matches(test test:focus-visible test) test, +test :matches(test :focus-visible :focus-visible test) test { + order: 2; +} + +:ignore-focus-visible, +:focus-visible-ignore, +:ignorefocus-visible, +:focus-visibleignore { + order: 3; +} + +:focus-visible(.ignore) { + order: 4; +} + +.escaped\:focus-visible, +.escaped\:times\:two\:focus-visible, +.escaped\:focus-visible.focus-visible, +.escaped\:focus-visible.focus-visible, +.escaped\:times\:two.focus-visible, +.escaped\:times\:two.focus-visible { + order: 5; +} + +.escaped\:focus-visible, +.escaped\:times\:two\:focus-visible, +.escaped\:focus-visible:focus-visible, +.escaped\:times\:two:focus-visible { + order: 5; +} + +html .focus-visible, html .focus-visible { + order: 6; +} + +html :focus-visible { + order: 6; +} + +html.focus-visible, html.focus-visible { + order: 6.1; +} + +html:focus-visible { + order: 6.1; +} + +:not(.focus-visible), :not(.focus-visible) { + order: 7; +} + +:not(:focus-visible) { + order: 7; +} + +html :not(.focus-visible), html :not(.focus-visible) { + order: 8; +} + +html :not(:focus-visible) { + order: 8; +} + +.focus-visible::before, .focus-visible::before { + order: 10.0; +} + +:focus-visible::before { + order: 10.0; +} + +.focus-visible .foo, .focus-visible .foo { + order: 10.1; +} + +:focus-visible .foo { + order: 10.1; +} + +.focus-visible > .foo, .focus-visible > .foo { + order: 10.2; +} + +:focus-visible > .foo { + order: 10.2; +} + +::before.focus-visible, ::before.focus-visible { + order: 10.3; +} + +::before:focus-visible { + order: 10.3; +} + +.foo .focus-visible, .foo .focus-visible { + order: 10.4; +} + +.foo :focus-visible { + order: 10.4; +} + +.foo > .focus-visible, .foo > .focus-visible { + order: 10.5; +} + +.foo > :focus-visible { + order: 10.5; +} + +.focus-visible, .focus-visible { + order: 11; +} + +:FocuS-VisiblE { + order: 11; +} diff --git a/plugins/postcss-focus-visible/test/examples/example.disable-polyfill-ready-class.expect.css b/plugins/postcss-focus-visible/test/examples/example.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..1aaf1ed0d --- /dev/null +++ b/plugins/postcss-focus-visible/test/examples/example.disable-polyfill-ready-class.expect.css @@ -0,0 +1,6 @@ +:focus:not(.focus-visible), :focus:not(.focus-visible) { + outline: none; +} +:focus:not(:focus-visible) { + outline: none; +} diff --git a/plugins/postcss-focus-within/.tape.mjs b/plugins/postcss-focus-within/.tape.mjs index 91561fece..e403935be 100644 --- a/plugins/postcss-focus-within/.tape.mjs +++ b/plugins/postcss-focus-within/.tape.mjs @@ -11,6 +11,12 @@ postcssTape(plugin)({ replaceWith: '.focus-within', }, }, + 'basic:disable-polyfill-ready-class': { + message: 'supports { disablePolyfillReadyClass: true } usage', + options: { + disablePolyfillReadyClass: true + } + }, 'basic:preserve': { message: 'supports { preserve: false } usage', options: { @@ -36,6 +42,12 @@ postcssTape(plugin)({ replaceWith: '.focus-within', }, }, + 'examples/example:disable-polyfill-ready-class': { + message: 'minimal example', + options: { + disablePolyfillReadyClass: true + } + }, 'browser': { message: 'css for browser tests', }, diff --git a/plugins/postcss-focus-within/CHANGELOG.md b/plugins/postcss-focus-within/CHANGELOG.md index 49842ee8a..cc73cfb4b 100644 --- a/plugins/postcss-focus-within/CHANGELOG.md +++ b/plugins/postcss-focus-within/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Focus Within +### Unreleased + +- Added: `disablePolyfillReadyClass` plugin option to prevent `.js-focus-within` from being added. + ### 6.0.0 (July 8, 2022) - Breaking: Changed generated classes so it prepends `.js-focus-within` to the diff --git a/plugins/postcss-focus-within/README.md b/plugins/postcss-focus-within/README.md index bea315da3..a11b5c1b6 100644 --- a/plugins/postcss-focus-within/README.md +++ b/plugins/postcss-focus-within/README.md @@ -104,6 +104,33 @@ postcssFocusWithin({ replaceWith: '.focus-within' }); 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 +postcssFocusWithin({ disablePolyfillReadyClass: true }) +``` + +```pcss +.my-form-field:focus-within label { + background-color: yellow; +} + +/* becomes */ + +.my-form-field[focus-within] label, .my-form-field[focus-within] label { + background-color: yellow; +} +.my-form-field:focus-within label { + background-color: yellow; +} +``` + ## Browser ```js @@ -116,7 +143,7 @@ or ```html - + ``` diff --git a/plugins/postcss-focus-within/docs/README.md b/plugins/postcss-focus-within/docs/README.md index f2d551b91..0d586fbe5 100644 --- a/plugins/postcss-focus-within/docs/README.md +++ b/plugins/postcss-focus-within/docs/README.md @@ -79,6 +79,26 @@ to polyfill `classList` in those cases. 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 +({ disablePolyfillReadyClass: true }) +``` + +```pcss + + +/* becomes */ + + +``` + ## Browser ```js diff --git a/plugins/postcss-focus-within/src/index.ts b/plugins/postcss-focus-within/src/index.ts index dd2bd03c4..66285a34e 100644 --- a/plugins/postcss-focus-within/src/index.ts +++ b/plugins/postcss-focus-within/src/index.ts @@ -2,7 +2,7 @@ import parser from 'postcss-selector-parser'; import type { PluginCreator } from 'postcss'; 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-focus-within'; const PSEUDO = ':focus-within'; @@ -13,6 +13,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { { preserve: true, replaceWith: '[focus-within]', + disablePolyfillReadyClass: false, }, // Provided options opts, @@ -80,7 +81,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { // becomes: // html.js-focus-within > .foo:focus-within, // .js-focus-within 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]; diff --git a/plugins/postcss-focus-within/test/basic.disable-polyfill-ready-class.expect.css b/plugins/postcss-focus-within/test/basic.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..53194ef20 --- /dev/null +++ b/plugins/postcss-focus-within/test/basic.disable-polyfill-ready-class.expect.css @@ -0,0 +1,90 @@ +[focus-within], [focus-within] { + order: 1; +} + +:focus-within { + order: 1; +} + +[focus-within], +[focus-within], +[focus-within] test, +[focus-within] test, +test [focus-within], +test [focus-within], +test test[focus-within], +test test[focus-within], +test [focus-within] test, +test [focus-within] test, +test test[focus-within] test, +test test[focus-within] test, +test [focus-within] [focus-within] test, +test [focus-within] [focus-within] test, +test :matches([focus-within]) test, +test :matches([focus-within]) test, +test :matches([focus-within] test) test, +test :matches([focus-within] test) test, +test :matches(test [focus-within]) test, +test :matches(test [focus-within]) test, +test :matches(test test[focus-within]) test, +test :matches(test test[focus-within]) test, +test :matches(test [focus-within] test) test, +test :matches(test [focus-within] test) test, +test :matches(test test[focus-within] test) test, +test :matches(test test[focus-within] test) test, +test :matches(test [focus-within] [focus-within] test) test, +test :matches(test [focus-within] [focus-within] test) test { + order: 2; +} + +:focus-within, +:focus-within test, +test :focus-within, +test test:focus-within, +test :focus-within test, +test test:focus-within test, +test :focus-within :focus-within test, +test :matches(:focus-within) test, +test :matches(:focus-within test) test, +test :matches(test :focus-within) test, +test :matches(test test:focus-within) test, +test :matches(test :focus-within test) test, +test :matches(test test:focus-within test) test, +test :matches(test :focus-within :focus-within test) test { + order: 2; +} + +:ignore-focus-within, +:focus-within-ignore, +:ignorefocus-within, +:focus-withinignore { + order: 3; +} + +:focus-within(.ignore) { + order: 4; +} + +.escaped\:focus-within, +.escaped\:times\:two\:focus-within, +.escaped\:focus-within[focus-within], +.escaped\:focus-within[focus-within], +.escaped\:times\:two[focus-within], +.escaped\:times\:two[focus-within] { + order: 5; +} + +.escaped\:focus-within, +.escaped\:times\:two\:focus-within, +.escaped\:focus-within:focus-within, +.escaped\:times\:two:focus-within { + order: 5; +} + +[focus-within], [focus-within] { + order: 6; +} + +:FocuS-WithiN { + order: 6; +} diff --git a/plugins/postcss-focus-within/test/examples/example.disable-polyfill-ready-class.expect.css b/plugins/postcss-focus-within/test/examples/example.disable-polyfill-ready-class.expect.css new file mode 100644 index 000000000..76ba12407 --- /dev/null +++ b/plugins/postcss-focus-within/test/examples/example.disable-polyfill-ready-class.expect.css @@ -0,0 +1,6 @@ +.my-form-field[focus-within] label, .my-form-field[focus-within] label { + background-color: yellow; +} +.my-form-field:focus-within label { + background-color: yellow; +}