From 8659029320e1a6c22ece25100f0f8aa2e184ef39 Mon Sep 17 00:00:00 2001
From: Romain Menke <romainmenke@gmail.com>
Date: Mon, 3 Apr 2023 13:43:36 +0200
Subject: [PATCH] postcss-gradients-interpolation-method : fix same color
 interpolation

---
 .../CHANGELOG.md                                   |  4 ++++
 .../dist/index.cjs                                 |  2 +-
 .../dist/index.mjs                                 |  2 +-
 .../src/color-stop-list.ts                         |  7 +++++--
 .../test/basic.css                                 |  4 ++++
 .../test/basic.expect.css                          | 14 ++++++++++----
 .../test/basic.preserve-false.expect.css           | 13 +++++++++----
 .../test/basic.with-cloned-rules.expect.css        | 14 ++++++++++----
 8 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md
index 17014f936..e609edbf2 100644
--- a/plugins/postcss-gradients-interpolation-method/CHANGELOG.md
+++ b/plugins/postcss-gradients-interpolation-method/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changes to PostCSS Gradients Interpolation Method
 
+### Unreleased (patch)
+
+- Fix interpolation method `longer`, `increasing`,... for color stops with the same color.
+
 ### 3.0.1 (March 28, 2023)
 
 - Skip gamut mapping for interpolation color hints.
diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.cjs b/plugins/postcss-gradients-interpolation-method/dist/index.cjs
index a48e23115..f77f94229 100644
--- a/plugins/postcss-gradients-interpolation-method/dist/index.cjs
+++ b/plugins/postcss-gradients-interpolation-method/dist/index.cjs
@@ -1 +1 @@
-"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),n=require("@csstools/css-color-parser");const i=/(repeating-)?(linear|radial|conic)-gradient\(/i,s=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(e){const o=e.parent;if(!o)return!1;const t=e.prop.toLowerCase(),n=o.index(e);for(let e=0;e<n;e++){const n=o.nodes[e];if("decl"===n.type&&n.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("supports"===o.name&&i.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function interpolateColorsInColorStopsList(e,i,s,r=!1){const a=[],l=[];for(let r=0;r<e.length-1;r++){const a=e[r],c=e[r+1];if(l.push(a),n.serializeP3(a.colorData,!1).toString()!==n.serializeP3(c.colorData,!1).toString()&&a.position.toString()!==c.position.toString())for(let e=1;e<=9;e++){const r=10*e;let p=[];s&&(p=[new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),s,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Ident,"hue",-1,-1,{value:"hue"}])]);const u=new o.FunctionNode([t.TokenType.Function,"color-mix(",-1,-1,{value:"color-mix"}],[t.TokenType.CloseParen,")",-1,-1,void 0],[new o.TokenNode([t.TokenType.Ident,"in",-1,-1,{value:"in"}]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),i,...p,new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),a.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Percentage,100-r+"%",-1,-1,{value:100-r}]),new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),c.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Percentage,`${r}%`,-1,-1,{value:r}])]),d=n.color(u);if(!d)return!1;l.push({colorData:d})}r===e.length-2&&l.push(c)}for(let e=0;e<l.length;e++)r&&!n.colorDataFitsRGB_Gamut(l[e].colorData)?l[e].color=n.serializeP3(l[e].colorData,!1):l[e].color=n.serializeRGB(l[e].colorData,!1);for(let e=0;e<l.length;e++){const n=l[e];n.position?a.push(n.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),n.position):a.push(n.color),e!==l.length-1&&a.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]))}return a}function parseColorStops(e){const i=[];let s={};for(let r=0;r<e.length;r++){const a=e[r];if(o.isCommentNode(a)||o.isWhitespaceNode(a))continue;if(o.isTokenNode(a)&&a.value[0]===t.TokenType.Comma){if(s.color&&s.colorData&&s.positionA){i.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&i.push({color:s.color,colorData:s.colorData,position:s.positionB}),s={};continue}return!1}const l=n.color(a);if(l){if(s.color)return!1;s.color=a,s.colorData=l}else{if(!s.color)return!1;if(s.positionA){if(!s.positionA||s.positionB)return!1;s.positionB=a}else s.positionA=a}}return!(!s.color||!s.positionA)&&(s.color&&s.colorData&&s.positionA&&(i.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&i.push({color:s.color,colorData:s.colorData,position:s.positionB})),!(i.length<2)&&i)}const r=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,a=/^(hsl|hwb|lch|oklch)$/i,l=/^(shorter|longer|increasing|decreasing)$/i,c=/^in$/i,p=/^hue$/i;function modifyGradientFunctionComponentValues(e,n=!1){const i=e.getName();if(!s.test(i))return!1;let u="srgb",d=null,T=null,f=null,h=null,v=null,m=[];{let n=0,i=e.value[n];for(;!o.isTokenNode(i)||i.value[0]!==t.TokenType.Ident||!c.test(i.value[4].value);){if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Comma)return!1;n++,i=e.value[n]}for(d=i,n++,i=e.value[n];o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&r.test(i.value[4].value)){if(T)return!1;T=i,u=i.value[4].value,n++,i=e.value[n]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&l.test(i.value[4].value)&&a.test(u)){if(f||!T)return!1;f=i,n++,i=e.value[n]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&p.test(i.value[4].value)){if(h||!T||!f)return!1;h=i,n++,i=e.value[n]}for(;!o.isTokenNode(i)||i.value[0]!==t.TokenType.Comma;)n++,i=e.value[n];v=i,m=e.value.slice(n+1)}if(!T)return!1;if(f&&!h)return!1;if(h&&!f)return!1;const k=parseColorStops(m);if(!k)return!1;const g=interpolateColorsInColorStopsList(k,T,f,n);if(!g)return!1;const N=trim([...e.value.slice(0,e.value.indexOf(d)),...e.value.slice(e.value.indexOf(h||T)+1,e.value.indexOf(v))]);return N.length>0&&N.some((e=>!o.isCommentNode(e)))&&N.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let t=0,n=e.length-1;for(let n=0;n<e.length;n++)if(!o.isWhitespaceNode(e[n])){t=n;break}for(let t=e.length-1;t>=0;t--)if(!o.isWhitespaceNode(e[t])){n=t;break}return e.slice(t,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n){if(!i.test(n.value))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const s=t.tokenize({css:n.value}),r=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e);t&&(e.value=t)})));if(r===n.value)return;const a=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(t.cloneTokens(s)),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e,!0);t&&(e.value=t)})));n.cloneBefore({value:r}),r!==a&&n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer"),n=require("@csstools/css-color-parser");const i=/(repeating-)?(linear|radial|conic)-gradient\(/i,s=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(e){const o=e.parent;if(!o)return!1;const t=e.prop.toLowerCase(),n=o.index(e);for(let e=0;e<n;e++){const n=o.nodes[e];if("decl"===n.type&&n.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("supports"===o.name&&i.test(o.params))return!0;o=o.parent}else o=o.parent;return!1}function interpolateColorsInColorStopsList(e,i,s,r=!1){const a=[],l=[];for(let r=0;r<e.length-1;r++){const a=e[r],c=e[r+1];if(l.push(a),s||n.serializeP3(a.colorData,!1).toString()!==n.serializeP3(c.colorData,!1).toString()&&a.position.toString()!==c.position.toString())for(let e=1;e<=9;e++){const r=10*e;let p=[];s&&(p=[new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),s,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Ident,"hue",-1,-1,{value:"hue"}])]);const u=new o.FunctionNode([t.TokenType.Function,"color-mix(",-1,-1,{value:"color-mix"}],[t.TokenType.CloseParen,")",-1,-1,void 0],[new o.TokenNode([t.TokenType.Ident,"in",-1,-1,{value:"in"}]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),i,...p,new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),a.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Percentage,100-r+"%",-1,-1,{value:100-r}]),new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),c.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),new o.TokenNode([t.TokenType.Percentage,`${r}%`,-1,-1,{value:r}])]),d=n.color(u);if(!d)return!1;l.push({colorData:d})}r===e.length-2&&l.push(c)}for(let e=0;e<l.length;e++)r&&!n.colorDataFitsRGB_Gamut(l[e].colorData)?l[e].color=n.serializeP3(l[e].colorData,!1):l[e].color=n.serializeRGB(l[e].colorData,!1);for(let e=0;e<l.length;e++){const n=l[e];n.position?a.push(n.color,new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]),n.position):a.push(n.color),e!==l.length-1&&a.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]]))}return a}function parseColorStops(e){const i=[];let s={};for(let r=0;r<e.length;r++){const a=e[r];if(o.isCommentNode(a)||o.isWhitespaceNode(a))continue;if(o.isTokenNode(a)&&a.value[0]===t.TokenType.Comma){if(s.color&&s.colorData&&s.positionA){i.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&i.push({color:s.color,colorData:s.colorData,position:s.positionB}),s={};continue}return!1}const l=n.color(a);if(l){if(s.color)return!1;s.color=a,s.colorData=l}else{if(!s.color)return!1;if(s.positionA){if(!s.positionA||s.positionB)return!1;s.positionB=a}else s.positionA=a}}return!(!s.color||!s.positionA)&&(s.color&&s.colorData&&s.positionA&&(i.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&i.push({color:s.color,colorData:s.colorData,position:s.positionB})),!(i.length<2)&&i)}const r=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,a=/^(hsl|hwb|lch|oklch)$/i,l=/^(shorter|longer|increasing|decreasing)$/i,c=/^in$/i,p=/^hue$/i;function modifyGradientFunctionComponentValues(e,n=!1){const i=e.getName();if(!s.test(i))return!1;let u="srgb",d=null,T=null,f=null,h=null,v=null,m=[];{let n=0,i=e.value[n];for(;!o.isTokenNode(i)||i.value[0]!==t.TokenType.Ident||!c.test(i.value[4].value);){if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Comma)return!1;n++,i=e.value[n]}for(d=i,n++,i=e.value[n];o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&r.test(i.value[4].value)){if(T)return!1;T=i,u=i.value[4].value,n++,i=e.value[n]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&l.test(i.value[4].value)&&a.test(u)){if(f||!T)return!1;f=i,n++,i=e.value[n]}for(;o.isCommentNode(i)||o.isWhitespaceNode(i);)n++,i=e.value[n];if(o.isTokenNode(i)&&i.value[0]===t.TokenType.Ident&&p.test(i.value[4].value)){if(h||!T||!f)return!1;h=i,n++,i=e.value[n]}for(;!o.isTokenNode(i)||i.value[0]!==t.TokenType.Comma;)n++,i=e.value[n];v=i,m=e.value.slice(n+1)}if(!T)return!1;if(f&&!h)return!1;if(h&&!f)return!1;const k=parseColorStops(m);if(!k)return!1;const g=interpolateColorsInColorStopsList(k,T,f,n);if(!g)return!1;const N=trim([...e.value.slice(0,e.value.indexOf(d)),...e.value.slice(e.value.indexOf(h||T)+1,e.value.indexOf(v))]);return N.length>0&&N.some((e=>!o.isCommentNode(e)))&&N.push(new o.TokenNode([t.TokenType.Comma,",",-1,-1,void 0]),new o.WhitespaceNode([[t.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let t=0,n=e.length-1;for(let n=0;n<e.length;n++)if(!o.isWhitespaceNode(e[n])){t=n;break}for(let t=e.length-1;t>=0;t--)if(!o.isWhitespaceNode(e[t])){n=t;break}return e.slice(t,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n){if(!i.test(n.value))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const s=t.tokenize({css:n.value}),r=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e);t&&(e.value=t)})));if(r===n.value)return;const a=o.stringify(o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(t.cloneTokens(s)),(e=>{if(!o.isFunctionNode(e))return;const t=modifyGradientFunctionComponentValues(e,!0);t&&(e.value=t)})));n.cloneBefore({value:r}),r!==a&&n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
diff --git a/plugins/postcss-gradients-interpolation-method/dist/index.mjs b/plugins/postcss-gradients-interpolation-method/dist/index.mjs
index dcc3515f4..69081cde0 100644
--- a/plugins/postcss-gradients-interpolation-method/dist/index.mjs
+++ b/plugins/postcss-gradients-interpolation-method/dist/index.mjs
@@ -1 +1 @@
-import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as n,isWhitespaceNode as i,isTokenNode as s,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{TokenType as p,tokenize as f,cloneTokens as v}from"@csstools/css-tokenizer";import{serializeP3 as h,color as d,colorDataFitsRGB_Gamut as m,serializeRGB as g}from"@csstools/css-color-parser";const w=/(repeating-)?(linear|radial|conic)-gradient\(/i,C=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(o){const e=o.parent;if(!e)return!1;const t=o.prop.toLowerCase(),r=e.index(o);for(let o=0;o<r;o++){const r=e.nodes[o];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(o){let e=o.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name&&w.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}function interpolateColorsInColorStopsList(o,n,i,s=!1){const l=[],a=[];for(let s=0;s<o.length-1;s++){const l=o[s],c=o[s+1];if(a.push(l),h(l.colorData,!1).toString()!==h(c.colorData,!1).toString()&&l.position.toString()!==c.position.toString())for(let o=1;o<=9;o++){const s=10*o;let u=[];i&&(u=[new e([[p.Whitespace," ",-1,-1,void 0]]),i,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Ident,"hue",-1,-1,{value:"hue"}])]);const f=new r([p.Function,"color-mix(",-1,-1,{value:"color-mix"}],[p.CloseParen,")",-1,-1,void 0],[new t([p.Ident,"in",-1,-1,{value:"in"}]),new e([[p.Whitespace," ",-1,-1,void 0]]),n,...u,new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]),l.color,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Percentage,100-s+"%",-1,-1,{value:100-s}]),new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]),c.color,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Percentage,`${s}%`,-1,-1,{value:s}])]),v=d(f);if(!v)return!1;a.push({colorData:v})}s===o.length-2&&a.push(c)}for(let o=0;o<a.length;o++)s&&!m(a[o].colorData)?a[o].color=h(a[o].colorData,!1):a[o].color=g(a[o].colorData,!1);for(let o=0;o<a.length;o++){const r=a[o];r.position?l.push(r.color,new e([[p.Whitespace," ",-1,-1,void 0]]),r.position):l.push(r.color),o!==a.length-1&&l.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]))}return l}function parseColorStops(o){const e=[];let t={};for(let r=0;r<o.length;r++){const l=o[r];if(n(l)||i(l))continue;if(s(l)&&l.value[0]===p.Comma){if(t.color&&t.colorData&&t.positionA){e.push({color:t.color,colorData:t.colorData,position:t.positionA}),t.positionB&&e.push({color:t.color,colorData:t.colorData,position:t.positionB}),t={};continue}return!1}const a=d(l);if(a){if(t.color)return!1;t.color=l,t.colorData=a}else{if(!t.color)return!1;if(t.positionA){if(!t.positionA||t.positionB)return!1;t.positionB=l}else t.positionA=l}}return!(!t.color||!t.positionA)&&(t.color&&t.colorData&&t.positionA&&(e.push({color:t.color,colorData:t.colorData,position:t.positionA}),t.positionB&&e.push({color:t.color,colorData:t.colorData,position:t.positionB})),!(e.length<2)&&e)}const D=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,b=/^(hsl|hwb|lch|oklch)$/i,A=/^(shorter|longer|increasing|decreasing)$/i,x=/^in$/i,S=/^hue$/i;function modifyGradientFunctionComponentValues(o,r=!1){const l=o.getName();if(!C.test(l))return!1;let a="srgb",c=null,u=null,f=null,v=null,h=null,d=[];{let e=0,t=o.value[e];for(;!s(t)||t.value[0]!==p.Ident||!x.test(t.value[4].value);){if(s(t)&&t.value[0]===p.Comma)return!1;e++,t=o.value[e]}for(c=t,e++,t=o.value[e];n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&D.test(t.value[4].value)){if(u)return!1;u=t,a=t.value[4].value,e++,t=o.value[e]}for(;n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&A.test(t.value[4].value)&&b.test(a)){if(f||!u)return!1;f=t,e++,t=o.value[e]}for(;n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&S.test(t.value[4].value)){if(v||!u||!f)return!1;v=t,e++,t=o.value[e]}for(;!s(t)||t.value[0]!==p.Comma;)e++,t=o.value[e];h=t,d=o.value.slice(e+1)}if(!u)return!1;if(f&&!v)return!1;if(v&&!f)return!1;const m=parseColorStops(d);if(!m)return!1;const g=interpolateColorsInColorStopsList(m,u,f,r);if(!g)return!1;const w=trim([...o.value.slice(0,o.value.indexOf(c)),...o.value.slice(o.value.indexOf(v||u)+1,o.value.indexOf(h))]);return w.length>0&&w.some((o=>!n(o)))&&w.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]])),trim([...w,...trim(g)])}function trim(o){let e=0,t=o.length-1;for(let t=0;t<o.length;t++)if(!i(o[t])){e=t;break}for(let e=o.length-1;e>=0;e--)if(!i(o[e])){t=e;break}return o.slice(e,t+1)}const basePlugin=o=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(e){if(!w.test(e.value))return;if(hasFallback(e))return;if(hasSupportsAtRuleAncestor(e))return;const t=f({css:e.value}),r=l(a(c(t),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o);e&&(o.value=e)})));if(r===e.value)return;const n=l(a(c(v(t)),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o,!0);e&&(o.value=e)})));e.cloneBefore({value:r}),r!==n&&e.cloneBefore({value:n}),null!=o&&o.preserve||e.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[o(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import o from"@csstools/postcss-progressive-custom-properties";import{WhitespaceNode as e,TokenNode as t,FunctionNode as r,isCommentNode as n,isWhitespaceNode as i,isTokenNode as s,stringify as l,replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as u}from"@csstools/css-parser-algorithms";import{TokenType as p,tokenize as f,cloneTokens as v}from"@csstools/css-tokenizer";import{serializeP3 as h,color as d,colorDataFitsRGB_Gamut as m,serializeRGB as g}from"@csstools/css-color-parser";const w=/(repeating-)?(linear|radial|conic)-gradient\(/i,C=/^(repeating-)?(linear|radial|conic)-gradient$/i;function hasFallback(o){const e=o.parent;if(!e)return!1;const t=o.prop.toLowerCase(),r=e.index(o);for(let o=0;o<r;o++){const r=e.nodes[o];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}function hasSupportsAtRuleAncestor(o){let e=o.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name&&w.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}function interpolateColorsInColorStopsList(o,n,i,s=!1){const l=[],a=[];for(let s=0;s<o.length-1;s++){const l=o[s],c=o[s+1];if(a.push(l),i||h(l.colorData,!1).toString()!==h(c.colorData,!1).toString()&&l.position.toString()!==c.position.toString())for(let o=1;o<=9;o++){const s=10*o;let u=[];i&&(u=[new e([[p.Whitespace," ",-1,-1,void 0]]),i,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Ident,"hue",-1,-1,{value:"hue"}])]);const f=new r([p.Function,"color-mix(",-1,-1,{value:"color-mix"}],[p.CloseParen,")",-1,-1,void 0],[new t([p.Ident,"in",-1,-1,{value:"in"}]),new e([[p.Whitespace," ",-1,-1,void 0]]),n,...u,new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]),l.color,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Percentage,100-s+"%",-1,-1,{value:100-s}]),new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]),c.color,new e([[p.Whitespace," ",-1,-1,void 0]]),new t([p.Percentage,`${s}%`,-1,-1,{value:s}])]),v=d(f);if(!v)return!1;a.push({colorData:v})}s===o.length-2&&a.push(c)}for(let o=0;o<a.length;o++)s&&!m(a[o].colorData)?a[o].color=h(a[o].colorData,!1):a[o].color=g(a[o].colorData,!1);for(let o=0;o<a.length;o++){const r=a[o];r.position?l.push(r.color,new e([[p.Whitespace," ",-1,-1,void 0]]),r.position):l.push(r.color),o!==a.length-1&&l.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]]))}return l}function parseColorStops(o){const e=[];let t={};for(let r=0;r<o.length;r++){const l=o[r];if(n(l)||i(l))continue;if(s(l)&&l.value[0]===p.Comma){if(t.color&&t.colorData&&t.positionA){e.push({color:t.color,colorData:t.colorData,position:t.positionA}),t.positionB&&e.push({color:t.color,colorData:t.colorData,position:t.positionB}),t={};continue}return!1}const a=d(l);if(a){if(t.color)return!1;t.color=l,t.colorData=a}else{if(!t.color)return!1;if(t.positionA){if(!t.positionA||t.positionB)return!1;t.positionB=l}else t.positionA=l}}return!(!t.color||!t.positionA)&&(t.color&&t.colorData&&t.positionA&&(e.push({color:t.color,colorData:t.colorData,position:t.positionA}),t.positionB&&e.push({color:t.color,colorData:t.colorData,position:t.positionB})),!(e.length<2)&&e)}const D=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,b=/^(hsl|hwb|lch|oklch)$/i,A=/^(shorter|longer|increasing|decreasing)$/i,x=/^in$/i,S=/^hue$/i;function modifyGradientFunctionComponentValues(o,r=!1){const l=o.getName();if(!C.test(l))return!1;let a="srgb",c=null,u=null,f=null,v=null,h=null,d=[];{let e=0,t=o.value[e];for(;!s(t)||t.value[0]!==p.Ident||!x.test(t.value[4].value);){if(s(t)&&t.value[0]===p.Comma)return!1;e++,t=o.value[e]}for(c=t,e++,t=o.value[e];n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&D.test(t.value[4].value)){if(u)return!1;u=t,a=t.value[4].value,e++,t=o.value[e]}for(;n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&A.test(t.value[4].value)&&b.test(a)){if(f||!u)return!1;f=t,e++,t=o.value[e]}for(;n(t)||i(t);)e++,t=o.value[e];if(s(t)&&t.value[0]===p.Ident&&S.test(t.value[4].value)){if(v||!u||!f)return!1;v=t,e++,t=o.value[e]}for(;!s(t)||t.value[0]!==p.Comma;)e++,t=o.value[e];h=t,d=o.value.slice(e+1)}if(!u)return!1;if(f&&!v)return!1;if(v&&!f)return!1;const m=parseColorStops(d);if(!m)return!1;const g=interpolateColorsInColorStopsList(m,u,f,r);if(!g)return!1;const w=trim([...o.value.slice(0,o.value.indexOf(c)),...o.value.slice(o.value.indexOf(v||u)+1,o.value.indexOf(h))]);return w.length>0&&w.some((o=>!n(o)))&&w.push(new t([p.Comma,",",-1,-1,void 0]),new e([[p.Whitespace," ",-1,-1,void 0]])),trim([...w,...trim(g)])}function trim(o){let e=0,t=o.length-1;for(let t=0;t<o.length;t++)if(!i(o[t])){e=t;break}for(let e=o.length-1;e>=0;e--)if(!i(o[e])){t=e;break}return o.slice(e,t+1)}const basePlugin=o=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(e){if(!w.test(e.value))return;if(hasFallback(e))return;if(hasSupportsAtRuleAncestor(e))return;const t=f({css:e.value}),r=l(a(c(t),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o);e&&(o.value=e)})));if(r===e.value)return;const n=l(a(c(v(t)),(o=>{if(!u(o))return;const e=modifyGradientFunctionComponentValues(o,!0);e&&(o.value=e)})));e.cloneBefore({value:r}),r!==n&&e.cloneBefore({value:n}),null!=o&&o.preserve||e.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[o(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
diff --git a/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts b/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts
index 0c58b1aa7..0a66050c5 100644
--- a/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts
+++ b/plugins/postcss-gradients-interpolation-method/src/color-stop-list.ts
@@ -27,8 +27,11 @@ export function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>,
 		interpolatedColorStops.push(colorStop);
 
 		if (
-			serializeP3(colorStop.colorData, false).toString() !== serializeP3(nextColorStop.colorData, false).toString() &&
-			colorStop.position.toString() !== nextColorStop.position.toString()
+			hueInterpolationMethod ||
+			(
+				serializeP3(colorStop.colorData, false).toString() !== serializeP3(nextColorStop.colorData, false).toString() &&
+				colorStop.position.toString() !== nextColorStop.position.toString()
+			)
 		) {
 			for (let j = 1; j <= 9; j++) {
 				const multiplier = j * 10;
diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.css b/plugins/postcss-gradients-interpolation-method/test/basic.css
index 5bb00f6d6..c78305f7a 100644
--- a/plugins/postcss-gradients-interpolation-method/test/basic.css
+++ b/plugins/postcss-gradients-interpolation-method/test/basic.css
@@ -305,3 +305,7 @@ to-clone {
 .wpt-xyz-gradient {
 	background: linear-gradient(to right in xyz, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
 }
+
+.color-with-longer-interpolation-method {
+	background: conic-gradient(in oklch longer hue, rgb(255 150 150) 0deg, rgb(255 150 150) 360deg);
+}
diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
index a19b0b696..e9ba95d9a 100644
--- a/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
+++ b/plugins/postcss-gradients-interpolation-method/test/basic.expect.css
@@ -6,8 +6,8 @@
 }
 
 .test-2-0 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
 	background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%);
 }
 
@@ -17,7 +17,7 @@
 }
 
 .test-2-2 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 153, 0), rgb(204, 255, 0), rgb(51, 255, 0), rgb(0, 255, 102), rgb(0, 255, 255), rgb(0, 102, 255), rgb(51, 0, 255), rgb(204, 0, 255), rgb(255, 0, 153), rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(153, 0, 255), rgb(255, 0, 204), rgb(255, 0, 51), rgb(255, 102, 0), rgb(255, 255, 0), rgb(102, 255, 0), rgb(0, 255, 51), rgb(0, 255, 204), rgb(0, 153, 255), rgb(0, 0, 255) 75%);
 	background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%);
 }
 
