@csstools/postcss-gradients-interpolation-method 1.0.1 → 2.0.0
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 +4 -0
- package/README.md +9 -10
- package/dist/color-stop-list.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.mjs +1 -1
- package/package.json +11 -6
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
# PostCSS Gradients Interpolation Method [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][
|
|
1
|
+
# PostCSS Gradients Interpolation Method [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
|
|
2
2
|
|
|
3
|
-
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gradients-interpolation-method.svg" height="20">][npm-url]
|
|
4
|
-
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url]
|
|
5
|
-
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
|
|
6
|
-
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
|
|
3
|
+
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-gradients-interpolation-method.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
|
|
7
4
|
|
|
8
5
|
[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Specification].
|
|
9
6
|
|
|
@@ -75,8 +72,13 @@ postcss([
|
|
|
75
72
|
[PostCSS Gradients Interpolation Method] runs in all Node environments, with special
|
|
76
73
|
instructions for:
|
|
77
74
|
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
- [Node](INSTALL.md#node)
|
|
76
|
+
- [PostCSS CLI](INSTALL.md#postcss-cli)
|
|
77
|
+
- [PostCSS Load Config](INSTALL.md#postcss-load-config)
|
|
78
|
+
- [Webpack](INSTALL.md#webpack)
|
|
79
|
+
- [Next.js](INSTALL.md#nextjs)
|
|
80
|
+
- [Gulp](INSTALL.md#gulp)
|
|
81
|
+
- [Grunt](INSTALL.md#grunt)
|
|
80
82
|
|
|
81
83
|
## Options
|
|
82
84
|
|
|
@@ -156,9 +158,6 @@ _Custom properties do not fallback to the previous declaration_
|
|
|
156
158
|
[discord]: https://discord.gg/bUadyRwkJS
|
|
157
159
|
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method
|
|
158
160
|
|
|
159
|
-
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
|
|
160
|
-
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
|
|
161
161
|
[PostCSS]: https://github.com/postcss/postcss
|
|
162
|
-
[PostCSS Loader]: https://github.com/postcss/postcss-loader
|
|
163
162
|
[PostCSS Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method
|
|
164
163
|
[CSS Specification]: https://drafts.csswg.org/css-images-4/#linear-gradients
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),
|
|
1
|
+
"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),o=require("postcss-value-parser");function colorStopList(e,t){const n=[];let r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]};for(let o=0;o<e.length;o++){const t=e[o];"div"!==t.type||","!==t.value?r.nodes.push(t):(n.push(r),r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]})}n.push(r);const s=[];for(let e=0;e<n.length;e++){const t=n[e];switch(t.nodes.length){case 0:break;case 1:return!1;case 2:t.color=o.stringify(t.nodes[0]),t.colorStopLength=o.stringify(t.nodes[1]),s.push(t);break;case 3:s.push({color:o.stringify(t.nodes[0]),colorStopLength:o.stringify(t.nodes[1]),colorHintBetween:[],nodes:[t.nodes[0],t.nodes[1]]}),s.push({color:o.stringify(t.nodes[0]),colorStopLength:o.stringify(t.nodes[2]),colorHintBetween:[],nodes:[t.nodes[0],t.nodes[2]]})}}for(let e=0;e<s.length;e++){const o=s[e];o.color||(o.color=`color-mix(in ${t}, ${s[e-1].color} 50%, ${s[e+1].color} 50%)`,o.colorHintBetween=[s[e-1],s[e+1]])}return s}function includesGradientsFunction(e){return e.includes("in ")&&(e.includes("conic-gradient(")||e.includes("linear-gradient(")||e.includes("radial-gradient(")||e.includes("repeating-conic-gradient(")||e.includes("repeating-linear-gradient(")||e.includes("repeating-radial-gradient("))}function hasSupportsAtRuleAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("supports"===o.name&&includesGradientsFunction(o.params))return!0;o=o.parent}else o=o.parent;return!1}const t=["shorter","longer","increasing","decreasing","specified"],basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n,{result:r}){if(!includesGradientsFunction(n.value))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=o(n.value)}catch(e){n.warn(r,`Failed to parse value '${n.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===s)return;let i=!1;if(s.walk((e=>{if("function"!==e.type||"conic-gradient"!==(n=e.value)&&"linear-gradient"!==n&&"radial-gradient"!==n&&"repeating-conic-gradient"!==n&&"repeating-linear-gradient"!==n&&"repeating-radial-gradient"!==n)return;var n;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),s={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;e<r.length;e++){const n=r[e];if("div"===n.type&&","===n.value){const t=s.interpolationArguments.map((e=>o.stringify(e))).join(" "),n=colorStopList(r.slice(e),t);if(n){s.colorStops=n;break}t&&(i=!0);break}if("word"===n.type&&"in"===n.value&&r[e+1]){if(s.interpolationArguments.push(r[e+1]),e++,r[e+1]&&"word"===r[e+1].type&&t.includes(r[e+1].value)){s.interpolationArguments.push(r[e+1]),e++;continue}}else s.argumentsRemainder.push(n)}if(!s.interpolationArguments.length||!s.colorStops.length)return;e.nodes=[],s.argumentsRemainder.length&&(e.nodes.push(...s.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" "}]))),e.nodes.push({type:"div",value:","}));const l=s.interpolationArguments.map((e=>o.stringify(e))).join(" ");for(let t=0;t<s.colorStops.length;t++){const n=s.colorStops[t],r=s.colorStops[t+1];if(r)if(n.color!==r.color)for(let t=0;t<10;t++){if(0===t){e.nodes.push(o(`${n.color} ${n.colorStopLength}`),{type:"div",value:","});continue}const s=`color-mix(in ${l}, ${n.color} ${100-10*t}%, ${r.color} ${10*t}%)`,i=`calc(${n.colorStopLength} + ((${r.colorStopLength} - ${n.colorStopLength}) * ${t/10}))`;e.nodes.push(o(`${s} ${i}`),{type:"div",value:","})}else e.nodes.push(o(`${n.color} ${n.colorStopLength}`),{type:"div",value:","});else e.nodes.push(o(`${n.color} ${n.colorStopLength}`))}})),i)return void n.warn(r,`Failed to parse value '${n.value}' as a CSS gradient with interpolation. Leaving the original value intact.`);const l=o.stringify(s);l!==n.value&&(e.preserve?n.cloneBefore({prop:n.prop,value:l}):n.value=l)}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { PluginCreator } from 'postcss';
|
|
2
|
-
|
|
2
|
+
/** postcss-gradients-interpolation-method plugin options */
|
|
3
|
+
export type pluginOptions = {
|
|
4
|
+
/** Preserve the original notation. default: true */
|
|
3
5
|
preserve?: boolean;
|
|
6
|
+
/** Enable "@csstools/postcss-progressive-custom-properties". default: true */
|
|
4
7
|
enableProgressiveCustomProperties?: boolean;
|
|
5
8
|
};
|
|
6
9
|
declare const postcssPlugin: PluginCreator<pluginOptions>;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@csstools/postcss-progressive-custom-properties";import o from"postcss-value-parser";function
|
|
1
|
+
import e from"@csstools/postcss-progressive-custom-properties";import o from"postcss-value-parser";function colorStopList(e,t){const n=[];let r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]};for(let o=0;o<e.length;o++){const t=e[o];"div"!==t.type||","!==t.value?r.nodes.push(t):(n.push(r),r={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]})}n.push(r);const s=[];for(let e=0;e<n.length;e++){const t=n[e];switch(t.nodes.length){case 0:break;case 1:return!1;case 2:t.color=o.stringify(t.nodes[0]),t.colorStopLength=o.stringify(t.nodes[1]),s.push(t);break;case 3:s.push({color:o.stringify(t.nodes[0]),colorStopLength:o.stringify(t.nodes[1]),colorHintBetween:[],nodes:[t.nodes[0],t.nodes[1]]}),s.push({color:o.stringify(t.nodes[0]),colorStopLength:o.stringify(t.nodes[2]),colorHintBetween:[],nodes:[t.nodes[0],t.nodes[2]]})}}for(let e=0;e<s.length;e++){const o=s[e];o.color||(o.color=`color-mix(in ${t}, ${s[e-1].color} 50%, ${s[e+1].color} 50%)`,o.colorHintBetween=[s[e-1],s[e+1]])}return s}function includesGradientsFunction(e){return e.includes("in ")&&(e.includes("conic-gradient(")||e.includes("linear-gradient(")||e.includes("radial-gradient(")||e.includes("repeating-conic-gradient(")||e.includes("repeating-linear-gradient(")||e.includes("repeating-radial-gradient("))}function hasSupportsAtRuleAncestor(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("supports"===o.name&&includesGradientsFunction(o.params))return!0;o=o.parent}else o=o.parent;return!1}const t=["shorter","longer","increasing","decreasing","specified"],basePlugin=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(n,{result:r}){if(!includesGradientsFunction(n.value))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=o(n.value)}catch(e){n.warn(r,`Failed to parse value '${n.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===s)return;let i=!1;if(s.walk((e=>{if("function"!==e.type||"conic-gradient"!==(n=e.value)&&"linear-gradient"!==n&&"radial-gradient"!==n&&"repeating-conic-gradient"!==n&&"repeating-linear-gradient"!==n&&"repeating-radial-gradient"!==n)return;var n;const r=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),s={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;e<r.length;e++){const n=r[e];if("div"===n.type&&","===n.value){const t=s.interpolationArguments.map((e=>o.stringify(e))).join(" "),n=colorStopList(r.slice(e),t);if(n){s.colorStops=n;break}t&&(i=!0);break}if("word"===n.type&&"in"===n.value&&r[e+1]){if(s.interpolationArguments.push(r[e+1]),e++,r[e+1]&&"word"===r[e+1].type&&t.includes(r[e+1].value)){s.interpolationArguments.push(r[e+1]),e++;continue}}else s.argumentsRemainder.push(n)}if(!s.interpolationArguments.length||!s.colorStops.length)return;e.nodes=[],s.argumentsRemainder.length&&(e.nodes.push(...s.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" "}]))),e.nodes.push({type:"div",value:","}));const l=s.interpolationArguments.map((e=>o.stringify(e))).join(" ");for(let t=0;t<s.colorStops.length;t++){const n=s.colorStops[t],r=s.colorStops[t+1];if(r)if(n.color!==r.color)for(let t=0;t<10;t++){if(0===t){e.nodes.push(o(`${n.color} ${n.colorStopLength}`),{type:"div",value:","});continue}const s=`color-mix(in ${l}, ${n.color} ${100-10*t}%, ${r.color} ${10*t}%)`,i=`calc(${n.colorStopLength} + ((${r.colorStopLength} - ${n.colorStopLength}) * ${t/10}))`;e.nodes.push(o(`${s} ${i}`),{type:"div",value:","})}else e.nodes.push(o(`${n.color} ${n.colorStopLength}`),{type:"div",value:","});else e.nodes.push(o(`${n.color} ${n.colorStopLength}`))}})),i)return void n.warn(r,`Failed to parse value '${n.value}' as a CSS gradient with interpolation. Leaving the original value intact.`);const l=o.stringify(s);l!==n.value&&(e.preserve?n.cloneBefore({prop:n.prop,value:l}):n.value=l)}});basePlugin.postcss=!0;const postcssPlugin=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
|
package/package.json
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csstools/postcss-gradients-interpolation-method",
|
|
3
3
|
"description": "Use interpolation methods in CSS gradient functions",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "2.0.0",
|
|
5
5
|
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
|
|
6
6
|
"license": "CC0-1.0",
|
|
7
|
+
"funding": {
|
|
8
|
+
"type": "opencollective",
|
|
9
|
+
"url": "https://opencollective.com/csstools"
|
|
10
|
+
},
|
|
7
11
|
"engines": {
|
|
8
|
-
"node": "^
|
|
12
|
+
"node": "^14 || ^16 || >=18"
|
|
9
13
|
},
|
|
10
14
|
"main": "dist/index.cjs",
|
|
11
15
|
"module": "dist/index.mjs",
|
|
@@ -24,15 +28,16 @@
|
|
|
24
28
|
"dist"
|
|
25
29
|
],
|
|
26
30
|
"dependencies": {
|
|
27
|
-
"@csstools/postcss-progressive-custom-properties": "^
|
|
31
|
+
"@csstools/postcss-progressive-custom-properties": "^2.0.0",
|
|
28
32
|
"postcss-value-parser": "^4.2.0"
|
|
29
33
|
},
|
|
30
34
|
"peerDependencies": {
|
|
31
|
-
"postcss": "^8.
|
|
35
|
+
"postcss": "^8.4"
|
|
32
36
|
},
|
|
33
37
|
"scripts": {
|
|
34
|
-
"
|
|
35
|
-
"
|
|
38
|
+
"prebuild": "npm run clean",
|
|
39
|
+
"build": "rollup -c ../../rollup/default.mjs",
|
|
40
|
+
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
|
|
36
41
|
"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
|
|
37
42
|
"lint": "npm run lint:eslint && npm run lint:package-json",
|
|
38
43
|
"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
|