various fixes (#289)

Author: romainmenke

plugins/postcss-double-position-gradients/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Unreleased (patch)
 
 - Add typescript support
+- Fix color functions.
 - Fix `at` keyword with `at 20px 20px` being interpreted as a double position color stop.
 
 ### 3.1.0 (February 15, 2022)

plugins/postcss-double-position-gradients/src/index.ts

@@ -98,7 +98,7 @@ const basePlugin = (opts) => {
 					// if the argument concludes a double-position gradient
 					if (isDoublePositionLength) {
 						// insert the fallback colors
-						const color = { type: twoValuesBack.type, value: twoValuesBack.value };
+						const color = twoValuesBack;
 						const comma = {
 							type: 'div',
 							value: ',',

plugins/postcss-double-position-gradients/test/basic.css

@@ -56,3 +56,11 @@
 .test-color-space-interop {
 	background: linear-gradient(in lab to right, #44C 0% 10%, #795)
 }
+
+.repeating-conic {
+	background: repeating-conic-gradient(
+		from 3deg,
+		hsl(200, 100%, 50%) 0deg 15deg,
+		hsl(200, 100%, 60%) 10deg 30deg
+	);
+}

plugins/postcss-double-position-gradients/test/basic.expect.css

@@ -91,3 +91,16 @@
 	background: linear-gradient(in lab to right, #44C 0%,#44C 10%, #795);
 	background: linear-gradient(in lab to right, #44C 0% 10%, #795)
 }
+
+.repeating-conic {
+	background: repeating-conic-gradient(
+		from 3deg,
+		hsl(200, 100%, 50%) 0deg,hsl(200, 100%, 50%) 15deg,
+		hsl(200, 100%, 60%) 10deg, hsl(200, 100%, 60%) 30deg
+	);
+	background: repeating-conic-gradient(
+		from 3deg,
+		hsl(200, 100%, 50%) 0deg 15deg,
+		hsl(200, 100%, 60%) 10deg 30deg
+	);
+}

plugins/postcss-double-position-gradients/test/basic.preserve.expect.css

@@ -56,3 +56,11 @@
 .test-color-space-interop {
 	background: linear-gradient(in lab to right, #44C 0%,#44C 10%, #795)
 }
+
+.repeating-conic {
+	background: repeating-conic-gradient(
+		from 3deg,
+		hsl(200, 100%, 50%) 0deg,hsl(200, 100%, 50%) 15deg,
+		hsl(200, 100%, 60%) 10deg, hsl(200, 100%, 60%) 30deg
+	);
+}

plugins/postcss-gradients-interpolation-method/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Gradients Interpolation Method
 
+### Unreleased (patch)
+
+- fix dependencies
+
 ### 1.0.0 (March 4, 2022)
 
 - Initial version

plugins/postcss-gradients-interpolation-method/package.json

@@ -23,13 +23,13 @@
 		"README.md",
 		"dist"
 	],
-	"peerDependencies": {
-		"postcss": "^8.3"
-	},
-	"devDependencies": {
+	"dependencies": {
 		"@csstools/postcss-progressive-custom-properties": "^1.1.0",
 		"postcss-value-parser": "^4.2.0"
 	},
+	"peerDependencies": {
+		"postcss": "^8.3"
+	},
 	"scripts": {
 		"build": "rollup -c ../../rollup/default.js",
 		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",

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

@@ -1,8 +1,10 @@
 # Changes to PostCSS Progressive Custom Properties
 
-## Unreleased (patch)
+## Unreleased (minor)
 
+- Add matching rules for `color-mix`
 - fix matching rules for gradient functions
+- reduce matchers size
 
 ## 1.2.0 (February 15, 2022)
 

plugins/postcss-progressive-custom-properties/generate/color-mix.mjs

@@ -0,0 +1,20 @@
+import { matcherForValue } from './matcher-for-value.mjs';
+
+export const colorMixMatchers = [
+	{
+		'supports': 'color-mix(in oklch, #000, #fff)',
+		'property': 'color',
+		'sniff': 'color-mix',
+		'matchers': [
+			matcherForValue('color-mix(in $a,$1,$2)'),
+			matcherForValue('color-mix(in $a,$1 $2,$3)'),
+			matcherForValue('color-mix(in $a,$1,$2 $3)'),
+			matcherForValue('color-mix(in $a,$1 $2,$3 $4)'),
+
+			matcherForValue('color-mix(in $a $b,$1,$2)'),
+			matcherForValue('color-mix(in $a $b,$1 $2,$3)'),
+			matcherForValue('color-mix(in $a $b,$1,$2 $3)'),
+			matcherForValue('color-mix(in $a $b,$1 $2,$3 $4)'),
+		],
+	},
+];

plugins/postcss-progressive-custom-properties/generate/color.mjs

@@ -31,7 +31,6 @@ export const hslMatchers = [
 		'sniff': 'hsl',
 		'matchers': [
 			matcherForValue('hsl($1,$2,$3,$4)'),
-			matcherForValue('hsl($1, $2, $3, $4)'),
 		],
 	},
 	{
@@ -119,7 +118,6 @@ export const rgbMatchers = [
 		'property': 'color',
 		'sniff': 'rgb',
 		'matchers': [
-			matcherForValue('rgb($1, $2, $3, $4)'),
 			matcherForValue('rgb($1,$2,$3,$4)'),
 		],
 	},

plugins/postcss-progressive-custom-properties/generate/matcher-for-value.mjs

@@ -10,7 +10,9 @@ export function matcherForValue(value) {
 			delete node.after;
 			delete node.sourceEndIndex;
 
-			if (node.value.startsWith('$')) {
+			if (node.type === 'space') {
+				delete node.value;
+			} else if (node.value.startsWith('$')) {
 				delete node.value;
 				node.isVariable = true;
 			} else {
@@ -19,6 +21,8 @@ export function matcherForValue(value) {
 				} finally {
 					if (node.dimension === false) {
 						delete node.dimension;
+					} else {
+						delete node.dimension.number;
 					}
 				}
 			}

plugins/postcss-progressive-custom-properties/generate/matchers.mjs

@@ -1,4 +1,5 @@
 import { promises as fsp } from 'fs';
+import { colorMixMatchers } from './color-mix.mjs';
 import { colorMatchers, hslMatchers, hwbMatchers, labMatchers, lchMatchers, oklabMatchers, oklchMatchers, rgbMatchers } from './color.mjs';
 import { icUnitMatchers } from './font-size.mjs';
 
@@ -16,6 +17,9 @@ fsp.writeFile(
 			...oklchMatchers,
 			...rgbMatchers,
 
+			// color mix:
+			...colorMixMatchers,
+
 			// font-size:
 			...icUnitMatchers,
 		],

plugins/postcss-progressive-custom-properties/src/match.ts

@@ -12,12 +12,23 @@ export function matches(a, b) {
 	}
 
 	if (a.nodes && b.nodes) {
-		if (a.nodes.length !== b.nodes.length) {
-			return false;
-		}
-
 		for (let i = 0; i < a.nodes.length; i++) {
-			if (!matches(a.nodes[i], b.nodes[i])) {
+			let ia = i;
+			let ib = i;
+
+			while (a.nodes[ia] && a.nodes[ia].type === 'space') {
+				ia++;
+			}
+
+			while (b.nodes[ib] && b.nodes[ib].type === 'space') {
+				ib++;
+			}
+
+			if (!!a.nodes[ia] !== !!b.nodes[ib]) {
+				return false;
+			}
+
+			if (!matches(a.nodes[ia], b.nodes[ib])) {
 				return false;
 			}
 		}