@@ -348,7 +348,7 @@
 	background:
 		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0,
 		linear-gradient(#53777A 20px, #0000 0) 0 15px,
-		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
+		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
 		#ECD078;
 	background:
 		conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0,
@@ -392,3 +392,9 @@ to-clone {
 	background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(243, 89, 0), rgb(231, 124, 0), rgb(218, 149, 0), rgb(203, 170, 0), rgb(188, 188, 0), rgb(170, 203, 0), rgb(149, 218, 0), rgb(124, 231, 0), rgb(89, 243, 0), rgb(0, 255, 0) 100%);
 	background: linear-gradient(to right in xyz, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
 }
+
+.color-with-longer-interpolation-method {
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), rgb(157, 179, 255), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), color(display-p3 0.63036 0.6977 1.01537), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+	background: conic-gradient(in oklch longer hue, rgb(255 150 150) 0deg, rgb(255 150 150) 360deg);
+}
diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css
index 1c3b14b74..df5a94173 100644
--- a/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css
+++ b/plugins/postcss-gradients-interpolation-method/test/basic.preserve-false.expect.css
@@ -5,8 +5,8 @@
 }
 
 .test-2-0 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
 }
 
 .test-2-1 {
@@ -14,7 +14,7 @@
 }
 
 .test-2-2 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 153, 0), rgb(204, 255, 0), rgb(51, 255, 0), rgb(0, 255, 102), rgb(0, 255, 255), rgb(0, 102, 255), rgb(51, 0, 255), rgb(204, 0, 255), rgb(255, 0, 153), rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(153, 0, 255), rgb(255, 0, 204), rgb(255, 0, 51), rgb(255, 102, 0), rgb(255, 255, 0), rgb(102, 255, 0), rgb(0, 255, 51), rgb(0, 255, 204), rgb(0, 153, 255), rgb(0, 0, 255) 75%);
 }
 
 .test-2-3 {
@@ -286,7 +286,7 @@
 	background:
 		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0,
 		linear-gradient(#53777A 20px, #0000 0) 0 15px,
-		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
+		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
 		#ECD078;
 }
 
@@ -319,3 +319,8 @@ to-clone {
 .wpt-xyz-gradient {
 	background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(243, 89, 0), rgb(231, 124, 0), rgb(218, 149, 0), rgb(203, 170, 0), rgb(188, 188, 0), rgb(170, 203, 0), rgb(149, 218, 0), rgb(124, 231, 0), rgb(89, 243, 0), rgb(0, 255, 0) 100%);
 }
+
+.color-with-longer-interpolation-method {
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), rgb(157, 179, 255), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), color(display-p3 0.63036 0.6977 1.01537), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+}
diff --git a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css
index 172c2822c..905317052 100644
--- a/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css
+++ b/plugins/postcss-gradients-interpolation-method/test/basic.with-cloned-rules.expect.css
@@ -6,8 +6,8 @@
 }
 
 .test-2-0 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, rgb(249, 0, 71), rgb(239, 0, 107), rgb(225, 0, 138), rgb(207, 0, 167), rgb(186, 0, 194), rgb(163, 0, 217), rgb(136, 0, 236), rgb(107, 0, 250), rgb(73, 0, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0), rgb(255, 0, 0) 50%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 70%, rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255) 75%);
 	background-image: linear-gradient(in oklch shorter hue 90deg, red 25% 50%, blue 70% 75%);
 }
 
