postcss-lab-function 4.0.4 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # Changes to PostCSS Lab Function
2
2
 
3
+ ### 4.1.2 (March 8, 2022)
4
+
5
+ - Fix gamut mapping giving overly unsaturated colors.
6
+ - Implement powerless color components in gamut mapping.
7
+
8
+ ### 4.1.1 (February 15, 2022)
9
+
10
+ - Fix plugin name
11
+
12
+ ### 4.1.0 (February 12, 2022)
13
+
14
+ - Add gamut mapping for out of gamut colors.
15
+ - Add conversion to `display-p3` as a wider gamut fallback.
16
+
17
+ [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)
18
+
19
+ [Read more about `color(display-p3 0 0 0)`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color())
20
+
21
+ ```css
22
+ .color-lab {
23
+ color: lab(40% 56.6 39);
24
+ }
25
+
26
+ /* with a display-p3 fallback : */
27
+ .color {
28
+ color: rgb(179, 35, 35);
29
+ color: color(display-p3 0.64331 0.19245 0.16771);
30
+ }
31
+ ```
32
+
3
33
  ### 4.0.4 (February 5, 2022)
4
34
 
5
35
  - Improved `es module` and `commonjs` compatibility
package/README.md CHANGED
@@ -6,20 +6,28 @@
6
6
  [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
7
7
 
8
8
 
9
- [PostCSS Lab Function] lets you use `lab` and `lch` color functions in
10
- CSS, following the [CSS Color] specification.
9
+ [PostCSS Lab Function] lets you use `lab` and `lch` color functions in
10
+ CSS, following the [CSS Color] specification.
11
11
 
12
12
  ```pcss
13
- :root {
14
- --firebrick: lab(40% 56.6 39);
15
- --firebrick-a50: lch(40% 68.8 34.5 / 50%);
13
+ .color-lab {
14
+ color: lab(40% 56.6 39);
15
+ }
16
+
17
+ .color-lch {
18
+ color: lch(40% 68.735435 34.568626);
16
19
  }
17
20
 
18
21
  /* becomes */
19
22
 
20
- :root {
21
- --firebrick: rgb(178, 34, 34);
22
- --firebrick-a50: rgba(178, 34, 34, .5);
23
+ .color {
24
+ color: rgb(179, 35, 35);
25
+ color: color(display-p3 0.64331 0.19245 0.16771);
26
+ }
27
+
28
+ .color-lch {
29
+ color: rgb(179, 35, 35);
30
+ color: color(display-p3 0.64331 0.19245 0.16771);
23
31
  }
24
32
  ```
25
33
 
@@ -59,22 +67,93 @@ is preserved. By default, it is not preserved.
59
67
  postcssLabFunction({ preserve: true })
60
68
  ```
61
69
 
70
+ ```pcss
71
+ .color {
72
+ color: lab(40% 56.6 39);
73
+ }
74
+
75
+ /* becomes */
76
+
77
+ .color {
78
+ color: rgb(179, 35, 35);
79
+ color: color(display-p3 0.64331 0.19245 0.16771);
80
+ color: lab(40% 56.6 39);
81
+ }
82
+ ```
83
+
84
+ ### enableProgressiveCustomProperties
85
+
86
+ The `enableProgressiveCustomProperties` option determines whether the original notation
87
+ is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
88
+
89
+ ⚠️ 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).
90
+
91
+ ```js
92
+ postcssLabFunction({ enableProgressiveCustomProperties: false })
93
+ ```
94
+
62
95
  ```pcss
63
96
  :root {
64
- --firebrick: lab(40% 56.6 39);
65
- --firebrick-a50: lch(40% 68.8 34.5 / 50%);
97
+ --firebrick: lab(40% 56.6 39);
66
98
  }
67
99
 
68
100
  /* becomes */
69
101
 
70
102
  :root {
71
- --firebrick: rgb(178, 34, 34);
72
- --firebrick: lab(40% 56.6 39);
73
- --firebrick-a50: rgba(178, 34, 34, .5);
74
- --firebrick-a50: lch(40% 68.8 34.5 / 50%);
103
+ --firebrick: rgb(178, 34, 34); /* will never be used, not even in older browser */
104
+ --firebrick: color(display-p3 0.64331 0.19245 0.16771); /* will never be used, not even in older browser */
105
+ --firebrick: lab(40% 56.6 39);
75
106
  }
76
107
  ```
77
108
 
109
+ ### subFeatures
110
+
111
+ #### displayP3
112
+
113
+ The `subFeatures.displayP3` option determines if `color(display-p3 ...)` is used as a fallback.<br>
114
+ By default, it is enabled.
115
+
116
+ `display-p3` can display wider gamut colors than `rgb` on some devices.
117
+
118
+ ```js
119
+ postcssOKLabFunction({
120
+ subFeatures: {
121
+ displayP3: false
122
+ }
123
+ })
124
+ ```
125
+
126
+ ```pcss
127
+ .color {
128
+ color: lab(40% 56.6 39);
129
+ }
130
+
131
+ /* becomes */
132
+
133
+ .color {
134
+ color: rgb(179, 35, 35);
135
+ color: lab(40% 56.6 39);
136
+ }
137
+ ```
138
+
139
+ ## Out of gamut colors
140
+
141
+ Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.<br>
142
+ Fallback values generated by [PostCSS Lab Function] are always mapped to a close alternative in sRGB.
143
+
144
+ When setting `preserve` to `true` the original values will be used by some browsers and these may be clipped.<br>
145
+ Certain browsers will have an incorrect color if this occurs.
146
+
147
+ If the plugin detects out of gamut colors it will emit a warning :
148
+
149
+ > "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.
150
+
151
+ To resolve this warning you can use a color that is in gamut for `display-p3`.
152
+
153
+ ## Copyright : color conversions
154
+
155
+ 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).
156
+
78
157
  [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
79
158
  [css-url]: https://cssdb.org/#lab-function
80
159
  [discord]: https://discord.gg/bUadyRwkJS
@@ -0,0 +1,3 @@
1
+ declare type color = [number, number, number];
2
+ export declare function labToDisplayP3(labRaw: color): [color, boolean];
3
+ export {};
@@ -0,0 +1,3 @@
1
+ declare type color = [number, number, number];
2
+ export declare function labToSRgb(labRaw: color): color;
3
+ export {};
@@ -0,0 +1,3 @@
1
+ declare type color = [number, number, number];
2
+ export declare function lchToDisplayP3(lchRaw: color): [color, boolean];
3
+ export {};
@@ -0,0 +1,3 @@
1
+ declare type color = [number, number, number];
2
+ export declare function lchToSRgb(lchRaw: color): color;
3
+ export {};
@@ -0,0 +1,47 @@
1
+ /**
2
+ * @license W3C
3
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4
+ *
5
+ * @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).
6
+ *
7
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
8
+ */
9
+ declare type color = [number, number, number];
10
+ export declare const D50: number[];
11
+ export declare const D65: number[];
12
+ export declare function lin_sRGB(RGB: color): color;
13
+ export declare function gam_sRGB(RGB: color): color;
14
+ export declare function lin_sRGB_to_XYZ(rgb: color): color;
15
+ export declare function XYZ_to_lin_sRGB(XYZ: color): color;
16
+ export declare function lin_P3(RGB: color): color;
17
+ export declare function gam_P3(RGB: color): color;
18
+ export declare function lin_P3_to_XYZ(rgb: color): color;
19
+ export declare function XYZ_to_lin_P3(XYZ: color): color;
20
+ export declare function lin_ProPhoto(RGB: color): color;
21
+ export declare function gam_ProPhoto(RGB: color): color;
22
+ export declare function lin_ProPhoto_to_XYZ(rgb: color): color;
23
+ export declare function XYZ_to_lin_ProPhoto(XYZ: color): color;
24
+ export declare function lin_a98rgb(RGB: color): color;
25
+ export declare function gam_a98rgb(RGB: color): color;
26
+ export declare function lin_a98rgb_to_XYZ(rgb: color): color;
27
+ export declare function XYZ_to_lin_a98rgb(XYZ: color): color;
28
+ export declare function lin_2020(RGB: color): color;
29
+ export declare function gam_2020(RGB: color): color;
30
+ export declare function lin_2020_to_XYZ(rgb: color): color;
31
+ export declare function XYZ_to_lin_2020(XYZ: color): color;
32
+ export declare function D65_to_D50(XYZ: color): color;
33
+ export declare function D50_to_D65(XYZ: color): color;
34
+ export declare function XYZ_to_Lab(XYZ: color): color;
35
+ export declare function Lab_to_XYZ(Lab: color): color;
36
+ export declare function Lab_to_LCH(Lab: color): color;
37
+ export declare function LCH_to_Lab(LCH: color): color;
38
+ export declare function XYZ_to_OKLab(XYZ: color): color;
39
+ export declare function OKLab_to_XYZ(OKLab: color): color;
40
+ export declare function OKLab_to_OKLCH(OKLab: color): color;
41
+ export declare function OKLCH_to_OKLab(OKLCH: color): color;
42
+ export declare function rectangular_premultiply(color: color, alpha: number): color;
43
+ export declare function rectangular_un_premultiply(color: color, alpha: number): color;
44
+ export declare function polar_premultiply(color: color, alpha: number, hueIndex: number): color;
45
+ export declare function polar_un_premultiply(color: color, alpha: number, hueIndex: number): color;
46
+ export declare function hsl_premultiply(color: color, alpha: number): color;
47
+ export {};
@@ -0,0 +1,11 @@
1
+ /**
2
+ * @license W3C
3
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4
+ *
5
+ * @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).
6
+ *
7
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
8
+ */
9
+ declare type color = [number, number, number];
10
+ export declare function deltaEOK(reference: color, sample: color): number;
11
+ export {};
@@ -0,0 +1,5 @@
1
+ declare type color = [number, number, number];
2
+ export declare function mapGamut(startOKLCH: color, toDestination: (x: color) => color, fromDestination: (x: color) => color): color;
3
+ export declare function clip(color: color): color;
4
+ export declare function inGamut(x: color): boolean;
5
+ export {};
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Simple matrix (and vector) multiplication
3
+ * Warning: No error handling for incompatible dimensions!
4
+ * @author Lea Verou 2020 MIT License
5
+ *
6
+ * @license W3C
7
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
8
+ *
9
+ * @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).
10
+ *
11
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
12
+ */
13
+ export declare function multiplyMatrices(a: Array<Array<number>> | Array<number>, b: Array<Array<number>> | Array<number>): Array<Array<number>> | Array<number>;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @license W3C
3
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
4
+ *
5
+ * @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).
6
+ *
7
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js
8
+ */
9
+ declare type color = [number, number, number];
10
+ export declare function sRGB_to_luminance(RGB: color): number;
11
+ export declare function contrast(RGB1: color, RGB2: color): number;
12
+ export declare function sRGB_to_LCH(RGB: color): color;
13
+ export declare function P3_to_LCH(RGB: color): color;
14
+ export declare function r2020_to_LCH(RGB: color): color;
15
+ export declare function LCH_to_sRGB(LCH: color): color;
16
+ export declare function LCH_to_P3(LCH: color): color;
17
+ export declare function LCH_to_r2020(LCH: color): color;
18
+ export declare function hslToRgb(hsl: color): color;
19
+ export declare function hueToRgb(t1: number, t2: number, hue: number): number;
20
+ export declare function naive_CMYK_to_sRGB(CMYK: [number, number, number, number]): color;
21
+ export declare function naive_sRGB_to_CMYK(RGB: color): [number, number, number, number];
22
+ export declare function XYZ_to_xy(XYZ: color): [number, number];
23
+ export declare function xy_to_uv(xy: [number, number]): [number, number];
24
+ export declare function XYZ_to_uv(XYZ: color): [number, number];
25
+ export {};
@@ -0,0 +1,2 @@
1
+ import type { Declaration } from 'postcss';
2
+ export declare function hasFallback(node: Declaration): boolean;
package/dist/index.cjs CHANGED
@@ -1 +1,30 @@
1
- "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;
1
+ "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);
2
+ /**
3
+ * Simple matrix (and vector) multiplication
4
+ * Warning: No error handling for incompatible dimensions!
5
+ * @author Lea Verou 2020 MIT License
6
+ *
7
+ * @license W3C
8
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
9
+ *
10
+ * @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).
11
+ *
12
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
13
+ */
14
+ 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}
15
+ /**
16
+ * @license W3C
17
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
18
+ *
19
+ * @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).
20
+ *
21
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
22
+ */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)]}
23
+ /**
24
+ * @license W3C
25
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
26
+ *
27
+ * @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).
28
+ *
29
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
30
+ */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;){const e=F(t(a));w(x(a),x(n(e)))-.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.max(t,0),Math.min(Math.max(n,-127),128),Math.min(Math.max(r,-127),128)];u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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.max(t,0),Math.min(Math.max(n,-127),128),Math.min(Math.max(r,-127),128)];u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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){const[t,n,r]=e;let u=[Math.max(t,0),n,r%360];u=b(u),u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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 A(e){const[t,n,r]=e;let u=[Math.max(t,0),n,r%360];u=b(u),u=m(u);let a=u.slice();return a=v(a),a=y(a),a=g(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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 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-lab-function",plugins:[r.default(),R(t)]}:R(t)};T.postcss=!0,module.exports=T;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import type { PluginCreator } from 'postcss';
2
- /** Transform lab() and lch() functions in CSS. */
3
- declare const postcssPlugin: PluginCreator<{
4
- preserve: boolean;
5
- }>;
2
+ declare type pluginOptions = {
3
+ enableProgressiveCustomProperties?: boolean;
4
+ preserve?: boolean;
5
+ subFeatures?: {
6
+ displayP3?: boolean;
7
+ };
8
+ };
9
+ declare const postcssPlugin: PluginCreator<pluginOptions>;
6
10
  export default postcssPlugin;
package/dist/index.mjs CHANGED
@@ -1 +1,30 @@
1
- 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};
1
+ import e from"@csstools/postcss-progressive-custom-properties";import n from"postcss-value-parser";
2
+ /**
3
+ * Simple matrix (and vector) multiplication
4
+ * Warning: No error handling for incompatible dimensions!
5
+ * @author Lea Verou 2020 MIT License
6
+ *
7
+ * @license W3C
8
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
9
+ *
10
+ * @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).
11
+ *
12
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/multiply-matrices.js
13
+ */
14
+ 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}
15
+ /**
16
+ * @license W3C
17
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
18
+ *
19
+ * @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).
20
+ *
21
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js
22
+ */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)]}
23
+ /**
24
+ * @license W3C
25
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
26
+ *
27
+ * @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).
28
+ *
29
+ * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
30
+ */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;){const e=x(n(a));M(y(a),y(t(e)))-.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.max(n,0),Math.min(Math.max(t,-127),128),Math.min(Math.max(r,-127),128)];u=d(u);let a=u.slice();return a=p(a),a=v(a),a=b(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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.max(n,0),Math.min(Math.max(t,-127),128),Math.min(Math.max(r,-127),128)];s=d(s);let l=s.slice();return l=p(l),l=v(l),l=b(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),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){const[n,t,r]=e;let u=[Math.max(n,0),t,r%360];u=h(u),u=d(u);let a=u.slice();return a=p(a),a=v(a),a=b(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),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 N(e){const[n,t,r]=e;let s=[Math.max(n,0),t,r%360];s=h(s),s=d(s);let l=s.slice();return l=p(l),l=v(l),l=b(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),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 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-lab-function",plugins:[e(),J(t)]}:J(t)};K.postcss=!0;export{K as default};
@@ -0,0 +1,5 @@
1
+ import type { Declaration, Result } from 'postcss';
2
+ export declare function modifiedValues(originalValue: string, decl: Declaration, result: Result, preserve: boolean): {
3
+ rgb: string;
4
+ displayP3: string;
5
+ } | undefined;
@@ -1,3 +1,4 @@
1
1
  import type { FunctionNode } from 'postcss-value-parser';
2
- declare function onCSSFunction(node: FunctionNode): void;
3
- export default onCSSFunction;
2
+ import { Declaration, Result } from 'postcss';
3
+ export declare function onCSSFunctionSRgb(node: FunctionNode): void;
4
+ export declare function onCSSFunctionDisplayP3(node: FunctionNode, decl: Declaration, result: Result, preserve: boolean): void;
package/package.json CHANGED
@@ -1,73 +1,77 @@
1
1
  {
2
- "name": "postcss-lab-function",
3
- "version": "4.0.4",
4
- "description": "Use lab() and lch() color functions in CSS",
5
- "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
- "license": "CC0-1.0",
7
- "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#readme",
8
- "bugs": "https://github.com/csstools/postcss-plugins/issues",
9
- "main": "dist/index.cjs",
10
- "module": "dist/index.mjs",
11
- "types": "./dist/index.d.ts",
12
- "exports": {
13
- ".": {
14
- "import": "./dist/index.mjs",
15
- "require": "./dist/index.cjs",
16
- "default": "./dist/index.mjs"
17
- }
18
- },
19
- "files": [
20
- "CHANGELOG.md",
21
- "LICENSE.md",
22
- "README.md",
23
- "dist"
24
- ],
25
- "scripts": {
26
- "build": "rollup -c ../../rollup/default.js",
27
- "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
28
- "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
29
- "prepublishOnly": "npm run clean && npm run build && npm run test",
30
- "stryker": "stryker run --logLevel error",
31
- "test": "node ./test/color/test.mjs && postcss-tape --ci && npm run test:exports",
32
- "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
33
- },
34
- "engines": {
35
- "node": "^12 || ^14 || >=16"
36
- },
37
- "dependencies": {
38
- "postcss-value-parser": "^4.2.0"
39
- },
40
- "devDependencies": {
41
- "postcss": "^8.3.6",
42
- "postcss-tape": "^6.0.1"
43
- },
44
- "peerDependencies": {
45
- "postcss": "^8.4"
46
- },
47
- "keywords": [
48
- "postcss",
49
- "css",
50
- "postcss-plugin",
51
- "color",
52
- "colors",
53
- "rgb",
54
- "rgba",
55
- "hsl",
56
- "hsla",
57
- "hwb",
58
- "functional",
59
- "notation",
60
- "design",
61
- "syntax",
62
- "space",
63
- "comma"
64
- ],
65
- "repository": {
66
- "type": "git",
67
- "url": "https://github.com/csstools/postcss-plugins.git",
68
- "directory": "plugins/postcss-lab-function"
69
- },
70
- "volta": {
71
- "extends": "../../package.json"
72
- }
2
+ "name": "postcss-lab-function",
3
+ "description": "Use lab() and lch() color functions in CSS",
4
+ "version": "4.1.2",
5
+ "author": "Jonathan Neal <jonathantneal@hotmail.com>",
6
+ "license": "CC0-1.0",
7
+ "engines": {
8
+ "node": "^12 || ^14 || >=16"
9
+ },
10
+ "main": "dist/index.cjs",
11
+ "module": "dist/index.mjs",
12
+ "types": "./dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.cjs",
17
+ "default": "./dist/index.mjs"
18
+ }
19
+ },
20
+ "files": [
21
+ "CHANGELOG.md",
22
+ "LICENSE.md",
23
+ "README.md",
24
+ "dist"
25
+ ],
26
+ "dependencies": {
27
+ "@csstools/postcss-progressive-custom-properties": "^1.1.0",
28
+ "postcss-value-parser": "^4.2.0"
29
+ },
30
+ "peerDependencies": {
31
+ "postcss": "^8.4"
32
+ },
33
+ "scripts": {
34
+ "build": "rollup -c ../../rollup/default.js",
35
+ "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
36
+ "docs": "node ../../.github/bin/generate-docs/install.mjs",
37
+ "lint": "npm run lint:eslint && npm run lint:package-json",
38
+ "lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
39
+ "lint:package-json": "node ../../.github/bin/format-package-json.mjs",
40
+ "prepublishOnly": "npm run clean && npm run build && npm run test",
41
+ "test": "node .tape.mjs && npm run test:exports",
42
+ "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
43
+ "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
44
+ },
45
+ "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function#readme",
46
+ "repository": {
47
+ "type": "git",
48
+ "url": "https://github.com/csstools/postcss-plugins.git",
49
+ "directory": "plugins/postcss-lab-function"
50
+ },
51
+ "bugs": "https://github.com/csstools/postcss-plugins/issues",
52
+ "keywords": [
53
+ "color",
54
+ "colors",
55
+ "comma",
56
+ "css",
57
+ "design",
58
+ "functional",
59
+ "lab",
60
+ "lch",
61
+ "notation",
62
+ "postcss",
63
+ "postcss-plugin",
64
+ "rgb",
65
+ "rgba",
66
+ "space",
67
+ "syntax"
68
+ ],
69
+ "csstools": {
70
+ "cssdb": "lab-function",
71
+ "exportName": "postcssLabFunction",
72
+ "humanReadableName": "PostCSS Lab Function"
73
+ },
74
+ "volta": {
75
+ "extends": "../../package.json"
76
+ }
73
77
  }
package/dist/color.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export declare function labToSRgb(lab: [number, number, number]): [number, number, number];
2
- export declare function lchToSRgb(lch: [number, number, number]): [number, number, number];
3
- export declare function xyz2rgb(xyz: [number, number, number]): [number, number, number];