postcss-gradients-interpolation-method

.github/ISSUE_TEMPLATE/css-issue.yml

@@ -78,6 +78,7 @@ body:
         - PostCSS Focus Within
         - PostCSS Font Variant
         - PostCSS Gap Properties
+        - PostCSS Gradients Interpolation Method
         - PostCSS HWB Function
         - PostCSS Image Set Function
         - PostCSS Is Pseudo Class

.github/ISSUE_TEMPLATE/plugin-issue.yml

@@ -80,6 +80,7 @@ body:
         - PostCSS Focus Within
         - PostCSS Font Variant
         - PostCSS Gap Properties
+        - PostCSS Gradients Interpolation Method
         - PostCSS HWB Function
         - PostCSS Image Set Function
         - PostCSS Is Pseudo Class

.github/bin/new-plugin.mjs

@@ -89,7 +89,7 @@ console.log(`- Creating new plugin ${pluginName}`);
 
 	packageInfo.repository.directory = `plugins/${pluginSlug}`;
 
-	await fsp.writeFile(path.join(pluginDir, 'package.json'), JSON.stringify(packageInfo, null, 2));
+	await fsp.writeFile(path.join(pluginDir, 'package.json'), JSON.stringify(packageInfo, null, '\t'));
 
 	console.log('- Updated "package.json"');
 }

.github/labeler.yml

