From 2df3d452073a631b0cf78294b216fd91f9acef6e Mon Sep 17 00:00:00 2001 From: romainmenke Date: Sun, 3 Jul 2022 10:00:19 +0200 Subject: [PATCH] case insensitive matching --- plugins/css-blank-pseudo/CHANGELOG.md | 1 + plugins/css-blank-pseudo/src/index.ts | 12 +++++------- plugins/css-blank-pseudo/test/basic.css | 4 ++++ plugins/css-blank-pseudo/test/basic.expect.css | 8 ++++++++ .../css-blank-pseudo/test/basic.preserve.expect.css | 4 ++++ .../test/basic.replacewith.expect.css | 8 ++++++++ .../test/basic.wrong-replacewith.expect.css | 4 ++++ plugins/css-has-pseudo/CHANGELOG.md | 1 + plugins/css-has-pseudo/src/index.ts | 10 +++++----- .../css-has-pseudo/src/is-guarded-by-at-supports.ts | 8 ++++---- plugins/css-has-pseudo/test/browser.css | 4 ++-- plugins/css-has-pseudo/test/browser.expect.css | 4 ++-- plugins/css-prefers-color-scheme/CHANGELOG.md | 1 + plugins/css-prefers-color-scheme/src/index.ts | 2 +- plugins/css-prefers-color-scheme/test/browser.css | 2 +- .../css-prefers-color-scheme/test/browser.expect.css | 4 ++-- 16 files changed, 53 insertions(+), 24 deletions(-) diff --git a/plugins/css-blank-pseudo/CHANGELOG.md b/plugins/css-blank-pseudo/CHANGELOG.md index e30ebf19a..9025feffb 100644 --- a/plugins/css-blank-pseudo/CHANGELOG.md +++ b/plugins/css-blank-pseudo/CHANGELOG.md @@ -6,6 +6,7 @@ more efficient and also does less work at the MutationObserver handler. - Breaking: removed old CDN urls - Breaking: removed old CLI +- Fix case insensitive matching. #### How to migrate: diff --git a/plugins/css-blank-pseudo/src/index.ts b/plugins/css-blank-pseudo/src/index.ts index 4a870374a..d7bf4007d 100644 --- a/plugins/css-blank-pseudo/src/index.ts +++ b/plugins/css-blank-pseudo/src/index.ts @@ -31,7 +31,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { return { postcssPlugin: 'css-blank-pseudo', Rule: (rule, { result }) => { - if (rule.selector.indexOf(':blank') === -1) { + if (rule.selector.toLowerCase().indexOf(':blank') === -1) { return; } @@ -39,7 +39,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { try { const modifiedSelectorAST = parser((selectors) => { selectors.walkPseudos((selector) => { - if (selector.value !== ':blank') { + if (selector.value.toLowerCase() !== ':blank') { return; } @@ -66,12 +66,10 @@ const creator: PluginCreator = (opts?: pluginOptions) => { return; } - const clone = rule.clone({ selector: modifiedSelector }); + rule.cloneBefore({ selector: modifiedSelector }); - if (options.preserve) { - rule.before(clone); - } else { - rule.replaceWith(clone); + if (!options.preserve) { + rule.remove(); } }, }; diff --git a/plugins/css-blank-pseudo/test/basic.css b/plugins/css-blank-pseudo/test/basic.css index bd8a562c9..bd42aa82f 100644 --- a/plugins/css-blank-pseudo/test/basic.css +++ b/plugins/css-blank-pseudo/test/basic.css @@ -33,3 +33,7 @@ test :matches(test :blank :blank test) test { test:not(:blank) { order: 5; } + +uppercase :BLaNK { + order: 6; +} diff --git a/plugins/css-blank-pseudo/test/basic.expect.css b/plugins/css-blank-pseudo/test/basic.expect.css index 286e991e1..a3540af95 100644 --- a/plugins/css-blank-pseudo/test/basic.expect.css +++ b/plugins/css-blank-pseudo/test/basic.expect.css @@ -57,3 +57,11 @@ test:not([blank]) { test:not(:blank) { order: 5; } + +uppercase [blank] { + order: 6; +} + +uppercase :BLaNK { + order: 6; +} diff --git a/plugins/css-blank-pseudo/test/basic.preserve.expect.css b/plugins/css-blank-pseudo/test/basic.preserve.expect.css index 0cca2bb53..f7eddfe81 100644 --- a/plugins/css-blank-pseudo/test/basic.preserve.expect.css +++ b/plugins/css-blank-pseudo/test/basic.preserve.expect.css @@ -32,3 +32,7 @@ test :matches(test [blank] [blank] test) test { test:not([blank]) { order: 5; } + +uppercase [blank] { + order: 6; +} diff --git a/plugins/css-blank-pseudo/test/basic.replacewith.expect.css b/plugins/css-blank-pseudo/test/basic.replacewith.expect.css index aa7a24d51..6874cfbb0 100644 --- a/plugins/css-blank-pseudo/test/basic.replacewith.expect.css +++ b/plugins/css-blank-pseudo/test/basic.replacewith.expect.css @@ -57,3 +57,11 @@ test:not(.css-blank) { test:not(:blank) { order: 5; } + +uppercase .css-blank { + order: 6; +} + +uppercase :BLaNK { + order: 6; +} diff --git a/plugins/css-blank-pseudo/test/basic.wrong-replacewith.expect.css b/plugins/css-blank-pseudo/test/basic.wrong-replacewith.expect.css index bd8a562c9..bd42aa82f 100644 --- a/plugins/css-blank-pseudo/test/basic.wrong-replacewith.expect.css +++ b/plugins/css-blank-pseudo/test/basic.wrong-replacewith.expect.css @@ -33,3 +33,7 @@ test :matches(test :blank :blank test) test { test:not(:blank) { order: 5; } + +uppercase :BLaNK { + order: 6; +} diff --git a/plugins/css-has-pseudo/CHANGELOG.md b/plugins/css-has-pseudo/CHANGELOG.md index 141631b3b..e910d57b3 100644 --- a/plugins/css-has-pseudo/CHANGELOG.md +++ b/plugins/css-has-pseudo/CHANGELOG.md @@ -10,6 +10,7 @@ - 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. +- Fix: case insensitive matching. #### How to migrate : diff --git a/plugins/css-has-pseudo/src/index.ts b/plugins/css-has-pseudo/src/index.ts index f852e6eb1..a7527f225 100644 --- a/plugins/css-has-pseudo/src/index.ts +++ b/plugins/css-has-pseudo/src/index.ts @@ -18,12 +18,12 @@ const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: str return { postcssPlugin: 'css-has-pseudo-experimental', RuleExit: (rule, { result }) => { - if (!rule.selector.includes(':has(') || isWithinSupportCheck(rule)) { + if (!rule.selector.toLowerCase().includes(':has(') || isWithinSupportCheck(rule)) { return; } const selectors = rule.selectors.map((selector) => { - if (!selector.includes(':has(')) { + if (!selector.toLowerCase().includes(':has(')) { return selector; } @@ -41,7 +41,7 @@ const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: str let containsHasPseudo = false; selectorAST.walkPseudos((node) => { - containsHasPseudo = containsHasPseudo || (node.value === ':has' && node.nodes); + containsHasPseudo = containsHasPseudo || (node.value.toLowerCase() === ':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 @@ -51,7 +51,7 @@ const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: str // 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') { + if (node.value.toLowerCase() === ':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({ @@ -59,7 +59,7 @@ const creator: PluginCreator<{ preserve?: boolean, specificityMatchingName?: str })); } - if (node.value === ':any-link') { + if (node.value.toLowerCase() === ':any-link') { // we can transform `:any-link` to `:link` as this is allowed node.value = ':link'; } 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 index 58ee65adc..0d339ec2a 100644 --- a/plugins/css-has-pseudo/src/is-guarded-by-at-supports.ts +++ b/plugins/css-has-pseudo/src/is-guarded-by-at-supports.ts @@ -2,7 +2,7 @@ import valueParser from 'postcss-value-parser'; import selectorParser from 'postcss-selector-parser'; export function isGuardedByAtSupportsFromAtRuleParams(atSupportsParams: string): boolean { - if (!atSupportsParams.includes(':has(')) { + if (!atSupportsParams.toLowerCase().includes(':has(')) { return false; } @@ -13,7 +13,7 @@ export function isGuardedByAtSupportsFromAtRuleParams(atSupportsParams: string): const ast = valueParser(atSupportsParams); ast.walk((node) => { - if (node.type === 'function' && node.value === 'selector') { + if (node.type === 'function' && node.value.toLowerCase() === 'selector') { selectors.add(valueParser.stringify(node.nodes)); return false; } @@ -33,7 +33,7 @@ export function isGuardedByAtSupportsFromAtRuleParams(atSupportsParams: string): } export function selectorContainsHasPseudo(selector: string): boolean { - if (!selector.includes(':has(')) { + if (!selector.toLowerCase().includes(':has(')) { return false; } @@ -42,7 +42,7 @@ export function selectorContainsHasPseudo(selector: string): boolean { try { const ast = selectorParser().astSync(selector); ast.walk((node) => { - if (node.type === 'pseudo' && node.value === ':has' && node.nodes && node.nodes.length > 0) { + if (node.type === 'pseudo' && node.value.toLowerCase() === ':has' && node.nodes && node.nodes.length > 0) { containsHasPseudo = true; return false; } diff --git a/plugins/css-has-pseudo/test/browser.css b/plugins/css-has-pseudo/test/browser.css index 186b159e9..27273679d 100644 --- a/plugins/css-has-pseudo/test/browser.css +++ b/plugins/css-has-pseudo/test/browser.css @@ -3,7 +3,7 @@ color: grey } -#d_main:has(#d_checkbox:checked)>#d_subject { +#d_main:HAS(#d_checkbox:checked)>#d_subject { color: red } @@ -11,7 +11,7 @@ color: red } -#d_main:has(#d_checkbox:disabled)>#d_subject { +#d_main:hAs(#d_checkbox:disabled)>#d_subject { color: green } diff --git a/plugins/css-has-pseudo/test/browser.expect.css b/plugins/css-has-pseudo/test/browser.expect.css index 8e1cc40a9..33426c6cf 100644 --- a/plugins/css-has-pseudo/test/browser.expect.css +++ b/plugins/css-has-pseudo/test/browser.expect.css @@ -3,7 +3,7 @@ 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) { +[csstools-has-z-2s-2n-31-2p-2x-32-1m-20-1t-2b-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 } @@ -11,7 +11,7 @@ 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) { +[csstools-has-z-2s-2n-31-2p-2x-32-1m-2w-1t-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 } diff --git a/plugins/css-prefers-color-scheme/CHANGELOG.md b/plugins/css-prefers-color-scheme/CHANGELOG.md index 6458c2b6e..4e43ca26f 100644 --- a/plugins/css-prefers-color-scheme/CHANGELOG.md +++ b/plugins/css-prefers-color-scheme/CHANGELOG.md @@ -8,6 +8,7 @@ - Breaking: remove `color-depth` queries fallback - Breaking: remove 'no-preference' support as this was dropped from the spec - Breaking: remove old global object +- Fix: case insensitive matching. #### How to migrate : diff --git a/plugins/css-prefers-color-scheme/src/index.ts b/plugins/css-prefers-color-scheme/src/index.ts index d3119a30d..051659d3d 100644 --- a/plugins/css-prefers-color-scheme/src/index.ts +++ b/plugins/css-prefers-color-scheme/src/index.ts @@ -20,7 +20,7 @@ const creator: PluginCreator = (opts?: pluginOptions) => { return { postcssPlugin: 'postcss-prefers-color-scheme', AtRule: (atRule) => { - if (atRule.name !== 'media') { + if (atRule.name.toLowerCase() !== 'media') { return; } diff --git a/plugins/css-prefers-color-scheme/test/browser.css b/plugins/css-prefers-color-scheme/test/browser.css index a2f477fab..582acfb42 100644 --- a/plugins/css-prefers-color-scheme/test/browser.css +++ b/plugins/css-prefers-color-scheme/test/browser.css @@ -10,7 +10,7 @@ } } -@media (prefers-color-scheme: light) { +@MEDIA (PREFERS-COLOR-SCHEME: LIGHT) { #fixture { color: rgb(255, 192, 203); } diff --git a/plugins/css-prefers-color-scheme/test/browser.expect.css b/plugins/css-prefers-color-scheme/test/browser.expect.css index 0ffd0800b..3e8450688 100644 --- a/plugins/css-prefers-color-scheme/test/browser.expect.css +++ b/plugins/css-prefers-color-scheme/test/browser.expect.css @@ -16,13 +16,13 @@ } } -@media (color: 70318723) { +@MEDIA (color: 70318723) { #fixture { color: rgb(255, 192, 203); } } -@media (prefers-color-scheme: light) { +@MEDIA (PREFERS-COLOR-SCHEME: LIGHT) { #fixture { color: rgb(255, 192, 203); }