group support rules with the same params (#826)

Author: romainmenke

package-lock.json

@@ -12,17 +12,7 @@
 @supports (color: color(srgb 0 0 0)) {
 :root {
 	--one: color(srgb 0.64331 0.19245 0.16771);
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--one-a50: color(srgb 0.64331 0.19245 0.16771 / 50);
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--one-a50-var: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50));
 }
 }

plugins/postcss-color-function/test/variables.preserve-true.expect.css

@@ -7,11 +7,6 @@
 @supports (font-size: 1ic) {
 :root {
 	--one: 1ic;
-}
-}
-
-@supports (font-size: 1ic) {
-:root {
 	--two: .5ic;
 }
 }

plugins/postcss-ic-unit/test/variables.preserve-true.expect.css

@@ -18,11 +18,6 @@
 @supports (color: lch(0% 0 0)) {
 :root {
 	--firebrick-a50: lch(40% 68.8 34.5 / 50%);
-}
-}
-
-@supports (color: lch(0% 0 0)) {
-:root {
 	--firebrick-a50-var: lch(40% 68.8 34.5 / var(--opacity-50));
 }
 }

plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css

@@ -12,17 +12,7 @@
 @supports (color: color(display-p3 0 0 0)) {
 :root {
 	--firebrick: color(display-p3 0.64331 0.19245 0.16771);
-}
-}
-
-@supports (color: color(display-p3 0 0 0)) {
-:root {
 	--firebrick-a50: color(display-p3 0.64368 0.19188 0.16791 / 50%);
-}
-}
-
-@supports (color: color(display-p3 0 0 0)) {
-:root {
 	--firebrick-a50-var: color(display-p3 0.64368 0.19188 0.16791 / var(--opacity-50));
 }
 }

plugins/postcss-lab-function/test/variables.expect.css

@@ -12,17 +12,7 @@
 @supports (color: color(display-p3 0 0 0)) {
 :root {
 	--firebrick: color(display-p3 0.33927 0.26183 0.19371);
-}
-}
-
-@supports (color: color(display-p3 0 0 0)) {
-:root {
 	--firebrick-a50: color(display-p3 0.31481 0.26364 0.27826 / 50%);
-}
-}
-
-@supports (color: color(display-p3 0 0 0)) {
-:root {
 	--firebrick-a50-var: color(display-p3 0.31481 0.26364 0.27826 / var(--opacity-50));
 }
 }

plugins/postcss-oklab-function/test/variables.expect.css

@@ -18,11 +18,6 @@
 @supports (color: oklch(0% 0 0)) {
 :root {
 	--firebrick-a50: oklch(40% 0.0234 0.039 / 50%);
-}
-}
-
-@supports (color: oklch(0% 0 0)) {
-:root {
 	--firebrick-a50-var: oklch(40% 0.0234 0.039 / var(--opacity-50));
 }
 }

plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css

@@ -1,5 +1,9 @@
 # Changes to PostCSS Progressive Custom Properties
 
+### Unreleased (minor)
+
+- Group support rules with the same params to reduce the output size.
+
 ### 2.0.1 (January 28, 2023)
 
 - Improve `types` declaration in `package.json`

plugins/postcss-progressive-custom-properties/CHANGELOG.md

@@ -1,11 +1,12 @@
-import type { PluginCreator } from 'postcss';
+import type { AtRule, PluginCreator, Rule } from 'postcss';
 import { supportConditionsFromValue } from './support-conditions-from-values';
 
 const creator: PluginCreator<null> = () => {
 	return {
 		postcssPlugin: 'postcss-progressive-custom-properties',
 		RuleExit: (rule, { postcss }) => {
-			const atSupportsRules = [];
+			const atSupportsRules: Array<AtRule> = [];
+			const parentRuleClones: Map<AtRule, Rule> = new Map();
 			const variableNames = new Set<string>();
 
 			rule.each((decl) => {
@@ -38,10 +39,23 @@ const creator: PluginCreator<null> = () => {
 					return;
 				}
 
+				const params = supportConditions.join(' and ');
+
+				if (atSupportsRules.length && atSupportsRules[atSupportsRules.length - 1].params === params) {
+					const atSupports = atSupportsRules[atSupportsRules.length - 1];
+					const parentClone = parentRuleClones.get(atSupports);
+
+					if (parentClone) {
+						parentClone.append(decl.clone());
+						decl.remove();
+						return;
+					}
+				}
+
 				// Any subsequent properties are progressive enhancements.
 				const atSupports = postcss.atRule({
 					name: 'supports',
-					params: supportConditions.join(' and '),
+					params: params,
 					source: rule.source,
 					raws: {
 						before: '\n\n',
@@ -57,6 +71,7 @@ const creator: PluginCreator<null> = () => {
 				parentClone.append(decl.clone());
 				decl.remove();
 
+				parentRuleClones.set(atSupports, parentClone);
 				atSupports.append(parentClone);
 				atSupportsRules.push(atSupports);
 			});

plugins/postcss-progressive-custom-properties/dist/index.cjs

@@ -138,29 +138,9 @@
 @supports (color: color(srgb 0 0 0)) {
 :root {
 	--color-1: color(srgb 0.64331 0.19245 0.16771);
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--color-2: color(srgb 0.64331 0.19245 0.16771 / 50);
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--color-3: color(srgb 0.64331 0.19245 0.16771 / var(--opacity-50));
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--color-4: color(srgb 0.64331 var(--point-5) 0.16771 / var(--opacity-50));
-}
-}
-
-@supports (color: color(srgb 0 0 0)) {
-:root {
 	--color-5: color(srgb 0.64331   0.19245 0.16771 / calc(1 / 2));
 }
 }
@@ -224,41 +204,11 @@
 @supports (color: color-mix(in oklch, #000, #fff)) {
 :root {
 	--color-mix-1: color-mix(in lch, purple 50%, plum 50%);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-2: color-mix(in lch longer, purple 50%, plum 50%);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-3: color-mix(in lab, purple 50%, plum 50%);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-4: color-mix(in srgb, purple, plum 50%);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-5: color-mix(in srgb-linear, purple 50%, plum);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-6: color-mix(in xyz, purple, plum);
-}
-}
-
-@supports (color: color-mix(in oklch, #000, #fff)) {
-:root {
 	--color-mix-7: color-mix(
 		/* color space */
 		in xyz,