@@ -17,7 +17,7 @@
 }
 
 .test-2-2 {
-	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(0, 0, 255) 75%);
+	background-image: linear-gradient(90deg, rgb(255, 0, 0) 25%, rgb(255, 153, 0), rgb(204, 255, 0), rgb(51, 255, 0), rgb(0, 255, 102), rgb(0, 255, 255), rgb(0, 102, 255), rgb(51, 0, 255), rgb(204, 0, 255), rgb(255, 0, 153), rgb(255, 0, 0) 50%, rgb(255, 102, 0), rgb(255, 204, 0), rgb(204, 255, 0), rgb(102, 255, 0), rgb(0, 255, 0), rgb(0, 255, 102), rgb(0, 255, 204), rgb(0, 204, 255), rgb(0, 102, 255), rgb(0, 0, 255) 70%, rgb(153, 0, 255), rgb(255, 0, 204), rgb(255, 0, 51), rgb(255, 102, 0), rgb(255, 255, 0), rgb(102, 255, 0), rgb(0, 255, 51), rgb(0, 255, 204), rgb(0, 153, 255), rgb(0, 0, 255) 75%);
 	background-image: linear-gradient(in hsl longer hue 90deg, red 25% 50%, blue 70% 75%);
 }
 
@@ -348,7 +348,7 @@
 	background:
 		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 270deg, rgba(192, 107, 41, 0.1), rgba(187, 192, 41, 0.2), rgba(96, 192, 41, 0.3), rgba(41, 192, 76, 0.4), rgba(41, 192, 167, 0.5), rgba(41, 126, 192, 0.6), rgba(46, 41, 192, 0.7), rgba(137, 41, 192, 0.8), rgba(192, 41, 157, 0.9), rgb(192, 41, 66) 0) calc(20px + 15px) 0,
 		linear-gradient(#53777A 20px, #0000 0) 0 15px,
-		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
+		conic-gradient(at 20px calc(100% - 20px), rgba(0, 0, 0, 0) 90deg, rgba(83, 96, 122, 0.1), rgba(94, 83, 122, 0.2), rgba(117, 83, 122, 0.3), rgba(122, 83, 103, 0.4), rgba(122, 86, 83, 0.5), rgba(122, 109, 83, 0.6), rgba(111, 122, 83, 0.7), rgba(88, 122, 83, 0.8), rgba(83, 122, 102, 0.9), rgb(83, 119, 122) 0, rgb(83, 96, 122), rgb(94, 83, 122), rgb(117, 83, 122), rgb(122, 83, 103), rgb(122, 86, 83), rgb(122, 109, 83), rgb(111, 122, 83), rgb(88, 122, 83), rgb(83, 122, 102), rgb(83, 119, 122) 180deg, rgb(79, 128, 116), rgb(76, 135, 101), rgb(72, 142, 79), rgb(86, 148, 68), rgb(114, 155, 64), rgb(149, 162, 59), rgb(170, 148, 55), rgb(177, 112, 50), rgb(184, 68, 46), rgb(192, 41, 66) 0),
 		#ECD078;
 	background:
 		conic-gradient(in hsl longer hue at 20px calc(100% - 20px), #0000 270deg, #C02942 0) calc(20px + 15px) 0,
@@ -397,3 +397,9 @@ to-clone {
 	background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(243, 89, 0), rgb(231, 124, 0), rgb(218, 149, 0), rgb(203, 170, 0), rgb(188, 188, 0), rgb(170, 203, 0), rgb(149, 218, 0), rgb(124, 231, 0), rgb(89, 243, 0), rgb(0, 255, 0) 100%);
 	background: linear-gradient(to right in xyz, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 100%);
 }
+
+.color-with-longer-interpolation-method {
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), rgb(157, 179, 255), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+	background: conic-gradient(rgb(255, 150, 150) 0deg, rgb(246, 162, 100), rgb(213, 182, 78), rgb(160, 200, 109), rgb(93, 210, 163), rgb(41, 208, 217), rgb(93, 196, 254), color(display-p3 0.63036 0.6977 1.01537), rgb(207, 162, 246), rgb(241, 150, 204), rgb(255, 150, 150) 360deg);
+	background: conic-gradient(in oklch longer hue, rgb(255 150 150) 0deg, rgb(255 150 150) 360deg);
+}