case insensitive processing and consistent cloning (#502)

* wip

* color()

* some more plugins

* fix

* a few more

* postcss-font-format-keywords

* gap properties

* hwb and design tokens

* more

* update test expect files

* more updates

* more updates

* a few more

* finish up

* changelog

* final fixes

* clarify

Author: romainmenke

.github/labeler.yml

@@ -164,9 +164,9 @@
   - plugins/postcss-pseudo-class-any-link/**
   - experimental/postcss-pseudo-class-any-link/**
 
-"plugins/postcss-rebeccapurple":
-  - plugins/postcss-rebeccapurple/**
-  - experimental/postcss-rebeccapurple/**
+"plugins/postcss-color-rebeccapurple":
+  - plugins/postcss-color-rebeccapurple/**
+  - experimental/postcss-color-rebeccapurple/**
 
 "plugins/postcss-replace-overflow-wrap":
   - plugins/postcss-replace-overflow-wrap/**

package-lock.json

@@ -1,5 +1,9 @@
 # Changes to Selector Specificity
 
+### Unreleased
+
+- Fix case insensitive matching.
+
 ### 2.0.1 (June 10, 2022)
 
 - Fixed: Exception on `:nth-child` without arguments. [#439](https://github.com/csstools/postcss-plugins/issues/439)

packages/selector-specificity/CHANGELOG.md

@@ -39,7 +39,7 @@ export function selectorSpecificity(node: Node): Specificity {
 	} else if (isPseudoElement(node)) {
 		c += 1;
 	} else if (parser.isPseudoClass(node)) {
-		switch (node.value) {
+		switch (node.value.toLowerCase()) {
 			case ':-moz-any':
 			case ':-webkit-any':
 			case ':any':
@@ -74,7 +74,7 @@ export function selectorSpecificity(node: Node): Specificity {
 
 					if (node.nodes && node.nodes.length > 0) {
 						const ofSeparatorIndex = node.nodes[0].nodes.findIndex((x) => {
-							return x.type === 'tag' && x.value === 'of';
+							return x.type === 'tag' && x.value.toLowerCase() === 'of';
 						});
 
 						if (ofSeparatorIndex > -1) {

packages/selector-specificity/src/index.ts

@@ -518,7 +518,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css

@@ -518,7 +518,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css

@@ -438,7 +438,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.ch38.expect.css

@@ -541,7 +541,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.expect.css

@@ -557,7 +557,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.ie10.expect.css

@@ -539,7 +539,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css

@@ -525,7 +525,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css

@@ -928,7 +928,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	     -o-transform: rotate(mod(-140deg, -90deg));
 	        transform: rotate(mod(-140deg, -90deg));
 	width: 2px;
-	width: mod(2px, 5px);
 	width: mod(mod(-18px, 5px), 5px);
 }
 

plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css

@@ -546,7 +546,6 @@ h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.te
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.stage0.expect.css

@@ -482,7 +482,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css

@@ -474,7 +474,6 @@
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: calc(8em + 20px);
 	height: 10px;

plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css

@@ -759,7 +759,6 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	text-indent: 2em;
 	content: var(--value-2ic);
 	left: 2em;
-	left: 2em;
 	left: var(--non-existing, 2em);
 	width: -webkit-calc(8em + 20px);
 	width: -moz-calc(8em + 20px);

plugin-packs/postcss-preset-env/test/layers-basic.expect.css

@@ -939,7 +939,6 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n
 	     -o-transform: rotate(mod(-140deg, -90deg));
 	        transform: rotate(mod(-140deg, -90deg));
 	width: 2px;
-	width: mod(2px, 5px);
 	width: mod(mod(-18px, 5px), 5px);
 }
 

plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css

@@ -1,17 +1,21 @@
 # Changes to PostCSS Attribute Case Insensitive
 
-## 5.0.1 (3 June, 2022)
+### Unreleased
+
+- Fix incorrect selector AST updates
+
+### 5.0.1 (3 June, 2022)
 
 - Prevent exponential backtracking when checking for selectors with case insensitive value matching.
 
-## 5.0.0 (15 September, 2020)
+### 5.0.0 (15 September, 2020)
 
 - Postcss 8.x support
 
-## 4.0.1 (10 January, 2019)
+### 4.0.1 (10 January, 2019)
 
-## 2.0.0 (06 May, 2017)
+### 2.0.0 (06 May, 2017)
 
-## 1.0.1 (19 August, 2016)
+### 1.0.1 (19 August, 2016)
 
-## 1.0.0 (10 August, 2016)
+### 1.0.0 (10 August, 2016)

plugins/postcss-attribute-case-insensitive/CHANGELOG.md

@@ -90,7 +90,12 @@ const creator: PluginCreator<never> = () => {
 		postcssPlugin: 'postcss-attribute-case-insensitive',
 		Rule(rule) {
 			if (rule.selector.includes('i]')) {
-				rule.selector = selectorParser(transform).processSync(rule.selector);
+				const modifiedSelector = selectorParser(transform).processSync(rule.selector);
+				if (modifiedSelector === rule.selector) {
+					return;
+				}
+
+				rule.replaceWith(rule.clone({ selector: modifiedSelector }));
 			}
 		},
 	};

plugins/postcss-attribute-case-insensitive/src/index.ts

@@ -12,6 +12,9 @@ postcssTape(plugin)({
 	nested: {
 		message: "supports nested layer usage",
 	},
+	'nested-case-insensitive': {
+		message: "supports layer and other keywords written in any case",
+	},
 	'nested-complex': {
 		message: "supports nested layer usage",
 	},

plugins/postcss-cascade-layers/.tape.mjs

@@ -1,5 +1,9 @@
 # Changes to PostCSS Cascade Layers
 
+### Unreleased
+
+- Fix case insensitive `@layer` matching (`@LaYeR`).
+
 ### 1.0.4 (June 23, 2022)
 
 - Fix selector order with any pseudo element. This plugin will no longer re-order selectors.

plugins/postcss-cascade-layers/CHANGELOG.md

@@ -3,7 +3,7 @@ import { CONDITIONAL_ATRULES } from './constants';
 
 export function removeEmptyDescendantBlocks(block: Container) {
 	block.walk((node) => {
-		if (node.type === 'rule' || (node.type === 'atrule' && ['layer', ...CONDITIONAL_ATRULES].includes(node.name))) {
+		if (node.type === 'rule' || (node.type === 'atrule' && ['layer', ...CONDITIONAL_ATRULES].includes(node.name.toLowerCase()))) {
 			if (!node.nodes || !node.nodes.length) {
 				node.remove();
 			}

plugins/postcss-cascade-layers/src/clean-blocks.ts

@@ -10,7 +10,11 @@ export function desugarAndParseLayerNames(root: Container, model: Model) {
 	// - parse layer names
 	// - rename anon layers
 	// - handle empty layers
-	root.walkAtRules('layer', (layerRule) => {
+	root.walkAtRules((layerRule) => {
+		if (layerRule.name.toLowerCase() !== 'layer') {
+			return;
+		}
+
 		if (layerRule.params) {
 			const layerNameList: Array<string> = [];
 			let isInvalidLayerName = false;
@@ -86,7 +90,7 @@ export function desugarAndParseLayerNames(root: Container, model: Model) {
 			layerRule.params = model.createAnonymousLayerName();
 		}
 
-		const hasNestedLayers = someAtRuleInTree(layerRule, (node) => node.name === 'layer');
+		const hasNestedLayers = someAtRuleInTree(layerRule, (node) => node.name.toLowerCase() === 'layer');
 		const hasUnlayeredStyles = someInTree(layerRule, (node) => {
 			if (node.type !== 'rule') {
 				return;
@@ -104,7 +108,11 @@ export function desugarAndParseLayerNames(root: Container, model: Model) {
 			});
 
 			// only keep unlayered styles for the implicit layer.
-			implicitLayer.walkAtRules('layer', (node) => {
+			implicitLayer.walkAtRules((node) => {
+				if (node.name.toLowerCase() !== 'layer') {
+					return;
+				}
+
 				node.remove();
 			});
 

plugins/postcss-cascade-layers/src/desugar-and-parse-layer-names.ts

@@ -6,17 +6,21 @@ import { someAtRuleInTree } from './some-in-tree';
 export function desugarNestedLayers(root: Container<ChildNode>, model: Model) {
 	while (someAtRuleInTree(root, (node) => {
 		return node.nodes && someAtRuleInTree(node, (nested) => {
-			return nested.name === 'layer';
+			return nested.name.toLowerCase() === 'layer';
 		});
 	})) {
 		let foundUnexpectedLayerNesting = false;
 
-		root.walkAtRules('layer', (layerRule) => {
+		root.walkAtRules((layerRule) => {
+			if (layerRule.name.toLowerCase() !== 'layer') {
+				return;
+			}
+
 			if (layerRule.parent === root) {
 				return;
 			}
 
-			if (layerRule.parent.type === 'atrule' && (layerRule.parent as AtRule).name === 'layer') {
+			if (layerRule.parent.type === 'atrule' && (layerRule.parent as AtRule).name.toLowerCase() === 'layer') {
 				const parent = layerRule.parent as AtRule;
 
 				// Concatenate the current layer params with those of the parent. Store the result in the data model.

plugins/postcss-cascade-layers/src/desugar-nested-layers.ts

@@ -10,7 +10,7 @@ export function getConditionalAtRuleAncestor(layerRule: AtRule): AtRule | null {
 			continue;
 		}
 
-		if (CONDITIONAL_ATRULES.includes((parent as AtRule).name)) {
+		if (CONDITIONAL_ATRULES.includes((parent as AtRule).name.toLowerCase())) {
 			return parent as AtRule;
 		}
 

plugins/postcss-cascade-layers/src/get-conditional-atrule-ancestor.ts

@@ -9,7 +9,7 @@ export function getLayerAtRuleAncestor(node: Node): AtRule | null {
 			continue;
 		}
 
-		if ((parent as AtRule).name === 'layer') {
+		if ((parent as AtRule).name.toLowerCase() === 'layer') {
 			return parent as AtRule;
 		}
 

plugins/postcss-cascade-layers/src/get-layer-atrule-ancestor.ts

@@ -27,15 +27,19 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			// Warnings
 			if (options.onRevertLayerKeyword) {
 				root.walkDecls((decl) => {
-					if (decl.value === 'revert-layer') {
+					if (decl.value.toLowerCase() === 'revert-layer') {
 						decl.warn(result, 'handling "revert-layer" is unsupported by this plugin and will cause style differences between browser versions.');
 					}
 				});
 			}
 
 			if (options.onImportLayerRule) {
-				root.walkAtRules('import', (atRule) => {
-					if (atRule.params.includes('layer')) {
+				root.walkAtRules((atRule) => {
+					if (atRule.name.toLowerCase() !== 'import') {
+						return;
+					}
+
+					if (atRule.params.toLowerCase().includes('layer')) {
 						atRule.warn(result, 'To use @import with layers, the postcss-import plugin is also required. This plugin alone will not support using the @import at-rule.');
 					}
 				},
@@ -73,7 +77,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			// transform unlayered styles - need highest specificity (layerCount)
 			root.walkRules((rule) => {
 				// Skip any at rules that do not contain regular declarations (@keyframes)
-				if (rule.parent && rule.parent.type === 'atrule' && ATRULES_WITH_NON_SELECTOR_BLOCK_LISTS.includes((rule.parent as AtRule).name)) {
+				if (rule.parent && rule.parent.type === 'atrule' && ATRULES_WITH_NON_SELECTOR_BLOCK_LISTS.includes((rule.parent as AtRule).name.toLowerCase())) {
 					return;
 				}
 
@@ -107,7 +111,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 			//  - give selectors the specificity they need based on layerPriority state
 			root.walkRules((rule) => {
 				// Skip any at rules that do not contain regular declarations (@keyframes)
-				if (rule.parent && rule.parent.type === 'atrule' && ATRULES_WITH_NON_SELECTOR_BLOCK_LISTS.includes((rule.parent as AtRule).name)) {
+				if (rule.parent && rule.parent.type === 'atrule' && ATRULES_WITH_NON_SELECTOR_BLOCK_LISTS.includes((rule.parent as AtRule).name.toLowerCase())) {
 					return;
 				}
 
@@ -131,8 +135,12 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 
 			// Remove all @layer at-rules
 			// Contained styles are inserted before
-			while (someAtRuleInTree(root, (node) => node.name === 'layer')) {
-				root.walkAtRules('layer', (atRule) => {
+			while (someAtRuleInTree(root, (node) => node.name.toLowerCase() === 'layer')) {
+				root.walkAtRules((atRule) => {
+					if (atRule.name.toLowerCase() !== 'layer') {
+						return;
+					}
+
 					atRule.replaceWith(atRule.nodes);
 				});
 			}

plugins/postcss-cascade-layers/src/index.ts

@@ -79,7 +79,7 @@ export class Model {
 				continue;
 			}
 
-			if ((parent as AtRule).name === 'layer') {
+			if ((parent as AtRule).name.toLowerCase() === 'layer') {
 				params.push(...this.layerParamsParsed.get((parent as AtRule).params));
 			}
 

plugins/postcss-cascade-layers/src/model.ts

@@ -6,7 +6,11 @@ import { pluginOptions } from './options';
 
 export function recordLayerOrder(root: Container, model: Model, { result, options }: { result: Result, options: pluginOptions }) {
 	// record layer order
-	root.walkAtRules('layer', (layerRule) => {
+	root.walkAtRules((layerRule) => {
+		if (layerRule.name.toLowerCase() !== 'layer') {
+			return;
+		}
+
 		const currentLayerNameParts = model.getLayerParams(layerRule);
 		const fullLayerName = currentLayerNameParts.join('.');
 		if (model.layerOrder.has(fullLayerName)) {