@csstools/postcss-gradients-interpolation-method 3.0.0 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -1
- package/README.md +21 -18
- package/dist/color-stop-list.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +1 -1
- package/dist/modify-gradient-component-values.d.ts +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
# Changes to PostCSS Gradients Interpolation Method
|
|
2
2
|
|
|
3
|
-
### 3.0.
|
|
3
|
+
### 3.0.2 (April 10, 2023)
|
|
4
|
+
|
|
5
|
+
- Fix interpolation method `longer`, `increasing`,... for color stops with the same color.
|
|
6
|
+
|
|
7
|
+
### 3.0.1 (March 28, 2023)
|
|
8
|
+
|
|
9
|
+
- Skip gamut mapping for interpolation color hints.
|
|
10
|
+
|
|
11
|
+
### 3.0.0 (March 25, 2023)
|
|
4
12
|
|
|
5
13
|
- Handle `color-mix()` internally with `@csstools/css-color-parser`
|
|
6
14
|
|
package/README.md
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
12
|
+
:root {
|
|
13
|
+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
/* becomes */
|
|
@@ -20,9 +20,14 @@
|
|
|
20
20
|
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
25
|
-
|
|
23
|
+
:root {
|
|
24
|
+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) {
|
|
28
|
+
:root {
|
|
29
|
+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
30
|
+
}
|
|
26
31
|
}
|
|
27
32
|
```
|
|
28
33
|
|
|
@@ -89,10 +94,10 @@ instructions for:
|
|
|
89
94
|
### preserve
|
|
90
95
|
|
|
91
96
|
The `preserve` option determines whether the original notation
|
|
92
|
-
is preserved. By default, it is
|
|
97
|
+
is preserved. By default, it is preserved.
|
|
93
98
|
|
|
94
99
|
```js
|
|
95
|
-
postcssGradientsInterpolationMethod({ preserve:
|
|
100
|
+
postcssGradientsInterpolationMethod({ preserve: false })
|
|
96
101
|
```
|
|
97
102
|
|
|
98
103
|
```pcss
|
|
@@ -100,20 +105,18 @@ postcssGradientsInterpolationMethod({ preserve: true })
|
|
|
100
105
|
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
101
106
|
}
|
|
102
107
|
|
|
103
|
-
|
|
104
|
-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
108
|
+
:root {
|
|
109
|
+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
105
110
|
}
|
|
106
111
|
|
|
107
112
|
/* becomes */
|
|
108
113
|
|
|
109
114
|
.example {
|
|
110
115
|
background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
|
|
111
|
-
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
112
116
|
}
|
|
113
117
|
|
|
114
|
-
|
|
115
|
-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
116
|
-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
118
|
+
:root {
|
|
119
|
+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
117
120
|
}
|
|
118
121
|
```
|
|
119
122
|
|
|
@@ -133,8 +136,8 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false }
|
|
|
133
136
|
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
134
137
|
}
|
|
135
138
|
|
|
136
|
-
|
|
137
|
-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
139
|
+
:root {
|
|
140
|
+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
138
141
|
}
|
|
139
142
|
|
|
140
143
|
/* becomes */
|
|
@@ -144,9 +147,9 @@ postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false }
|
|
|
144
147
|
background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
|
|
145
148
|
}
|
|
146
149
|
|
|
147
|
-
|
|
148
|
-
background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
149
|
-
background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
150
|
+
:root {
|
|
151
|
+
--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
|
|
152
|
+
--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
|
|
150
153
|
}
|
|
151
154
|
```
|
|
152
155
|
|
|
@@ -6,4 +6,4 @@ export type ColorStop = {
|
|
|
6
6
|
colorData: ColorData;
|
|
7
7
|
position: ComponentValue;
|
|
8
8
|
};
|
|
9
|
-
export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null): Array<ComponentValue> | false;
|
|
9
|
+
export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null, wideGamut?: boolean): Array<ComponentValue> | false;
|
package/dist/index.cjs
CHANGED
|
@@ -1 +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){const
|
|
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),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;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { PluginCreator } from 'postcss';
|
|
2
2
|
/** postcss-gradients-interpolation-method plugin options */
|
|
3
3
|
export type pluginOptions = {
|
|
4
|
-
/** Preserve the original notation. default:
|
|
4
|
+
/** Preserve the original notation. default: true */
|
|
5
5
|
preserve?: boolean;
|
|
6
6
|
/** Enable "@csstools/postcss-progressive-custom-properties". default: true */
|
|
7
7
|
enableProgressiveCustomProperties?: boolean;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +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
|
|
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),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};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { ComponentValue, FunctionNode } from '@csstools/css-parser-algorithms';
|
|
2
|
-
export declare function modifyGradientFunctionComponentValues(gradientFunction: FunctionNode): Array<ComponentValue> | false;
|
|
2
|
+
export declare function modifyGradientFunctionComponentValues(gradientFunction: FunctionNode, wideGamut?: boolean): Array<ComponentValue> | false;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csstools/postcss-gradients-interpolation-method",
|
|
3
3
|
"description": "Use interpolation methods in CSS gradient functions",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.2",
|
|
5
5
|
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
|
|
6
6
|
"license": "CC0-1.0",
|
|
7
7
|
"funding": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dist"
|
|
30
30
|
],
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@csstools/css-color-parser": "^1.
|
|
32
|
+
"@csstools/css-color-parser": "^1.1.1",
|
|
33
33
|
"@csstools/css-parser-algorithms": "^2.1.0",
|
|
34
34
|
"@csstools/css-tokenizer": "^2.1.0",
|
|
35
35
|
"@csstools/postcss-progressive-custom-properties": "^2.0.0"
|