@csstools/postcss-gradients-interpolation-method 4.0.6 → 4.0.8
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 +15 -111
- package/README.md +7 -4
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.mjs +1 -1
- package/package.json +14 -31
- package/dist/color-stop-list.d.ts +0 -9
- package/dist/has-fallback-decl.d.ts +0 -2
- package/dist/has-supports-at-rule-ancestor.d.ts +0 -2
- package/dist/is-gradient.d.ts +0 -2
- package/dist/modify-gradient-component-values.d.ts +0 -2
- package/dist/parse-color-stops.d.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,122 +1,26 @@
|
|
|
1
1
|
# Changes to PostCSS Gradients Interpolation Method
|
|
2
2
|
|
|
3
|
-
### 4.0.
|
|
4
|
-
|
|
5
|
-
_October 2, 2023_
|
|
6
|
-
|
|
7
|
-
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#133) (patch)
|
|
8
|
-
|
|
9
|
-
### 4.0.5
|
|
10
|
-
|
|
11
|
-
_September 24, 2023_
|
|
12
|
-
|
|
13
|
-
- Small performance improvements
|
|
14
|
-
- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#221) (patch)
|
|
15
|
-
- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.3.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#232) (patch)
|
|
16
|
-
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#132) (patch)
|
|
17
|
-
|
|
18
|
-
### 4.0.4
|
|
19
|
-
|
|
20
|
-
_September 18, 2023_
|
|
21
|
-
|
|
22
|
-
- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#301) (patch)
|
|
23
|
-
|
|
24
|
-
### 4.0.3
|
|
25
|
-
|
|
26
|
-
_September 2, 2023_
|
|
27
|
-
|
|
28
|
-
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#131) (patch)
|
|
29
|
-
|
|
30
|
-
### 4.0.2
|
|
31
|
-
|
|
32
|
-
_August 28, 2023_
|
|
33
|
-
|
|
34
|
-
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#130) (minor)
|
|
35
|
-
|
|
36
|
-
### 4.0.1
|
|
37
|
-
|
|
38
|
-
_July 24, 2023_
|
|
39
|
-
|
|
40
|
-
- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#220) (minor)
|
|
41
|
-
- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.3.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#231) (patch)
|
|
42
|
-
|
|
43
|
-
### 4.0.0
|
|
44
|
-
|
|
45
|
-
_July 3, 2023_
|
|
46
|
-
|
|
47
|
-
- Change license to `MIT-0` ([read more about this change in the blog post](https://preset-env.cssdb.org/blog/license-change/))
|
|
48
|
-
- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.3.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#230) (minor)
|
|
49
|
-
- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#300) (major)
|
|
50
|
-
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.2.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#122) (patch)
|
|
51
|
-
|
|
52
|
-
### 3.0.6
|
|
53
|
-
|
|
54
|
-
_June 1, 2023_
|
|
55
|
-
|
|
56
|
-
- Updated `@csstools/postcss-progressive-custom-properties` to `2.3.0` (minor)
|
|
57
|
-
|
|
3
|
+
### 4.0.8
|
|
58
4
|
|
|
59
|
-
|
|
5
|
+
_December 15, 2023_
|
|
60
6
|
|
|
61
|
-
|
|
7
|
+
- Skip transforms when a color value contains experimental syntax
|
|
8
|
+
- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#222) (patch)
|
|
9
|
+
- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#240) (minor)
|
|
10
|
+
- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#303) (patch)
|
|
11
|
+
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#150) (minor)
|
|
62
12
|
|
|
63
|
-
|
|
64
|
-
- Updated `@csstools/css-color-parser` to `1.2.0` (minor)
|
|
13
|
+
### 4.0.7
|
|
65
14
|
|
|
15
|
+
_October 9, 2023_
|
|
66
16
|
|
|
17
|
+
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#140) (minor)
|
|
18
|
+
- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.2`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#302) (patch)
|
|
67
19
|
|
|
68
|
-
###
|
|
69
|
-
|
|
70
|
-
_April 17, 2023_
|
|
71
|
-
|
|
72
|
-
- Fix infinite loop when parsing gradient functions. (see : https://github.com/csstools/postcss-plugins/issues/948)
|
|
73
|
-
|
|
74
|
-
### 3.0.3
|
|
75
|
-
|
|
76
|
-
_April 10, 2023_
|
|
77
|
-
|
|
78
|
-
- Updated `@csstools/css-tokenizer` to `2.1.1` (patch)
|
|
79
|
-
- Updated `@csstools/css-parser-algorithms` to `2.1.1` (patch)
|
|
80
|
-
- Updated `@csstools/css-color-parser` to `1.1.2` (patch)
|
|
81
|
-
|
|
82
|
-
### 3.0.2
|
|
83
|
-
|
|
84
|
-
_April 10, 2023_
|
|
85
|
-
|
|
86
|
-
- Fix interpolation method `longer`, `increasing`,... for color stops with the same color.
|
|
87
|
-
|
|
88
|
-
### 3.0.1
|
|
89
|
-
|
|
90
|
-
_March 28, 2023_
|
|
91
|
-
|
|
92
|
-
- Skip gamut mapping for interpolation color hints.
|
|
93
|
-
|
|
94
|
-
### 3.0.0
|
|
95
|
-
|
|
96
|
-
_March 25, 2023_
|
|
97
|
-
|
|
98
|
-
- Handle `color-mix()` internally with `@csstools/css-color-parser`
|
|
99
|
-
|
|
100
|
-
### 2.0.1
|
|
101
|
-
|
|
102
|
-
_January 28, 2023_
|
|
103
|
-
|
|
104
|
-
- Improve `types` declaration in `package.json`
|
|
105
|
-
|
|
106
|
-
### 2.0.0
|
|
107
|
-
|
|
108
|
-
_January 24, 2023_
|
|
109
|
-
|
|
110
|
-
- Updated: Support for Node v14+ (major).
|
|
111
|
-
|
|
112
|
-
### 1.0.1
|
|
113
|
-
|
|
114
|
-
_March 7, 2022_
|
|
115
|
-
|
|
116
|
-
- fix dependencies
|
|
20
|
+
### 4.0.6
|
|
117
21
|
|
|
118
|
-
|
|
22
|
+
_October 2, 2023_
|
|
119
23
|
|
|
120
|
-
|
|
24
|
+
- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#133) (patch)
|
|
121
25
|
|
|
122
|
-
-
|
|
26
|
+
[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method/CHANGELOG.md)
|
package/README.md
CHANGED
|
@@ -37,7 +37,8 @@ npm install @csstools/postcss-gradients-interpolation-method --save-dev
|
|
|
37
37
|
|
|
38
38
|
## Shortcomings
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
> [!CAUTION]
|
|
41
|
+
> Color stops with only a color or only an interpolation hint are not supported.
|
|
41
42
|
|
|
42
43
|
For best results you should always provide at least the color and position for each color stop.
|
|
43
44
|
Double position color stops are supported.
|
|
@@ -52,8 +53,9 @@ Double position color stops are supported.
|
|
|
52
53
|
}
|
|
53
54
|
```
|
|
54
55
|
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
> [!CAUTION]
|
|
57
|
+
> Variable colors are not supported.
|
|
58
|
+
> We can not mix colors when the color is a variable.
|
|
57
59
|
|
|
58
60
|
```pcss
|
|
59
61
|
.foo {
|
|
@@ -129,7 +131,8 @@ postcssGradientsInterpolationMethod({ preserve: false })
|
|
|
129
131
|
The `enableProgressiveCustomProperties` option determines whether the original notation
|
|
130
132
|
is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
|
|
131
133
|
|
|
132
|
-
|
|
134
|
+
> [!NOTE]
|
|
135
|
+
> We only recommend disabling this when you set `preserve` to `false` or if you bring your own fix for Custom Properties. See what the plugin does in its [README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
|
|
133
136
|
|
|
134
137
|
```js
|
|
135
138
|
postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: 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\(.*?in/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,
|
|
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\(.*?in/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;if(l.syntaxFlags.has(n.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&&(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,f=null,T=null,h=null,v=null,m=[];{let n=0,i=e.value[n];for(;i&&(!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(f)return!1;f=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(T||!f)return!1;T=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||!f||!T)return!1;h=i,n++,i=e.value[n]}for(;i&&(!o.isTokenNode(i)||i.value[0]!==t.TokenType.Comma);)n++,i=e.value[n];if(v=i,!v)return!1;m=e.value.slice(n+1)}if(!f)return!1;if(T&&!h)return!1;if(h&&!T)return!1;const k=parseColorStops(m);if(!k)return!1;const g=interpolateColorsInColorStopsList(k,f,T,n);if(!g)return!1;const N=trim([...e.value.slice(0,e.value.indexOf(d)),...e.value.slice(e.value.indexOf(h||f)+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(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}),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,10 +1,14 @@
|
|
|
1
1
|
import type { PluginCreator } from 'postcss';
|
|
2
|
+
|
|
2
3
|
/** postcss-gradients-interpolation-method plugin options */
|
|
3
|
-
export type pluginOptions = {
|
|
4
|
+
export declare type pluginOptions = {
|
|
4
5
|
/** Preserve the original notation. default: true */
|
|
5
6
|
preserve?: boolean;
|
|
6
7
|
/** Enable "@csstools/postcss-progressive-custom-properties". default: true */
|
|
7
8
|
enableProgressiveCustomProperties?: boolean;
|
|
8
9
|
};
|
|
10
|
+
|
|
9
11
|
declare const postcssPlugin: PluginCreator<pluginOptions>;
|
|
10
12
|
export default postcssPlugin;
|
|
13
|
+
|
|
14
|
+
export { }
|
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 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}from"@csstools/css-tokenizer";import{serializeP3 as v,color as h,colorDataFitsRGB_Gamut 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}from"@csstools/css-tokenizer";import{serializeP3 as v,color as h,colorDataFitsRGB_Gamut as m,serializeRGB as d,SyntaxFlag as g}from"@csstools/css-color-parser";const w=/(repeating-)?(linear|radial|conic)-gradient\(.*?in/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||v(l.colorData,!1).toString()!==v(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=h(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=v(a[o].colorData,!1):a[o].color=d(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=h(l);if(a){if(t.color)return!1;if(a.syntaxFlags.has(g.Experimental))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,x=/^(shorter|longer|increasing|decreasing)$/i,A=/^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,m=[];{let e=0,t=o.value[e];for(;t&&(!s(t)||t.value[0]!==p.Ident||!A.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&&x.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(;t&&(!s(t)||t.value[0]!==p.Comma);)e++,t=o.value[e];if(h=t,!h)return!1;m=o.value.slice(e+1)}if(!u)return!1;if(f&&!v)return!1;if(v&&!f)return!1;const d=parseColorStops(m);if(!d)return!1;const g=interpolateColorsInColorStopsList(d,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(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}),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};
|
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": "4.0.
|
|
4
|
+
"version": "4.0.8",
|
|
5
5
|
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
|
|
6
6
|
"license": "MIT-0",
|
|
7
7
|
"funding": [
|
|
@@ -17,15 +17,18 @@
|
|
|
17
17
|
"engines": {
|
|
18
18
|
"node": "^14 || ^16 || >=18"
|
|
19
19
|
},
|
|
20
|
+
"type": "module",
|
|
20
21
|
"main": "dist/index.cjs",
|
|
21
22
|
"module": "dist/index.mjs",
|
|
22
|
-
"types": "dist/index.d.ts",
|
|
23
23
|
"exports": {
|
|
24
24
|
".": {
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
"import": {
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"default": "./dist/index.mjs"
|
|
28
|
+
},
|
|
29
|
+
"require": {
|
|
30
|
+
"default": "./dist/index.cjs"
|
|
31
|
+
}
|
|
29
32
|
}
|
|
30
33
|
},
|
|
31
34
|
"files": [
|
|
@@ -35,25 +38,14 @@
|
|
|
35
38
|
"dist"
|
|
36
39
|
],
|
|
37
40
|
"dependencies": {
|
|
38
|
-
"@csstools/css-color-parser": "^1.
|
|
39
|
-
"@csstools/css-parser-algorithms": "^2.
|
|
40
|
-
"@csstools/css-tokenizer": "^2.2.
|
|
41
|
-
"@csstools/postcss-progressive-custom-properties": "^3.0.
|
|
41
|
+
"@csstools/css-color-parser": "^1.5.0",
|
|
42
|
+
"@csstools/css-parser-algorithms": "^2.4.0",
|
|
43
|
+
"@csstools/css-tokenizer": "^2.2.2",
|
|
44
|
+
"@csstools/postcss-progressive-custom-properties": "^3.0.3"
|
|
42
45
|
},
|
|
43
46
|
"peerDependencies": {
|
|
44
47
|
"postcss": "^8.4"
|
|
45
48
|
},
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"@csstools/postcss-tape": "*"
|
|
48
|
-
},
|
|
49
|
-
"scripts": {
|
|
50
|
-
"build": "rollup -c ../../rollup/default.mjs",
|
|
51
|
-
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
|
|
52
|
-
"lint": "node ../../.github/bin/format-package-json.mjs",
|
|
53
|
-
"prepublishOnly": "npm run build && npm run test",
|
|
54
|
-
"test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs",
|
|
55
|
-
"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
|
|
56
|
-
},
|
|
57
49
|
"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme",
|
|
58
50
|
"repository": {
|
|
59
51
|
"type": "git",
|
|
@@ -75,14 +67,5 @@
|
|
|
75
67
|
"radial",
|
|
76
68
|
"repeating",
|
|
77
69
|
"syntax"
|
|
78
|
-
]
|
|
79
|
-
"csstools": {
|
|
80
|
-
"cssdbId": "gradients-interpolation-method",
|
|
81
|
-
"exportName": "postcssGradientsInterpolationMethod",
|
|
82
|
-
"humanReadableName": "PostCSS Gradients Interpolation Method",
|
|
83
|
-
"specUrl": "https://drafts.csswg.org/css-images-4/#linear-gradients"
|
|
84
|
-
},
|
|
85
|
-
"volta": {
|
|
86
|
-
"extends": "../../package.json"
|
|
87
|
-
}
|
|
70
|
+
]
|
|
88
71
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { ColorData } from '@csstools/css-color-parser';
|
|
2
|
-
import type { ComponentValue } from '@csstools/css-parser-algorithms';
|
|
3
|
-
import { TokenNode } from '@csstools/css-parser-algorithms';
|
|
4
|
-
export type ColorStop = {
|
|
5
|
-
color: ComponentValue;
|
|
6
|
-
colorData: ColorData;
|
|
7
|
-
position: ComponentValue;
|
|
8
|
-
};
|
|
9
|
-
export declare function interpolateColorsInColorStopsList(colorStops: Array<ColorStop>, colorSpace: TokenNode, hueInterpolationMethod: TokenNode | null, wideGamut?: boolean): Array<ComponentValue> | false;
|
package/dist/is-gradient.d.ts
DELETED