postcss-lab-function 4.0.4 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changes to PostCSS Lab Function
 
+### 4.1.0 (minor)
+
+- Add gamut mapping for out of gamut colors.
+- Add conversion to `display-p3` as a wider gamut fallback.
+
+[Read more about out of gamut colors](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-lab-function/README.md#out-of-gamut-colors)
+
+[Read more about `color(display-p3 0 0 0)`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color())
+
+```css
+.color-lab {
+	color: lab(40% 56.6 39);
+}
+
+/* with a display-p3 fallback : */
+.color {
+	color: rgb(179, 35, 35);
+	color: color(display-p3 0.64331 0.19245 0.16771);
+}
+```
+
 ### 4.0.4 (February 5, 2022)
 
 - Improved `es module` and `commonjs` compatibility

package/README.md

@@ -6,20 +6,28 @@
 [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
 
-  [PostCSS Lab Function] lets you use `lab` and `lch` color functions in
-  CSS, following the [CSS Color] specification.
+[PostCSS Lab Function] lets you use `lab` and `lch` color functions in
+CSS, following the [CSS Color] specification.
 
 ```pcss
-:root {
-  --firebrick: lab(40% 56.6 39);
-  --firebrick-a50: lch(40% 68.8 34.5 / 50%);
+.color-lab {
+	color: lab(40% 56.6 39);
+}
+
+.color-lch {
+	color: lch(40% 68.735435 34.568626);
 }
 
 /* becomes */
 
-:root {
-  --firebrick: rgb(178, 34, 34);
-  --firebrick-a50: rgba(178, 34, 34, .5);
+.color {
+	color: rgb(179, 35, 35);
+	color: color(display-p3 0.64331 0.19245 0.16771);
+}
+
+.color-lch {
+	color: rgb(179, 35, 35);
+	color: color(display-p3 0.64331 0.19245 0.16771);
 }
 ```
 
@@ -59,22 +67,93 @@ is preserved. By default, it is not preserved.
 postcssLabFunction({ preserve: true })
 ```
 
+```pcss
+.color {
+	color: lab(40% 56.6 39);
+}
+
+/* becomes */
+
+.color {
+	color: rgb(179, 35, 35);
+	color: color(display-p3 0.64331 0.19245 0.16771);
+	color: lab(40% 56.6 39);
+}
+```
+
+### 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
+postcssLabFunction({ enableProgressiveCustomProperties: false })
+```
+
 ```pcss
 :root {
-  --firebrick: lab(40% 56.6 39);
-  --firebrick-a50: lch(40% 68.8 34.5 / 50%);
+	--firebrick: lab(40% 56.6 39);
 }
 
 /* becomes */
 
 :root {
-  --firebrick: rgb(178, 34, 34);
-  --firebrick: lab(40% 56.6 39);
-  --firebrick-a50: rgba(178, 34, 34, .5);
-  --firebrick-a50: lch(40% 68.8 34.5 / 50%);
+	--firebrick: rgb(178, 34, 34); /* will never be used, not even in older browser */
+	--firebrick: color(display-p3 0.64331 0.19245 0.16771); /* will never be used, not even in older browser */
+	--firebrick: lab(40% 56.6 39);
 }
 ```
 
+### subFeatures
+
+#### displayP3
+
+The `subFeatures.displayP3` option determines if `color(display-p3 ...)` is used as a fallback.<br>
+By default, it is enabled.
+
+`display-p3` can display wider gamut colors than `rgb` on some devices.
+
+```js
+postcssOKLabFunction({
+	subFeatures: {
+		displayP3: false
+	}
+})
+```
+
+```pcss
+.color {
+	color: lab(40% 56.6 39);
+}
+
+/* becomes */
+
+.color {
+	color: rgb(179, 35, 35);
+	color: lab(40% 56.6 39);
+}
+```
+
+## Out of gamut colors
+
+Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.<br>
+Fallback values generated by [PostCSS Lab Function] are always mapped to a close alternative in sRGB.
+
+When setting `preserve` to `true` the original values will be used by some browsers and these may be clipped.<br>
+Certain browsers will have an incorrect color if this occurs.
+
+If the plugin detects out of gamut colors it will emit a warning :
+
+> "lch(95% 210 285)" is out of gamut for "display-p3". When "preserve: true" is set this will lead to unexpected results in some browsers.
+
+To resolve this warning you can use a color that is in gamut for `display-p3`.
+
+## Copyright : color conversions
+
+This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#lab-function
 [discord]: https://discord.gg/bUadyRwkJS

package/dist/convert-lab-to-display-p3.d.ts

@@ -0,0 +1,3 @@
+declare type color = [number, number, number];
+export declare function labToDisplayP3(labRaw: color): [color, boolean];
+export {};

package/dist/convert-lab-to-srgb.d.ts

@@ -0,0 +1,3 @@
+declare type color = [number, number, number];
+export declare function labToSRgb(labRaw: color): color;
+export {};

package/dist/convert-lch-to-display-p3.d.ts

@@ -0,0 +1,3 @@
+declare type color = [number, number, number];
+export declare function lchToDisplayP3(lch: color): [color, boolean];
+export {};

package/dist/convert-lch-to-srgb.d.ts

@@ -0,0 +1,3 @@
+declare type color = [number, number, number];
+export declare function lchToSRgb(lch: color): color;
+export {};

package/dist/css-color-4/conversions.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
+ */
+declare type color = [number, number, number];
+export declare const D50: number[];
+export declare const D65: number[];
+export declare function lin_sRGB(RGB: color): color;
+export declare function gam_sRGB(RGB: color): color;
+export declare function lin_sRGB_to_XYZ(rgb: color): color;
+export declare function XYZ_to_lin_sRGB(XYZ: color): color;
+export declare function lin_P3(RGB: color): color;
+export declare function gam_P3(RGB: color): color;
+export declare function lin_P3_to_XYZ(rgb: color): color;
+export declare function XYZ_to_lin_P3(XYZ: color): color;
+export declare function lin_ProPhoto(RGB: color): color;
+export declare function gam_ProPhoto(RGB: color): color;
+export declare function lin_ProPhoto_to_XYZ(rgb: color): color;
+export declare function XYZ_to_lin_ProPhoto(XYZ: color): color;
+export declare function lin_a98rgb(RGB: color): color;
+export declare function gam_a98rgb(RGB: color): color;
+export declare function lin_a98rgb_to_XYZ(rgb: color): color;
+export declare function XYZ_to_lin_a98rgb(XYZ: color): color;
+export declare function lin_2020(RGB: color): color;
+export declare function gam_2020(RGB: color): color;
+export declare function lin_2020_to_XYZ(rgb: color): color;
+export declare function XYZ_to_lin_2020(XYZ: color): color;
+export declare function D65_to_D50(XYZ: color): color;
+export declare function D50_to_D65(XYZ: color): color;
+export declare function XYZ_to_Lab(XYZ: color): color;
+export declare function Lab_to_XYZ(Lab: color): color;
+export declare function Lab_to_LCH(Lab: color): color;
+export declare function LCH_to_Lab(LCH: color): color;
+export declare function XYZ_to_OKLab(XYZ: color): color;
+export declare function OKLab_to_XYZ(OKLab: color): color;
+export declare function OKLab_to_OKLCH(OKLab: color): color;
+export declare function OKLCH_to_OKLab(OKLCH: color): color;
+export declare function rectangular_premultiply(color: color, alpha: number): color;
+export declare function rectangular_un_premultiply(color: color, alpha: number): color;
+export declare function polar_premultiply(color: color, alpha: number, hueIndex: number): color;
+export declare function polar_un_premultiply(color: color, alpha: number, hueIndex: number): color;
+export declare function hsl_premultiply(color: color, alpha: number): color;
+export {};

package/dist/css-color-4/deltaEOK.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
+ */
+declare type color = [number, number, number];
+export declare function deltaEOK(reference: color, sample: color): number;
+export {};

package/dist/css-color-4/map-gamut.d.ts

@@ -0,0 +1,5 @@
+declare type color = [number, number, number];
+export declare function mapGamut(startOKLCH: color, toDestination: (x: color) => color, fromDestination: (x: color) => color): color;
+export declare function clip(color: color): color;
+export declare function inGamut(x: color): boolean;
+export {};

package/dist/css-color-4/multiply-matrices.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Simple matrix (and vector) multiplication
+ * Warning: No error handling for incompatible dimensions!
+ * @author Lea Verou 2020 MIT License
+ *
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
+ */
+export declare function multiplyMatrices(a: Array<Array<number>> | Array<number>, b: Array<Array<number>> | Array<number>): Array<Array<number>> | Array<number>;

package/dist/css-color-4/utilities.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js
+ */
+declare type color = [number, number, number];
+export declare function sRGB_to_luminance(RGB: color): number;
+export declare function contrast(RGB1: color, RGB2: color): number;
+export declare function sRGB_to_LCH(RGB: color): color;
+export declare function P3_to_LCH(RGB: color): color;
+export declare function r2020_to_LCH(RGB: color): color;
+export declare function LCH_to_sRGB(LCH: color): color;
+export declare function LCH_to_P3(LCH: color): color;
+export declare function LCH_to_r2020(LCH: color): color;
+export declare function hslToRgb(hsl: color): color;
+export declare function hueToRgb(t1: number, t2: number, hue: number): number;
+export declare function naive_CMYK_to_sRGB(CMYK: [number, number, number, number]): color;
+export declare function naive_sRGB_to_CMYK(RGB: color): [number, number, number, number];
+export declare function XYZ_to_xy(XYZ: color): [number, number];
+export declare function xy_to_uv(xy: [number, number]): [number, number];
+export declare function XYZ_to_uv(XYZ: color): [number, number];
+export {};

package/dist/has-fallback-decl.d.ts

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

package/dist/index.cjs

@@ -1 +1,30 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var e=t(require("postcss-value-parser"));function n(t){return a(u(t,!0))}function r(t){return a(u(function(t){return[t[0],t[1]*Math.cos(t[2]*Math.PI/180),t[1]*Math.sin(t[2]*Math.PI/180)]}(t),!1))}function u(t,e){const[n,r,u]=t,a=Math.min(Math.max(n,0),100);let l=0,p=0;e?(l=Math.min(Math.max(r,-127),128),p=Math.min(Math.max(u,-127),128)):(l=r,p=u);const v=(a+16)/116,h=l/500+v,b=v-p/200,[m,M,g]=[Math.pow(h,3)>s?Math.pow(h,3):(116*h-16)/d,a>d*s?Math.pow((a+16)/116,3):a/d,Math.pow(b,3)>s?Math.pow(b,3):(116*b-16)/d],[w,y,x]=o([m*i,M*c,g*f],[[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]]);return[w,y,x]}function a(t){const[e,n,r]=t,[u,a,l]=o([e,n,r],[[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]]),[i,c,f]=[u,a,l].map((t=>t>.31308?1.055*Math.pow(t/100,1/2.4)*100-5.5:12.92*t));return[i,c,f]}function o(t,e){return e.map((e=>e.reduce(((e,n,r)=>e+t[r]*l*(n*l)/l/l),0)))}const l=1e8,[i,c,f]=[96.422,100,82.521],s=Math.pow(6,3)/Math.pow(29,3),d=Math.pow(29,3)/Math.pow(3,3);function p(t){const u=t.value,a=t.nodes.slice().filter((t=>"comment"!==t.type&&"space"!==t.type));let o=null;if("lab"===u?o=function(t){if(!h(t[0]))return null;if(!v(t[1]))return null;if(!v(t[2]))return null;const n={l:e.default.unit(t[0].value),lNode:t[0],a:e.default.unit(t[1].value),aNode:t[1],b:e.default.unit(t[2].value),bNode:t[2]};M(t[3])&&(n.slash=t[3]);(b(t[4])||m(t[4]))&&(n.alpha=t[4]);return n}(a):"lch"===u&&(o=function(t){if(!h(t[0]))return null;if(!v(t[1]))return null;if(!function(t){if(!t||"word"!==t.type)return!1;if(!y(t))return!1;const n=e.default.unit(t.value);if(!n)return!1;return!!n.number&&("deg"===n.unit||"grad"===n.unit||"rad"===n.unit||"turn"===n.unit||""===n.unit)}(t[2]))return null;const n={l:e.default.unit(t[0].value),lNode:t[0],c:e.default.unit(t[1].value),cNode:t[1],h:e.default.unit(t[2].value),hNode:t[2]};if(function(t){switch(t.unit){case"deg":return void(t.unit="");case"rad":return t.unit="",void(t.number=(180*parseFloat(t.number)/Math.PI).toString());case"grad":return t.unit="",void(t.number=(.9*parseFloat(t.number)).toString());case"turn":t.unit="",t.number=(360*parseFloat(t.number)).toString()}}(n.h),""!==n.h.unit)return null;M(t[3])&&(n.slash=t[3]);(b(t[4])||m(t[4])||function(t){return t&&"function"===t.type&&"var"===t.value}(t[4]))&&(n.alpha=t[4]);return n}(a)),!o)return;if(a.length>3&&(!o.slash||!o.alpha))return;t.value="rgb",function(t,n,r){if(!n||!r)return;if(t.value="rgba",n.value=",",n.before="",!function(t){if(!t||"word"!==t.type)return!1;if(!y(t))return!1;const n=e.default.unit(t.value);if(!n)return!1;return!!n.number}(r))return;const u=e.default.unit(r.value);if(!u)return;"%"===u.unit&&(u.number=String(parseFloat(u.number)/100),r.value=String(u.number))}(t,o.slash,o.alpha);const[l,i,c]=function(t){if(g(t))return[t.lNode,t.aNode,t.bNode];return[t.lNode,t.cNode,t.hNode]}(o),[f,s,d]=function(t){if(g(t))return[t.l,t.a,t.b];return[t.l,t.c,t.h]}(o),p=("lab"===u?n:r)([f.number,s.number,d.number].map((t=>parseFloat(t)))).map((t=>Math.max(Math.min(Math.round(2.55*t),255),0)));t.nodes.splice(t.nodes.indexOf(l)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),t.nodes.splice(t.nodes.indexOf(i)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),w(t.nodes,l,{...l,value:String(p[0])}),w(t.nodes,i,{...i,value:String(p[1])}),w(t.nodes,c,{...c,value:String(p[2])})}function v(t){if(!t||"word"!==t.type)return!1;if(!y(t))return!1;const n=e.default.unit(t.value);return!!n&&(!!n.number&&""===n.unit)}function h(t){if(!t||"word"!==t.type)return!1;if(!y(t))return!1;const n=e.default.unit(t.value);return!!n&&"%"===n.unit}function b(t){if(!t||"word"!==t.type)return!1;if(!y(t))return!1;const n=e.default.unit(t.value);return!!n&&("%"===n.unit||""===n.unit)}function m(t){return t&&"function"===t.type&&"calc"===t.value}function M(t){return t&&"div"===t.type&&"/"===t.value}function g(t){return void 0!==t.a}function w(t,e,n){const r=t.indexOf(e);t[r]=n}function y(t){if(!t||!t.value)return!1;try{return!1!==e.default.unit(t.value)}catch(t){return!1}}const x=t=>{const n="preserve"in Object(t)&&Boolean(t.preserve);return{postcssPlugin:"postcss-lab-function",Declaration:(t,{result:r,postcss:u})=>{if(n&&function(t){let e=t.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name&&-1!==e.params.indexOf("(color: lab(0% 0 0)) and (color: lch(0% 0 0))"))return!0;e=e.parent}else e=e.parent;return!1}(t))return;const a=t.value;if(!/(^|[^\w-])(lab|lch)\(/i.test(a))return;let o;try{o=e.default(a)}catch(e){t.warn(r,`Failed to parse value '${a}' as a lab or hcl function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((t=>{t.type&&"function"===t.type&&("lab"!==t.value&&"lch"!==t.value||p(t))}));const l=String(o);if(l!==a)if(n&&t.variable){const e=t.parent,n="(color: lab(0% 0 0)) and (color: lch(0% 0 0))",r=u.atRule({name:"supports",params:n,source:t.source}),a=e.clone();a.removeAll(),a.append(t.clone()),r.append(a);let o=e,i=e.next();for(;o&&i&&"atrule"===i.type&&"supports"===i.name&&i.params===n;)o=i,i=i.next();o.after(r),t.value=l}else n?t.cloneBefore({value:l}):t.value=l}}};x.postcss=!0,x._labToSRgb=n,x._lchToSRgb=r,module.exports=x;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),t=require("postcss-value-parser");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),u=n(t);
+/**
+ * Simple matrix (and vector) multiplication
+ * Warning: No error handling for incompatible dimensions!
+ * @author Lea Verou 2020 MIT License
+ *
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
+ */
+function a(e,t){const n=e.length;let r,u;r=Array.isArray(e[0])?e:[e],Array.isArray(t[0])||(u=t.map((e=>[e])));const a=u[0].length,o=u[0].map(((e,t)=>u.map((e=>e[t]))));let i=r.map((e=>o.map((t=>Array.isArray(e)?e.reduce(((e,n,r)=>e+n*(t[r]||0)),0):t.reduce(((t,n)=>t+n*e),0)))));return 1===n&&(i=i[0]),1===a?i.map((e=>e[0])):i}
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
+ */const o=[.3457/.3585,1,.2958/.3585];function i(e){return e.map((function(e){const t=e<0?-1:1,n=Math.abs(e);return n<.04045?e/12.92:t*Math.pow((n+.055)/1.055,2.4)}))}function s(e){return e.map((function(e){const t=e<0?-1:1,n=Math.abs(e);return n>.0031308?t*(1.055*Math.pow(n,1/2.4)-.055):12.92*e}))}function l(e){return a([[.41239079926595934,.357584339383878,.1804807884018343],[.21263900587151027,.715168678767756,.07219231536073371],[.01933081871559182,.11919477979462598,.9505321522496607]],e)}function c(e){return a([[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]],e)}function f(e){return i(e)}function p(e){return s(e)}function d(e){return a([[.4865709486482162,.26566769316909306,.1982172852343625],[.2289745640697488,.6917385218365064,.079286914093745],[0,.04511338185890264,1.043944368900976]],e)}function h(e){return a([[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]],e)}function v(e){return a([[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]],e)}function m(e){const t=24389/27,n=216/24389,r=[];r[1]=(e[0]+16)/116,r[0]=e[1]/500+r[1],r[2]=r[1]-e[2]/200;return[Math.pow(r[0],3)>n?Math.pow(r[0],3):(116*r[0]-16)/t,e[0]>8?Math.pow((e[0]+16)/116,3):e[0]/t,Math.pow(r[2],3)>n?Math.pow(r[2],3):(116*r[2]-16)/t].map(((e,t)=>e*o[t]))}function b(e){return[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)]}function y(e){const t=a([[.8190224432164319,.3619062562801221,-.12887378261216414],[.0329836671980271,.9292868468965546,.03614466816999844],[.048177199566046255,.26423952494422764,.6335478258136937]],e);return a([[.2104542553,.793617785,-.0040720468],[1.9779984951,-2.428592205,.4505937099],[.0259040371,.7827717662,-.808675766]],t.map((e=>Math.cbrt(e))))}function M(e){const t=a([[.9999999984505198,.39633779217376786,.2158037580607588],[1.0000000088817609,-.10556134232365635,-.06385417477170591],[1.0000000546724108,-.08948418209496575,-1.2914855378640917]],e);return a([[1.2268798733741557,-.5578149965554813,.28139105017721583],[-.04057576262431372,1.1122868293970594,-.07171106666151701],[-.07637294974672142,-.4214933239627914,1.5869240244272418]],t.map((e=>e**3)))}function g(e){const t=180*Math.atan2(e[2],e[1])/Math.PI;return[e[0],Math.sqrt(e[1]**2+e[2]**2),t>=0?t:t+360]}function x(e){return[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)]}
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
+ */function w(e,t){const[n,r,u]=e,[a,o,i]=t,s=n-a,l=r-o,c=u-i;return Math.sqrt(s**2+l**2+c**2)}function P(e,t,n){return function(e,t,n){let r=0,u=e[1];const a=e;for(;u-r>1e-4;){w(a,n(F(t(a))))-.02<1e-4?r=a[1]:u=a[1],a[1]=(u+r)/2}return F(t([...a]))}(e,t,n)}function F(e){return e.map((e=>e<0?0:e>1?1:e))}function I(e){const[t,n,r]=e;return t>=-1e-4&&t<=1.0001&&n>=-1e-4&&n<=1.0001&&r>=-1e-4&&r<=1.0001}function N(e){const[t,n,r]=e;let u=[Math.min(Math.max(t,0),100),Math.min(Math.max(n,-127),128),Math.min(Math.max(r,-127),128)].slice();u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),u=v(u),u=h(u),u=p(u),I(u)?[F(u),!0]:[P(a,(e=>p(e=h(e=M(e=x(e))))),(e=>g(e=y(e=d(e=f(e)))))),!1]}function S(e){const[t,n,r]=e;let u=[Math.min(Math.max(t,0),100),Math.min(Math.max(n,-127),128),Math.min(Math.max(r,-127),128)].slice();u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),u=v(u),u=c(u),u=s(u),I(u)?F(u).map((e=>Math.round(255*e))):P(a,(e=>s(e=c(e=M(e=x(e))))),(e=>g(e=y(e=l(e=i(e)))))).map((e=>Math.round(255*e)))}function O(e){let t=e.slice();t=b(t),t=m(t);let n=t.slice();return n=v(n),n=y(n),n=g(n),t=v(t),t=h(t),t=p(t),I(t)?[F(t),!0]:[P(n,(e=>p(e=h(e=M(e=x(e))))),(e=>g(e=y(e=d(e=f(e)))))),!1]}function A(e){let t=e.slice();t=b(t),t=m(t);let n=t.slice();return n=v(n),n=y(n),n=g(n),t=v(t),t=c(t),t=s(t),I(t)?F(t).map((e=>Math.round(255*e))):P(n,(e=>s(e=c(e=M(e=x(e))))),(e=>g(e=y(e=l(e=i(e)))))).map((e=>Math.round(255*e)))}function q(e){const t=e.value,n=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let r=null;if("lab"===t?r=G(n):"lch"===t&&(r=D(n)),!r)return;if(n.length>3&&(!r.slash||!r.alpha))return;e.value="rgb",function(e,t,n){if(!t||!n)return;if(e.value="rgba",t.value=",",t.before="",!function(e){if(!e||"word"!==e.type)return!1;if(!K(e))return!1;const t=u.default.unit(e.value);if(!t)return!1;return!!t.number}(n))return;const r=u.default.unit(n.value);if(!r)return;"%"===r.unit&&(r.number=String(parseFloat(r.number)/100),n.value=String(r.number))}(e,r.slash,r.alpha);const[a,o,i]=z(r),[s,l,c]=H(r),f=("lab"===t?S:A)([s.number,l.number,c.number].map((e=>parseFloat(e))));e.nodes.splice(e.nodes.indexOf(a)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),J(e.nodes,a,{...a,value:String(f[0])}),J(e.nodes,o,{...o,value:String(f[1])}),J(e.nodes,i,{...i,value:String(f[2])})}function B(e){if(!e||"word"!==e.type)return!1;if(!K(e))return!1;const t=u.default.unit(e.value);return!!t&&(!!t.number&&""===t.unit)}function E(e){if(!e||"word"!==e.type)return!1;if(!K(e))return!1;const t=u.default.unit(e.value);return!!t&&"%"===t.unit}function j(e){if(!e||"word"!==e.type)return!1;if(!K(e))return!1;const t=u.default.unit(e.value);return!!t&&("%"===t.unit||""===t.unit)}function k(e){return e&&"function"===e.type&&"calc"===e.value}function C(e){return e&&"function"===e.type&&"var"===e.value}function $(e){return e&&"div"===e.type&&"/"===e.value}function D(e){if(!E(e[0]))return null;if(!B(e[1]))return null;if(!function(e){if(!e||"word"!==e.type)return!1;if(!K(e))return!1;const t=u.default.unit(e.value);return!(!t||!t.number||"deg"!==t.unit&&"grad"!==t.unit&&"rad"!==t.unit&&"turn"!==t.unit&&""!==t.unit)}(e[2]))return null;const t={l:u.default.unit(e[0].value),lNode:e[0],c:u.default.unit(e[1].value),cNode:e[1],h:u.default.unit(e[2].value),hNode:e[2]};return function(e){switch(e.unit){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=(.9*parseFloat(e.number)).toString());case"turn":e.unit="",e.number=(360*parseFloat(e.number)).toString()}}(t.h),""!==t.h.unit?null:($(e[3])&&(t.slash=e[3]),(j(e[4])||k(e[4])||C(e[4]))&&(t.alpha=e[4]),t)}function G(e){if(!E(e[0]))return null;if(!B(e[1]))return null;if(!B(e[2]))return null;const t={l:u.default.unit(e[0].value),lNode:e[0],a:u.default.unit(e[1].value),aNode:e[1],b:u.default.unit(e[2].value),bNode:e[2]};return $(e[3])&&(t.slash=e[3]),(j(e[4])||k(e[4])||C(e[4]))&&(t.alpha=e[4]),t}function L(e){return void 0!==e.a}function z(e){return L(e)?[e.lNode,e.aNode,e.bNode]:[e.lNode,e.cNode,e.hNode]}function H(e){return L(e)?[e.l,e.a,e.b]:[e.l,e.c,e.h]}function J(e,t,n){const r=e.indexOf(t);e[r]=n}function K(e){if(!e||!e.value)return!1;try{return!1!==u.default.unit(e.value)}catch(e){return!1}}function Q(e,t,n,r){let a;try{a=u.default(e)}catch(r){t.warn(n,`Failed to parse value '${e}' as a lab or lch function. Leaving the original value intact.`)}if(void 0===a)return;a.walk((e=>{e.type&&"function"===e.type&&("lab"!==e.value&&"lch"!==e.value||q(e))}));const o=String(a);if(o===e)return;const i=u.default(e);i.walk((e=>{e.type&&"function"===e.type&&("lab"!==e.value&&"lch"!==e.value||function(e,t,n,r){const a=u.default.stringify(e),o=e.value,i=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let s=null;if("lab"===o?s=G(i):"lch"===o&&(s=D(i)),!s)return;if(i.length>3&&(!s.slash||!s.alpha))return;e.value="color";const[l,c,f]=z(s),[p,d,h]=H(s),v="lab"===o?N:O,m=[p.number,d.number,h.number].map((e=>parseFloat(e))),[b,y]=v(m);!y&&r&&t.warn(n,`"${a}" is out of gamut for "display-p3". Given "preserve: true" is set, this will lead to unexpected results in some browsers.`),e.nodes.splice(0,0,{sourceIndex:0,sourceEndIndex:10,value:"display-p3",type:"word"}),e.nodes.splice(1,0,{sourceIndex:0,sourceEndIndex:1,value:" ",type:"space"}),J(e.nodes,l,{...l,value:b[0].toFixed(5)}),J(e.nodes,c,{...c,value:b[1].toFixed(5)}),J(e.nodes,f,{...f,value:b[2].toFixed(5)})}(e,t,n,r))}));return{rgb:o,displayP3:String(i)}}const R=e=>({postcssPlugin:"postcss-lab-function",Declaration:(t,{result:n})=>{if(function(e){const t=e.parent;if(!t)return!1;const n=t.index(e);for(let r=0;r<n;r++){const n=t.nodes[r];if("decl"===n.type&&n.prop===e.prop)return!0}return!1}(t))return;if(function(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name){if(-1!==t.params.indexOf("lab("))return!0;if(-1!==t.params.indexOf("lch("))return!0}t=t.parent}else t=t.parent;return!1}(t))return;const r=t.value;if(!/(^|[^\w-])(lab|lch)\(/i.test(r))return;const u=Q(r,t,n,e.preserve);void 0!==u&&(e.preserve?(t.cloneBefore({value:u.rgb}),e.subFeatures.displayP3&&t.cloneBefore({value:u.displayP3})):(t.cloneBefore({value:u.rgb}),e.subFeatures.displayP3&&t.cloneBefore({value:u.displayP3}),t.remove()))}});R.postcss=!0;const T=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return t.subFeatures=Object.assign({displayP3:!0},t.subFeatures),t.enableProgressiveCustomProperties&&(t.preserve||t.subFeatures.displayP3)?{postcssPlugin:"postcss-color-function",plugins:[r.default(),R(t)]}:R(t)};T.postcss=!0,module.exports=T;

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import type { PluginCreator } from 'postcss';
-/** Transform lab() and lch() functions in CSS. */
-declare const postcssPlugin: PluginCreator<{
-    preserve: boolean;
-}>;
+declare type pluginOptions = {
+    enableProgressiveCustomProperties?: boolean;
+    preserve?: boolean;
+    subFeatures?: {
+        displayP3?: boolean;
+    };
+};
+declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;

package/dist/index.mjs

@@ -1 +1,30 @@
-import n from"postcss-value-parser";function t(n){return u(r(n,!0))}function e(n){return u(r(function(n){return[n[0],n[1]*Math.cos(n[2]*Math.PI/180),n[1]*Math.sin(n[2]*Math.PI/180)]}(n),!1))}function r(n,t){const[e,r,u]=n,o=Math.min(Math.max(e,0),100);let p=0,d=0;t?(p=Math.min(Math.max(r,-127),128),d=Math.min(Math.max(u,-127),128)):(p=r,d=u);const h=(o+16)/116,v=p/500+h,m=h-d/200,[b,M,g]=[Math.pow(v,3)>s?Math.pow(v,3):(116*v-16)/f,o>f*s?Math.pow((o+16)/116,3):o/f,Math.pow(m,3)>s?Math.pow(m,3):(116*m-16)/f],[w,y,x]=a([b*i,M*l,g*c],[[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]]);return[w,y,x]}function u(n){const[t,e,r]=n,[u,o,i]=a([t,e,r],[[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]]),[l,c,s]=[u,o,i].map((n=>n>.31308?1.055*Math.pow(n/100,1/2.4)*100-5.5:12.92*n));return[l,c,s]}function a(n,t){return t.map((t=>t.reduce(((t,e,r)=>t+n[r]*o*(e*o)/o/o),0)))}const o=1e8,[i,l,c]=[96.422,100,82.521],s=Math.pow(6,3)/Math.pow(29,3),f=Math.pow(29,3)/Math.pow(3,3);function p(r){const u=r.value,a=r.nodes.slice().filter((n=>"comment"!==n.type&&"space"!==n.type));let o=null;if("lab"===u?o=function(t){if(!h(t[0]))return null;if(!d(t[1]))return null;if(!d(t[2]))return null;const e={l:n.unit(t[0].value),lNode:t[0],a:n.unit(t[1].value),aNode:t[1],b:n.unit(t[2].value),bNode:t[2]};b(t[3])&&(e.slash=t[3]);(v(t[4])||m(t[4]))&&(e.alpha=t[4]);return e}(a):"lch"===u&&(o=function(t){if(!h(t[0]))return null;if(!d(t[1]))return null;if(!function(t){if(!t||"word"!==t.type)return!1;if(!w(t))return!1;const e=n.unit(t.value);if(!e)return!1;return!!e.number&&("deg"===e.unit||"grad"===e.unit||"rad"===e.unit||"turn"===e.unit||""===e.unit)}(t[2]))return null;const e={l:n.unit(t[0].value),lNode:t[0],c:n.unit(t[1].value),cNode:t[1],h:n.unit(t[2].value),hNode:t[2]};if(function(n){switch(n.unit){case"deg":return void(n.unit="");case"rad":return n.unit="",void(n.number=(180*parseFloat(n.number)/Math.PI).toString());case"grad":return n.unit="",void(n.number=(.9*parseFloat(n.number)).toString());case"turn":n.unit="",n.number=(360*parseFloat(n.number)).toString()}}(e.h),""!==e.h.unit)return null;b(t[3])&&(e.slash=t[3]);(v(t[4])||m(t[4])||function(n){return n&&"function"===n.type&&"var"===n.value}(t[4]))&&(e.alpha=t[4]);return e}(a)),!o)return;if(a.length>3&&(!o.slash||!o.alpha))return;r.value="rgb",function(t,e,r){if(!e||!r)return;if(t.value="rgba",e.value=",",e.before="",!function(t){if(!t||"word"!==t.type)return!1;if(!w(t))return!1;const e=n.unit(t.value);if(!e)return!1;return!!e.number}(r))return;const u=n.unit(r.value);if(!u)return;"%"===u.unit&&(u.number=String(parseFloat(u.number)/100),r.value=String(u.number))}(r,o.slash,o.alpha);const[i,l,c]=function(n){if(M(n))return[n.lNode,n.aNode,n.bNode];return[n.lNode,n.cNode,n.hNode]}(o),[s,f,p]=function(n){if(M(n))return[n.l,n.a,n.b];return[n.l,n.c,n.h]}(o),y=("lab"===u?t:e)([s.number,f.number,p.number].map((n=>parseFloat(n)))).map((n=>Math.max(Math.min(Math.round(2.55*n),255),0)));r.nodes.splice(r.nodes.indexOf(i)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),r.nodes.splice(r.nodes.indexOf(l)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),g(r.nodes,i,{...i,value:String(y[0])}),g(r.nodes,l,{...l,value:String(y[1])}),g(r.nodes,c,{...c,value:String(y[2])})}function d(t){if(!t||"word"!==t.type)return!1;if(!w(t))return!1;const e=n.unit(t.value);return!!e&&(!!e.number&&""===e.unit)}function h(t){if(!t||"word"!==t.type)return!1;if(!w(t))return!1;const e=n.unit(t.value);return!!e&&"%"===e.unit}function v(t){if(!t||"word"!==t.type)return!1;if(!w(t))return!1;const e=n.unit(t.value);return!!e&&("%"===e.unit||""===e.unit)}function m(n){return n&&"function"===n.type&&"calc"===n.value}function b(n){return n&&"div"===n.type&&"/"===n.value}function M(n){return void 0!==n.a}function g(n,t,e){const r=n.indexOf(t);n[r]=e}function w(t){if(!t||!t.value)return!1;try{return!1!==n.unit(t.value)}catch(n){return!1}}const y=t=>{const e="preserve"in Object(t)&&Boolean(t.preserve);return{postcssPlugin:"postcss-lab-function",Declaration:(t,{result:r,postcss:u})=>{if(e&&function(n){let t=n.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name&&-1!==t.params.indexOf("(color: lab(0% 0 0)) and (color: lch(0% 0 0))"))return!0;t=t.parent}else t=t.parent;return!1}(t))return;const a=t.value;if(!/(^|[^\w-])(lab|lch)\(/i.test(a))return;let o;try{o=n(a)}catch(n){t.warn(r,`Failed to parse value '${a}' as a lab or hcl function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((n=>{n.type&&"function"===n.type&&("lab"!==n.value&&"lch"!==n.value||p(n))}));const i=String(o);if(i!==a)if(e&&t.variable){const n=t.parent,e="(color: lab(0% 0 0)) and (color: lch(0% 0 0))",r=u.atRule({name:"supports",params:e,source:t.source}),a=n.clone();a.removeAll(),a.append(t.clone()),r.append(a);let o=n,l=n.next();for(;o&&l&&"atrule"===l.type&&"supports"===l.name&&l.params===e;)o=l,l=l.next();o.after(r),t.value=i}else e?t.cloneBefore({value:i}):t.value=i}}};y.postcss=!0,y._labToSRgb=t,y._lchToSRgb=e;export{y as default};
+import e from"@csstools/postcss-progressive-custom-properties";import n from"postcss-value-parser";
+/**
+ * Simple matrix (and vector) multiplication
+ * Warning: No error handling for incompatible dimensions!
+ * @author Lea Verou 2020 MIT License
+ *
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
+ */
+function t(e,n){const t=e.length;let r,u;r=Array.isArray(e[0])?e:[e],Array.isArray(n[0])||(u=n.map((e=>[e])));const a=u[0].length,o=u[0].map(((e,n)=>u.map((e=>e[n]))));let i=r.map((e=>o.map((n=>Array.isArray(e)?e.reduce(((e,t,r)=>e+t*(n[r]||0)),0):n.reduce(((n,t)=>n+t*e),0)))));return 1===t&&(i=i[0]),1===a?i.map((e=>e[0])):i}
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
+ */const r=[.3457/.3585,1,.2958/.3585];function u(e){return e.map((function(e){const n=e<0?-1:1,t=Math.abs(e);return t<.04045?e/12.92:n*Math.pow((t+.055)/1.055,2.4)}))}function a(e){return e.map((function(e){const n=e<0?-1:1,t=Math.abs(e);return t>.0031308?n*(1.055*Math.pow(t,1/2.4)-.055):12.92*e}))}function o(e){return t([[.41239079926595934,.357584339383878,.1804807884018343],[.21263900587151027,.715168678767756,.07219231536073371],[.01933081871559182,.11919477979462598,.9505321522496607]],e)}function i(e){return t([[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]],e)}function s(e){return u(e)}function l(e){return a(e)}function c(e){return t([[.4865709486482162,.26566769316909306,.1982172852343625],[.2289745640697488,.6917385218365064,.079286914093745],[0,.04511338185890264,1.043944368900976]],e)}function f(e){return t([[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]],e)}function p(e){return t([[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]],e)}function d(e){const n=24389/27,t=216/24389,u=[];u[1]=(e[0]+16)/116,u[0]=e[1]/500+u[1],u[2]=u[1]-e[2]/200;return[Math.pow(u[0],3)>t?Math.pow(u[0],3):(116*u[0]-16)/n,e[0]>8?Math.pow((e[0]+16)/116,3):e[0]/n,Math.pow(u[2],3)>t?Math.pow(u[2],3):(116*u[2]-16)/n].map(((e,n)=>e*r[n]))}function h(e){return[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)]}function v(e){const n=t([[.8190224432164319,.3619062562801221,-.12887378261216414],[.0329836671980271,.9292868468965546,.03614466816999844],[.048177199566046255,.26423952494422764,.6335478258136937]],e);return t([[.2104542553,.793617785,-.0040720468],[1.9779984951,-2.428592205,.4505937099],[.0259040371,.7827717662,-.808675766]],n.map((e=>Math.cbrt(e))))}function m(e){const n=t([[.9999999984505198,.39633779217376786,.2158037580607588],[1.0000000088817609,-.10556134232365635,-.06385417477170591],[1.0000000546724108,-.08948418209496575,-1.2914855378640917]],e);return t([[1.2268798733741557,-.5578149965554813,.28139105017721583],[-.04057576262431372,1.1122868293970594,-.07171106666151701],[-.07637294974672142,-.4214933239627914,1.5869240244272418]],n.map((e=>e**3)))}function b(e){const n=180*Math.atan2(e[2],e[1])/Math.PI;return[e[0],Math.sqrt(e[1]**2+e[2]**2),n>=0?n:n+360]}function y(e){return[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)]}
+/**
+ * @license W3C
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
+ *
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
+ */function M(e,n){const[t,r,u]=e,[a,o,i]=n,s=t-a,l=r-o,c=u-i;return Math.sqrt(s**2+l**2+c**2)}function g(e,n,t){return function(e,n,t){let r=0,u=e[1];const a=e;for(;u-r>1e-4;){M(a,t(x(n(a))))-.02<1e-4?r=a[1]:u=a[1],a[1]=(u+r)/2}return x(n([...a]))}(e,n,t)}function x(e){return e.map((e=>e<0?0:e>1?1:e))}function w(e){const[n,t,r]=e;return n>=-1e-4&&n<=1.0001&&t>=-1e-4&&t<=1.0001&&r>=-1e-4&&r<=1.0001}function P(e){const[n,t,r]=e;let u=[Math.min(Math.max(n,0),100),Math.min(Math.max(t,-127),128),Math.min(Math.max(r,-127),128)].slice();u=d(u);let a=u.slice();return a=p(a),a=v(a),a=b(a),u=p(u),u=f(u),u=l(u),w(u)?[x(u),!0]:[g(a,(e=>l(e=f(e=m(e=y(e))))),(e=>b(e=v(e=c(e=s(e)))))),!1]}function F(e){const[n,t,r]=e;let s=[Math.min(Math.max(n,0),100),Math.min(Math.max(t,-127),128),Math.min(Math.max(r,-127),128)].slice();s=d(s);let l=s.slice();return l=p(l),l=v(l),l=b(l),s=p(s),s=i(s),s=a(s),w(s)?x(s).map((e=>Math.round(255*e))):g(l,(e=>a(e=i(e=m(e=y(e))))),(e=>b(e=v(e=o(e=u(e)))))).map((e=>Math.round(255*e)))}function I(e){let n=e.slice();n=h(n),n=d(n);let t=n.slice();return t=p(t),t=v(t),t=b(t),n=p(n),n=f(n),n=l(n),w(n)?[x(n),!0]:[g(t,(e=>l(e=f(e=m(e=y(e))))),(e=>b(e=v(e=c(e=s(e)))))),!1]}function N(e){let n=e.slice();n=h(n),n=d(n);let t=n.slice();return t=p(t),t=v(t),t=b(t),n=p(n),n=i(n),n=a(n),w(n)?x(n).map((e=>Math.round(255*e))):g(t,(e=>a(e=i(e=m(e=y(e))))),(e=>b(e=v(e=o(e=u(e)))))).map((e=>Math.round(255*e)))}function S(e){const t=e.value,r=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let u=null;if("lab"===t?u=C(r):"lch"===t&&(u=q(r)),!u)return;if(r.length>3&&(!u.slash||!u.alpha))return;e.value="rgb",function(e,t,r){if(!t||!r)return;if(e.value="rgba",t.value=",",t.before="",!function(e){if(!e||"word"!==e.type)return!1;if(!z(e))return!1;const t=n.unit(e.value);if(!t)return!1;return!!t.number}(r))return;const u=n.unit(r.value);if(!u)return;"%"===u.unit&&(u.number=String(parseFloat(u.number)/100),r.value=String(u.number))}(e,u.slash,u.alpha);const[a,o,i]=D(u),[s,l,c]=G(u),f=("lab"===t?F:N)([s.number,l.number,c.number].map((e=>parseFloat(e))));e.nodes.splice(e.nodes.indexOf(a)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),L(e.nodes,a,{...a,value:String(f[0])}),L(e.nodes,o,{...o,value:String(f[1])}),L(e.nodes,i,{...i,value:String(f[2])})}function O(e){if(!e||"word"!==e.type)return!1;if(!z(e))return!1;const t=n.unit(e.value);return!!t&&(!!t.number&&""===t.unit)}function A(e){if(!e||"word"!==e.type)return!1;if(!z(e))return!1;const t=n.unit(e.value);return!!t&&"%"===t.unit}function B(e){if(!e||"word"!==e.type)return!1;if(!z(e))return!1;const t=n.unit(e.value);return!!t&&("%"===t.unit||""===t.unit)}function E(e){return e&&"function"===e.type&&"calc"===e.value}function j(e){return e&&"function"===e.type&&"var"===e.value}function k(e){return e&&"div"===e.type&&"/"===e.value}function q(e){if(!A(e[0]))return null;if(!O(e[1]))return null;if(!function(e){if(!e||"word"!==e.type)return!1;if(!z(e))return!1;const t=n.unit(e.value);return!(!t||!t.number||"deg"!==t.unit&&"grad"!==t.unit&&"rad"!==t.unit&&"turn"!==t.unit&&""!==t.unit)}(e[2]))return null;const t={l:n.unit(e[0].value),lNode:e[0],c:n.unit(e[1].value),cNode:e[1],h:n.unit(e[2].value),hNode:e[2]};return function(e){switch(e.unit){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=(.9*parseFloat(e.number)).toString());case"turn":e.unit="",e.number=(360*parseFloat(e.number)).toString()}}(t.h),""!==t.h.unit?null:(k(e[3])&&(t.slash=e[3]),(B(e[4])||E(e[4])||j(e[4]))&&(t.alpha=e[4]),t)}function C(e){if(!A(e[0]))return null;if(!O(e[1]))return null;if(!O(e[2]))return null;const t={l:n.unit(e[0].value),lNode:e[0],a:n.unit(e[1].value),aNode:e[1],b:n.unit(e[2].value),bNode:e[2]};return k(e[3])&&(t.slash=e[3]),(B(e[4])||E(e[4])||j(e[4]))&&(t.alpha=e[4]),t}function $(e){return void 0!==e.a}function D(e){return $(e)?[e.lNode,e.aNode,e.bNode]:[e.lNode,e.cNode,e.hNode]}function G(e){return $(e)?[e.l,e.a,e.b]:[e.l,e.c,e.h]}function L(e,n,t){const r=e.indexOf(n);e[r]=t}function z(e){if(!e||!e.value)return!1;try{return!1!==n.unit(e.value)}catch(e){return!1}}function H(e,t,r,u){let a;try{a=n(e)}catch(n){t.warn(r,`Failed to parse value '${e}' as a lab or lch function. Leaving the original value intact.`)}if(void 0===a)return;a.walk((e=>{e.type&&"function"===e.type&&("lab"!==e.value&&"lch"!==e.value||S(e))}));const o=String(a);if(o===e)return;const i=n(e);i.walk((e=>{e.type&&"function"===e.type&&("lab"!==e.value&&"lch"!==e.value||function(e,t,r,u){const a=n.stringify(e),o=e.value,i=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let s=null;if("lab"===o?s=C(i):"lch"===o&&(s=q(i)),!s)return;if(i.length>3&&(!s.slash||!s.alpha))return;e.value="color";const[l,c,f]=D(s),[p,d,h]=G(s),v="lab"===o?P:I,m=[p.number,d.number,h.number].map((e=>parseFloat(e))),[b,y]=v(m);!y&&u&&t.warn(r,`"${a}" is out of gamut for "display-p3". Given "preserve: true" is set, this will lead to unexpected results in some browsers.`),e.nodes.splice(0,0,{sourceIndex:0,sourceEndIndex:10,value:"display-p3",type:"word"}),e.nodes.splice(1,0,{sourceIndex:0,sourceEndIndex:1,value:" ",type:"space"}),L(e.nodes,l,{...l,value:b[0].toFixed(5)}),L(e.nodes,c,{...c,value:b[1].toFixed(5)}),L(e.nodes,f,{...f,value:b[2].toFixed(5)})}(e,t,r,u))}));return{rgb:o,displayP3:String(i)}}const J=e=>({postcssPlugin:"postcss-lab-function",Declaration:(n,{result:t})=>{if(function(e){const n=e.parent;if(!n)return!1;const t=n.index(e);for(let r=0;r<t;r++){const t=n.nodes[r];if("decl"===t.type&&t.prop===e.prop)return!0}return!1}(n))return;if(function(e){let n=e.parent;for(;n;)if("atrule"===n.type){if("supports"===n.name){if(-1!==n.params.indexOf("lab("))return!0;if(-1!==n.params.indexOf("lch("))return!0}n=n.parent}else n=n.parent;return!1}(n))return;const r=n.value;if(!/(^|[^\w-])(lab|lch)\(/i.test(r))return;const u=H(r,n,t,e.preserve);void 0!==u&&(e.preserve?(n.cloneBefore({value:u.rgb}),e.subFeatures.displayP3&&n.cloneBefore({value:u.displayP3})):(n.cloneBefore({value:u.rgb}),e.subFeatures.displayP3&&n.cloneBefore({value:u.displayP3}),n.remove()))}});J.postcss=!0;const K=n=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},n);return t.subFeatures=Object.assign({displayP3:!0},t.subFeatures),t.enableProgressiveCustomProperties&&(t.preserve||t.subFeatures.displayP3)?{postcssPlugin:"postcss-color-function",plugins:[e(),J(t)]}:J(t)};K.postcss=!0;export{K as default};

