Skip to content

Commit 700ac1b

Browse files
authored
improve the regex for gradient function detection (#1302)
1 parent 447753b commit 700ac1b

File tree

5 files changed

+18
-6
lines changed

5 files changed

+18
-6
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changes to PostCSS Gradients Interpolation Method
22

3+
### Unreleased (patch)
4+
5+
- Improve the regex for gradient function detection
6+
37
### 4.0.10
48

59
_February 19, 2024_
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/utilities"),t=require("@csstools/css-parser-algorithms"),n=require("@csstools/css-tokenizer"),i=require("@csstools/css-color-parser");const s=/(repeating-)?(linear|radial|conic)-gradient\(.*?in/i,r=/^(repeating-)?(linear|radial|conic)-gradient$/i;function interpolateColorsInColorStopsList(e,o,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||i.serializeP3(a.colorData,!1).toString()!==i.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 t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),s,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Ident,"hue",-1,-1,{value:"hue"}])]);const u=new t.FunctionNode([n.TokenType.Function,"color-mix(",-1,-1,{value:"color-mix"}],[n.TokenType.CloseParen,")",-1,-1,void 0],[new t.TokenNode([n.TokenType.Ident,"in",-1,-1,{value:"in"}]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),o,...p,new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),a.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Percentage,100-r+"%",-1,-1,{value:100-r}]),new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),c.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Percentage,`${r}%`,-1,-1,{value:r}])]),d=i.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&&!i.colorDataFitsRGB_Gamut(l[e].colorData)?l[e].color=i.serializeP3(l[e].colorData,!1):l[e].color=i.serializeRGB(l[e].colorData,!1);for(let e=0;e<l.length;e++){const o=l[e];o.position?a.push(o.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),o.position):a.push(o.color),e!==l.length-1&&a.push(new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]))}return a}function parseColorStops(e){const o=[];let s={};for(let r=0;r<e.length;r++){const a=e[r];if(t.isCommentNode(a)||t.isWhitespaceNode(a))continue;if(t.isTokenNode(a)&&a.value[0]===n.TokenType.Comma){if(s.color&&s.colorData&&s.positionA){o.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&o.push({color:s.color,colorData:s.colorData,position:s.positionB}),s={};continue}return!1}const l=i.color(a);if(l){if(s.color)return!1;if(l.syntaxFlags.has(i.SyntaxFlag.Experimental))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&&(o.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&o.push({color:s.color,colorData:s.colorData,position:s.positionB})),!(o.length<2)&&o)}const a=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,l=/^(hsl|hwb|lch|oklch)$/i,c=/^(shorter|longer|increasing|decreasing)$/i,p=/^in$/i,u=/^hue$/i;function modifyGradientFunctionComponentValues(e,o=!1){const i=e.getName();if(!r.test(i))return!1;let s="srgb",d=null,T=null,v=null,h=null,f=null,m=[];{let o=0,i=e.value[o];for(;i&&(!t.isTokenNode(i)||i.value[0]!==n.TokenType.Ident||!p.test(i.value[4].value));){if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Comma)return!1;o++,i=e.value[o]}for(d=i,o++,i=e.value[o];t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&a.test(i.value[4].value)){if(T)return!1;T=i,s=i.value[4].value,o++,i=e.value[o]}for(;t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&c.test(i.value[4].value)&&l.test(s)){if(v||!T)return!1;v=i,o++,i=e.value[o]}for(;t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&u.test(i.value[4].value)){if(h||!T||!v)return!1;h=i,o++,i=e.value[o]}for(;i&&(!t.isTokenNode(i)||i.value[0]!==n.TokenType.Comma);)o++,i=e.value[o];if(f=i,!f)return!1;m=e.value.slice(o+1)}if(!T)return!1;if(v&&!h)return!1;if(h&&!v)return!1;const k=parseColorStops(m);if(!k)return!1;const g=interpolateColorsInColorStopsList(k,T,v,o);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(f))]);return N.length>0&&N.some((e=>!t.isCommentNode(e)))&&N.push(new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let o=0,n=e.length-1;for(let n=0;n<e.length;n++)if(!t.isWhitespaceNode(e[n])){o=n;break}for(let o=e.length-1;o>=0;o--)if(!t.isWhitespaceNode(e[o])){n=o;break}return e.slice(o,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(i){if(!s.test(i.value))return;if(o.hasFallback(i))return;if(o.hasSupportsAtRuleAncestor(i,s))return;const r=n.tokenize({css:i.value}),a=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(r),(e=>{if(!t.isFunctionNode(e))return;const o=modifyGradientFunctionComponentValues(e);o&&(e.value=o)})));if(a===i.value)return;const l=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(r),(e=>{if(!t.isFunctionNode(e))return;const o=modifyGradientFunctionComponentValues(e,!0);o&&(e.value=o)})));i.cloneBefore({value:a}),a!==l&&i.cloneBefore({value:l}),e?.preserve||i.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;
1+
"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("@csstools/utilities"),t=require("@csstools/css-parser-algorithms"),n=require("@csstools/css-tokenizer"),i=require("@csstools/css-color-parser");const s=/(repeating-)?(linear|radial|conic)-gradient\(/i,r=/\bin\b/i,a={test:e=>s.test(e)&&r.test(e)},l=/^(repeating-)?(linear|radial|conic)-gradient$/i;function interpolateColorsInColorStopsList(e,o,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||i.serializeP3(a.colorData,!1).toString()!==i.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 t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),s,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Ident,"hue",-1,-1,{value:"hue"}])]);const u=new t.FunctionNode([n.TokenType.Function,"color-mix(",-1,-1,{value:"color-mix"}],[n.TokenType.CloseParen,")",-1,-1,void 0],[new t.TokenNode([n.TokenType.Ident,"in",-1,-1,{value:"in"}]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),o,...p,new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),a.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Percentage,100-r+"%",-1,-1,{value:100-r}]),new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),c.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),new t.TokenNode([n.TokenType.Percentage,`${r}%`,-1,-1,{value:r}])]),d=i.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&&!i.colorDataFitsRGB_Gamut(l[e].colorData)?l[e].color=i.serializeP3(l[e].colorData,!1):l[e].color=i.serializeRGB(l[e].colorData,!1);for(let e=0;e<l.length;e++){const o=l[e];o.position?a.push(o.color,new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]),o.position):a.push(o.color),e!==l.length-1&&a.push(new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]]))}return a}function parseColorStops(e){const o=[];let s={};for(let r=0;r<e.length;r++){const a=e[r];if(t.isCommentNode(a)||t.isWhitespaceNode(a))continue;if(t.isTokenNode(a)&&a.value[0]===n.TokenType.Comma){if(s.color&&s.colorData&&s.positionA){o.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&o.push({color:s.color,colorData:s.colorData,position:s.positionB}),s={};continue}return!1}const l=i.color(a);if(l){if(s.color)return!1;if(l.syntaxFlags.has(i.SyntaxFlag.Experimental))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&&(o.push({color:s.color,colorData:s.colorData,position:s.positionA}),s.positionB&&o.push({color:s.color,colorData:s.colorData,position:s.positionB})),!(o.length<2)&&o)}const c=/^(srgb|srgb-linear|lab|oklab|xyz|xyz-d50|xyz-d65|hsl|hwb|lch|oklch)$/i,p=/^(hsl|hwb|lch|oklch)$/i,u=/^(shorter|longer|increasing|decreasing)$/i,d=/^in$/i,T=/^hue$/i;function modifyGradientFunctionComponentValues(e,o=!1){const i=e.getName();if(!l.test(i))return!1;let s="srgb",r=null,a=null,v=null,h=null,f=null,m=[];{let o=0,i=e.value[o];for(;i&&(!t.isTokenNode(i)||i.value[0]!==n.TokenType.Ident||!d.test(i.value[4].value));){if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Comma)return!1;o++,i=e.value[o]}for(r=i,o++,i=e.value[o];t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&c.test(i.value[4].value)){if(a)return!1;a=i,s=i.value[4].value,o++,i=e.value[o]}for(;t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&u.test(i.value[4].value)&&p.test(s)){if(v||!a)return!1;v=i,o++,i=e.value[o]}for(;t.isCommentNode(i)||t.isWhitespaceNode(i);)o++,i=e.value[o];if(t.isTokenNode(i)&&i.value[0]===n.TokenType.Ident&&T.test(i.value[4].value)){if(h||!a||!v)return!1;h=i,o++,i=e.value[o]}for(;i&&(!t.isTokenNode(i)||i.value[0]!==n.TokenType.Comma);)o++,i=e.value[o];if(f=i,!f)return!1;m=e.value.slice(o+1)}if(!a)return!1;if(v&&!h)return!1;if(h&&!v)return!1;const k=parseColorStops(m);if(!k)return!1;const g=interpolateColorsInColorStopsList(k,a,v,o);if(!g)return!1;const N=trim([...e.value.slice(0,e.value.indexOf(r)),...e.value.slice(e.value.indexOf(h||a)+1,e.value.indexOf(f))]);return N.length>0&&N.some((e=>!t.isCommentNode(e)))&&N.push(new t.TokenNode([n.TokenType.Comma,",",-1,-1,void 0]),new t.WhitespaceNode([[n.TokenType.Whitespace," ",-1,-1,void 0]])),trim([...N,...trim(g)])}function trim(e){let o=0,n=e.length-1;for(let n=0;n<e.length;n++)if(!t.isWhitespaceNode(e[n])){o=n;break}for(let o=e.length-1;o>=0;o--)if(!t.isWhitespaceNode(e[o])){n=o;break}return e.slice(o,n+1)}const basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(i){if(!a.test(i.value))return;if(o.hasFallback(i))return;if(o.hasSupportsAtRuleAncestor(i,a))return;const s=n.tokenize({css:i.value}),r=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!t.isFunctionNode(e))return;const o=modifyGradientFunctionComponentValues(e);o&&(e.value=o)})));if(r===i.value)return;const l=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s),(e=>{if(!t.isFunctionNode(e))return;const o=modifyGradientFunctionComponentValues(e,!0);o&&(e.value=o)})));i.cloneBefore({value:r}),r!==l&&i.cloneBefore({value:l}),e?.preserve||i.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;

0 commit comments

Comments
 (0)