@csstools/postcss-gradients-interpolation-method 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changes to PostCSS Gradients Interpolation Method
+
+### 1.0.0 (March 4, 2022)
+
+- Initial version

package/LICENSE.md

@@ -0,0 +1,108 @@
+# CC0 1.0 Universal
+
+## Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator and
+subsequent owner(s) (each and all, an “owner”) of an original work of
+authorship and/or a database (each, a “Work”).
+
+Certain owners wish to permanently relinquish those rights to a Work for the
+purpose of contributing to a commons of creative, cultural and scientific works
+(“Commons”) that the public can reliably and without fear of later claims of
+infringement build upon, modify, incorporate in other works, reuse and
+redistribute as freely as possible in any form whatsoever and for any purposes,
+including without limitation commercial purposes. These owners may contribute
+to the Commons to promote the ideal of a free culture and the further
+production of creative, cultural and scientific works, or to gain reputation or
+greater distribution for their Work in part through the use and efforts of
+others.
+
+For these and/or other purposes and motivations, and without any expectation of
+additional consideration or compensation, the person associating CC0 with a
+Work (the “Affirmer”), to the extent that he or she is an owner of Copyright
+and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and
+publicly distribute the Work under its terms, with knowledge of his or her
+Copyright and Related Rights in the Work and the meaning and intended legal
+effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+   protected by copyright and related or neighboring rights (“Copyright and
+   Related Rights”). Copyright and Related Rights include, but are not limited
+   to, the following:
+   1. the right to reproduce, adapt, distribute, perform, display, communicate,
+      and translate a Work;
+   2. moral rights retained by the original author(s) and/or performer(s);
+   3. publicity and privacy rights pertaining to a person’s image or likeness
+      depicted in a Work;
+   4. rights protecting against unfair competition in regards to a Work,
+      subject to the limitations in paragraph 4(i), below;
+   5. rights protecting the extraction, dissemination, use and reuse of data in
+      a Work;
+   6. database rights (such as those arising under Directive 96/9/EC of the
+      European Parliament and of the Council of 11 March 1996 on the legal
+      protection of databases, and under any national implementation thereof,
+      including any amended or successor version of such directive); and
+   7. other similar, equivalent or corresponding rights throughout the world
+      based on applicable law or treaty, and any national implementations
+      thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of,
+   applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
+   unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright
+   and Related Rights and associated claims and causes of action, whether now
+   known or unknown (including existing as well as future claims and causes of
+   action), in the Work (i) in all territories worldwide, (ii) for the maximum
+   duration provided by applicable law or treaty (including future time
+   extensions), (iii) in any current or future medium and for any number of
+   copies, and (iv) for any purpose whatsoever, including without limitation
+   commercial, advertising or promotional purposes (the “Waiver”). Affirmer
+   makes the Waiver for the benefit of each member of the public at large and
+   to the detriment of Affirmer’s heirs and successors, fully intending that
+   such Waiver shall not be subject to revocation, rescission, cancellation,
+   termination, or any other legal or equitable action to disrupt the quiet
+   enjoyment of the Work by the public as contemplated by Affirmer’s express
+   Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be
+   judged legally invalid or ineffective under applicable law, then the Waiver
+   shall be preserved to the maximum extent permitted taking into account
+   Affirmer’s express Statement of Purpose. In addition, to the extent the
+   Waiver is so judged Affirmer hereby grants to each affected person a
+   royalty-free, non transferable, non sublicensable, non exclusive,
+   irrevocable and unconditional license to exercise Affirmer’s Copyright and
+   Related Rights in the Work (i) in all territories worldwide, (ii) for the
+   maximum duration provided by applicable law or treaty (including future time
+   extensions), (iii) in any current or future medium and for any number of
+   copies, and (iv) for any purpose whatsoever, including without limitation
+   commercial, advertising or promotional purposes (the “License”). The License
+   shall be deemed effective as of the date CC0 was applied by Affirmer to the
+   Work. Should any part of the License for any reason be judged legally
+   invalid or ineffective under applicable law, such partial invalidity or
+   ineffectiveness shall not invalidate the remainder of the License, and in
+   such case Affirmer hereby affirms that he or she will not (i) exercise any
+   of his or her remaining Copyright and Related Rights in the Work or (ii)
+   assert any associated claims and causes of action with respect to the Work,
+   in either case contrary to Affirmer’s express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+   1. No trademark or patent rights held by Affirmer are waived, abandoned,
+      surrendered, licensed or otherwise affected by this document.
+   2. Affirmer offers the Work as-is and makes no representations or warranties
+      of any kind concerning the Work, express, implied, statutory or
+      otherwise, including without limitation warranties of title,
+      merchantability, fitness for a particular purpose, non infringement, or
+      the absence of latent or other defects, accuracy, or the present or
+      absence of errors, whether or not discoverable, all to the greatest
+      extent permissible under applicable law.
+   3. Affirmer disclaims responsibility for clearing rights of other persons
+      that may apply to the Work or any use thereof, including without
+      limitation any person’s Copyright and Related Rights in the Work.
+      Further, Affirmer disclaims responsibility for obtaining any necessary
+      consents, permissions or other rights required for any use of the Work.
+   4. Affirmer understands and acknowledges that Creative Commons is not a
+      party to this document and has no duty or obligation with respect to this
+      CC0 or use of the Work.
+
+For more information, please see
+http://creativecommons.org/publicdomain/zero/1.0/.