@@ -95,6 +95,10 @@
   - plugins/postcss-gap-properties/**
   - experimental/postcss-gap-properties/**
 
+"plugins/postcss-gradients-interpolation-method":
+  - plugins/postcss-gradients-interpolation-method/**
+  - experimental/postcss-gradients-interpolation-method/**
+
 "plugins/postcss-hwb-function":
   - plugins/postcss-hwb-function/**
   - experimental/postcss-hwb-function/**

plugin-packs/postcss-preset-env/test/progressive-custom-properties.expect.css

@@ -10,7 +10,7 @@
 	--hwb: rgb(230, 93, 26);
 }
 
-@supports (background: linear-gradient(0deg, red 0% 1%, red 2%)) {
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
 :root {
 	--gradient-prop-2: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 }
@@ -28,7 +28,7 @@
 }
 }
 
-@supports (background: repeating-linear-gradient(0deg, red 0% 1%, red 2%)) {
+@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
 :root {
 	--gradient-prop-5: repeating-linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 }

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

@@ -1,5 +1,10 @@
 # Changes to PostCSS Double Position Gradients
 
+### Unreleased (patch)
+
+- Add typescript support
+- Fix `at` keyword with `at 20px 20px` being interpreted as a double position color stop.
+
 ### 3.1.0 (February 15, 2022)
 
 - Ignore values in relevant `@supports` rules.

plugins/postcss-double-position-gradients/package.json

@@ -9,6 +9,7 @@
 	},
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
 			"import": "./dist/index.mjs",

plugins/postcss-double-position-gradients/src/has-supports-at-rule-ancestor.js → plugins/postcss-double-position-gradients/src/has-supports-at-rule-ancestor.ts

@@ -1,14 +1,15 @@
 import { includesGradientsFunction } from './is-gradient';
+import type { AtRule, Node } from 'postcss';
 
-export function hasSupportsAtRuleAncestor(node) {
+export function hasSupportsAtRuleAncestor(node: Node): boolean {
 	let parent = node.parent;
 	while (parent) {
 		if (parent.type !== 'atrule') {
 			parent = parent.parent;
 			continue;
 		}
 
-		if (parent.name === 'supports' && includesGradientsFunction(parent.params)) {
+		if ((parent as AtRule).name === 'supports' && includesGradientsFunction((parent as AtRule).params)) {
 			return true;
 		}
 

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

@@ -1,16 +1,28 @@
 import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties';
+import type { PluginCreator } from 'postcss';
 import valueParser from 'postcss-value-parser';
 import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor';
 import { includesGradientsFunction, isGradientsFunctions } from './is-gradient';
 
-const isPunctuationCommaNode = node => node.type === 'div' && node.value === ',';
+const keywords = [
+	'at',
+	'bottom',
+	'center',
+	'circle',
+	'closest-corner',
+	'closest-side',
+	'ellipse',
+	'farthest-corner',
+	'farthest-side',
+	'from',
+	'in',
+	'left',
+	'right',
+	'to',
+	'top',
+];
 
-function insertBefore(nodes, node, ...values) {
-	const index = nodes.findIndex(n => n === node);
-	nodes.splice.apply(nodes, [index - 1, 0].concat(
-		Array.prototype.slice.call(...values, 0)),
-	);
-}
+const isPunctuationCommaNode = node => node.type === 'div' && node.value === ',';
 
 function isNumericNode(node) {
 	try {
@@ -63,10 +75,24 @@ const basePlugin = (opts) => {
 					return x.type !== 'comment' && x.type !== 'space';
 				});
 
-				nodes.forEach((node, index, nodes) => {
-					const oneValueBack = Object(nodes[index - 1]);
-					const twoValuesBack = Object(nodes[index - 2]);
-					const nextNode = Object(nodes[index + 1]);
+				let inPrefix = false;
+
+				nodes.forEach((node, index, currentNodes) => {
+					if (node.type === 'word' && keywords.includes(node.value)) {
+						inPrefix = true;
+					}
+
+					if (node.type === 'div' && node.value === ',') {
+						inPrefix = false;
+					}
+
+					if (inPrefix) {
+						return;
+					}
+
+					const oneValueBack = Object(currentNodes[index - 1]);
+					const twoValuesBack = Object(currentNodes[index - 2]);
+					const nextNode = Object(currentNodes[index + 1]);
 					const isDoublePositionLength = twoValuesBack.type && isNumericNode(oneValueBack) && isNumericNode(node);
 
 					// if the argument concludes a double-position gradient
@@ -80,11 +106,18 @@ const basePlugin = (opts) => {
 							after: isPunctuationCommaNode(nextNode) ? '' : ' ',
 						};
 
-						insertBefore(func.nodes, node, [comma, color]);
+						func.nodes.splice(
+							// 1 before the current node
+							func.nodes.indexOf(node) - 1,
+							// remove none
+							0,
+							// insert these :
+							comma, color,
+						);
 					}
 				});
 
-				return false;
+				return;
 			});
 
 			const modifiedValue = valueAST.toString();
@@ -103,12 +136,13 @@ const basePlugin = (opts) => {
 
 basePlugin.postcss = true;
 
-/**
- * Transform double-position gradients in CSS.
- * @param {{preserve?: boolean}} opts
- * @returns {import('postcss').Plugin}
- */
-const postcssPlugin = (opts) => {
+type pluginOptions = {
+	preserve?: boolean;
+	enableProgressiveCustomProperties?: boolean;
+};
+
+// Transform double-position gradients in CSS.
+const postcssPlugin: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
 	const options = Object.assign({
 		enableProgressiveCustomProperties: true,
 		preserve: true,

plugins/postcss-double-position-gradients/src/is-gradient.js → plugins/postcss-double-position-gradients/src/is-gradient.ts

@@ -1,4 +1,4 @@
-export function includesGradientsFunction(str) {
+export function includesGradientsFunction(str: string): boolean {
 	return (
 		str.includes('conic-gradient(') ||
 		str.includes('linear-gradient(') ||
@@ -9,7 +9,7 @@ export function includesGradientsFunction(str) {
 	);
 }
 
-export function isGradientsFunctions(str) {
+export function isGradientsFunctions(str: string): boolean {
 	return (
 		str ==='conic-gradient' ||
 		str ==='linear-gradient' ||

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

@@ -1,11 +1,20 @@
 .test-linear-gradient {
 	background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
+	background-image: linear-gradient(black 25% 50%, blue 50% 75%);
+}
+
+.test-linear-gradient-no-spaces {
+	background-image: linear-gradient(90deg,black 25% 50%,blue 50% 75%);
 }
 
 .test-conic-gradient {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }
 
+.test-radial-gradient {
+	background-image: radial-gradient(5em circle at 50px 50%, yellow, blue);
+}
+
 .test-invalid-function {
 	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }
@@ -43,3 +52,7 @@
 	--gradient-prop-5: repeating-linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 	--gradient-prop-6: repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
 }
+
+.test-color-space-interop {
+	background: linear-gradient(in lab to right, #44C 0% 10%, #795)
+}

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

@@ -1,13 +1,24 @@
 .test-linear-gradient {
 	background-image: linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
 	background-image: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
+	background-image: linear-gradient(black 25%,black 50%, blue 50%, blue 75%);
+	background-image: linear-gradient(black 25% 50%, blue 50% 75%);
+}
+
+.test-linear-gradient-no-spaces {
+	background-image: linear-gradient(90deg,black 25%,black 50%,blue 50%, blue 75%);
+	background-image: linear-gradient(90deg,black 25% 50%,blue 50% 75%);
 }
 
 .test-conic-gradient {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg ,gold 75% , #f06 0deg);
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }
 
+.test-radial-gradient {
+	background-image: radial-gradient(5em circle at 50px 50%, yellow, blue);
+}
+
 .test-invalid-function {
 	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }
@@ -46,7 +57,7 @@
 	--gradient-prop-6: repeating-radial-gradient(red 0,red 8%, yellow 8%,yellow 16%, blue 16%, blue 24%);
 }
 
-@supports (background: linear-gradient(0deg, red 0% 1%, red 2%)) {
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
 .test-all-functions-as-custom-properties {
 	--gradient-prop-2: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 }
@@ -64,7 +75,7 @@
 }
 }
 
-@supports (background: repeating-linear-gradient(0deg, red 0% 1%, red 2%)) {
+@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
 .test-all-functions-as-custom-properties {
 	--gradient-prop-5: repeating-linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 }
@@ -75,3 +86,8 @@
 	--gradient-prop-6: repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
 }
 }
+
+.test-color-space-interop {
+	background: linear-gradient(in lab to right, #44C 0%,#44C 10%, #795);
+	background: linear-gradient(in lab to right, #44C 0% 10%, #795)
+}

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

@@ -1,11 +1,20 @@
 .test-linear-gradient {
 	background-image: linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
+	background-image: linear-gradient(black 25%,black 50%, blue 50%, blue 75%);
+}
+
+.test-linear-gradient-no-spaces {
+	background-image: linear-gradient(90deg,black 25%,black 50%,blue 50%, blue 75%);
 }
 
 .test-conic-gradient {
 	background-image: conic-gradient(yellowgreen 40%, gold 0deg ,gold 75% , #f06 0deg);
 }
 
+.test-radial-gradient {
+	background-image: radial-gradient(5em circle at 50px 50%, yellow, blue);
+}
+
 .test-invalid-function {
 	background-image: some-func(yellowgreen 40%, gold 0deg 75% , #f06 0deg);
 }
@@ -43,3 +52,7 @@
 	--gradient-prop-5: repeating-linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
 	--gradient-prop-6: repeating-radial-gradient(red 0,red 8%, yellow 8%,yellow 16%, blue 16%, blue 24%);
 }
+
+.test-color-space-interop {
+	background: linear-gradient(in lab to right, #44C 0%,#44C 10%, #795)
+}

plugins/postcss-double-position-gradients/test/generated-value-cases.preserve.expect.css

@@ -24,7 +24,7 @@
 	--some-var: linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
 }
 
-@supports (background: linear-gradient(0deg, red 0% 1%, red 2%)) {
+@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
 :root {
 	--some-var: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
 }

plugins/postcss-double-position-gradients/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"declarationDir": "."
+	},
+	"include": ["./src/**/*"],
+	"exclude": ["dist"],
+}

plugins/postcss-gradients-interpolation-method/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+package-lock.json
+yarn.lock
+*.result.css
+*.result.css.map
+dist/*

plugins/postcss-gradients-interpolation-method/.nvmrc

@@ -0,0 +1 @@
+v16.13.1