diff --git a/package-lock.json b/package-lock.json index 447527c221..2aa34e0d00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6940,10 +6940,13 @@ "version": "3.0.4", "license": "CC0-1.0", "dependencies": { - "postcss-selector-parser": "^6.0.10" + "@csstools/selector-specificity": "^2.0.1", + "postcss-selector-parser": "^6.0.10", + "postcss-value-parser": "^4.2.0" }, - "bin": { - "css-has-pseudo": "dist/cli.cjs" + "devDependencies": { + "@mrhenry/core-web": "^0.7.2", + "puppeteer": "^13.6.0" }, "engines": { "node": "^12 || ^14 || >=16" @@ -9994,7 +9997,11 @@ "css-has-pseudo": { "version": "file:plugins/css-has-pseudo", "requires": { - "postcss-selector-parser": "^6.0.10" + "@csstools/selector-specificity": "^2.0.1", + "@mrhenry/core-web": "^0.7.2", + "postcss-selector-parser": "^6.0.10", + "postcss-value-parser": "^4.2.0", + "puppeteer": "^13.6.0" } }, "css-prefers-color-scheme": { diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index 83d2f17631..67c580e483 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -269,7 +269,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 83d2f17631..67c580e483 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -269,7 +269,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 42d22f1dd0..8662f17da5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -189,7 +189,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index e2977fde23..aa72d35384 100644 --- 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 @@ -188,7 +188,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 8786d3cea9..13a393a42d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -181,7 +181,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 74519e208a..beeba4b2ba 100644 --- 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 @@ -181,7 +181,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index d0be138469..55763624e3 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -292,7 +292,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 73df8d7c51..34b0a3fa7d 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -185,7 +185,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 68ba132440..37806912a9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -173,7 +173,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 8ef43c0138..3c2fbd479e 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -301,7 +301,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index d9f1048f96..12dca7cf3a 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -290,7 +290,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index ba22fb9369..57e75c0928 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -276,7 +276,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index ec6c8885ac..4e01ebd919 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -524,7 +524,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 73a8f5820f..725600ff58 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -157,7 +157,7 @@ background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 642c7b7f41..a58b488f01 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -190,7 +190,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 4e07900568..26f9a3fee5 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -178,7 +178,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index 3e4de3670c..57e734eae7 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -297,7 +297,7 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)] { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist) { 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 index b6e6b4162f..ba171663b1 100644 --- 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 @@ -10,7 +10,7 @@ order: 3; } -[\:has\(.a\)] { +[csstools-has-1m-2w-2p-37-14-1a-2p-15] { order: 4; } 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 index 92d3a8efde..f72e022552 100644 --- 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 @@ -10,7 +10,7 @@ order: 3; } -[\:has\(.a\)] { +[csstools-has-1m-2w-2p-37-14-1a-2p-15] { order: 4; } 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 index 64a31a360e..1e7ff7369e 100644 --- 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 @@ -6,7 +6,7 @@ input:blank { order: 1; } -a[\:has\(\%3E\%20img\)] { +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) { 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 index 1cd7cd9aa8..88a4963f9b 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -474,7 +474,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { 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 index 9b8ae465cd..47a28fae37 100644 --- 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 @@ -535,7 +535,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n background-color: yellow; } -.test-has-pseudo-class[\:has\(.inner-class\)]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { +[csstools-has-1a-38-2t-37-38-19-2w-2p-37-19-34-37-2t-39-2s-33-19-2r-30-2p-37-37-1m-2w-2p-37-14-1a-2x-32-32-2t-36-19-2r-30-2p-37-37-15]:not(.does-not-exist):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { background-color: yellow; } diff --git a/plugins/css-has-pseudo/.gitignore b/plugins/css-has-pseudo/.gitignore index 3559a9367b..7172b04f10 100644 --- a/plugins/css-has-pseudo/.gitignore +++ b/plugins/css-has-pseudo/.gitignore @@ -1,14 +1,6 @@ node_modules -dist package-lock.json yarn.lock -browser.js -!src/browser.js -*.log* *.result.css *.result.css.map -!.editorconfig -!.gitignore -!.rollup.js -!.tape.js -!.travis.yml +dist/* diff --git a/plugins/css-has-pseudo/.tape.mjs b/plugins/css-has-pseudo/.tape.mjs index 77aab682e8..58629ecdf5 100644 --- a/plugins/css-has-pseudo/.tape.mjs +++ b/plugins/css-has-pseudo/.tape.mjs @@ -1,5 +1,8 @@ import postcssTape from '../../packages/postcss-tape/dist/index.mjs'; import plugin from 'css-has-pseudo'; +import postcssLogical from 'postcss-logical'; +import postcssNesting from 'postcss-nesting'; +import postcssDirPseudoClass from 'postcss-dir-pseudo-class'; postcssTape(plugin)({ 'basic': { @@ -11,6 +14,21 @@ postcssTape(plugin)({ preserve: false } }, + 'basic:specificity-matching-name': { + message: 'supports { specificityMatchingName: "other-thing-that-does-not-exist" } usage', + options: { + specificityMatchingName: 'other-thing-that-does-not-exist' + } + }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-false': { + message: 'minimal example', + options: { + preserve: false + } + }, 'generated-selector-cases': { message: 'correctly handles generated cases', warnings: 1, @@ -18,4 +36,42 @@ postcssTape(plugin)({ preserve: false } }, -}) + 'browser': { + message: 'prepare CSS for chrome test', + options: { + preserve: false + } + }, + 'plugin-order-logical:before': { + message: 'works with other plugins that modify selectors', + plugins: [postcssLogical({ preserve: false }), postcssDirPseudoClass({ preserve: false }), plugin({ preserve: false })], + }, + 'plugin-order-logical:after': { + message: 'works with other plugins that modify selectors', + plugins: [plugin({ preserve: false }), postcssLogical({ preserve: false }), postcssDirPseudoClass({ preserve: false })], + }, + 'plugin-order-logical:before:preserve': { + message: 'works with other plugins that modify selectors', + plugins: [postcssLogical({ preserve: true }), postcssDirPseudoClass({ preserve: true }), plugin({ preserve: true })], + }, + 'plugin-order-logical:after:preserve': { + message: 'works with other plugins that modify selectors', + plugins: [plugin({ preserve: true }), postcssLogical({ preserve: true }), postcssDirPseudoClass({ preserve: true })], + }, + 'plugin-order-nesting:before': { + message: 'works with other plugins that modify selectors', + plugins: [postcssNesting({ preserve: false }), plugin({ preserve: false })], + }, + 'plugin-order-nesting:after': { + message: 'works with other plugins that modify selectors', + plugins: [postcssNesting({ preserve: false }), plugin({ preserve: false })], + }, + 'plugin-order-nesting:before:preserve': { + message: 'works with other plugins that modify selectors', + plugins: [plugin({ preserve: true }), postcssNesting({ preserve: true })], + }, + 'plugin-order-nesting:after:preserve': { + message: 'works with other plugins that modify selectors', + plugins: [plugin({ preserve: true }), postcssNesting({ preserve: true })], + } +}); diff --git a/plugins/css-has-pseudo/CHANGELOG.md b/plugins/css-has-pseudo/CHANGELOG.md index 5cbec5ed43..141631b3b7 100644 --- a/plugins/css-has-pseudo/CHANGELOG.md +++ b/plugins/css-has-pseudo/CHANGELOG.md @@ -1,5 +1,32 @@ # Changes to CSS Has Pseudo +### Unreleased (major) + +[Read the full changelog](https://github.com/csstools/postcss-plugins/wiki/PostCSS-Preset-Env-8) + +- Breaking: removed old CDN urls +- Added: 'hover' options for browser polyfill +- Added: 'observedAttributes' options for browser polyfill +- Added: 'forcePolyfill' options for browser polyfill +- Added: Rules within `@supports selector(:has(something))` won't be transformed. +- Fix: Use base36 encoding to support all possible selectors. + +#### How to migrate : + +##### Re-build your CSS with the new version of the library. + +##### If you use a CDN url, please update it. + +```diff +- ++ +``` + +```diff +- ++ +``` + ### 3.0.4 (February 5, 2022) - Rebuild of browser polyfills diff --git a/plugins/css-has-pseudo/INSTALL.md b/plugins/css-has-pseudo/INSTALL.md index 49780082c5..67915df268 100644 --- a/plugins/css-has-pseudo/INSTALL.md +++ b/plugins/css-has-pseudo/INSTALL.md @@ -1,13 +1,13 @@ -# Installing CSS Has Pseudo +# Installing PostCSS Has Pseudo -[CSS Has Pseudo] runs in all Node environments, with special instructions for: +[PostCSS Has Pseudo] runs in all Node environments, with special instructions for: | [Node](#node) | [PostCSS CLI](#postcss-cli) | [Webpack](#webpack) | [Create React App](#create-react-app) | [Gulp](#gulp) | [Grunt](#grunt) | | --- | --- | --- | --- | --- | --- | ## Node -Add [CSS Has Pseudo] to your project: +Add [PostCSS Has Pseudo] to your project: ```bash npm install postcss css-has-pseudo --save-dev @@ -32,7 +32,7 @@ Add [PostCSS CLI] to your project: npm install postcss-cli css-has-pseudo --save-dev ``` -Use [CSS Has Pseudo] in your `postcss.config.js` configuration file: +Use [PostCSS Has Pseudo] in your `postcss.config.js` configuration file: ```js const postcssHasPseudo = require('css-has-pseudo'); @@ -54,7 +54,7 @@ Add [PostCSS Loader] to your project: npm install postcss-loader css-has-pseudo --save-dev ``` -Use [CSS Has Pseudo] in your Webpack configuration: +Use [PostCSS Has Pseudo] in your Webpack configuration: ```js module.exports = { @@ -98,7 +98,7 @@ Add [React App Rewired] and [React App Rewire PostCSS] to your project: npm install react-app-rewired react-app-rewire-postcss css-has-pseudo --save-dev ``` -Use [React App Rewire PostCSS] and [CSS Has Pseudo] in your +Use [React App Rewire PostCSS] and [PostCSS Has Pseudo] in your `config-overrides.js` file: ```js @@ -120,7 +120,7 @@ Add [Gulp PostCSS] to your project: npm install gulp-postcss css-has-pseudo --save-dev ``` -Use [CSS Has Pseudo] in your Gulpfile: +Use [PostCSS Has Pseudo] in your Gulpfile: ```js const postcss = require('gulp-postcss'); @@ -145,7 +145,7 @@ Add [Grunt PostCSS] to your project: npm install grunt-postcss css-has-pseudo --save-dev ``` -Use [CSS Has Pseudo] in your Gruntfile: +Use [PostCSS Has Pseudo] in your Gruntfile: ```js const postcssHasPseudo = require('css-has-pseudo'); @@ -171,6 +171,6 @@ grunt.initConfig({ [PostCSS]: https://github.com/postcss/postcss [PostCSS CLI]: https://github.com/postcss/postcss-cli [PostCSS Loader]: https://github.com/postcss/postcss-loader -[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo +[PostCSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo [React App Rewire PostCSS]: https://github.com/csstools/react-app-rewire-postcss [React App Rewired]: https://github.com/timarney/react-app-rewired diff --git a/plugins/css-has-pseudo/README-BROWSER.md b/plugins/css-has-pseudo/README-BROWSER.md deleted file mode 100644 index 3af212ef19..0000000000 --- a/plugins/css-has-pseudo/README-BROWSER.md +++ /dev/null @@ -1,67 +0,0 @@ -# CSS Has Pseudo for Browsers [][CSS Has Pseudo] - -[![NPM Version][npm-img]][npm-url] -[Discord][discord] - -[CSS Has Pseudo] lets you style elements relative to other elements in CSS, -following the [Selectors Level 4] specification. - -```css -input { - /* style an input */ -} - -body[\:has\(\:focus\)] { - /* style an input without a value */ -} -``` - -## Usage - -Add [CSS Has Pseudo] to your build tool: - -```bash -npm install css-has-pseudo -``` - -Then include and initialize it on your document: - -```js -const cssHasPseudo = require('css-has-pseudo/browser'); - -cssHasPseudo(document); -``` - -```html - - - -``` - -## Dependencies - -Web API's: - -- [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) -- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) -- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) with support for post CSS 2.1 selectors - -ECMA Script: - -- `Array.prototype.filter` -- `Array.prototype.forEach` -- `Array.prototype.indexOf` -- `Array.prototype.join` -- `Array.prototype.map` -- `Array.prototype.splice` -- `RegExp.prototype.exec` -- `String.prototype.match` -- `String.prototype.replace` -- `String.prototype.split` - -[discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg -[npm-url]: https://www.npmjs.com/package/css-has-pseudo - -[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo -[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has diff --git a/plugins/css-has-pseudo/README-POSTCSS.md b/plugins/css-has-pseudo/README-POSTCSS.md deleted file mode 100644 index 6f50c2dc5e..0000000000 --- a/plugins/css-has-pseudo/README-POSTCSS.md +++ /dev/null @@ -1,91 +0,0 @@ -# CSS Has Pseudo for PostCSS [][CSS Has Pseudo] - -[![NPM Version][npm-img]][npm-url] -[Discord][discord] - -[CSS Has Pseudo] lets you style elements relative to other elements in CSS, -following the [Selectors Level 4] specification. - -```css -body:has(:focus) { - background-color: yellow; -} - -/* becomes */ - -body[\:has\(\:focus\)] { - background-color: yellow; -} - -body:has(:focus) { - background-color: yellow; -} -``` - -[CSS Has Pseudo] duplicates rules using the `:has` pseudo-class with a `[has]` -attribute selector. The preservation of the original `:has` rule can be -disabled using the `preserve` option. - -## Usage - -Add [CSS Has Pseudo] to your project: - -```bash -npm install css-has-pseudo --save-dev -``` - -Use [CSS Has Pseudo] to process your CSS: - -```js -const postcssHasPseudo = require('css-has-pseudo'); - -postcssHasPseudo.process(YOUR_CSS /*, processOptions, pluginOptions */); -``` - -Or use it as a [PostCSS] plugin: - -```js -const postcss = require('postcss'); -const postcssHasPseudo = require('css-has-pseudo'); - -postcss([ - postcssHasPseudo(/* pluginOptions */) -]).process(YOUR_CSS /*, processOptions */); -``` - -[CSS Has Pseudo] runs in all Node environments, with special -instructions for: - -| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | -| --- | --- | --- | --- | --- | --- | - -## Options - -### preserve - -The `preserve` option defines whether the original selector should remain. By -default, the original selector is preserved. - -```js -hasPseudo({ preserve: false }); -``` - -```css -body:has(:focus) { - background-color: yellow; -} - -/* becomes */ - -body[\:has\(\:focus\)] { - background-color: yellow; -} -``` - -[discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg -[npm-url]: https://www.npmjs.com/package/css-has-pseudo - -[PostCSS]: https://github.com/postcss/postcss -[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo -[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo diff --git a/plugins/css-has-pseudo/README.md b/plugins/css-has-pseudo/README.md index 0125e3fd5c..d19fe1266e 100644 --- a/plugins/css-has-pseudo/README.md +++ b/plugins/css-has-pseudo/README.md @@ -1,105 +1,308 @@ -# CSS Has Pseudo [][CSS Has Pseudo] +# PostCSS Has Pseudo [PostCSS Logo][postcss] -[![NPM Version][npm-img]][npm-url] -[Discord][discord] +[npm version][npm-url] [CSS Standard Status][css-url] [Build Status][cli-url] [Discord][discord] -[CSS Has Pseudo] lets you style elements relative to other elements in CSS, -following the [Selectors Level 4] specification. +[PostCSS Has Pseudo] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification. -[!['Can I use' table](https://caniuse.bitsofco.de/image/css-has.png)](https://caniuse.com/#feat=css-has) - -```css -a:has(> img) { - /* style links that contain an image */ +```pcss +.title:has(+ p) { + margin-bottom: 1.5rem; } -h1:has(+ p) { - /* style level 1 headings that are followed by a paragraph */ -} +/* becomes */ -section:not(:has(h1, h2, h3, h4, h5, h6)) { - /* style sections that don’t contain any heading elements */ +[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; } - -body:has(:focus) { - /* style the body if it contains a focused element */ +.title:has(+ p) { + margin-bottom: 1.5rem; } ``` ## Usage -From the command line, transform CSS files that use `:has` selectors: +Add [PostCSS Has Pseudo] to your project: ```bash -npx css-has-pseudo SOURCE.css --output TRANSFORMED.css +npm install postcss css-has-pseudo --save-dev ``` -Next, use your transformed CSS with this script: +Use it as a [PostCSS] plugin: -```html - - - +```js +const postcss = require('postcss'); +const postcssHasPseudo = require('css-has-pseudo'); + +postcss([ + postcssHasPseudo(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); ``` -⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.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] runs in all Node environments, with special +instructions for: -⚠️ If you were using an older version via a CDN, please update the entire url. -The old URL will no longer work in a future release. +| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) | +| --- | --- | --- | --- | --- | --- | -That’s it. The script is 765 bytes and works in most browser versions, including -Internet Explorer 11. With a [Mutation Observer polyfill], the script will work -down to Internet Explorer 9. +## Options -See [README BROWSER](README-BROWSER.md) for more information. +### preserve -## How it works +The `preserve` option determines whether the original notation +is preserved. By default the original rules are preserved. -The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:has`, -replacing them with an alternative `[:has]` selector. +```js +postcssHasPseudo({ preserve: false }) +``` -```css -body:has(:focus) { - background-color: yellow; +```pcss +.title:has(+ p) { + margin-bottom: 1.5rem; } -section:not(:has(h1, h2, h3, h4, h5, h6)) { - background-color: gray; +/* becomes */ + +[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; } +``` -/* becomes */ +### specificityMatchingName + +The `specificityMatchingName` option allows you to change to selector that is used to adjust specificity. +The default value is `does-not-exist`. +If this is an actual class, id or tag name in your code, you will need to set a different option here. + +See how `:not` is used to modify [specificity](#specificity). + +```js +postcssHasPseudo({ specificityMatchingName: 'something-random' }) +``` -body[\:has\(\:focus\)] { - background-color: yellow; +[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=.x%3Ahas(%3E%20%23a%3Ahover)) + +Before : + +```css +.x:has(> #a:hover) { + order: 11; } +``` -body:has(:focus) { - background-color: yellow; +After : + +[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist)) + +```css +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) { + order: 11; } +``` + +## ⚠️ Known shortcomings + +### Specificity + +`:has` transforms will result in at least one attribute selector with specificity `0, 1, 0`.
+If your selector only has tags we won't be able to match the original specificity. + +Before : + +[specificity 0, 0, 2](https://polypane.app/css-specificity-calculator/#selector=figure%3Ahas(%3E%20img)) + +```css +figure:has(> img) +``` + +After : + +[specificity 0, 1, 2](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15%5D%3Anot(does-not-exist)%3Anot(does-not-exist)) + +```css +[csstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) +``` + +### Plugin order + +As selectors are encoded, this plugin (or `postcss-preset-env`) must be run after any other plugin that transforms selectors. + +If other plugins are used, you need to place these in your config before `postcss-preset-env` or `css-has-pseudo`. + +Please let us know if you have issues with plugins that transform selectors. +Then we can investigate and maybe fix these. + +## Browser + +```js +// initialize prefersColorScheme (applies the current OS color scheme, if available) +import cssHasPseudo from 'css-has-pseudo/browser'; +cssHasPseudo(document); +``` + +or + +```html + + + +``` + +⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.4/dist/browser-global.js` +Without the version, you might unexpectedly get a new major version of the library with breaking changes. -section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] { - background-color: gray; +[PostCSS Has Pseudo] works in all major browsers, including +Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work +down to Internet Explorer 9. + +### Browser Usage + +#### hover + +The `hover` option determines if `:hover` pseudo-class should be tracked. +This is disabled by default because it is an expensive operation. + +```js +cssHasPseudo(document, { hover: true }); +``` + +#### observedAttributes + +The `observedAttributes` option determines which html attributes are observed. +If you do any client side modification of non-standard attributes and use these in combination with `:has()` you should add these here. + +```js +cssHasPseudo(document, { observedAttributes: ['something-not-standard'] }); +``` + +#### forcePolyfill + +The `forcePolyfill` option determines if the polyfill is used even when the browser has native support. +This is needed when you set `preserve: false` in the PostCSS plugin config. + +```js +cssHasPseudo(document, { forcePolyfill: true }); +``` + +#### debug + +The `debug` option determines if errors are emitted to the console in browser. +By default the polyfill will not emit errors or warnings. + +```js +cssHasPseudo(document, { debug: true }); +``` + + +### Browser Dependencies + +Web API's: + +- [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) +- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) +- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) with support for post CSS 2.1 selectors and `:scope` selectors. + +ECMA Script: + +- `Array.prototype.filter` +- `Array.prototype.forEach` +- `Array.prototype.indexOf` +- `Array.prototype.join` +- `Array.prototype.map` +- `Array.prototype.splice` +- `RegExp.prototype.exec` +- `String.prototype.match` +- `String.prototype.replace` +- `String.prototype.split` + +## CORS + +⚠️ Applies to you if you load CSS from a different domain than the page. + +In this case the CSS is treated as untrusted and will not be made available to the JavaScript polyfill. +The polyfill will not work without applying the correct configuration for CORS. + +Example : + +| page | css | CORS applies | +| --- | --- | --- | +| https://example.com/ | https://example.com/style.css | no | +| https://example.com/ | https://other.com/style.css | yes | + + +**You might see one of these error messages :** + +Chrome : + +> DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules + +Safari : + +> SecurityError: Not allowed to access cross-origin stylesheet + +Firefox : + +> DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet + +To resolve CORS errors you need to take two steps : + +- add an HTTP header `Access-Control-Allow-Origin: ` when serving your CSS file. +- add `crossorigin="anonymous"` to the `` tag for your CSS file. + +In a node server setting the HTTP header might look like this : + +```js +// http://localhost:8080 is the domain of your page! +res.setHeader('Access-Control-Allow-Origin', 'https://example.com'); +``` + +You can also configure a wildcard but please be aware that this might be a security risk. +It is better to only set the header for the domain you want to allow and only on the responses you want to allow. + +HTML might look like this : + +```html + +``` + + +## How it works + +The [PostCSS Has Pseudo] clones rules containing `:has()`, +replacing them with an alternative `[csstools-has-]` selector. + +```pcss +.title:has(+ p) { + margin-bottom: 1.5rem; } -section:not(:has(h1, h2, h3, h4, h5, h6)) { - background-color: gray; +/* becomes */ + +[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) { + margin-bottom: 1.5rem; } ``` -Next, the [JavaScript library](README-BROWSER.md) adds a `[:has]` attribute to +Next, the [browser script](#browser) adds a `[:has]` attribute to elements otherwise matching `:has` natively. ```html - - - +
+

A title block

+

With an extra paragraph

+
``` +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#has-pseudo-class [discord]: https://discord.gg/bUadyRwkJS -[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg [npm-url]: https://www.npmjs.com/package/css-has-pseudo -[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo -[Mutation Observer polyfill]: https://github.com/webmodules/mutation-observer -[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo +[Selectors Level 4]: https://www.w3.org/TR/selectors-4/#has-pseudo diff --git a/plugins/css-has-pseudo/docs/README.md b/plugins/css-has-pseudo/docs/README.md new file mode 100644 index 0000000000..66592a64de --- /dev/null +++ b/plugins/css-has-pseudo/docs/README.md @@ -0,0 +1,225 @@ + + + + + + + + + + + + + + + + +
+ +[] lets you style elements relative to other elements in CSS, following the [Selectors Level 4] specification. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default the original rules are preserved. + +```js +({ preserve: false }) +``` + +```pcss + + +/* becomes */ + + +``` + +### specificityMatchingName + +The `specificityMatchingName` option allows you to change to selector that is used to adjust specificity. +The default value is `does-not-exist`. +If this is an actual class, id or tag name in your code, you will need to set a different option here. + +See how `:not` is used to modify [specificity](#specificity). + +```js +({ specificityMatchingName: 'something-random' }) +``` + +[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=.x%3Ahas(%3E%20%23a%3Ahover)) + +Before : + +```css +.x:has(> #a:hover) { + order: 11; +} +``` + +After : + +[specificity 1, 2, 0](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15%5D%3Anot(%23does-not-exist)%3Anot(.does-not-exist)) + +```css +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) { + order: 11; +} +``` + +## ⚠️ Known shortcomings + +### Specificity + +`:has` transforms will result in at least one attribute selector with specificity `0, 1, 0`.
+If your selector only has tags we won't be able to match the original specificity. + +Before : + +[specificity 0, 0, 2](https://polypane.app/css-specificity-calculator/#selector=figure%3Ahas(%3E%20img)) + +```css +figure:has(> img) +``` + +After : + +[specificity 0, 1, 2](https://polypane.app/css-specificity-calculator/#selector=%5Bcsstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15%5D%3Anot(does-not-exist)%3Anot(does-not-exist)) + +```css +[csstools-has-2u-2x-2v-39-36-2t-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) +``` + +### Plugin order + +As selectors are encoded, this plugin (or `postcss-preset-env`) must be run after any other plugin that transforms selectors. + +If other plugins are used, you need to place these in your config before `postcss-preset-env` or `css-has-pseudo`. + +Please let us know if you have issues with plugins that transform selectors. +Then we can investigate and maybe fix these. + +## Browser + +```js +// initialize prefersColorScheme (applies the current OS color scheme, if available) +import cssHasPseudo from '/browser'; +cssHasPseudo(document); +``` + +or + +```html + + + +``` + +⚠️ Please use a versioned url, like this : `https://unpkg.com/@/dist/browser-global.js` +Without the version, you might unexpectedly get a new major version of the library with breaking changes. + +[] works in all major browsers, including +Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work +down to Internet Explorer 9. + +### Browser Usage + +#### hover + +The `hover` option determines if `:hover` pseudo-class should be tracked. +This is disabled by default because it is an expensive operation. + +```js +cssHasPseudo(document, { hover: true }); +``` + +#### observedAttributes + +The `observedAttributes` option determines which html attributes are observed. +If you do any client side modification of non-standard attributes and use these in combination with `:has()` you should add these here. + +```js +cssHasPseudo(document, { observedAttributes: ['something-not-standard'] }); +``` + +#### forcePolyfill + +The `forcePolyfill` option determines if the polyfill is used even when the browser has native support. +This is needed when you set `preserve: false` in the PostCSS plugin config. + +```js +cssHasPseudo(document, { forcePolyfill: true }); +``` + +#### debug + +The `debug` option determines if errors are emitted to the console in browser. +By default the polyfill will not emit errors or warnings. + +```js +cssHasPseudo(document, { debug: true }); +``` + + +### Browser Dependencies + +Web API's: + +- [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) +- [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) +- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) with support for post CSS 2.1 selectors and `:scope` selectors. + +ECMA Script: + +- `Array.prototype.filter` +- `Array.prototype.forEach` +- `Array.prototype.indexOf` +- `Array.prototype.join` +- `Array.prototype.map` +- `Array.prototype.splice` +- `RegExp.prototype.exec` +- `String.prototype.match` +- `String.prototype.replace` +- `String.prototype.split` + + + +## How it works + +The [] clones rules containing `:has()`, +replacing them with an alternative `[csstools-has-]` selector. + +```pcss + + +/* becomes */ + + +``` + +Next, the [browser script](#browser) adds a `[:has]` attribute to +elements otherwise matching `:has` natively. + +```html +
+

A title block

+

With an extra paragraph

+
+``` + + +[Selectors Level 4]: diff --git a/plugins/css-has-pseudo/package.json b/plugins/css-has-pseudo/package.json index 2a475a6d78..38fd2e9d32 100644 --- a/plugins/css-has-pseudo/package.json +++ b/plugins/css-has-pseudo/package.json @@ -2,7 +2,21 @@ "name": "css-has-pseudo", "description": "Style elements relative to other elements in CSS", "version": "3.0.4", - "author": "Jonathan Neal ", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + }, + { + "name": "Jonathan Neal", + "email": "jonathantneal@hotmail.com" + } + ], "license": "CC0-1.0", "funding": { "type": "opencollective", @@ -13,9 +27,7 @@ }, "main": "dist/index.cjs", "module": "dist/index.mjs", - "bin": { - "css-has-pseudo": "dist/cli.cjs" - }, + "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.mjs", @@ -35,27 +47,33 @@ "CHANGELOG.md", "LICENSE.md", "README.md", - "browser.js", "dist" ], "dependencies": { - "postcss-selector-parser": "^6.0.10" + "@csstools/selector-specificity": "^2.0.1", + "postcss-selector-parser": "^6.0.10", + "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2" }, + "devDependencies": { + "@mrhenry/core-web": "^0.7.2", + "puppeteer": "^13.6.0" + }, "scripts": { - "build": "rollup -c ../../rollup/default.js && npm run copy-browser-scripts-to-old-location", + "build": "rollup -c ../../rollup/default.js", "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"", - "copy-browser-scripts-to-old-location": "node -e \"fs.copyFileSync('./dist/browser-global.js', './browser.js')\"", - "docs": "node ../../.github/bin/generate-docs/install.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", "lint": "npm run lint:eslint && npm run lint:package-json", "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern", "lint:package-json": "node ../../.github/bin/format-package-json.mjs", "prepublishOnly": "npm run clean && npm run build && npm run test", - "test": "node .tape.mjs && npm run test:exports", + "test": "node .tape.mjs && npm run test:unit && npm run test:exports", + "test:browser": "node ./test/_browser.mjs", "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs", - "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" + "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs", + "test:unit": "node ./src/encode/test.mjs" }, "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo#readme", "repository": { @@ -78,8 +96,10 @@ "selector" ], "csstools": { + "cssdbId": "has-pseudo-class", "exportName": "postcssHasPseudo", - "humanReadableName": "CSS Has Pseudo" + "humanReadableName": "PostCSS Has Pseudo", + "specUrl": "https://www.w3.org/TR/selectors-4/#has-pseudo" }, "volta": { "extends": "../../package.json" diff --git a/plugins/css-has-pseudo/src/browser.js b/plugins/css-has-pseudo/src/browser.js index 7fe3f28c82..398156d8c1 100644 --- a/plugins/css-has-pseudo/src/browser.js +++ b/plugins/css-has-pseudo/src/browser.js @@ -1,5 +1,54 @@ -/* global MutationObserver,requestAnimationFrame */ -export default function cssHasPseudo(document) { +/* global MutationObserver,requestAnimationFrame,cancelAnimationFrame,self,HTMLElement */ + +import '@mrhenry/core-web/modules/~element-qsa-has.js'; +import extractEncodedSelectors from './encode/extract.mjs'; +import encodeCSS from './encode/encode.mjs'; + +export default function cssHasPseudo(document, options) { + // OPTIONS + { + if (!options) { + options = {}; + } + + options = { + hover: (!!options.hover) || false, + debug: (!!options.debug) || false, + observedAttributes: options.observedAttributes || [], + forcePolyfill: (!!options.forcePolyfill) || false, + }; + + if (!options.forcePolyfill) { + try { + // Chrome does not support forgiving selector lists in :has() + document.querySelector(':has(*, :does-not-exist, > *)'); + + // Safari incorrectly returns the html element with this query + if (!document.querySelector(':has(:scope *)')) { + // Native support detected. + // Doing early return. + return; + } + + // fallthrough to polyfill + } catch (_) { + // fallthrough to polyfill + } + } + + if (!Array.isArray(options.observedAttributes)) { + options.observedAttributes = []; + } + + options.observedAttributes = options.observedAttributes.filter((x) => { + return (typeof x === 'string'); + }); + + // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes + // `data-*` and `style` were omitted + options.observedAttributes = options.observedAttributes.concat(['accept', 'accept-charset', 'accesskey', 'action', 'align', 'allow', 'alt', 'async', 'autocapitalize', 'autocomplete', 'autofocus', 'autoplay', 'buffered', 'capture', 'challenge', 'charset', 'checked', 'cite', 'class', 'code', 'codebase', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'coords', 'crossorigin', 'csp', 'data', 'datetime', 'decoding', 'default', 'defer', 'dir', 'dirname', 'disabled', 'download', 'draggable', 'enctype', 'enterkeyhint', 'for', 'form', 'formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget', 'headers', 'hidden', 'high', 'href', 'hreflang', 'http-equiv', 'icon', 'id', 'importance', 'integrity', 'intrinsicsize', 'inputmode', 'ismap', 'itemprop', 'keytype', 'kind', 'label', 'lang', 'language', 'list', 'loop', 'low', 'manifest', 'max', 'maxlength', 'minlength', 'media', 'method', 'min', 'multiple', 'muted', 'name', 'novalidate', 'open', 'optimum', 'pattern', 'ping', 'placeholder', 'poster', 'preload', 'radiogroup', 'readonly', 'referrerpolicy', 'rel', 'required', 'reversed', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'spellcheck', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'summary', 'tabindex', 'target', 'title', 'translate', 'type', 'usemap', 'value', 'width', 'wrap']); + } + const observedItems = []; // document.createAttribute() doesn't support `:` in the name. innerHTML does @@ -7,127 +56,207 @@ export default function cssHasPseudo(document) { // walk all stylesheets to collect observed css rules [].forEach.call(document.styleSheets, walkStyleSheet); - transformObservedItems(); + transformObservedItemsThrottled(); // observe DOM modifications that affect selectors - const mutationObserver = new MutationObserver(mutationsList => { - mutationsList.forEach(mutation => { - [].forEach.call(mutation.addedNodes || [], node => { - // walk stylesheets to collect observed css rules - if (node.nodeType === 1 && node.sheet) { - walkStyleSheet(node.sheet); + if ('MutationObserver' in self) { + const mutationObserver = new MutationObserver((mutationsList) => { + mutationsList.forEach(mutation => { + [].forEach.call(mutation.addedNodes || [], node => { + // walk stylesheets to collect observed css rules + if (node.nodeType === 1 && node.sheet) { + walkStyleSheet(node.sheet); + } + }); + + // transform observed css rules + cleanupObservedCssRules(); + transformObservedItemsThrottled(); + }); + }); + + mutationObserver.observe(document, { childList: true, subtree: true, attributes: true, attributeFilter: options.observedAttributes }); + } + + // observe DOM events that affect pseudo-selectors + document.addEventListener('focus', transformObservedItemsThrottled, true); + document.addEventListener('blur', transformObservedItemsThrottled, true); + document.addEventListener('input', transformObservedItemsThrottled); + document.addEventListener('change', transformObservedItemsThrottled, true); + + if (options.hover) { + if ('onpointerenter' in document) { + document.addEventListener('pointerenter', transformObservedItemsThrottled, true); + document.addEventListener('pointerleave', transformObservedItemsThrottled, true); + } else { + document.addEventListener('mouseover', transformObservedItemsThrottled, true); + document.addEventListener('mouseout', transformObservedItemsThrottled, true); + } + } + + // observe Javascript setters that effect pseudo-selectors + if ('defineProperty' in Object && 'getOwnPropertyDescriptor' in Object && 'hasOwnProperty' in Object) { + try { + // eslint-disable-next-line no-inner-declarations + function observeProperty(proto, property) { + // eslint-disable-next-line no-prototype-builtins + if (proto.hasOwnProperty(property)) { + const descriptor = Object.getOwnPropertyDescriptor(proto, property); + if (descriptor && descriptor.configurable && 'set' in descriptor) { + Object.defineProperty(proto, property, { + configurable: descriptor.configurable, + enumerable: descriptor.enumerable, + get: function () { + return descriptor.get.apply(this, arguments); + }, + set: function () { + descriptor.set.apply(this, arguments); + + try { + transformObservedItemsThrottled(); + } catch (_) { + // should never happen as there is an inner try/catch + // but just in case + } + }, + }); + } } + } + + if ('HTMLElement' in self && HTMLElement.prototype) { + observeProperty(HTMLElement.prototype, 'disabled'); + } + + // Not all of these elements have all of these properties. + // But the code above checks if they exist first. + ['checked', 'selected', 'readOnly', 'required'].forEach((property) => { + [ + 'HTMLButtonElement', + 'HTMLFieldSetElement', + 'HTMLInputElement', + 'HTMLMeterElement', + 'HTMLOptGroupElement', + 'HTMLOptionElement', + 'HTMLOutputElement', + 'HTMLProgressElement', + 'HTMLSelectElement', + 'HTMLTextAreaElement', + ].forEach((elementName) => { + if (elementName in self && self[elementName].prototype) { + observeProperty(self[elementName].prototype, property); + } + }); }); + } catch (e) { + if (options.debug) { + console.error(e); + } + } + } - // transform observed css rules - cleanupObservedCssRules(); + let transformObservedItemsThrottledBusy = false; + function transformObservedItemsThrottled() { + if (transformObservedItemsThrottledBusy) { + cancelAnimationFrame(transformObservedItemsThrottledBusy); + } + + transformObservedItemsThrottledBusy = requestAnimationFrame(() => { transformObservedItems(); }); - }); + } - mutationObserver.observe(document, { childList: true, subtree: true }); + // transform observed css rules + function transformObservedItems() { + observedItems.forEach((item) => { + const nodes = []; - // observe DOM events that affect pseudo-selectors - document.addEventListener('focus', transformObservedItems, true); - document.addEventListener('blur', transformObservedItems, true); - document.addEventListener('input', transformObservedItems); + let matches = []; + try { + matches = document.querySelectorAll(item.selector); + } catch (e) { + if (options.debug) { + console.error(e); + } + return; + } - // transform observed css rules - function transformObservedItems () { - requestAnimationFrame(() => { - observedItems.forEach( - item => { - const nodes = []; - - [].forEach.call( - document.querySelectorAll(item.scopeSelector), - element => { - const nthChild = [].indexOf.call(element.parentNode.children, element) + 1; - const relativeSelectors = item.relativeSelectors.map( - relativeSelector => item.scopeSelector + ':nth-child(' + nthChild + ') ' + relativeSelector, - ).join(); - - // find any relative :has element from the :scope element - const relativeElement = element.parentNode.querySelector(relativeSelectors); - - const shouldElementMatch = item.isNot ? !relativeElement : relativeElement; - - if (shouldElementMatch) { - // memorize the node - nodes.push(element); - - // set an attribute with an irregular attribute name - // document.createAttribute() doesn't support special characters - attributeElement.innerHTML = ''; - - element.setAttributeNode(attributeElement.children[0].attributes[0].cloneNode()); - - // trigger a style refresh in IE and Edge - document.documentElement.style.zoom = 1; document.documentElement.style.zoom = null; - } - }, - ); - - // remove the encoded attribute from all nodes that no longer match them - item.nodes.forEach(node => { - if (nodes.indexOf(node) === -1) { - node.removeAttribute(item.attributeName); - - // trigger a style refresh in IE and Edge - document.documentElement.style.zoom = 1; document.documentElement.style.zoom = null; - } - }); + [].forEach.call(matches, (element) => { + // memorize the node + nodes.push(element); + + // set an attribute with an irregular attribute name + // document.createAttribute() doesn't support special characters + attributeElement.innerHTML = ''; + + element.setAttributeNode(attributeElement.children[0].attributes[0].cloneNode()); + + // trigger a style refresh in IE and Edge + document.documentElement.style.zoom = 1; document.documentElement.style.zoom = null; + }); + + // remove the encoded attribute from all nodes that no longer match them + item.nodes.forEach(node => { + if (nodes.indexOf(node) === -1) { + node.removeAttribute(item.attributeName); + + // trigger a style refresh in IE and Edge + document.documentElement.style.zoom = 1; document.documentElement.style.zoom = null; + } + }); - // update the - item.nodes = nodes; - }, - ); + // update the + item.nodes = nodes; }); } // remove any observed cssrules that no longer apply - function cleanupObservedCssRules () { + function cleanupObservedCssRules() { [].push.apply( observedItems, - observedItems.splice(0).filter( - item => item.rule.parentStyleSheet && + observedItems.splice(0).filter((item) => { + return item.rule.parentStyleSheet && item.rule.parentStyleSheet.ownerNode && - document.documentElement.contains(item.rule.parentStyleSheet.ownerNode), - ), + document.documentElement.contains(item.rule.parentStyleSheet.ownerNode); + }), ); } // walk a stylesheet to collect observed css rules - function walkStyleSheet (styleSheet) { + function walkStyleSheet(styleSheet) { try { // walk a css rule to collect observed css rules - [].forEach.call(styleSheet.cssRules || [], rule => { + [].forEach.call(styleSheet.cssRules || [], (rule) => { if (rule.selectorText) { - // decode the selector text in all browsers to: - // [1] = :scope, [2] = :not(:has), [3] = :has relative, [4] = :scope relative - const selectors = decodeURIComponent(rule.selectorText.replace(/\\(.)/g, '$1')).match(/^(.*?)\[:(not-)?has\((.+?)\)\](.*?)$/); - - if (selectors) { - const attributeName = ':' + (selectors[2] ? 'not-' : '') + 'has(' + - // encode a :has() pseudo selector as an attribute name - encodeURIComponent(selectors[3]).replace(/%3A/g, ':').replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%2C/g, ',') + - ')'; - - observedItems.push({ - rule, - scopeSelector: selectors[1], - isNot: selectors[2], - relativeSelectors: selectors[3].split(/\s*,\s*/), - attributeName, - nodes: [], - }); + try { + // decode the selector text in all browsers to: + const hasSelectors = extractEncodedSelectors(rule.selectorText.toString()); + if (hasSelectors.length === 0) { + return; + } + + for (let i = 0; i < hasSelectors.length; i++) { + const hasSelector = hasSelectors[i]; + observedItems.push({ + rule: rule, + selector: hasSelector, + attributeName: encodeCSS(hasSelector), + nodes: [], + }); + } + } catch (e) { + if (options.debug) { + console.error(e); + } } } else { walkStyleSheet(rule); } }); - } catch (error) { - /* do nothing and continue */ + } catch (e) { + if (options.debug) { + console.error(e); + } } } } diff --git a/plugins/css-has-pseudo/src/cli.js b/plugins/css-has-pseudo/src/cli.js deleted file mode 100644 index db0162d304..0000000000 --- a/plugins/css-has-pseudo/src/cli.js +++ /dev/null @@ -1,15 +0,0 @@ -import plugin from './index'; -import { cli, helpTextLogger } from '@csstools/base-cli'; - -cli( - plugin, - ['preserve'], - helpTextLogger( - 'css-has-pseudo', - 'PostCSS Has Pseudo', - 'Transforms CSS with :has {}', - { - preserve: true, - }, - ), -); diff --git a/plugins/css-has-pseudo/src/encode/decode.mjs b/plugins/css-has-pseudo/src/encode/decode.mjs new file mode 100644 index 0000000000..a243025303 --- /dev/null +++ b/plugins/css-has-pseudo/src/encode/decode.mjs @@ -0,0 +1,17 @@ + +/** Decodes an identifier back into a CSS selector */ +export default function decodeCSS(value) { + if (value.slice(0, 13) !== 'csstools-has-') { + return ''; + } + + value = value.slice(13); + let values = value.split('-'); + + let result = ''; + for (let i = 0; i < values.length; i++) { + result += String.fromCharCode(parseInt(values[i], 36)); + } + + return result; +} diff --git a/plugins/css-has-pseudo/src/encode/encode.mjs b/plugins/css-has-pseudo/src/encode/encode.mjs new file mode 100644 index 0000000000..36d0a4ae85 --- /dev/null +++ b/plugins/css-has-pseudo/src/encode/encode.mjs @@ -0,0 +1,20 @@ + +/** Returns the string as an encoded CSS identifier. */ +export default function encodeCSS(value) { + if (value === '') { + return ''; + } + + let hex; + let result = ''; + for (let i = 0; i < value.length; i++) { + hex = value.charCodeAt(i).toString(36); + if (i === 0) { + result += hex; + } else { + result += '-' + hex; + } + } + + return 'csstools-has-' + result; +} diff --git a/plugins/css-has-pseudo/src/encode/extract.mjs b/plugins/css-has-pseudo/src/encode/extract.mjs new file mode 100644 index 0000000000..366ab150c0 --- /dev/null +++ b/plugins/css-has-pseudo/src/encode/extract.mjs @@ -0,0 +1,91 @@ +import decodeCSS from './decode.mjs'; + +/** Extract encoded selectors out of attribute selectors */ +export default function extractEncodedSelectors(value) { + let out = []; + + let depth = 0; + let candidate; + + let quoted = false; + let quotedMark; + + let containsUnescapedUnquotedHasAtDepth1 = false; + + // Stryker disable next-line EqualityOperator + for (let i = 0; i < value.length; i++) { + const char = value[i]; + + switch (char) { + case '[': + if (quoted) { + candidate += char; + continue; + } + + if (depth === 0) { + candidate = ''; + } else { + candidate += char; + } + + depth++; + continue; + case ']': + if (quoted) { + candidate += char; + continue; + } + + { + depth--; + if (depth === 0) { + const decoded = decodeCSS(candidate); + if (containsUnescapedUnquotedHasAtDepth1) { + out.push(decoded); + } + } else { + candidate += char; + } + } + + continue; + case '\\': + candidate += value[i]; + candidate += value[i+1]; + i++; + continue; + + case '"': + case '\'': + if (quoted && char === quotedMark) { + quoted = false; + continue; + } else if (quoted) { + candidate += char; + continue; + } + + quoted = true; + quotedMark = char; + continue; + + default: + if (candidate === '' && depth === 1 && (value.slice(i, i + 13) === 'csstools-has-')) { + containsUnescapedUnquotedHasAtDepth1 = true; + } + + candidate += char; + continue; + } + } + + const unique = []; + for (let i = 0; i < out.length; i++) { + if (unique.indexOf(out[i]) === -1) { + unique.push(out[i]); + } + } + + return unique; +} diff --git a/plugins/css-has-pseudo/src/encode/test.mjs b/plugins/css-has-pseudo/src/encode/test.mjs new file mode 100644 index 0000000000..7ff593799c --- /dev/null +++ b/plugins/css-has-pseudo/src/encode/test.mjs @@ -0,0 +1,155 @@ +import { strict as assert } from 'assert'; +import encodeCSS from './encode.mjs'; +import decodeCSS from './decode.mjs'; +import extractEncodedSelectors from './extract.mjs'; + +function testEncoderDecoder(decoded, encoded) { + assert.strictEqual(encodeCSS(decoded), encoded); + assert.strictEqual(decodeCSS(encoded), decoded); + + assert.strictEqual(decodeCSS(encodeCSS(decoded)), decoded); + assert.strictEqual(encodeCSS(decodeCSS(encoded)), encoded); + + assert.strictEqual(decodeCSS(encodeCSS(decodeCSS(encodeCSS(decoded)))), decoded); + + assert.strictEqual(decodeCSS(decodeCSS(encodeCSS(encodeCSS(decoded)))), decoded); +} + +testEncoderDecoder( + '', + '', +); + +testEncoderDecoder( + ':has()', + 'csstools-has-1m-2w-2p-37-14-15', +); + +testEncoderDecoder( + ':has( )', + 'csstools-has-1m-2w-2p-37-14-w-15', +); + +testEncoderDecoder( + ':has(*)', + 'csstools-has-1m-2w-2p-37-14-16-15', +); + +testEncoderDecoder( + ':has(:focus)', + 'csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15', +); + +testEncoderDecoder( + ':has(~ p)', + 'csstools-has-1m-2w-2p-37-14-3i-w-34-15', +); + +testEncoderDecoder( + ':has(> p)', + 'csstools-has-1m-2w-2p-37-14-1q-w-34-15', +); + +testEncoderDecoder( + ':has(+ p)', + 'csstools-has-1m-2w-2p-37-14-17-w-34-15', +); + +testEncoderDecoder( + ':has(\\~ p)', + 'csstools-has-1m-2w-2p-37-14-2k-3i-w-34-15', +); + +testEncoderDecoder( + ':has(\\> p)', + 'csstools-has-1m-2w-2p-37-14-2k-1q-w-34-15', +); + +testEncoderDecoder( + ':has(\\+ p)', + 'csstools-has-1m-2w-2p-37-14-2k-17-w-34-15', +); + +testEncoderDecoder( + ':has(\\,\\(\\)\\[\\]\\:\\. p)\\', + 'csstools-has-1m-2w-2p-37-14-2k-18-2k-14-2k-15-2k-2j-2k-2l-2k-1m-2k-1a-w-34-15-2k', +); + +testEncoderDecoder( + ':has(.esc\\\\\\:aped)', + 'csstools-has-1m-2w-2p-37-14-1a-2t-37-2r-2k-2k-2k-1m-2p-34-2t-2s-15', +); + +testEncoderDecoder( + ':has(> [a=":has(.x)"]:hover)', + 'csstools-has-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-1m-2w-2p-37-14-1a-3c-15-y-2l-1m-2w-33-3a-2t-36-15', +); + +testEncoderDecoder( + ':has(h1, h2, h3, h4, h5, h6)', + 'csstools-has-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15', +); + +testEncoderDecoder( + ':has(> [\\:has\\(\\%3E\\%20\\.a\\:hover\\)', + 'csstools-has-1m-2w-2p-37-14-1q-w-2j-2k-1m-2w-2p-37-2k-14-2k-11-1f-1x-2k-11-1e-1c-2k-1a-2p-2k-1m-2w-33-3a-2t-36-2k-15', +); + +testEncoderDecoder( + ':has(\\%perc)', + 'csstools-has-1m-2w-2p-37-14-2k-11-34-2t-36-2r-15', +); + +testEncoderDecoder( + 'foo', + 'csstools-has-2u-33-33', +); + +testEncoderDecoder( + ':has(> [foo="some"])', + 'csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15', +); + +testEncoderDecoder( + '#d_main:has(#d_checkbox:checked)>#d_subject', + 'csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-2r-2w-2t-2r-2z-2q-33-3c-1m-2r-2w-2t-2r-2z-2t-2s-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38', +); + +testEncoderDecoder( + '#something-complex:has(> #d_checkbox:checked [foo="some"] * + [bar^="[baz]"] ~ a[class~="logo"] :has(~ .foo:is(button, input)))', + 'csstools-has-z-37-33-31-2t-38-2w-2x-32-2v-19-2r-33-31-34-30-2t-3c-1m-2w-2p-37-14-1q-w-z-2s-2n-2r-2w-2t-2r-2z-2q-33-3c-1m-2r-2w-2t-2r-2z-2t-2s-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-w-16-w-17-w-2j-2q-2p-36-2m-1p-y-2j-2q-2p-3e-2l-y-2l-w-3i-w-2p-2j-2r-30-2p-37-37-3i-1p-y-30-33-2v-33-y-2l-w-1m-2w-2p-37-14-3i-w-1a-2u-33-33-1m-2x-37-14-2q-39-38-38-33-32-18-w-2x-32-34-39-38-15-15-15', +); + +function testExtract(encoded, rules) { + assert.deepStrictEqual(extractEncodedSelectors(encoded), rules); +} + +testExtract( + '', + [], +); + +testExtract( + '.a, [csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15]', + [':has(> [foo="some"])'], +); + +testExtract( + '[csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15], a', + [':has(> [foo="some"])'], +); + +testExtract( + '[csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15][csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15][csstools-has-1m-2w-2p-37-14-1q-w-2j-2u-33-33-1p-y-37-33-31-2t-y-2l-15]', + [':has(> [foo="some"])'], +); + +testExtract( + '[' + encodeCSS('.x:has(> .🧑🏾‍🎤)') +']', + ['.x:has(> .🧑🏾‍🎤)'], +); + +testExtract( + '[' + encodeCSS('.x:has(> .a:has( + .b))') + ']', + ['.x:has(> .a:has( + .b))'], +); diff --git a/plugins/css-has-pseudo/src/index.js b/plugins/css-has-pseudo/src/index.js deleted file mode 100644 index fd433fde5e..0000000000 --- a/plugins/css-has-pseudo/src/index.js +++ /dev/null @@ -1,156 +0,0 @@ -import parser from 'postcss-selector-parser'; - -const creator = (/** @type {{ preserve: true | false }} */ opts) => { - opts = typeof opts === 'object' && opts || defaultOptions; - - /** Whether the original rule should be preserved. */ - const shouldPreserve = Boolean('preserve' in opts ? opts.preserve : true); - - return { - postcssPlugin: 'css-has-pseudo', - Rule: (rule, { result }) => { - if (!rule.selector.includes(':has(')) { - return; - } - - let modifiedSelector; - - try { - const modifiedSelectorAST = parser((selectors) => { - selectors.walkPseudos(selector => { - if (selector.value === ':has' && selector.nodes) { - const isNotHas = isParentInNotPseudo(selector); - - selector.value = isNotHas ? ':not-has' : ':has'; - - const attribute = parser.attribute({ - attribute: getEscapedCss(String(selector)), - }); - - if (isNotHas) { - selector.parent.parent.replaceWith(attribute); - } else { - selector.replaceWith(attribute); - } - } - }); - }).processSync(rule.selector); - - modifiedSelector = String(modifiedSelectorAST); - } catch (_) { - rule.warn(result, `Failed to parse selector : ${rule.selector}`); - return; - } - - if (typeof modifiedSelector === 'undefined') { - return; - } - - if (modifiedSelector === rule.selector) { - return; - } - - if (shouldPreserve) { - rule.cloneBefore({ selector: modifiedSelector }); - } else { - rule.selector = modifiedSelector; - } - }, - }; -}; - -creator.postcss = true; - -/** Default options. */ -const defaultOptions = { preserve: true }; - -/** Returns the string as an escaped CSS identifier. */ -const getEscapedCss = (/** @type {string} */ value) => { - let out = ''; - let current = ''; - - const flushCurrent = () => { - if (current) { - const encoded = encodeURIComponent(current); - let encodedCurrent = ''; - let encodedOut = ''; - - const flushEncoded = () => { - if (encodedCurrent) { - encodedOut += encodedCurrent; - encodedCurrent = ''; - } - }; - - let encodedEscaped = false; - for (let i = 0; i < encoded.length; i++) { - const char = encoded[i]; - - if (encodedEscaped) { - encodedCurrent += char; - encodedEscaped = false; - continue; - } - - switch (char) { - case '%': - flushEncoded(); - encodedOut += ( '\\' + char ); - continue; - case '\\': - encodedCurrent += char; - encodedEscaped = true; - continue; - - default: - encodedCurrent += char; - continue; - } - } - - flushEncoded(); - out += encodedOut; - current = ''; - } - }; - - let escaped = false; - for (let i = 0; i < value.length; i++) { - const char = value[i]; - - if (escaped) { - current += char; - escaped = false; - continue; - } - - switch (char) { - case ':': - case '[': - case ']': - case ',': - case '(': - case ')': - flushCurrent(); - out += ( '\\' + char ); - continue; - case '\\': - current += char; - escaped = true; - continue; - - default: - current += char; - continue; - } - } - - flushCurrent(); - - return out; -}; - -/** Returns whether the selector is within a `:not` pseudo-class. */ -const isParentInNotPseudo = (selector) => selector.parent?.parent?.type === 'pseudo' && selector.parent.parent.value === ':not'; - -export default creator; diff --git a/plugins/css-has-pseudo/src/index.ts b/plugins/css-has-pseudo/src/index.ts new file mode 100644 index 0000000000..f852e6eb1f --- /dev/null +++ b/plugins/css-has-pseudo/src/index.ts @@ -0,0 +1,122 @@ +import type { PluginCreator } from 'postcss'; +import parser from 'postcss-selector-parser'; +import { selectorSpecificity } from '@csstools/selector-specificity'; +import encodeCSS from './encode/encode.mjs'; +import { isGuardedByAtSupportsFromAtRuleParams } from './is-guarded-by-at-supports.js'; + +const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: string }> = (opts?: { preserve?: boolean, specificityMatchingName?: string }) => { + const options = { + preserve: true, + specificityMatchingName: 'does-not-exist', + ...(opts || {}), + }; + + const specificityMatchingNameId = ':not(#' + options.specificityMatchingName + ')'; + const specificityMatchingNameClass = ':not(.' + options.specificityMatchingName + ')'; + const specificityMatchingNameTag = ':not(' + options.specificityMatchingName + ')'; + + return { + postcssPlugin: 'css-has-pseudo-experimental', + RuleExit: (rule, { result }) => { + if (!rule.selector.includes(':has(') || isWithinSupportCheck(rule)) { + return; + } + + const selectors = rule.selectors.map((selector) => { + if (!selector.includes(':has(')) { + return selector; + } + + let selectorAST; + try { + selectorAST = parser().astSync(selector); + } catch (_) { + rule.warn(result, `Failed to parse selector : ${selector}`); + return selector; + } + + if (typeof selectorAST === 'undefined') { + return selector; + } + + let containsHasPseudo = false; + selectorAST.walkPseudos((node) => { + containsHasPseudo = containsHasPseudo || (node.value === ':has' && node.nodes); + + // see : https://bugs.chromium.org/p/chromium/issues/detail?id=669058#c34 + // When we have ':has(:visited) {...}', the subject elements of the rule + // are the ancestors of the visited link element. + + // To prevent leaking visitedness to the link's ancestors, the ':visited' + // selector does not match if it is inside the ':has()' argument selector. + // So if a ':has()' argument selector requires a matching ':visited', the + // style rule are not applied. + if (node.value === ':visited') { + // We can't leave `:has` untouched as that might cause broken selector lists. + // Replacing with the specificity matching name as this should never match anything without `:not()`. + node.replaceWith(parser.className({ + value: options.specificityMatchingName, + })); + } + + if (node.value === ':any-link') { + // we can transform `:any-link` to `:link` as this is allowed + node.value = ':link'; + } + }); + + if (!containsHasPseudo) { + return selector; + } + + const encodedSelector = '[' + encodeCSS(selectorAST.toString()) + ']'; + const abcSpecificity = selectorSpecificity(selectorAST); + + let encodedSelectorWithSpecificity = encodedSelector; + for (let i = 0; i < abcSpecificity.a; i++) { + encodedSelectorWithSpecificity += specificityMatchingNameId; + } + const bSpecificity = Math.max(1, abcSpecificity.b) - 1; + for (let i = 0; i < bSpecificity; i++) { + encodedSelectorWithSpecificity += specificityMatchingNameClass; + } + for (let i = 0; i < abcSpecificity.c; i++) { + encodedSelectorWithSpecificity += specificityMatchingNameTag; + } + + return encodedSelectorWithSpecificity; + }); + + if (selectors.join(',') === rule.selectors.join(',')) { + return; + } + + rule.cloneBefore({ selectors: selectors }); + + if (!options.preserve) { + rule.remove(); + } + }, + }; +}; + +creator.postcss = true; + +export default creator; + +function isWithinSupportCheck(rule) { + let ruleParent = rule.parent; + + while (ruleParent) { + if ( + ruleParent.type === 'atrule' && + isGuardedByAtSupportsFromAtRuleParams(ruleParent.params) + ) { + return true; + } + + ruleParent = ruleParent.parent; + } + + return false; +} diff --git a/plugins/css-has-pseudo/src/is-guarded-by-at-supports.ts b/plugins/css-has-pseudo/src/is-guarded-by-at-supports.ts new file mode 100644 index 0000000000..58ee65adc6 --- /dev/null +++ b/plugins/css-has-pseudo/src/is-guarded-by-at-supports.ts @@ -0,0 +1,56 @@ +import valueParser from 'postcss-value-parser'; +import selectorParser from 'postcss-selector-parser'; + +export function isGuardedByAtSupportsFromAtRuleParams(atSupportsParams: string): boolean { + if (!atSupportsParams.includes(':has(')) { + return false; + } + + let isGuardedByAtSupports = false; + + try { + const selectors: Set = new Set(); + + const ast = valueParser(atSupportsParams); + ast.walk((node) => { + if (node.type === 'function' && node.value === 'selector') { + selectors.add(valueParser.stringify(node.nodes)); + return false; + } + }); + + selectors.forEach((selector) => { + if (selectorContainsHasPseudo(selector)) { + isGuardedByAtSupports = true; + } + }); + + } catch (e) { + /* ignore */ + } + + return isGuardedByAtSupports; +} + +export function selectorContainsHasPseudo(selector: string): boolean { + if (!selector.includes(':has(')) { + return false; + } + + let containsHasPseudo = false; + + try { + const ast = selectorParser().astSync(selector); + ast.walk((node) => { + if (node.type === 'pseudo' && node.value === ':has' && node.nodes && node.nodes.length > 0) { + containsHasPseudo = true; + return false; + } + }); + + } catch (e) { + /* ignore */ + } + + return containsHasPseudo; +} diff --git a/plugins/css-has-pseudo/test/_browser.html b/plugins/css-has-pseudo/test/_browser.html new file mode 100644 index 0000000000..4d8c007f96 --- /dev/null +++ b/plugins/css-has-pseudo/test/_browser.html @@ -0,0 +1,1189 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/css-has-pseudo/test/_browser.mjs b/plugins/css-has-pseudo/test/_browser.mjs new file mode 100644 index 0000000000..a8220d97c1 --- /dev/null +++ b/plugins/css-has-pseudo/test/_browser.mjs @@ -0,0 +1,83 @@ +import puppeteer from 'puppeteer'; +import http from 'http'; +import { promises as fsp } from 'fs'; + +(async () => { + const requestListener = async function (req, res) { + + const parsedUrl = new URL(req.url, 'http://localhost:8080'); + const pathname = parsedUrl.pathname; + + switch (pathname) { + case '': + case '/': + res.setHeader('Content-type', 'text/html'); + res.writeHead(200); + res.end(await fsp.readFile('test/_browser.html', 'utf8')); + break; + case '/test/basic.expect.css': + // Stylesheet WITHOUT CORS headers + res.setHeader('Content-type', 'text/css'); + res.writeHead(200); + res.end(await fsp.readFile('test/basic.expect.css', 'utf8')); + break; + case '/test/browser.expect.css': + // Stylesheet WITH CORS headers + res.setHeader('Content-type', 'text/css'); + res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); + res.writeHead(200); + res.end(await fsp.readFile('test/browser.expect.css', 'utf8')); + break; + case '/dist/browser-global.js': + res.setHeader('Content-type', 'text/javascript'); + res.writeHead(200); + res.end(await fsp.readFile('dist/browser-global.js', 'utf8')); + break; + + default: + res.setHeader('Content-type', 'text/plain' ); + res.writeHead(404); + res.end('Not found'); + break; + } + }; + + // Use different servers for HTML/CSS/JS to trigger CORS + // + // HTML: + const serverA = http.createServer(requestListener); + serverA.listen(8080); + // CSS: + const serverB = http.createServer(requestListener); + serverB.listen(8081); + // JS: + const serverC = http.createServer(requestListener); + serverC.listen(8082); + + if (!process.env.DEBUG) { + const browser = await puppeteer.launch({ + headless: true, + }); + + const page = await browser.newPage(); + page.on('pageerror', (msg) => { + throw msg; + }); + await page.goto('http://localhost:8080'); + const result = await page.evaluate(async() => { + // eslint-disable-next-line no-undef + return await window.runTest(); + }); + if (!result) { + throw new Error('Test failed, expected "window.runTest()" to return true'); + } + + await browser.close(); + + await serverA.close(); + await serverB.close(); + await serverC.close(); + } else { + console.log('visit : http://localhost:8080'); + } +})(); diff --git a/plugins/css-has-pseudo/test/basic.css b/plugins/css-has-pseudo/test/basic.css index cc1a4b0d64..35908d506a 100644 --- a/plugins/css-has-pseudo/test/basic.css +++ b/plugins/css-has-pseudo/test/basic.css @@ -10,23 +10,141 @@ h1:has(+ p) { order: 3; } -section:not(:has(h1, h2, h3, h4, h5, h6)) { +h1:has(~ p) { order: 4; } +section:not(:has(h1, h2, h3, h4, h5, h6)) { + order: 5; +} + body:has(:focus) { - order: 5; + order: 6; } body:not(:has(:focus)) { - order: 5; + order: 7; } :has-ignore(:focus), :ignore-has(:focus) { - order: 6; + order: 8; } -:has(.esc\:aped) { - order: 7; +:has(.esc\\\:aped) { + order: 9; +} + +.x:has(> .a:hover) { + order: 10; +} + +.x:has(> #a:hover) { + order: 11; +} + +.x:has(> [a]:hover) { + order: 12; +} + +.x:has(> [a="b"]:hover) { + order: 13; +} + +.x:has(> [a=":has(.x)"]:hover) { + order: 14; +} + +.x:has(> [\:has\(\%3E\%20\.a\:hover\)]:hover) { + order: 15; +} + +.x:has(> ::before:hover) { + order: 16; /* not allowed by spec but encoding should work */ +} + +.x:has(> .a:has( + .b)) { + order: 17; +} + +.x:has(> __foo) { + order: 18; +} + +.x:has(> :--foo) { + order: 19; +} + +.x:has(> *) { + order: 20; +} + +.x:has(> .y *) { + order: 21; +} + +.a:not(:has(> .b)) { + order: 22; +} + +.x:has(~ .y:has(.g .h) .i) { + order: 23; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 24; +} + +.x:has(> .a) .b { + order: 24; +} + +.x:has(> .🧑🏾‍🎤) { + order: 25; +} + +.x:has(> .a), .x:has(> .b) { + order: 26; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 27; +} + +.x:has(> .a), .b { + order: 28; +} + +.a, .x:has(> .b) { + order: 29; +} + +.x:has(> .b *) { + order: 30; +} + +.x:has(> :visited) { + order: 31; +} + +.x:has(> :any-link) { + order: 31; +} + +@supports selector(:has(:focus)) { + :has(:focus) { + order: 32; + } +} + +@supports (display: grid) { + :has(:focus) { + order: 33; + } +} + +@supports (display: grid) and selector( :has( :focus)) { + :has(:focus) { + order: 34; + } } diff --git a/plugins/css-has-pseudo/test/basic.expect.css b/plugins/css-has-pseudo/test/basic.expect.css index efcd664524..7f93d010bb 100644 --- a/plugins/css-has-pseudo/test/basic.expect.css +++ b/plugins/css-has-pseudo/test/basic.expect.css @@ -1,4 +1,4 @@ -[\:has\(\:focus\)] { +[csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { order: 1; } @@ -6,7 +6,7 @@ order: 1; } -a[\:has\(\%3E\%20img\)] { +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) { order: 2; } @@ -14,7 +14,7 @@ a:has(> img) { order: 2; } -h1[\:has\(\%2B\%20p\)] { +[csstools-has-2w-1d-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist):not(does-not-exist) { order: 3; } @@ -22,39 +22,260 @@ h1:has(+ p) { order: 3; } -section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] { +[csstools-has-2w-1d-1m-2w-2p-37-14-3i-w-34-15]:not(does-not-exist):not(does-not-exist) { order: 4; } -section:not(:has(h1, h2, h3, h4, h5, h6)) { +h1:has(~ p) { order: 4; } -body[\:has\(\:focus\)] { - order: 5; +[csstools-has-37-2t-2r-38-2x-33-32-1m-32-33-38-14-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15-15]:not(does-not-exist):not(does-not-exist) { + order: 5; +} + +section:not(:has(h1, h2, h3, h4, h5, h6)) { + order: 5; +} + +[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) { + order: 6; } body:has(:focus) { - order: 5; + order: 6; } -body[\:not-has\(\:focus\)] { - order: 5; +[csstools-has-2q-33-2s-3d-1m-32-33-38-14-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15-15]:not(does-not-exist) { + order: 7; } body:not(:has(:focus)) { - order: 5; + order: 7; } :has-ignore(:focus), :ignore-has(:focus) { - order: 6; + order: 8; } -[\:has\(.esc\%5C\%3Aaped\)] { - order: 7; +[csstools-has-1m-2w-2p-37-14-1a-2t-37-2r-2k-2k-2k-1m-2p-34-2t-2s-15] { + order: 9; } -:has(.esc\:aped) { - order: 7; +:has(.esc\\\:aped) { + order: 9; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 10; +} + +.x:has(> .a:hover) { + order: 10; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) { + order: 11; +} + +.x:has(> #a:hover) { + order: 11; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 12; +} + +.x:has(> [a]:hover) { + order: 12; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-2q-y-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 13; +} + +.x:has(> [a="b"]:hover) { + order: 13; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-1m-2w-2p-37-14-1a-3c-15-y-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 14; +} + +.x:has(> [a=":has(.x)"]:hover) { + order: 14; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2k-1m-2w-2p-37-2k-14-2k-11-1f-1x-2k-11-1e-1c-2k-1a-2p-2k-1m-2w-33-3a-2t-36-2k-15-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 15; +} + +.x:has(> [\:has\(\%3E\%20\.a\:hover\)]:hover) { + order: 15; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-1m-2q-2t-2u-33-36-2t-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(does-not-exist) { + order: 16; /* not allowed by spec but encoding should work */ +} + +.x:has(> ::before:hover) { + order: 16; /* not allowed by spec but encoding should work */ +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-2p-37-14-w-17-w-1a-2q-15-15]:not(.does-not-exist):not(.does-not-exist) { + order: 17; +} + +.x:has(> .a:has( + .b)) { + order: 17; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2n-2n-2u-33-33-15]:not(does-not-exist) { + order: 18; +} + +.x:has(> __foo) { + order: 18; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-19-19-2u-33-33-15]:not(.does-not-exist) { + order: 19; +} + +.x:has(> :--foo) { + order: 19; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-16-15] { + order: 20; +} + +.x:has(> *) { + order: 20; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-3d-w-16-15]:not(.does-not-exist) { + order: 21; +} + +.x:has(> .y *) { + order: 21; +} + +[csstools-has-1a-2p-1m-32-33-38-14-1m-2w-2p-37-14-1q-w-1a-2q-15-15]:not(.does-not-exist) { + order: 22; +} + +.a:not(:has(> .b)) { + order: 22; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-3i-w-1a-3d-1m-2w-2p-37-14-1a-2v-w-1a-2w-15-w-1a-2x-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 23; +} + +.x:has(~ .y:has(.g .h) .i) { + order: 23; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 24; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-1a-2q]:not(.does-not-exist):not(.does-not-exist) { + order: 24; +} + +.x:has(> .a) .b { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-16pq-17td-16po-188u-6bx-16po-186c-15]:not(.does-not-exist) { + order: 25; +} + +.x:has(> .🧑🏾‍🎤) { + order: 25; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.does-not-exist), [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist) { + order: 26; +} + +.x:has(> .a), .x:has(> .b) { + order: 26; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 27; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 27; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.does-not-exist), .b { + order: 28; +} + +.x:has(> .a), .b { + order: 28; +} + +.a, [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist) { + order: 29; +} + +.a, .x:has(> .b) { + order: 29; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-w-16-15]:not(.does-not-exist) { + order: 30; +} + +.x:has(> .b *) { + order: 30; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2s-33-2t-37-19-32-33-38-19-2t-3c-2x-37-38-15]:not(.does-not-exist) { + order: 31; +} + +.x:has(> :visited) { + order: 31; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-30-2x-32-2z-15]:not(.does-not-exist) { + order: 31; +} + +.x:has(> :any-link) { + order: 31; +} + +@supports selector(:has(:focus)) { + :has(:focus) { + order: 32; + } +} + +@supports (display: grid) { + [csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { + order: 33; + } + :has(:focus) { + order: 33; + } +} + +@supports (display: grid) and selector( :has( :focus)) { + :has(:focus) { + order: 34; + } } diff --git a/plugins/css-has-pseudo/test/basic.preserve.expect.css b/plugins/css-has-pseudo/test/basic.preserve.expect.css index 9cf08f542f..f73775859e 100644 --- a/plugins/css-has-pseudo/test/basic.preserve.expect.css +++ b/plugins/css-has-pseudo/test/basic.preserve.expect.css @@ -1,32 +1,150 @@ -[\:has\(\:focus\)] { +[csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { order: 1; } -a[\:has\(\%3E\%20img\)] { +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(does-not-exist):not(does-not-exist) { order: 2; } -h1[\:has\(\%2B\%20p\)] { +[csstools-has-2w-1d-1m-2w-2p-37-14-17-w-34-15]:not(does-not-exist):not(does-not-exist) { order: 3; } -section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] { +[csstools-has-2w-1d-1m-2w-2p-37-14-3i-w-34-15]:not(does-not-exist):not(does-not-exist) { order: 4; } -body[\:has\(\:focus\)] { - order: 5; +[csstools-has-37-2t-2r-38-2x-33-32-1m-32-33-38-14-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15-15]:not(does-not-exist):not(does-not-exist) { + order: 5; } -body[\:not-has\(\:focus\)] { - order: 5; +[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(does-not-exist) { + order: 6; +} + +[csstools-has-2q-33-2s-3d-1m-32-33-38-14-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15-15]:not(does-not-exist) { + order: 7; } :has-ignore(:focus), :ignore-has(:focus) { - order: 6; + order: 8; } -[\:has\(.esc\%5C\%3Aaped\)] { - order: 7; +[csstools-has-1m-2w-2p-37-14-1a-2t-37-2r-2k-2k-2k-1m-2p-34-2t-2s-15] { + order: 9; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 10; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#does-not-exist):not(.does-not-exist) { + order: 11; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 12; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-2q-y-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 13; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-1m-2w-2p-37-14-1a-3c-15-y-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 14; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2k-1m-2w-2p-37-2k-14-2k-11-1f-1x-2k-11-1e-1c-2k-1a-2p-2k-1m-2w-33-3a-2t-36-2k-15-2l-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(.does-not-exist) { + order: 15; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-1m-2q-2t-2u-33-36-2t-1m-2w-33-3a-2t-36-15]:not(.does-not-exist):not(does-not-exist) { + order: 16; /* not allowed by spec but encoding should work */ +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-2p-37-14-w-17-w-1a-2q-15-15]:not(.does-not-exist):not(.does-not-exist) { + order: 17; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2n-2n-2u-33-33-15]:not(does-not-exist) { + order: 18; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-19-19-2u-33-33-15]:not(.does-not-exist) { + order: 19; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-16-15] { + order: 20; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-3d-w-16-15]:not(.does-not-exist) { + order: 21; +} + +[csstools-has-1a-2p-1m-32-33-38-14-1m-2w-2p-37-14-1q-w-1a-2q-15-15]:not(.does-not-exist) { + order: 22; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-3i-w-1a-3d-1m-2w-2p-37-14-1a-2v-w-1a-2w-15-w-1a-2x-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 23; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-1a-2q]:not(.does-not-exist):not(.does-not-exist) { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-16pq-17td-16po-188u-6bx-16po-186c-15]:not(.does-not-exist) { + order: 25; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.does-not-exist), [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist) { + order: 26; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { + order: 27; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.does-not-exist), .b { + order: 28; +} + +.a, [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.does-not-exist) { + order: 29; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-w-16-15]:not(.does-not-exist) { + order: 30; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2s-33-2t-37-19-32-33-38-19-2t-3c-2x-37-38-15]:not(.does-not-exist) { + order: 31; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-30-2x-32-2z-15]:not(.does-not-exist) { + order: 31; +} + +@supports selector(:has(:focus)) { + :has(:focus) { + order: 32; + } +} + +@supports (display: grid) { + [csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { + order: 33; + } +} + +@supports (display: grid) and selector( :has( :focus)) { + :has(:focus) { + order: 34; + } } diff --git a/plugins/css-has-pseudo/test/basic.specificity-matching-name.expect.css b/plugins/css-has-pseudo/test/basic.specificity-matching-name.expect.css new file mode 100644 index 0000000000..796416e891 --- /dev/null +++ b/plugins/css-has-pseudo/test/basic.specificity-matching-name.expect.css @@ -0,0 +1,281 @@ +[csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { + order: 1; +} + +:has(:focus) { + order: 1; +} + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15]:not(other-thing-that-does-not-exist):not(other-thing-that-does-not-exist) { + order: 2; +} + +a:has(> img) { + order: 2; +} + +[csstools-has-2w-1d-1m-2w-2p-37-14-17-w-34-15]:not(other-thing-that-does-not-exist):not(other-thing-that-does-not-exist) { + order: 3; +} + +h1:has(+ p) { + order: 3; +} + +[csstools-has-2w-1d-1m-2w-2p-37-14-3i-w-34-15]:not(other-thing-that-does-not-exist):not(other-thing-that-does-not-exist) { + order: 4; +} + +h1:has(~ p) { + order: 4; +} + +[csstools-has-37-2t-2r-38-2x-33-32-1m-32-33-38-14-1m-2w-2p-37-14-2w-1d-18-w-2w-1e-18-w-2w-1f-18-w-2w-1g-18-w-2w-1h-18-w-2w-1i-15-15]:not(other-thing-that-does-not-exist):not(other-thing-that-does-not-exist) { + order: 5; +} + +section:not(:has(h1, h2, h3, h4, h5, h6)) { + order: 5; +} + +[csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15]:not(other-thing-that-does-not-exist) { + order: 6; +} + +body:has(:focus) { + order: 6; +} + +[csstools-has-2q-33-2s-3d-1m-32-33-38-14-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15-15]:not(other-thing-that-does-not-exist) { + order: 7; +} + +body:not(:has(:focus)) { + order: 7; +} + +:has-ignore(:focus), +:ignore-has(:focus) { + order: 8; +} + +[csstools-has-1m-2w-2p-37-14-1a-2t-37-2r-2k-2k-2k-1m-2p-34-2t-2s-15] { + order: 9; +} + +:has(.esc\\\:aped) { + order: 9; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 10; +} + +.x:has(> .a:hover) { + order: 10; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-z-2p-1m-2w-33-3a-2t-36-15]:not(#other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 11; +} + +.x:has(> #a:hover) { + order: 11; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-2l-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 12; +} + +.x:has(> [a]:hover) { + order: 12; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-2q-y-2l-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 13; +} + +.x:has(> [a="b"]:hover) { + order: 13; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2p-1p-y-1m-2w-2p-37-14-1a-3c-15-y-2l-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 14; +} + +.x:has(> [a=":has(.x)"]:hover) { + order: 14; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2j-2k-1m-2w-2p-37-2k-14-2k-11-1f-1x-2k-11-1e-1c-2k-1a-2p-2k-1m-2w-33-3a-2t-36-2k-15-2l-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 15; +} + +.x:has(> [\:has\(\%3E\%20\.a\:hover\)]:hover) { + order: 15; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-1m-2q-2t-2u-33-36-2t-1m-2w-33-3a-2t-36-15]:not(.other-thing-that-does-not-exist):not(other-thing-that-does-not-exist) { + order: 16; /* not allowed by spec but encoding should work */ +} + +.x:has(> ::before:hover) { + order: 16; /* not allowed by spec but encoding should work */ +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-1m-2w-2p-37-14-w-17-w-1a-2q-15-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 17; +} + +.x:has(> .a:has( + .b)) { + order: 17; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-2n-2n-2u-33-33-15]:not(other-thing-that-does-not-exist) { + order: 18; +} + +.x:has(> __foo) { + order: 18; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-19-19-2u-33-33-15]:not(.other-thing-that-does-not-exist) { + order: 19; +} + +.x:has(> :--foo) { + order: 19; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-16-15] { + order: 20; +} + +.x:has(> *) { + order: 20; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-3d-w-16-15]:not(.other-thing-that-does-not-exist) { + order: 21; +} + +.x:has(> .y *) { + order: 21; +} + +[csstools-has-1a-2p-1m-32-33-38-14-1m-2w-2p-37-14-1q-w-1a-2q-15-15]:not(.other-thing-that-does-not-exist) { + order: 22; +} + +.a:not(:has(> .b)) { + order: 22; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-3i-w-1a-3d-1m-2w-2p-37-14-1a-2v-w-1a-2w-15-w-1a-2x-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 23; +} + +.x:has(~ .y:has(.g .h) .i) { + order: 23; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 24; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-1a-2q]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 24; +} + +.x:has(> .a) .b { + order: 24; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-16pq-17td-16po-188u-6bx-16po-186c-15]:not(.other-thing-that-does-not-exist) { + order: 25; +} + +.x:has(> .🧑🏾‍🎤) { + order: 25; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.other-thing-that-does-not-exist), [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.other-thing-that-does-not-exist) { + order: 26; +} + +.x:has(> .a), .x:has(> .b) { + order: 26; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15-w-3i-w-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist):not(.other-thing-that-does-not-exist) { + order: 27; +} + +.x:has(> .a) ~ .x:has(> .b) { + order: 27; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2p-15]:not(.other-thing-that-does-not-exist), .b { + order: 28; +} + +.x:has(> .a), .b { + order: 28; +} + +.a, [csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-15]:not(.other-thing-that-does-not-exist) { + order: 29; +} + +.a, .x:has(> .b) { + order: 29; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-2q-w-16-15]:not(.other-thing-that-does-not-exist) { + order: 30; +} + +.x:has(> .b *) { + order: 30; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1a-33-38-2w-2t-36-19-38-2w-2x-32-2v-19-38-2w-2p-38-19-2s-33-2t-37-19-32-33-38-19-2t-3c-2x-37-38-15]:not(.other-thing-that-does-not-exist) { + order: 31; +} + +.x:has(> :visited) { + order: 31; +} + +[csstools-has-1a-3c-1m-2w-2p-37-14-1q-w-1m-30-2x-32-2z-15]:not(.other-thing-that-does-not-exist) { + order: 31; +} + +.x:has(> :any-link) { + order: 31; +} + +@supports selector(:has(:focus)) { + :has(:focus) { + order: 32; + } +} + +@supports (display: grid) { + [csstools-has-1m-2w-2p-37-14-1m-2u-33-2r-39-37-15] { + order: 33; + } + :has(:focus) { + order: 33; + } +} + +@supports (display: grid) and selector( :has( :focus)) { + :has(:focus) { + order: 34; + } +} diff --git a/plugins/css-has-pseudo/test/browser.css b/plugins/css-has-pseudo/test/browser.css new file mode 100644 index 0000000000..186b159e9d --- /dev/null +++ b/plugins/css-has-pseudo/test/browser.css @@ -0,0 +1,184 @@ +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-pseudo-class.html */ +#d_main:has(input) div { + color: grey +} + +#d_main:has(#d_checkbox:checked)>#d_subject { + color: red +} + +#d_main:has(#d_option:checked)>#d_subject { + color: red +} + +#d_main:has(#d_checkbox:disabled)>#d_subject { + color: green +} + +#d_main:has(#d_option:disabled)> :is(#d_subject, #d_subject2) { + color: green +} + +#d_main:has(#d_optgroup:disabled)>#d_subject { + color: blue +} + +#d_main:not(:has(#d_checkbox:enabled))>#d_subject3 { + color: green +} + +#d_main:not(:has(#d_option:enabled)) :is(#d_subject3, #d_subject4) { + color: green +} + +#d_main:not(:has(#d_optgroup:enabled))>#d_subject3 { + color: blue +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-ancestor-position.html */ +div:has(.c_test, [c_test_attr]) #c_subject { + background-color: red +} + +div:has(> .c_test, > [c_test_attr]) #c_subject { + background-color: green +} + +div:has(~ .c_test, ~ [c_test_attr]) #c_subject { + background-color: yellow +} + +div:has(+ .c_test, + [c_test_attr]) #c_subject { + background-color: blue +} + +div:has(~ div .c_test, ~ div [c_test_attr]) #c_subject { + background-color: purple +} + +div:has(+ div .c_test, + div [c_test_attr]) #c_subject { + background-color: pink +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-adjacent-position.html */ +div:has(.a_Test, [a_test_attr])+#a_subject { + background-color: red; +} + +div:has(> .a_Test, > [a_test_attr])+#a_subject { + background-color: green; +} + +div:has(~ .a_Test, ~ [a_test_attr])+#a_subject { + background-color: yellow; +} + +div:has(+ .a_Test, + [a_test_attr])+#a_subject { + background-color: blue; +} + +div:has(~ div .a_Test, ~ div [a_test_attr])+#a_subject { + background-color: purple; +} + +div:has(+ div .a_Test, + div [a_test_attr])+#a_subject { + background-color: pink; +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/attribute-or-elemental-selectors-in-has.html */ +div, +main { + background-color: grey; + margin: 5px; + min-height: 20px; + min-width: 20px; + padding: 5px; +} + +.b_subject:has(> .b_child) { + background-color: red; +} + +.b_subject:has(.b_descendant) { + background-color: green; +} + +.b_subject:has([attrname="b_descendant"]) { + background-color: blue; +} + +.b_subject:has(#b_div_descendant) { + background-color: yellow; +} + +.b_subject:has(b_descendant) { + background-color: yellowgreen; +} + +#visited-1:has(:link) { + color: green; +} + +#visited-2:has(:visited) { + color: yellow; +} + +#visited-3:has(:any-link) { + color: yellowgreen; +} + +#visited-4:has(:visited) { + color: red; +} + +#main_specificity :has(#foo) { + --t0:PASS; +} + +#main_specificity :has(.foo) { + --t0:FAIL; +} + +#main_specificity :has(span#foo) { + --t1:PASS; +} + +#main_specificity :has(#foo) { + --t1:FAIL; +} + +#main_specificity :has(.bar, #foo) { + --t2:FAIL; +} + +#main_specificity :has(#foo, .bar) { + --t2:PASS; +} + +#main_specificity :has(.bar, #foo) { + --t3:PASS; +} + +#main_specificity :has(.foo, .bar) { + --t3:FAIL; +} + +#main_specificity :has(span + span) { + --t4:PASS; +} + +#main_specificity :has(span) { + --t4:FAIL; +} + +#main_specificity :has(span, li, #foo) { + --t5:PASS; +} + +#main_specificity :has(span, li, p) { + --t5:FAIL; +} + +#nested_main :has(> :has(#c)) { + color: red; +} diff --git a/plugins/css-has-pseudo/test/browser.expect.css b/plugins/css-has-pseudo/test/browser.expect.css new file mode 100644 index 0000000000..8e1cc40a9b --- /dev/null +++ b/plugins/css-has-pseudo/test/browser.expect.css @@ -0,0 +1,184 @@ +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-pseudo-class.html */ +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-2x-32-34-39-38-15-w-2s-2x-3a]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + color: grey +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-2r-2w-2t-2r-2z-2q-33-3c-1m-2r-2w-2t-2r-2z-2t-2s-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: red +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-33-34-38-2x-33-32-1m-2r-2w-2t-2r-2z-2t-2s-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: red +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-2r-2w-2t-2r-2z-2q-33-3c-1m-2s-2x-37-2p-2q-30-2t-2s-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: green +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-33-34-38-2x-33-32-1m-2s-2x-37-2p-2q-30-2t-2s-15-1q-w-1m-2x-37-14-z-2s-2n-37-39-2q-2y-2t-2r-38-18-w-z-2s-2n-37-39-2q-2y-2t-2r-38-1e-15]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: green +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-2p-37-14-z-2s-2n-33-34-38-2v-36-33-39-34-1m-2s-2x-37-2p-2q-30-2t-2s-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: blue +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-32-33-38-14-1m-2w-2p-37-14-z-2s-2n-2r-2w-2t-2r-2z-2q-33-3c-1m-2t-32-2p-2q-30-2t-2s-15-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38-1f]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: green +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-32-33-38-14-1m-2w-2p-37-14-z-2s-2n-33-34-38-2x-33-32-1m-2t-32-2p-2q-30-2t-2s-15-15-w-1m-2x-37-14-z-2s-2n-37-39-2q-2y-2t-2r-38-1f-18-w-z-2s-2n-37-39-2q-2y-2t-2r-38-1g-15]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: green +} + +[csstools-has-z-2s-2n-31-2p-2x-32-1m-32-33-38-14-1m-2w-2p-37-14-z-2s-2n-33-34-38-2v-36-33-39-34-1m-2t-32-2p-2q-30-2t-2s-15-15-1q-z-2s-2n-37-39-2q-2y-2t-2r-38-1f]:not(#does-not-exist):not(#does-not-exist):not(#does-not-exist) { + color: blue +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-ancestor-position.html */ +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-1a-2r-2n-38-2t-37-38-18-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: red +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-1q-w-1a-2r-2n-38-2t-37-38-18-w-1q-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: green +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-3i-w-1a-2r-2n-38-2t-37-38-18-w-3i-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: yellow +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-17-w-1a-2r-2n-38-2t-37-38-18-w-17-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: blue +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-3i-w-2s-2x-3a-w-1a-2r-2n-38-2t-37-38-18-w-3i-w-2s-2x-3a-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + background-color: purple +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-17-w-2s-2x-3a-w-1a-2r-2n-38-2t-37-38-18-w-17-w-2s-2x-3a-w-2j-2r-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-w-z-2r-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + background-color: pink +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/has-in-adjacent-position.html */ +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-1a-2p-2n-2c-2t-37-38-18-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: red; +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-1q-w-1a-2p-2n-2c-2t-37-38-18-w-1q-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: green; +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-3i-w-1a-2p-2n-2c-2t-37-38-18-w-3i-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: yellow; +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-17-w-1a-2p-2n-2c-2t-37-38-18-w-17-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist) { + background-color: blue; +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-3i-w-2s-2x-3a-w-1a-2p-2n-2c-2t-37-38-18-w-3i-w-2s-2x-3a-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + background-color: purple; +} + +[csstools-has-2s-2x-3a-1m-2w-2p-37-14-17-w-2s-2x-3a-w-1a-2p-2n-2c-2t-37-38-18-w-17-w-2s-2x-3a-w-2j-2p-2n-38-2t-37-38-2n-2p-38-38-36-2l-15-17-z-2p-2n-37-39-2q-2y-2t-2r-38]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + background-color: pink; +} + +/* https://github.com/web-platform-tests/wpt/blob/master/css/selectors/invalidation/attribute-or-elemental-selectors-in-has.html */ +div, +main { + background-color: grey; + margin: 5px; + min-height: 20px; + min-width: 20px; + padding: 5px; +} + +[csstools-has-1a-2q-2n-37-39-2q-2y-2t-2r-38-1m-2w-2p-37-14-1q-w-1a-2q-2n-2r-2w-2x-30-2s-15]:not(.does-not-exist) { + background-color: red; +} + +[csstools-has-1a-2q-2n-37-39-2q-2y-2t-2r-38-1m-2w-2p-37-14-1a-2q-2n-2s-2t-37-2r-2t-32-2s-2p-32-38-15]:not(.does-not-exist) { + background-color: green; +} + +[csstools-has-1a-2q-2n-37-39-2q-2y-2t-2r-38-1m-2w-2p-37-14-2j-2p-38-38-36-32-2p-31-2t-1p-y-2q-2n-2s-2t-37-2r-2t-32-2s-2p-32-38-y-2l-15]:not(.does-not-exist) { + background-color: blue; +} + +[csstools-has-1a-2q-2n-37-39-2q-2y-2t-2r-38-1m-2w-2p-37-14-z-2q-2n-2s-2x-3a-2n-2s-2t-37-2r-2t-32-2s-2p-32-38-15]:not(#does-not-exist) { + background-color: yellow; +} + +[csstools-has-1a-2q-2n-37-39-2q-2y-2t-2r-38-1m-2w-2p-37-14-2q-2n-2s-2t-37-2r-2t-32-2s-2p-32-38-15]:not(does-not-exist) { + background-color: yellowgreen; +} + +[csstools-has-z-3a-2x-37-2x-38-2t-2s-19-1d-1m-2w-2p-37-14-1m-30-2x-32-2z-15]:not(#does-not-exist) { + color: green; +} + +[csstools-has-z-3a-2x-37-2x-38-2t-2s-19-1e-1m-2w-2p-37-14-1a-2s-33-2t-37-19-32-33-38-19-2t-3c-2x-37-38-15]:not(#does-not-exist) { + color: yellow; +} + +[csstools-has-z-3a-2x-37-2x-38-2t-2s-19-1f-1m-2w-2p-37-14-1m-30-2x-32-2z-15]:not(#does-not-exist) { + color: yellowgreen; +} + +[csstools-has-z-3a-2x-37-2x-38-2t-2s-19-1g-1m-2w-2p-37-14-1a-2s-33-2t-37-19-32-33-38-19-2t-3c-2x-37-38-15]:not(#does-not-exist) { + color: red; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist) { + --t0:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { + --t0:FAIL; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-37-34-2p-32-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist):not(does-not-exist) { + --t1:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist) { + --t1:FAIL; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-1a-2q-2p-36-18-w-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist) { + --t2:FAIL; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-z-2u-33-33-18-w-1a-2q-2p-36-15]:not(#does-not-exist):not(#does-not-exist) { + --t2:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-1a-2q-2p-36-18-w-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist) { + --t3:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-1a-2u-33-33-18-w-1a-2q-2p-36-15]:not(#does-not-exist) { + --t3:FAIL; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-37-34-2p-32-w-17-w-37-34-2p-32-15]:not(#does-not-exist):not(does-not-exist):not(does-not-exist) { + --t4:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-37-34-2p-32-15]:not(#does-not-exist):not(does-not-exist) { + --t4:FAIL; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-37-34-2p-32-18-w-30-2x-18-w-z-2u-33-33-15]:not(#does-not-exist):not(#does-not-exist) { + --t5:PASS; +} + +[csstools-has-z-31-2p-2x-32-2n-37-34-2t-2r-2x-2u-2x-2r-2x-38-3d-w-1m-2w-2p-37-14-37-34-2p-32-18-w-30-2x-18-w-34-15]:not(#does-not-exist):not(does-not-exist) { + --t5:FAIL; +} + +[csstools-has-z-32-2t-37-38-2t-2s-2n-31-2p-2x-32-w-1m-2w-2p-37-14-1q-w-1m-2w-2p-37-14-z-2r-15-15]:not(#does-not-exist):not(#does-not-exist) { + color: red; +} diff --git a/plugins/css-has-pseudo/test/examples/example.css b/plugins/css-has-pseudo/test/examples/example.css new file mode 100644 index 0000000000..8ad2ea81ea --- /dev/null +++ b/plugins/css-has-pseudo/test/examples/example.css @@ -0,0 +1,3 @@ +.title:has(+ p) { + margin-bottom: 1.5rem; +} diff --git a/plugins/css-has-pseudo/test/examples/example.expect.css b/plugins/css-has-pseudo/test/examples/example.expect.css new file mode 100644 index 0000000000..451df21af9 --- /dev/null +++ b/plugins/css-has-pseudo/test/examples/example.expect.css @@ -0,0 +1,6 @@ +[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) { + margin-bottom: 1.5rem; +} diff --git a/plugins/css-has-pseudo/test/examples/example.preserve-false.expect.css b/plugins/css-has-pseudo/test/examples/example.preserve-false.expect.css new file mode 100644 index 0000000000..330372f0c5 --- /dev/null +++ b/plugins/css-has-pseudo/test/examples/example.preserve-false.expect.css @@ -0,0 +1,3 @@ +[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; +} diff --git a/plugins/css-has-pseudo/test/generated-selector-cases.expect.css b/plugins/css-has-pseudo/test/generated-selector-cases.expect.css index 36825a5ceb..a40c3a8610 100644 --- a/plugins/css-has-pseudo/test/generated-selector-cases.expect.css +++ b/plugins/css-has-pseudo/test/generated-selector-cases.expect.css @@ -1,880 +1,880 @@ -[\:has\(.foo\)][\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 0; } -[\:has\(.foo\)][\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 1; } -[\:has\(.foo\)] [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 2; } -[\:has\(.foo\)] [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 3; } -[\:has\(.foo\)] [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 4; } -[\:has\(.foo\)] [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 5; } -[\:has\(.foo\)]+[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 6; } -[\:has\(.foo\)]+[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 7; } -[\:has\(.foo\)] + [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 8; } -[\:has\(.foo\)] + [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 9; } -[\:has\(.foo\)]~[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 10; } -[\:has\(.foo\)]~[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 11; } -[\:has\(.foo\)] ~ [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 12; } -[\:has\(.foo\)] ~ [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 13; } -[\:has\(.foo\)]>[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 14; } -[\:has\(.foo\)]>[\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 15; } -[\:has\(.foo\)] > [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 16; } -[\:has\(.foo\)] > [\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 17; } -[\:has\(.foo\)],[\%20\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 18; } -[\:has\(.foo\)],[\%20\:has\(.foo\)] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 19; } -button[\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 20; } -[\:has\(.foo\)]button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-2q-39-38-38-33-32]:not(does-not-exist) { order: 21; } -button [\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 22; } -[\:has\(.foo\)] button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-2q-39-38-38-33-32]:not(does-not-exist) { order: 23; } -button [\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 24; } -[\:has\(.foo\)] button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-2q-39-38-38-33-32]:not(does-not-exist) { order: 25; } -button+[\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 26; } -[\:has\(.foo\)]+button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-2q-39-38-38-33-32]:not(does-not-exist) { order: 27; } -button + [\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 28; } -[\:has\(.foo\)] + button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-2q-39-38-38-33-32]:not(does-not-exist) { order: 29; } -button~[\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 30; } -[\:has\(.foo\)]~button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-2q-39-38-38-33-32]:not(does-not-exist) { order: 31; } -button ~ [\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 32; } -[\:has\(.foo\)] ~ button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-2q-39-38-38-33-32]:not(does-not-exist) { order: 33; } -button>[\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 34; } -[\:has\(.foo\)]>button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-2q-39-38-38-33-32]:not(does-not-exist) { order: 35; } -button > [\:has\(.foo\)] { +[csstools-has-2q-39-38-38-33-32-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 36; } -[\:has\(.foo\)] > button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-2q-39-38-38-33-32]:not(does-not-exist) { order: 37; } -button,[\%20\:has\(.foo\)] { +button, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 38; } -[\:has\(.foo\)], button { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], button { order: 39; } -.🧑🏾‍🎤[\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 40; } -[\:has\(.foo\)].🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 41; } -.🧑🏾‍🎤 [\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 42; } -[\:has\(.foo\)] .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 43; } -.🧑🏾‍🎤 [\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 44; } -[\:has\(.foo\)] .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 45; } -.🧑🏾‍🎤+[\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 46; } -[\:has\(.foo\)]+.🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 47; } -.🧑🏾‍🎤 + [\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 48; } -[\:has\(.foo\)] + .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 49; } -.🧑🏾‍🎤~[\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 50; } -[\:has\(.foo\)]~.🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 51; } -.🧑🏾‍🎤 ~ [\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 52; } -[\:has\(.foo\)] ~ .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 53; } -.🧑🏾‍🎤>[\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 54; } -[\:has\(.foo\)]>.🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 55; } -.🧑🏾‍🎤 > [\:has\(.foo\)] { +[csstools-has-1a-16pq-17td-16po-188u-6bx-16po-186c-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 56; } -[\:has\(.foo\)] > .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1a-16pq-17td-16po-188u-6bx-16po-186c]:not(.does-not-exist) { order: 57; } -.🧑🏾‍🎤,[\%20\:has\(.foo\)] { +.🧑🏾‍🎤, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 58; } -[\:has\(.foo\)], .🧑🏾‍🎤 { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], .🧑🏾‍🎤 { order: 59; } -.foo[\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 60; } -[\:has\(.foo\)].foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1a-2u-33-33]:not(.does-not-exist) { order: 61; } -.foo [\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 62; } -[\:has\(.foo\)] .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1a-2u-33-33]:not(.does-not-exist) { order: 63; } -.foo [\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 64; } -[\:has\(.foo\)] .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1a-2u-33-33]:not(.does-not-exist) { order: 65; } -.foo+[\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 66; } -[\:has\(.foo\)]+.foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1a-2u-33-33]:not(.does-not-exist) { order: 67; } -.foo + [\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 68; } -[\:has\(.foo\)] + .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1a-2u-33-33]:not(.does-not-exist) { order: 69; } -.foo~[\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 70; } -[\:has\(.foo\)]~.foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1a-2u-33-33]:not(.does-not-exist) { order: 71; } -.foo ~ [\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 72; } -[\:has\(.foo\)] ~ .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1a-2u-33-33]:not(.does-not-exist) { order: 73; } -.foo>[\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 74; } -[\:has\(.foo\)]>.foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1a-2u-33-33]:not(.does-not-exist) { order: 75; } -.foo > [\:has\(.foo\)] { +[csstools-has-1a-2u-33-33-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 76; } -[\:has\(.foo\)] > .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1a-2u-33-33]:not(.does-not-exist) { order: 77; } -.foo,[\%20\:has\(.foo\)] { +.foo, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 78; } -[\:has\(.foo\)], .foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], .foo { order: 79; } -#foo[\:has\(.foo\)] { +[csstools-has-z-2u-33-33-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 80; } -[\:has\(.foo\)]#foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-z-2u-33-33]:not(#does-not-exist) { order: 81; } -#foo [\:has\(.foo\)] { +[csstools-has-z-2u-33-33-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 82; } -[\:has\(.foo\)] #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-z-2u-33-33]:not(#does-not-exist) { order: 83; } -#foo [\:has\(.foo\)] { +[csstools-has-z-2u-33-33-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 84; } -[\:has\(.foo\)] #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-z-2u-33-33]:not(#does-not-exist) { order: 85; } -#foo+[\:has\(.foo\)] { +[csstools-has-z-2u-33-33-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 86; } -[\:has\(.foo\)]+#foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-z-2u-33-33]:not(#does-not-exist) { order: 87; } -#foo + [\:has\(.foo\)] { +[csstools-has-z-2u-33-33-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 88; } -[\:has\(.foo\)] + #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-z-2u-33-33]:not(#does-not-exist) { order: 89; } -#foo~[\:has\(.foo\)] { +[csstools-has-z-2u-33-33-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 90; } -[\:has\(.foo\)]~#foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-z-2u-33-33]:not(#does-not-exist) { order: 91; } -#foo ~ [\:has\(.foo\)] { +[csstools-has-z-2u-33-33-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 92; } -[\:has\(.foo\)] ~ #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-z-2u-33-33]:not(#does-not-exist) { order: 93; } -#foo>[\:has\(.foo\)] { +[csstools-has-z-2u-33-33-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 94; } -[\:has\(.foo\)]>#foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-z-2u-33-33]:not(#does-not-exist) { order: 95; } -#foo > [\:has\(.foo\)] { +[csstools-has-z-2u-33-33-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(#does-not-exist) { order: 96; } -[\:has\(.foo\)] > #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-z-2u-33-33]:not(#does-not-exist) { order: 97; } -#foo,[\%20\:has\(.foo\)] { +#foo, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 98; } -[\:has\(.foo\)], #foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], #foo { order: 99; } -__foo[\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 100; } -[\:has\(.foo\)]__foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-2n-2n-2u-33-33]:not(does-not-exist) { order: 101; } -__foo [\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 102; } -[\:has\(.foo\)] __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-2n-2n-2u-33-33]:not(does-not-exist) { order: 103; } -__foo [\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 104; } -[\:has\(.foo\)] __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-2n-2n-2u-33-33]:not(does-not-exist) { order: 105; } -__foo+[\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 106; } -[\:has\(.foo\)]+__foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-2n-2n-2u-33-33]:not(does-not-exist) { order: 107; } -__foo + [\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 108; } -[\:has\(.foo\)] + __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-2n-2n-2u-33-33]:not(does-not-exist) { order: 109; } -__foo~[\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 110; } -[\:has\(.foo\)]~__foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-2n-2n-2u-33-33]:not(does-not-exist) { order: 111; } -__foo ~ [\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 112; } -[\:has\(.foo\)] ~ __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-2n-2n-2u-33-33]:not(does-not-exist) { order: 113; } -__foo>[\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 114; } -[\:has\(.foo\)]>__foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-2n-2n-2u-33-33]:not(does-not-exist) { order: 115; } -__foo > [\:has\(.foo\)] { +[csstools-has-2n-2n-2u-33-33-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 116; } -[\:has\(.foo\)] > __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-2n-2n-2u-33-33]:not(does-not-exist) { order: 117; } -__foo,[\%20\:has\(.foo\)] { +__foo, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 118; } -[\:has\(.foo\)], __foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], __foo { order: 119; } -:--foo[\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 120; } -[\:has\(.foo\)]:--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 121; } -:--foo [\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 122; } -[\:has\(.foo\)] :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 123; } -:--foo [\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 124; } -[\:has\(.foo\)] :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 125; } -:--foo+[\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 126; } -[\:has\(.foo\)]+:--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 127; } -:--foo + [\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 128; } -[\:has\(.foo\)] + :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 129; } -:--foo~[\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 130; } -[\:has\(.foo\)]~:--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 131; } -:--foo ~ [\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 132; } -[\:has\(.foo\)] ~ :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 133; } -:--foo>[\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 134; } -[\:has\(.foo\)]>:--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 135; } -:--foo > [\:has\(.foo\)] { +[csstools-has-1m-19-19-2u-33-33-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 136; } -[\:has\(.foo\)] > :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1m-19-19-2u-33-33]:not(.does-not-exist) { order: 137; } -:--foo,[\%20\:has\(.foo\)] { +:--foo, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 138; } -[\:has\(.foo\)], :--foo { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], :--foo { order: 139; } -[foo="baz"][\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 140; } -[\:has\(.foo\)][foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 141; } -[foo="baz"] [\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 142; } -[\:has\(.foo\)] [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 143; } -[foo="baz"] [\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 144; } -[\:has\(.foo\)] [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 145; } -[foo="baz"]+[\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 146; } -[\:has\(.foo\)]+[foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 147; } -[foo="baz"] + [\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 148; } -[\:has\(.foo\)] + [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 149; } -[foo="baz"]~[\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 150; } -[\:has\(.foo\)]~[foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 151; } -[foo="baz"] ~ [\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 152; } -[\:has\(.foo\)] ~ [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 153; } -[foo="baz"]>[\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 154; } -[\:has\(.foo\)]>[foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 155; } -[foo="baz"] > [\:has\(.foo\)] { +[csstools-has-2j-2u-33-33-1p-y-2q-2p-3e-y-2l-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 156; } -[\:has\(.foo\)] > [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-2j-2u-33-33-1p-y-2q-2p-3e-y-2l]:not(.does-not-exist) { order: 157; } -[foo="baz"],[\%20\:has\(.foo\)] { +[foo="baz"], [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 158; } -[\:has\(.foo\)], [foo="baz"] { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], [foo="baz"] { order: 159; } -*[\:has\(.foo\)] { +[csstools-has-16-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 160; } -[\:has\(.foo\)]* { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-16] { order: 161; } -* [\:has\(.foo\)] { +[csstools-has-16-w-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 162; } -[\:has\(.foo\)] * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-16] { order: 163; } -* [\:has\(.foo\)] { +[csstools-has-16-w-w-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 164; } -[\:has\(.foo\)] * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-16] { order: 165; } -*+[\:has\(.foo\)] { +[csstools-has-16-17-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 166; } -[\:has\(.foo\)]+* { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-16] { order: 167; } -* + [\:has\(.foo\)] { +[csstools-has-16-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 168; } -[\:has\(.foo\)] + * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-16] { order: 169; } -*~[\:has\(.foo\)] { +[csstools-has-16-3i-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 170; } -[\:has\(.foo\)]~* { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-16] { order: 171; } -* ~ [\:has\(.foo\)] { +[csstools-has-16-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 172; } -[\:has\(.foo\)] ~ * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-16] { order: 173; } -*>[\:has\(.foo\)] { +[csstools-has-16-1q-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 174; } -[\:has\(.foo\)]>* { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-16] { order: 175; } -* > [\:has\(.foo\)] { +[csstools-has-16-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 176; } -[\:has\(.foo\)] > * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-16] { order: 177; } -*,[\%20\:has\(.foo\)] { +*, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 178; } -[\:has\(.foo\)], * { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], * { order: 179; } -:hover[\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 180; } -[\:has\(.foo\)]:hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 181; } -:hover [\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 182; } -[\:has\(.foo\)] :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 183; } -:hover [\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 184; } -[\:has\(.foo\)] :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 185; } -:hover+[\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 186; } -[\:has\(.foo\)]+:hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 187; } -:hover + [\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 188; } -[\:has\(.foo\)] + :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 189; } -:hover~[\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 190; } -[\:has\(.foo\)]~:hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 191; } -:hover ~ [\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 192; } -[\:has\(.foo\)] ~ :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 193; } -:hover>[\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 194; } -[\:has\(.foo\)]>:hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 195; } -:hover > [\:has\(.foo\)] { +[csstools-has-1m-2w-33-3a-2t-36-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 196; } -[\:has\(.foo\)] > :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1m-2w-33-3a-2t-36]:not(.does-not-exist) { order: 197; } -:hover,[\%20\:has\(.foo\)] { +:hover, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 198; } -[\:has\(.foo\)], :hover { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], :hover { order: 199; } -::before[\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 200; } -[\:has\(.foo\)]::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 201; } -::before [\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 202; } -[\:has\(.foo\)] ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 203; } -::before [\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-w-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 204; } -[\:has\(.foo\)] ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-w-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 205; } -::before+[\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-17-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 206; } -[\:has\(.foo\)]+::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-17-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 207; } -::before + [\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-w-17-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 208; } -[\:has\(.foo\)] + ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-17-w-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 209; } -::before~[\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-3i-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 210; } -[\:has\(.foo\)]~::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-3i-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 211; } -::before ~ [\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-w-3i-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 212; } -[\:has\(.foo\)] ~ ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-3i-w-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 213; } -::before>[\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-1q-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 214; } -[\:has\(.foo\)]>::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-1q-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 215; } -::before > [\:has\(.foo\)] { +[csstools-has-1m-1m-2q-2t-2u-33-36-2t-w-1q-w-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 216; } -[\:has\(.foo\)] > ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15-w-1q-w-1m-1m-2q-2t-2u-33-36-2t]:not(does-not-exist) { order: 217; } -::before,[\%20\:has\(.foo\)] { +::before, [csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15] { order: 218; } -[\:has\(.foo\)], ::before { +[csstools-has-1m-2w-2p-37-14-1a-2u-33-33-15], ::before { order: 219; } @@ -886,7 +886,7 @@ foo[baz=":has(.foo)"] { order: 221; } -[\:not-has\(.foo\)] { +[csstools-has-1m-32-33-38-14-1m-2w-2p-37-14-1a-2u-33-33-15-15] { order: 222; } @@ -894,11 +894,11 @@ foo[baz=":has(.foo)"] { order: 223; } -:--[\:has\(.foo\)] { +[csstools-has-1m-19-19-1m-2w-2p-37-14-1a-2u-33-33-15]:not(.does-not-exist) { order: 224; } -__[\:has\(.foo\)] { +[csstools-has-2n-2n-1m-2w-2p-37-14-1a-2u-33-33-15]:not(does-not-exist) { order: 225; } diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.after.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.after.expect.css new file mode 100644 index 0000000000..8123688341 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-logical.after.expect.css @@ -0,0 +1,6 @@ +[csstools-has-2j-2s-2x-36-1p-y-30-38-36-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px +} +[csstools-has-2j-2s-2x-36-1p-y-36-38-30-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px +} diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css new file mode 100644 index 0000000000..f9c97002f8 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-logical.after.preserve.expect.css @@ -0,0 +1,57 @@ +[csstools-has-2j-2s-2x-36-1p-y-30-38-36-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px; +} +[dir="ltr"] a:has(.b) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15-1m-2s-2x-36-14-30-38-36-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px; +} +a:has(.b):dir(ltr) { + margin-left: 2px; +} +[csstools-has-2j-2s-2x-36-1p-y-36-38-30-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px; +} +[dir="rtl"] a:has(.b) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15-1m-2s-2x-36-14-36-38-30-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px; +} +a:has(.b):dir(rtl) { + margin-right: 2px; +} +[dir="ltr"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(ltr) { + margin-left: 2px; +} +[dir="rtl"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(rtl) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-inline-start: 2px; +} +[dir="ltr"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(ltr) { + margin-left: 2px; +} +[dir="rtl"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(rtl) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-inline-start: 2px; +} +a:has(.b) { + margin-inline-start: 2px; +} diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.before.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.before.expect.css new file mode 100644 index 0000000000..8123688341 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-logical.before.expect.css @@ -0,0 +1,6 @@ +[csstools-has-2j-2s-2x-36-1p-y-30-38-36-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px +} +[csstools-has-2j-2s-2x-36-1p-y-36-38-30-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px +} diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css new file mode 100644 index 0000000000..f9c97002f8 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-logical.before.preserve.expect.css @@ -0,0 +1,57 @@ +[csstools-has-2j-2s-2x-36-1p-y-30-38-36-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px; +} +[dir="ltr"] a:has(.b) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15-1m-2s-2x-36-14-30-38-36-15]:not(.does-not-exist):not(does-not-exist) { + margin-left: 2px; +} +a:has(.b):dir(ltr) { + margin-left: 2px; +} +[csstools-has-2j-2s-2x-36-1p-y-36-38-30-y-2l-w-2p-1m-2w-2p-37-14-1a-2q-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px; +} +[dir="rtl"] a:has(.b) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15-1m-2s-2x-36-14-36-38-30-15]:not(.does-not-exist):not(does-not-exist) { + margin-right: 2px; +} +a:has(.b):dir(rtl) { + margin-right: 2px; +} +[dir="ltr"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(ltr) { + margin-left: 2px; +} +[dir="rtl"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(rtl) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-inline-start: 2px; +} +[dir="ltr"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-left: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(ltr) { + margin-left: 2px; +} +[dir="rtl"] [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist):dir(rtl) { + margin-right: 2px; +} +[csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + margin-inline-start: 2px; +} +a:has(.b) { + margin-inline-start: 2px; +} diff --git a/plugins/css-has-pseudo/test/plugin-order-logical.css b/plugins/css-has-pseudo/test/plugin-order-logical.css new file mode 100644 index 0000000000..e0742cbea1 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-logical.css @@ -0,0 +1,3 @@ +a:has(.b) { + margin-inline-start: 2px; +} diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css new file mode 100644 index 0000000000..cce9158a83 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.after.expect.css @@ -0,0 +1,12 @@ + + [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + order: 1; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { + order: 2; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { + order: 3; + } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css new file mode 100644 index 0000000000..76dffbb29c --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.after.preserve.expect.css @@ -0,0 +1,24 @@ + + [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + order: 1; + } + +a:has(.b) { + order: 1; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { + order: 2; + } + +a:has(> img):focus { + order: 2; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { + order: 3; + } + +a:has(> img) :has(> .some) { + order: 3; + } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css new file mode 100644 index 0000000000..cce9158a83 --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.before.expect.css @@ -0,0 +1,12 @@ + + [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + order: 1; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { + order: 2; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { + order: 3; + } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css b/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css new file mode 100644 index 0000000000..76dffbb29c --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.before.preserve.expect.css @@ -0,0 +1,24 @@ + + [csstools-has-2p-1m-2w-2p-37-14-1a-2q-15]:not(does-not-exist) { + order: 1; + } + +a:has(.b) { + order: 1; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-1m-2u-33-2r-39-37]:not(does-not-exist):not(does-not-exist) { + order: 2; + } + +a:has(> img):focus { + order: 2; + } + +[csstools-has-2p-1m-2w-2p-37-14-1q-w-2x-31-2v-15-w-1m-2w-2p-37-14-1q-w-1a-37-33-31-2t-15]:not(does-not-exist):not(does-not-exist) { + order: 3; + } + +a:has(> img) :has(> .some) { + order: 3; + } diff --git a/plugins/css-has-pseudo/test/plugin-order-nesting.css b/plugins/css-has-pseudo/test/plugin-order-nesting.css new file mode 100644 index 0000000000..b48879b8ff --- /dev/null +++ b/plugins/css-has-pseudo/test/plugin-order-nesting.css @@ -0,0 +1,17 @@ +a { + &:has(.b) { + order: 1; + } +} + +a:has(> img) { + &:focus { + order: 2; + } +} + +a:has(> img) { + & :has(> .some) { + order: 3; + } +} diff --git a/plugins/css-has-pseudo/tsconfig.json b/plugins/css-has-pseudo/tsconfig.json new file mode 100644 index 0000000000..e0d06239cc --- /dev/null +++ b/plugins/css-has-pseudo/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": "." + }, + "include": ["./src/**/*"], + "exclude": ["dist"], +} diff --git a/plugins/css-prefers-color-scheme/README.md b/plugins/css-prefers-color-scheme/README.md index 948597d9e9..91b076bf12 100644 --- a/plugins/css-prefers-color-scheme/README.md +++ b/plugins/css-prefers-color-scheme/README.md @@ -133,16 +133,19 @@ or ```html - + ``` +⚠️ Please use a versioned url, like this : `https://unpkg.com/css-prefers-color-scheme@6.0.3/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 Internet Explorer 9+ without any additional polyfills. To maintain compatibility with browsers supporting `prefers-color-scheme`, the library will remove `prefers-color-scheme` media queries in favor of -cross-browser compatible `color` media queries. This ensures a seemless +cross-browser compatible `color` media queries. This ensures a seamless experience, even when JavaScript is unable to run. ### Browser Usage @@ -198,7 +201,7 @@ The `removeListener` function removes the native `prefers-color-scheme` listener, which may or may not be applied, depending on your browser support. This is provided to give you complete control over plugin cleanup. -#### debug mode +#### debug If styles are not applied you can enable debug mode to log exceptions. @@ -208,7 +211,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true }); ``` ```html - + ``` diff --git a/plugins/css-prefers-color-scheme/docs/README.md b/plugins/css-prefers-color-scheme/docs/README.md index 99b35bd727..15eadd1f7e 100644 --- a/plugins/css-prefers-color-scheme/docs/README.md +++ b/plugins/css-prefers-color-scheme/docs/README.md @@ -2,6 +2,7 @@ + @@ -63,21 +64,24 @@ or ```html - + ``` -[Prefers Color Scheme] works in all major browsers, including Safari 6+ and +⚠️ Please use a versioned url, like this : `https://unpkg.com/@/dist/browser-global.js` +Without the version, you might unexpectedly get a new major version of the library with breaking changes. + +[] works in all major browsers, including Safari 6+ and Internet Explorer 9+ without any additional polyfills. To maintain compatibility with browsers supporting `prefers-color-scheme`, the library will remove `prefers-color-scheme` media queries in favor of -cross-browser compatible `color` media queries. This ensures a seemless +cross-browser compatible `color` media queries. This ensures a seamless experience, even when JavaScript is unable to run. ### Browser Usage -Use [Prefers Color Scheme] to activate your `prefers-color-scheme` queries: +Use [] to activate your `prefers-color-scheme` queries: ```js import prefersColorSchemeInit from '/browser'; @@ -128,7 +132,7 @@ The `removeListener` function removes the native `prefers-color-scheme` listener, which may or may not be applied, depending on your browser support. This is provided to give you complete control over plugin cleanup. -#### debug mode +#### debug If styles are not applied you can enable debug mode to log exceptions. @@ -138,7 +142,7 @@ const prefersColorScheme = prefersColorSchemeInit('light', { debug: true }); ``` ```html - + ``` @@ -162,7 +166,7 @@ ECMA Script: ## How does it work? -[Prefers Color Scheme] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries. +[] is a [PostCSS] plugin that transforms `prefers-color-scheme` queries into `color` queries. This changes `prefers-color-scheme: dark` into `(color: 48842621)` and `prefers-color-scheme: light` into `(color: 70318723)`. The frontend receives these `color` queries, which are understood in all @@ -170,7 +174,7 @@ major browsers going back to Internet Explorer 9. However, since browsers can only have a reasonably small number of bits per color, our color scheme values are ignored. -[Prefers Color Scheme] uses a [browser script](#browser) to change +[] uses a [browser script](#browser) to change `(color: 48842621)` queries into `(max-color: 48842621)` in order to activate “dark mode” specific CSS, and it changes `(color: 70318723)` queries into `(max-color: 48842621)` to activate “light mode” specific CSS.