package/README.md

@@ -0,0 +1,164 @@
+# PostCSS Gradients Interpolation Method [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+
+[<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]
+
+[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Specification].
+
+```pcss
+.oklch {
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+
+/* becomes */
+
+.oklch {
+	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
+:root {
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+}
+```
+
+## Warnings
+
+⚠️ This plugin assumes you have a separate plugin to transform `color-mix()` to something older browsers can understand.
+
+⚠️ Color stops with only a color and Interpolation hints are not supported.
+We can not statically check if a certain value is a single color or an interpolation hint.
+
+These are equivalent in PostCSS :
+
+```pcss
+	--red: red;
+	/* Color stop variable */
+	background-image: linear-gradient(90deg, black, var(--red), blue);
+
+	--perc-10: 10%;
+	/* Interpolation hint */
+	background-image: linear-gradient(90deg, black, var(--perc-10), blue);
+```
+
+## Usage
+
+Add [PostCSS Gradients Interpolation Method] to your project:
+
+```bash
+npm install postcss @csstools/postcss-gradients-interpolation-method --save-dev
+```
+
+Use it as a [PostCSS] plugin:
+
+```js
+const postcss = require('postcss');
+const postcssGradientsInterpolationMethod = require('@csstools/postcss-gradients-interpolation-method');
+
+postcss([
+	postcssGradientsInterpolationMethod(/* pluginOptions */)
+]).process(YOUR_CSS /*, processOptions */);
+```
+
+[PostCSS Gradients Interpolation Method] runs in all Node environments, with special
+instructions for:
+
+| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
+| --- | --- | --- | --- | --- | --- |
+
+## Options
+
+### preserve
+
+The `preserve` option determines whether the original notation
+is preserved. By default, it is not preserved.
+
+```js
+postcssGradientsInterpolationMethod({ preserve: true })
+```
+
+```pcss
+.oklch {
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+
+/* becomes */
+
+.oklch {
+	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+}
+
+@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
+:root {
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+}
+```
+
+### enableProgressiveCustomProperties
+
+The `enableProgressiveCustomProperties` option determines whether the original notation
+is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
+
+⚠️ 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).
+
+```js
+postcssGradientsInterpolationMethod({ enableProgressiveCustomProperties: false })
+```
+
+```pcss
+.oklch {
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+
+/* becomes */
+
+.oklch {
+	background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+	background: linear-gradient(in oklch 90deg, black 25% , blue 75%);
+}
+
+:root {
+	--background: linear-gradient(90deg ,black 25%,color-mix(in oklch, black 90%, blue 10%) calc(25% + ((75% - 25%) * 0.1)),color-mix(in oklch, black 80%, blue 20%) calc(25% + ((75% - 25%) * 0.2)),color-mix(in oklch, black 70%, blue 30%) calc(25% + ((75% - 25%) * 0.3)),color-mix(in oklch, black 60%, blue 40%) calc(25% + ((75% - 25%) * 0.4)),color-mix(in oklch, black 50%, blue 50%) calc(25% + ((75% - 25%) * 0.5)),color-mix(in oklch, black 40%, blue 60%) calc(25% + ((75% - 25%) * 0.6)),color-mix(in oklch, black 30%, blue 70%) calc(25% + ((75% - 25%) * 0.7)),color-mix(in oklch, black 20%, blue 80%) calc(25% + ((75% - 25%) * 0.8)),color-mix(in oklch, black 10%, blue 90%) calc(25% + ((75% - 25%) * 0.9)),blue 75%);
+	--background: linear-gradient(in oklch 90deg, black 25%, blue 75%);
+}
+```
+
+_Custom properties do not fallback to the previous declaration_
+
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
+[css-url]: https://cssdb.org/#TODO
+[discord]: https://discord.gg/bUadyRwkJS
+[npm-url]: https://www.npmjs.com/package/@csstools/postcss-gradients-interpolation-method
+
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
+[PostCSS]: https://github.com/postcss/postcss
+[PostCSS Loader]: https://github.com/postcss/postcss-loader
+[PostCSS Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method
+[CSS Specification]: https://drafts.csswg.org/css-images-4/#linear-gradients

package/dist/color-stop-list.d.ts

@@ -0,0 +1,8 @@
+import type { Node } from 'postcss-value-parser';
+export declare type ColorStop = {
+    color: string;
+    colorStopLength: string;
+    colorHintBetween: Array<ColorStop>;
+    nodes: Array<Node>;
+};
+export declare function colorStopList(nodes: Array<Node>, interpolationArguments: string): Array<ColorStop> | false;

package/dist/has-supports-at-rule-ancestor.d.ts

@@ -0,0 +1,2 @@
+import type { Node } from 'postcss';
+export declare function hasSupportsAtRuleAncestor(node: Node): boolean;

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),t=require("postcss-value-parser");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e),r=o(t);function s(e,t){const o=[];let n={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]};for(let t=0;t<e.length;t++){const r=e[t];"div"!==r.type||","!==r.value?n.nodes.push(r):(o.push(n),n={color:"",colorStopLength:"",colorHintBetween:[],nodes:[]})}o.push(n);const s=[];for(let e=0;e<o.length;e++){const t=o[e];switch(t.nodes.length){case 0:break;case 1:return!1;case 2:t.color=r.default.stringify(t.nodes[0]),t.colorStopLength=r.default.stringify(t.nodes[1]),s.push(t);break;case 3:s.push({color:r.default.stringify(t.nodes[0]),colorStopLength:r.default.stringify(t.nodes[1]),colorHintBetween:[],nodes:[t.nodes[0],t.nodes[1]]}),s.push({color:r.default.stringify(t.nodes[0]),colorStopLength:r.default.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 i(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("))}const l=["shorter","longer","increasing","decreasing","specified"],a=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(t,{result:o}){if(!i(t.value))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name&&i(t.params))return!0;t=t.parent}else t=t.parent;return!1}(t))return;let n;try{n=r.default(t.value)}catch(e){t.warn(o,`Failed to parse value '${t.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===n)return;let a=!1;if(n.walk((e=>{if("function"!==e.type||"conic-gradient"!==(t=e.value)&&"linear-gradient"!==t&&"radial-gradient"!==t&&"repeating-conic-gradient"!==t&&"repeating-linear-gradient"!==t&&"repeating-radial-gradient"!==t)return;var t;const o=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),n={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;e<o.length;e++){const t=o[e];if("div"===t.type&&","===t.value){const t=n.interpolationArguments.map((e=>r.default.stringify(e))).join(" "),i=s(o.slice(e),t);if(i){n.colorStops=i;break}t&&(a=!0);break}if("word"===t.type&&"in"===t.value&&o[e+1]){if(n.interpolationArguments.push(o[e+1]),e++,o[e+1]&&"word"===o[e+1].type&&l.includes(o[e+1].value)){n.interpolationArguments.push(o[e+1]),e++;continue}}else n.argumentsRemainder.push(t)}if(!n.interpolationArguments.length||!n.colorStops.length)return;e.nodes=[],n.argumentsRemainder.length&&(e.nodes.push(...n.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" "}]))),e.nodes.push({type:"div",value:","}));const i=n.interpolationArguments.map((e=>r.default.stringify(e))).join(" ");for(let t=0;t<n.colorStops.length;t++){const o=n.colorStops[t],s=n.colorStops[t+1];if(s)if(o.color!==s.color)for(let t=0;t<10;t++){if(0===t){e.nodes.push(r.default(`${o.color} ${o.colorStopLength}`),{type:"div",value:","});continue}const n=`color-mix(in ${i}, ${o.color} ${100-10*t}%, ${s.color} ${10*t}%)`,l=`calc(${o.colorStopLength} + ((${s.colorStopLength} - ${o.colorStopLength}) * ${t/10}))`;e.nodes.push(r.default(`${n} ${l}`),{type:"div",value:","})}else e.nodes.push(r.default(`${o.color} ${o.colorStopLength}`),{type:"div",value:","});else e.nodes.push(r.default(`${o.color} ${o.colorStopLength}`))}})),a)return void t.warn(o,`Failed to parse value '${t.value}' as a CSS gradient with interpolation. Leaving the original value intact.`);const c=r.default.stringify(n);c!==t.value&&(e.preserve?t.cloneBefore({prop:t.prop,value:c}):t.value=c)}});a.postcss=!0;const c=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[n.default(),a(t)]}:a(t)};c.postcss=!0,module.exports=c;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import type { PluginCreator } from 'postcss';
+declare type pluginOptions = {
+    preserve?: boolean;
+    enableProgressiveCustomProperties?: boolean;
+};
+declare const postcssPlugin: PluginCreator<pluginOptions>;
+export default postcssPlugin;

package/dist/index.mjs

@@ -0,0 +1 @@
+import e from"@csstools/postcss-progressive-custom-properties";import o from"postcss-value-parser";function t(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 n(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("))}const r=["shorter","longer","increasing","decreasing","specified"],s=e=>({postcssPlugin:"postcss-gradients-interpolation-method",Declaration(s,{result:i}){if(!n(s.value))return;if(function(e){let o=e.parent;for(;o;)if("atrule"===o.type){if("supports"===o.name&&n(o.params))return!0;o=o.parent}else o=o.parent;return!1}(s))return;let l;try{l=o(s.value)}catch(e){s.warn(i,`Failed to parse value '${s.value}' as a CSS gradient. Leaving the original value intact.`)}if(void 0===l)return;let a=!1;if(l.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 s=e.nodes.filter((e=>"comment"!==e.type&&"space"!==e.type)),i={interpolationArguments:[],argumentsRemainder:[],colorStops:[]};for(let e=0;e<s.length;e++){const n=s[e];if("div"===n.type&&","===n.value){const n=i.interpolationArguments.map((e=>o.stringify(e))).join(" "),r=t(s.slice(e),n);if(r){i.colorStops=r;break}n&&(a=!0);break}if("word"===n.type&&"in"===n.value&&s[e+1]){if(i.interpolationArguments.push(s[e+1]),e++,s[e+1]&&"word"===s[e+1].type&&r.includes(s[e+1].value)){i.interpolationArguments.push(s[e+1]),e++;continue}}else i.argumentsRemainder.push(n)}if(!i.interpolationArguments.length||!i.colorStops.length)return;e.nodes=[],i.argumentsRemainder.length&&(e.nodes.push(...i.argumentsRemainder.flatMap((e=>[e,{type:"space",value:" "}]))),e.nodes.push({type:"div",value:","}));const l=i.interpolationArguments.map((e=>o.stringify(e))).join(" ");for(let t=0;t<i.colorStops.length;t++){const n=i.colorStops[t],r=i.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}`))}})),a)return void s.warn(i,`Failed to parse value '${s.value}' as a CSS gradient with interpolation. Leaving the original value intact.`);const c=o.stringify(l);c!==s.value&&(e.preserve?s.cloneBefore({prop:s.prop,value:c}):s.value=c)}});s.postcss=!0;const i=o=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!0},o);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-gradients-interpolation-method",plugins:[e(),s(t)]}:s(t)};i.postcss=!0;export{i as default};

package/dist/is-gradient.d.ts

@@ -0,0 +1,2 @@
+export declare function includesGradientsFunction(str: string): boolean;
+export declare function isGradientsFunctions(str: string): boolean;

package/package.json

@@ -0,0 +1,74 @@
+{
+	"name": "@csstools/postcss-gradients-interpolation-method",
+	"description": "Use interpolation methods in CSS gradient functions",
+	"version": "1.0.0",
+	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
+	"license": "CC0-1.0",
+	"engines": {
+		"node": "^12 || ^14 || >=16"
+	},
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs",
+			"default": "./dist/index.mjs"
+		}
+	},
+	"files": [
+		"CHANGELOG.md",
+		"LICENSE.md",
+		"README.md",
+		"dist"
+	],
+	"peerDependencies": {
+		"postcss": "^8.3"
+	},
+	"devDependencies": {
+		"@csstools/postcss-progressive-custom-properties": "^1.1.0",
+		"postcss-value-parser": "^4.2.0"
+	},
+	"scripts": {
+		"build": "rollup -c ../../rollup/default.js",
+		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+		"docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs",
+		"lint": "npm run lint:eslint && npm run lint:package-json",
+		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run clean && npm run build && npm run test",
+		"test": "node .tape.mjs && npm run test:exports",
+		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
+	},
+	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method#readme",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/csstools/postcss-plugins.git",
+		"directory": "plugins/postcss-gradients-interpolation-method"
+	},
+	"bugs": "https://github.com/csstools/postcss-plugins/issues",
+	"keywords": [
+		"color",
+		"conic",
+		"css",
+		"gradients",
+		"interpolation",
+		"linear",
+		"postcss",
+		"postcss-plugin",
+		"radial",
+		"repeating",
+		"syntax"
+	],
+	"csstools": {
+		"cssdbId": "TODO",
+		"exportName": "postcssGradientsInterpolationMethod",
+		"humanReadableName": "PostCSS Gradients Interpolation Method",
+		"specUrl": "https://drafts.csswg.org/css-images-4/#linear-gradients"
+	},
+	"volta": {
+		"extends": "../../package.json"
+	}
+}