postcss-gradients-interpolation-method : leverage @csstools/css-color-parser (#901)

* wip

* finish

* cleanup

* add cssdb id

Author: romainmenke

plugins/postcss-color-function/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),o=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),o=s.index(e);for(let e=0;e<o;e++){const o=s.nodes[e];if("decl"===o.type&&o.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name&&-1!==s.params.indexOf("color("))return!0;s=s.parent}else s=s.parent;return!1}const t=/(color)\(/i,n=/^(color)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:c=>{if(hasFallback(c))return;if(hasSupportsAtRuleAncestor(c))return;const a=c.value;if(!t.test(a.toLowerCase()))return;const i=s.tokenize({css:a}),l=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(i),(e=>{if(o.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),p=o.stringify(l);p!==a&&(c.cloneBefore({value:p}),null!=e&&e.preserve||c.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),o=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),o=s.index(e);for(let e=0;e<o;e++){const o=s.nodes[e];if("decl"===o.type&&o.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name&&-1!==s.params.indexOf("color("))return!0;s=s.parent}else s=s.parent;return!1}const t=/(color)\(/i,n=/^(color)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:c=>{const a=c.value;if(!t.test(a.toLowerCase()))return;if(hasFallback(c))return;if(hasSupportsAtRuleAncestor(c))return;const i=s.tokenize({css:a}),l=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(i),(e=>{if(o.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),p=o.stringify(l);p!==a&&(c.cloneBefore({value:p}),null!=e&&e.preserve||c.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

plugins/postcss-color-function/dist/index.mjs

@@ -1 +1 @@
-import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as p,stringify as a}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s<o;s++){const o=r.nodes[s];if("decl"===o.type&&o.prop.toLowerCase()===e)return!0}return!1}function hasSupportsAtRuleAncestor(s){let r=s.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.indexOf("color("))return!0;r=r.parent}else r=r.parent;return!1}const i=/(color)\(/i,l=/^(color)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-function",Declaration:u=>{if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const f=u.value;if(!i.test(f.toLowerCase()))return;const m=r({css:f}),g=n(c(m),(s=>{if(p(s)&&l.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;return t(r)}})),v=a(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as p,stringify as a}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s<o;s++){const o=r.nodes[s];if("decl"===o.type&&o.prop.toLowerCase()===e)return!0}return!1}function hasSupportsAtRuleAncestor(s){let r=s.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.indexOf("color("))return!0;r=r.parent}else r=r.parent;return!1}const i=/(color)\(/i,l=/^(color)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-function",Declaration:u=>{const f=u.value;if(!i.test(f.toLowerCase()))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const m=r({css:f}),g=n(c(m),(s=>{if(p(s)&&l.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;return t(r)}})),v=a(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

plugins/postcss-color-function/src/index.ts

@@ -19,16 +19,16 @@ const basePlugin: PluginCreator<basePluginOptions> = (opts?: basePluginOptions)
 	return {
 		postcssPlugin: 'postcss-color-function',
 		Declaration: (decl: Declaration) => {
-			if (hasFallback(decl)) {
+			const originalValue = decl.value;
+			if (!(colorFunctionRegex.test(originalValue.toLowerCase()))) {
 				return;
 			}
 
-			if (hasSupportsAtRuleAncestor(decl)) {
+			if (hasFallback(decl)) {
 				return;
 			}
 
-			const originalValue = decl.value;
-			if (!(colorFunctionRegex.test(originalValue.toLowerCase()))) {
+			if (hasSupportsAtRuleAncestor(decl)) {
 				return;
 			}
 

plugins/postcss-color-mix-function/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&-1!==s.params.toLowerCase().indexOf("color-mix("))return!0;s=s.parent}else s=s.parent;return!1}const o=/(color-mix)\(/i,n=/^(color-mix)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-mix-function",Declaration:a=>{if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const i=a.value;if(!o.test(i.toLowerCase()))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),a.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&-1!==s.params.toLowerCase().indexOf("color-mix("))return!0;s=s.parent}else s=s.parent;return!1}const o=/(color-mix)\(/i,n=/^(color-mix)$/i,basePlugin=e=>({postcssPlugin:"postcss-color-mix-function",Declaration:a=>{const i=a.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),a.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

plugins/postcss-color-mix-function/dist/index.mjs

@@ -1 +1 @@
-import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&-1!==e.params.toLowerCase().indexOf("color-mix("))return!0;e=e.parent}else e=e.parent;return!1}const p=/(color-mix)\(/i,f=/^(color-mix)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const b=m.value;if(!p.test(b.toLowerCase()))return;const g=e({css:b}),P=a(i(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(a(i(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&-1!==e.params.toLowerCase().indexOf("color-mix("))return!0;e=e.parent}else e=e.parent;return!1}const p=/(color-mix)\(/i,f=/^(color-mix)$/i,basePlugin=s=>({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const b=m.value;if(!p.test(b.toLowerCase()))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const g=e({css:b}),P=a(i(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(a(i(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

plugins/postcss-color-mix-function/src/index.ts

@@ -22,16 +22,16 @@ const basePlugin: PluginCreator<basePluginOptions> = (opts?: basePluginOptions)
 	return {
 		postcssPlugin: 'postcss-color-mix-function',
 		Declaration: (decl: Declaration) => {
-			if (hasFallback(decl)) {
+			const originalValue = decl.value;
+			if (!(colorMixFunctionRegex.test(originalValue.toLowerCase()))) {
 				return;
 			}
 
-			if (hasSupportsAtRuleAncestor(decl)) {
+			if (hasFallback(decl)) {
 				return;
 			}
 
-			const originalValue = decl.value;
-			if (!(colorMixFunctionRegex.test(originalValue.toLowerCase()))) {
+			if (hasSupportsAtRuleAncestor(decl)) {
 				return;
 			}
 

plugins/postcss-gradients-interpolation-method/.tape.mjs

@@ -1,26 +1,41 @@
-import { postcssTape } from '@csstools/postcss-tape';
+import { postcssTape, ruleClonerPlugin } from '@csstools/postcss-tape';
 import plugin from '@csstools/postcss-gradients-interpolation-method';
 
 postcssTape(plugin)({
 	basic: {
 		message: "supports basic usage",
-		warnings: 2,
 	},
 	'basic:preserve-false': {
 		message: 'supports { preserve: false } usage',
-		warnings: 2,
 		options: {
 			preserve: false
 		}
 	},
 	'basic:preserve-true:progressive-false': {
 		message: 'supports { preserve: true, enableProgressiveCustomProperties: false } usage',
-		warnings: 2,
 		options: {
 			preserve: true,
 			enableProgressiveCustomProperties: false,
 		}
 	},
+	'basic:with-cloned-rules': {
+		message: 'doesn\'t cause duplicate CSS',
+		plugins: [
+			ruleClonerPlugin,
+			plugin({
+				preserve: true
+			})
+		]
+	},
+	'variables': {
+		message: 'supports variables',
+	},
+	'variables:preserve-false': {
+		message: 'supports variables with { preserve: false } usage',
+		options: {
+			preserve: false
+		}
+	},
 	'examples/example': {
 		message: 'minimal example',
 	},

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

@@ -1,5 +1,9 @@
 # Changes to PostCSS Gradients Interpolation Method
 
+### 3.0.0 Unreleased (major)
+
+- Handle `color-mix()` internally with `@csstools/css-color-parser`
+
 ### 2.0.1 (January 28, 2023)
 
 - Improve `types` declaration in `package.json`