package/dist/modified-values.d.ts

@@ -0,0 +1,5 @@
+import type { Declaration, Result } from 'postcss';
+export declare function modifiedValues(originalValue: string, decl: Declaration, result: Result, preserve: boolean): {
+    rgb: string;
+    displayP3: string;
+} | undefined;

package/dist/on-css-function.d.ts

@@ -1,3 +1,4 @@
 import type { FunctionNode } from 'postcss-value-parser';
-declare function onCSSFunction(node: FunctionNode): void;
-export default onCSSFunction;
+import { Declaration, Result } from 'postcss';
+export declare function onCSSFunctionSRgb(node: FunctionNode): void;
+export declare function onCSSFunctionDisplayP3(node: FunctionNode, decl: Declaration, result: Result, preserve: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-lab-function",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Use lab() and lch() color functions in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
@@ -28,19 +28,17 @@
     "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
     "prepublishOnly": "npm run clean && npm run build && npm run test",
     "stryker": "stryker run --logLevel error",
-    "test": "node ./test/color/test.mjs && postcss-tape --ci && npm run test:exports",
+    "test": "node .tape.mjs && npm run test:exports",
+    "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs",
     "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
   "engines": {
     "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
+    "@csstools/postcss-progressive-custom-properties": "^1.1.0",
     "postcss-value-parser": "^4.2.0"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
     "postcss": "^8.4"
   },
@@ -52,9 +50,8 @@
     "colors",
     "rgb",
     "rgba",
-    "hsl",
-    "hsla",
-    "hwb",
+    "lab",
+    "lch",
     "functional",
     "notation",
     "design",

package/dist/color.d.ts

@@ -1,3 +0,0 @@
-export declare function labToSRgb(lab: [number, number, number]): [number, number, number];
-export declare function lchToSRgb(lch: [number, number, number]): [number, number, number];
-export declare function xyz2rgb(xyz: [number, number, number]): [number, number, number];