@csstools/postcss-oklab-function 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +7 -6
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
# PostCSS OKLab Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
|
|
2
2
|
|
|
3
3
|
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-oklab-function.svg" height="20">][npm-url]
|
|
4
|
-
<!-- [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/oklab-function.svg" height="20">][css-url] -->
|
|
5
4
|
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
|
|
6
5
|
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
|
|
7
|
-
|
|
6
|
+
<!-- [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/oklab-function.svg" height="20">][css-url] -->
|
|
8
7
|
|
|
9
8
|
[PostCSS OKLab Function] lets you use `oklab` and `oklch` color functions in
|
|
10
9
|
CSS, following the [CSS Color] specification.
|
|
@@ -96,7 +95,7 @@ postcssOKLabFunction({ preserve: true })
|
|
|
96
95
|
The `enableProgressiveCustomProperties` option determines whether the original notation
|
|
97
96
|
is wrapped with `@supports` when used in Custom Properties. By default, it is enabled.
|
|
98
97
|
|
|
99
|
-
⚠️
|
|
98
|
+
⚠️ 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).
|
|
100
99
|
|
|
101
100
|
```js
|
|
102
101
|
postcssOKLabFunction({ enableProgressiveCustomProperties: false })
|
|
@@ -120,9 +119,11 @@ postcssOKLabFunction({ enableProgressiveCustomProperties: false })
|
|
|
120
119
|
|
|
121
120
|
#### displayP3
|
|
122
121
|
|
|
123
|
-
The `subFeatures.displayP3` option determines if `color(display-p3 ...)` is used as a fallback
|
|
122
|
+
The `subFeatures.displayP3` option determines if `color(display-p3 ...)` is used as a fallback.<br>
|
|
124
123
|
By default, it is enabled.
|
|
125
124
|
|
|
125
|
+
`display-p3` can display wider gamut colors than `rgb` on some devices.
|
|
126
|
+
|
|
126
127
|
```js
|
|
127
128
|
postcssOKLabFunction({
|
|
128
129
|
subFeatures: {
|
|
@@ -154,7 +155,7 @@ postcssOKLabFunction({
|
|
|
154
155
|
## Out of gamut colors
|
|
155
156
|
|
|
156
157
|
Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.<br>
|
|
157
|
-
Fallback values generated by [PostCSS
|
|
158
|
+
Fallback values generated by [PostCSS OKLab Function] are always mapped to a close alternative in sRGB.
|
|
158
159
|
|
|
159
160
|
When setting `preserve` to `true` the original values will be used by some browsers and these may be clipped.<br>
|
|
160
161
|
Certain browsers will have an incorrect color if this occurs.
|
|
@@ -172,7 +173,7 @@ This software or document includes material copied from or derived from https://
|
|
|
172
173
|
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
|
|
173
174
|
[css-url]: https://cssdb.org/#oklab-function
|
|
174
175
|
[discord]: https://discord.gg/bUadyRwkJS
|
|
175
|
-
[npm-url]: https://www.npmjs.com/package/postcss-oklab-function
|
|
176
|
+
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-oklab-function
|
|
176
177
|
|
|
177
178
|
[CSS Color]: https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch
|
|
178
179
|
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
|
package/dist/index.cjs
CHANGED
|
@@ -27,4 +27,4 @@ function a(e,t){const n=e.length;let r,u;r=Array.isArray(e[0])?e:[e],Array.isArr
|
|
|
27
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
28
|
*
|
|
29
29
|
* @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/deltaEOK.js
|
|
30
|
-
*/function y(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 g(e,t,n){return function(e,t,n){let r=0,u=e[1];const a=e;for(;u-r>1e-4;){y(a,n(M(t(a))))-.02<1e-4?r=a[1]:u=a[1],a[1]=(u+r)/2}return M(t([...a]))}(e,t,n)}function M(e){return e.map((e=>e<0?0:e>1?1:e))}function x(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 k(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=h(a),a=p(a),a=f(a),x(a)?[M(a),!0]:[g(u,(e=>f(e=p(e=h(e=b(e))))),(e=>m(e=v(e=d(e=c(e)))))),!1]}function P(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=b(a),a=h(a),a=p(a),a=f(a),x(a)?[M(a),!0]:[g(u,(e=>f(e=p(e=h(e=b(e))))),(e=>m(e=v(e=d(e=c(e)))))),!1]}function w(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=h(a),a=l(a),a=i(a),x(a)?M(a).map((e=>Math.round(255*e))):g(u,(e=>i(e=l(e=h(e=b(e))))),(e=>m(e=v(e=s(e=o(e)))))).map((e=>Math.round(255*e)))}function F(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=b(a),a=h(a),a=l(a),a=i(a),x(a)?M(a).map((e=>Math.round(255*e))):g(u,(e=>i(e=l(e=h(e=b(e))))),(e=>m(e=v(e=s(e=o(e)))))).map((e=>Math.round(255*e)))}function I(e){const t=e.value,n=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let r=null;if("oklab"===t?r=j(n):"oklch"===t&&(r=E(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(!
|
|
30
|
+
*/function y(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 g(e,t,n){return function(e,t,n){let r=0,u=e[1];const a=e;for(;u-r>1e-4;){y(a,n(M(t(a))))-.02<1e-4?r=a[1]:u=a[1],a[1]=(u+r)/2}return M(t([...a]))}(e,t,n)}function M(e){return e.map((e=>e<0?0:e>1?1:e))}function x(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 k(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=h(a),a=p(a),a=f(a),x(a)?[M(a),!0]:[g(u,(e=>f(e=p(e=h(e=b(e))))),(e=>m(e=v(e=d(e=c(e)))))),!1]}function P(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=b(a),a=h(a),a=p(a),a=f(a),x(a)?[M(a),!0]:[g(u,(e=>f(e=p(e=h(e=b(e))))),(e=>m(e=v(e=d(e=c(e)))))),!1]}function w(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=h(a),a=l(a),a=i(a),x(a)?M(a).map((e=>Math.round(255*e))):g(u,(e=>i(e=l(e=h(e=b(e))))),(e=>m(e=v(e=s(e=o(e)))))).map((e=>Math.round(255*e)))}function F(e){const[t,n,r]=e,u=[Math.min(Math.max(t,0),100)/100,n,r];let a=u.slice();return a=b(a),a=h(a),a=l(a),a=i(a),x(a)?M(a).map((e=>Math.round(255*e))):g(u,(e=>i(e=l(e=h(e=b(e))))),(e=>m(e=v(e=s(e=o(e)))))).map((e=>Math.round(255*e)))}function I(e){const t=e.value,n=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let r=null;if("oklab"===t?r=j(n):"oklch"===t&&(r=E(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(!L(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]=$(r),[s,l,c]=D(r),f=("oklab"===t?w:F)([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:""}),G(e.nodes,a,{...a,value:String(f[0])}),G(e.nodes,o,{...o,value:String(f[1])}),G(e.nodes,i,{...i,value:String(f[2])})}function N(e){if(!e||"word"!==e.type)return!1;if(!L(e))return!1;const t=u.default.unit(e.value);return!!t&&(!!t.number&&""===t.unit)}function S(e){if(!e||"word"!==e.type)return!1;if(!L(e))return!1;const t=u.default.unit(e.value);return!!t&&"%"===t.unit}function O(e){if(!e||"word"!==e.type)return!1;if(!L(e))return!1;const t=u.default.unit(e.value);return!!t&&("%"===t.unit||""===t.unit)}function A(e){return e&&"function"===e.type&&"calc"===e.value}function q(e){return e&&"function"===e.type&&"var"===e.value}function B(e){return e&&"div"===e.type&&"/"===e.value}function E(e){if(!S(e[0]))return null;if(!N(e[1]))return null;if(!function(e){if(!e||"word"!==e.type)return!1;if(!L(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:(B(e[3])&&(t.slash=e[3]),(O(e[4])||A(e[4])||q(e[4]))&&(t.alpha=e[4]),t)}function j(e){if(!S(e[0]))return null;if(!N(e[1]))return null;if(!N(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 B(e[3])&&(t.slash=e[3]),(O(e[4])||A(e[4])||q(e[4]))&&(t.alpha=e[4]),t}function C(e){return void 0!==e.a}function $(e){return C(e)?[e.lNode,e.aNode,e.bNode]:[e.lNode,e.cNode,e.hNode]}function D(e){return C(e)?[e.l,e.a,e.b]:[e.l,e.c,e.h]}function G(e,t,n){const r=e.indexOf(t);e[r]=n}function L(e){if(!e||!e.value)return!1;try{return!1!==u.default.unit(e.value)}catch(e){return!1}}function z(e,t,n,r){let a;try{a=u.default(e)}catch(r){t.warn(n,`Failed to parse value '${e}' as an oklab or oklch function. Leaving the original value intact.`)}if(void 0===a)return;a.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==e.value||I(e))}));const o=String(a);if(o===e)return;const i=u.default(e);i.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==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("oklab"===o?s=j(i):"oklch"===o&&(s=E(i)),!s)return;if(i.length>3&&(!s.slash||!s.alpha))return;e.value="color";const[l,c,f]=$(s),[d,p,v]=D(s),h="oklab"===o?k:P,m=[d.number,p.number,v.number].map((e=>parseFloat(e))),[b,y]=h(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"}),G(e.nodes,l,{...l,value:b[0].toFixed(5)}),G(e.nodes,c,{...c,value:b[1].toFixed(5)}),G(e.nodes,f,{...f,value:b[2].toFixed(5)})}(e,t,n,r))}));return{rgb:o,displayP3:String(i)}}const H=e=>({postcssPlugin:"postcss-oklab-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("oklab("))return!0;if(-1!==t.params.indexOf("oklch("))return!0}t=t.parent}else t=t.parent;return!1}(t))return;const r=t.value;if(!/(^|[^\w-])(oklab|oklch)\(/i.test(r))return;const u=z(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()))}});H.postcss=!0;const J=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-oklab-function",plugins:[r.default(),H(t)]}:H(t)};J.postcss=!0,module.exports=J;
|
package/dist/index.mjs
CHANGED
|
@@ -27,4 +27,4 @@ function t(e,n){const t=e.length;let r,u;r=Array.isArray(e[0])?e:[e],Array.isArr
|
|
|
27
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
28
|
*
|
|
29
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,[o,a,i]=n,s=t-o,l=r-a,c=u-i;return Math.sqrt(s**2+l**2+c**2)}function h(e,n,t){return function(e,n,t){let r=0,u=e[1];const o=e;for(;u-r>1e-4;){m(o,t(b(n(o))))-.02<1e-4?r=o[1]:u=o[1],o[1]=(u+r)/2}return b(n([...o]))}(e,n,t)}function b(e){return e.map((e=>e<0?0:e>1?1:e))}function y(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 g(e){const[n,t,r]=e,u=[Math.min(Math.max(n,0),100)/100,t,r];let o=u.slice();return o=p(o),o=c(o),o=s(o),y(o)?[b(o),!0]:[h(u,(e=>s(e=c(e=p(e=v(e))))),(e=>d(e=f(e=l(e=i(e)))))),!1]}function M(e){const[n,t,r]=e,u=[Math.min(Math.max(n,0),100)/100,t,r];let o=u.slice();return o=v(o),o=p(o),o=c(o),o=s(o),y(o)?[b(o),!0]:[h(u,(e=>s(e=c(e=p(e=v(e))))),(e=>d(e=f(e=l(e=i(e)))))),!1]}function x(e){const[n,t,i]=e,s=[Math.min(Math.max(n,0),100)/100,t,i];let l=s.slice();return l=p(l),l=a(l),l=u(l),y(l)?b(l).map((e=>Math.round(255*e))):h(s,(e=>u(e=a(e=p(e=v(e))))),(e=>d(e=f(e=o(e=r(e)))))).map((e=>Math.round(255*e)))}function k(e){const[n,t,i]=e,s=[Math.min(Math.max(n,0),100)/100,t,i];let l=s.slice();return l=v(l),l=p(l),l=a(l),l=u(l),y(l)?b(l).map((e=>Math.round(255*e))):h(s,(e=>u(e=a(e=p(e=v(e))))),(e=>d(e=f(e=o(e=r(e)))))).map((e=>Math.round(255*e)))}function P(e){const t=e.value,r=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let u=null;if("oklab"===t?u=B(r):"oklch"===t&&(u=A(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(!$(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[o,a,i]=j(u),[s,l,c]=q(u),f=("oklab"===t?x:k)([s.number,l.number,c.number].map((e=>parseFloat(e))));e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(a)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),C(e.nodes,o,{...o,value:String(f[0])}),C(e.nodes,a,{...a,value:String(f[1])}),C(e.nodes,i,{...i,value:String(f[2])})}function w(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&(!!t.number&&""===t.unit)}function F(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&"%"===t.unit}function I(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&("%"===t.unit||""===t.unit)}function N(e){return e&&"function"===e.type&&"calc"===e.value}function S(e){return e&&"function"===e.type&&"var"===e.value}function O(e){return e&&"div"===e.type&&"/"===e.value}function A(e){if(!F(e[0]))return null;if(!w(e[1]))return null;if(!function(e){if(!e||"word"!==e.type)return!1;if(!$(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:(O(e[3])&&(t.slash=e[3]),(I(e[4])||N(e[4])||S(e[4]))&&(t.alpha=e[4]),t)}function B(e){if(!F(e[0]))return null;if(!w(e[1]))return null;if(!w(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 O(e[3])&&(t.slash=e[3]),(I(e[4])||N(e[4])||S(e[4]))&&(t.alpha=e[4]),t}function E(e){return void 0!==e.a}function j(e){return E(e)?[e.lNode,e.aNode,e.bNode]:[e.lNode,e.cNode,e.hNode]}function q(e){return E(e)?[e.l,e.a,e.b]:[e.l,e.c,e.h]}function C(e,n,t){const r=e.indexOf(n);e[r]=t}function $(e){if(!e||!e.value)return!1;try{return!1!==n.unit(e.value)}catch(e){return!1}}function D(e,t,r,u){let o;try{o=n(e)}catch(n){t.warn(r,`Failed to parse value '${e}' as an oklab or oklch function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==e.value||P(e))}));const a=String(o);if(a===e)return;const i=n(e);i.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==e.value||function(e,t,r,u){const o=n.stringify(e),a=e.value,i=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let s=null;if("oklab"===a?s=B(i):"oklch"===a&&(s=A(i)),!s)return;if(i.length>3&&(!s.slash||!s.alpha))return;e.value="color";const[l,c,f]=j(s),[p,d,v]=q(s),m="oklab"===a?g:M,h=[p.number,d.number,v.number].map((e=>parseFloat(e))),[b,y]=m(h);!y&&u&&t.warn(r,`"${o}" is out of gamut for "display-p3".
|
|
30
|
+
*/function m(e,n){const[t,r,u]=e,[o,a,i]=n,s=t-o,l=r-a,c=u-i;return Math.sqrt(s**2+l**2+c**2)}function h(e,n,t){return function(e,n,t){let r=0,u=e[1];const o=e;for(;u-r>1e-4;){m(o,t(b(n(o))))-.02<1e-4?r=o[1]:u=o[1],o[1]=(u+r)/2}return b(n([...o]))}(e,n,t)}function b(e){return e.map((e=>e<0?0:e>1?1:e))}function y(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 g(e){const[n,t,r]=e,u=[Math.min(Math.max(n,0),100)/100,t,r];let o=u.slice();return o=p(o),o=c(o),o=s(o),y(o)?[b(o),!0]:[h(u,(e=>s(e=c(e=p(e=v(e))))),(e=>d(e=f(e=l(e=i(e)))))),!1]}function M(e){const[n,t,r]=e,u=[Math.min(Math.max(n,0),100)/100,t,r];let o=u.slice();return o=v(o),o=p(o),o=c(o),o=s(o),y(o)?[b(o),!0]:[h(u,(e=>s(e=c(e=p(e=v(e))))),(e=>d(e=f(e=l(e=i(e)))))),!1]}function x(e){const[n,t,i]=e,s=[Math.min(Math.max(n,0),100)/100,t,i];let l=s.slice();return l=p(l),l=a(l),l=u(l),y(l)?b(l).map((e=>Math.round(255*e))):h(s,(e=>u(e=a(e=p(e=v(e))))),(e=>d(e=f(e=o(e=r(e)))))).map((e=>Math.round(255*e)))}function k(e){const[n,t,i]=e,s=[Math.min(Math.max(n,0),100)/100,t,i];let l=s.slice();return l=v(l),l=p(l),l=a(l),l=u(l),y(l)?b(l).map((e=>Math.round(255*e))):h(s,(e=>u(e=a(e=p(e=v(e))))),(e=>d(e=f(e=o(e=r(e)))))).map((e=>Math.round(255*e)))}function P(e){const t=e.value,r=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let u=null;if("oklab"===t?u=B(r):"oklch"===t&&(u=A(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(!$(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[o,a,i]=j(u),[s,l,c]=q(u),f=("oklab"===t?x:k)([s.number,l.number,c.number].map((e=>parseFloat(e))));e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(a)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),C(e.nodes,o,{...o,value:String(f[0])}),C(e.nodes,a,{...a,value:String(f[1])}),C(e.nodes,i,{...i,value:String(f[2])})}function w(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&(!!t.number&&""===t.unit)}function F(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&"%"===t.unit}function I(e){if(!e||"word"!==e.type)return!1;if(!$(e))return!1;const t=n.unit(e.value);return!!t&&("%"===t.unit||""===t.unit)}function N(e){return e&&"function"===e.type&&"calc"===e.value}function S(e){return e&&"function"===e.type&&"var"===e.value}function O(e){return e&&"div"===e.type&&"/"===e.value}function A(e){if(!F(e[0]))return null;if(!w(e[1]))return null;if(!function(e){if(!e||"word"!==e.type)return!1;if(!$(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:(O(e[3])&&(t.slash=e[3]),(I(e[4])||N(e[4])||S(e[4]))&&(t.alpha=e[4]),t)}function B(e){if(!F(e[0]))return null;if(!w(e[1]))return null;if(!w(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 O(e[3])&&(t.slash=e[3]),(I(e[4])||N(e[4])||S(e[4]))&&(t.alpha=e[4]),t}function E(e){return void 0!==e.a}function j(e){return E(e)?[e.lNode,e.aNode,e.bNode]:[e.lNode,e.cNode,e.hNode]}function q(e){return E(e)?[e.l,e.a,e.b]:[e.l,e.c,e.h]}function C(e,n,t){const r=e.indexOf(n);e[r]=t}function $(e){if(!e||!e.value)return!1;try{return!1!==n.unit(e.value)}catch(e){return!1}}function D(e,t,r,u){let o;try{o=n(e)}catch(n){t.warn(r,`Failed to parse value '${e}' as an oklab or oklch function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==e.value||P(e))}));const a=String(o);if(a===e)return;const i=n(e);i.walk((e=>{e.type&&"function"===e.type&&("oklab"!==e.value&&"oklch"!==e.value||function(e,t,r,u){const o=n.stringify(e),a=e.value,i=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let s=null;if("oklab"===a?s=B(i):"oklch"===a&&(s=A(i)),!s)return;if(i.length>3&&(!s.slash||!s.alpha))return;e.value="color";const[l,c,f]=j(s),[p,d,v]=q(s),m="oklab"===a?g:M,h=[p.number,d.number,v.number].map((e=>parseFloat(e))),[b,y]=m(h);!y&&u&&t.warn(r,`"${o}" 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"}),C(e.nodes,l,{...l,value:b[0].toFixed(5)}),C(e.nodes,c,{...c,value:b[1].toFixed(5)}),C(e.nodes,f,{...f,value:b[2].toFixed(5)})}(e,t,r,u))}));return{rgb:a,displayP3:String(i)}}const G=e=>({postcssPlugin:"postcss-oklab-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("oklab("))return!0;if(-1!==n.params.indexOf("oklch("))return!0}n=n.parent}else n=n.parent;return!1}(n))return;const r=n.value;if(!/(^|[^\w-])(oklab|oklch)\(/i.test(r))return;const u=D(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()))}});G.postcss=!0;const L=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-oklab-function",plugins:[e(),G(t)]}:G(t)};L.postcss=!0;export{L as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@csstools/postcss-oklab-function",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Use oklab() and oklch() color functions in CSS",
|
|
5
5
|
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
|
|
6
6
|
"license": "CC0-1.0",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"node": "^12 || ^14 || >=16"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@csstools/postcss-progressive-custom-properties": "^1.
|
|
39
|
+
"@csstools/postcss-progressive-custom-properties": "^1.1.0",
|
|
40
40
|
"postcss-value-parser": "^4.2.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|