case insensitive matching (#517)

Author: romainmenke

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:
 

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

@@ -31,15 +31,15 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	return {
 		postcssPlugin: 'css-blank-pseudo',
 		Rule: (rule, { result }) => {
-			if (rule.selector.indexOf(':blank') === -1) {
+			if (rule.selector.toLowerCase().indexOf(':blank') === -1) {
 				return;
 			}
 
 			let modifiedSelector;
 			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<pluginOptions> = (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();
 			}
 		},
 	};

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

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

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

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

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

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 :
 

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,15 +51,15 @@ 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({
 							value: options.specificityMatchingName,
 						}));
 					}
 
-					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';
 					}

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

plugins/css-has-pseudo/test/browser.css

@@ -3,15 +3,15 @@
 	color: grey
 }
 
-#d_main:has(#d_checkbox:checked)>#d_subject {
+#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 {
+#d_main:hAs(#d_checkbox:disabled)>#d_subject {
 	color: green
 }
 

plugins/css-has-pseudo/test/browser.expect.css

@@ -3,15 +3,15 @@
 	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
 }
 
 [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) {
+[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
 }
 

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 :
 

plugins/css-prefers-color-scheme/src/index.ts

@@ -20,7 +20,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	return {
 		postcssPlugin: 'postcss-prefers-color-scheme',
 		AtRule: (atRule) => {
-			if (atRule.name !== 'media') {
+			if (atRule.name.toLowerCase() !== 'media') {
 				return;
 			}
 

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

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