diff --git a/.github/ISSUE_TEMPLATE/css-issue.yml b/.github/ISSUE_TEMPLATE/css-issue.yml index 92669c654..7cfe1d114 100644 --- a/.github/ISSUE_TEMPLATE/css-issue.yml +++ b/.github/ISSUE_TEMPLATE/css-issue.yml @@ -103,6 +103,7 @@ body: - PostCSS Progressive Custom Properties - PostCSS Pseudo Class Any Link - PostCSS Rebeccapurple + - PostCSS Relative Color Syntax - PostCSS Replace Overflow Wrap - PostCSS Scope Pseudo Class - PostCSS Selector Not diff --git a/.github/ISSUE_TEMPLATE/plugin-issue.yml b/.github/ISSUE_TEMPLATE/plugin-issue.yml index d17eb9b9a..b16bcca62 100644 --- a/.github/ISSUE_TEMPLATE/plugin-issue.yml +++ b/.github/ISSUE_TEMPLATE/plugin-issue.yml @@ -105,6 +105,7 @@ body: - PostCSS Progressive Custom Properties - PostCSS Pseudo Class Any Link - PostCSS Rebeccapurple + - PostCSS Relative Color Syntax - PostCSS Replace Overflow Wrap - PostCSS Scope Pseudo Class - PostCSS Selector Not diff --git a/.github/labeler.yml b/.github/labeler.yml index 6047074d9..1f6b48d3f 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -215,14 +215,18 @@ - plugins/postcss-pseudo-class-any-link/** - experimental/postcss-pseudo-class-any-link/** -"plugins/postcss-scope-pseudo-class": - - plugins/postcss-scope-pseudo-class/** - - experimental/postcss-scope-pseudo-class/** +"plugins/postcss-relative-color-syntax": + - plugins/postcss-relative-color-syntax/** + - experimental/postcss-relative-color-syntax/** "plugins/postcss-replace-overflow-wrap": - plugins/postcss-replace-overflow-wrap/** - experimental/postcss-replace-overflow-wrap/** +"plugins/postcss-scope-pseudo-class": + - plugins/postcss-scope-pseudo-class/** + - experimental/postcss-scope-pseudo-class/** + "plugins/postcss-selector-not": - plugins/postcss-selector-not/** - experimental/postcss-selector-not/** diff --git a/package-lock.json b/package-lock.json index 3ae4ae3e5..125a62a1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2035,6 +2035,10 @@ "resolved": "plugins/postcss-progressive-custom-properties", "link": true }, + "node_modules/@csstools/postcss-relative-color-syntax": { + "resolved": "plugins/postcss-relative-color-syntax", + "link": true + }, "node_modules/@csstools/postcss-scope-pseudo-class": { "resolved": "plugins/postcss-scope-pseudo-class", "link": true @@ -3745,13 +3749,19 @@ "peer": true }, "node_modules/cssdb": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.5.4.tgz", - "integrity": "sha512-fGD+J6Jlq+aurfE1VDXlLS4Pt0VtNlu2+YgfGOdMxRyl/HQ9bDiHTwSck1Yz8A97Dt/82izSK6Bp/4nVqacOsg==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.6.0.tgz", + "integrity": "sha512-Nna7rph8V0jC6+JBY4Vk4ndErUmfJfV6NJCaZdurL0omggabiy+QB2HCQtu5c/ACLZ0I7REv7A4QyPIoYzZx0w==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + } + ] }, "node_modules/cssesc": { "version": "3.0.0", @@ -4679,13 +4689,14 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", - "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", + "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", "dev": true, "dependencies": { "function-bind": "^1.1.1", "has": "^1.0.3", + "has-proto": "^1.0.1", "has-symbols": "^1.0.3" }, "funding": { @@ -4821,6 +4832,18 @@ "node": ">=4" } }, + "node_modules/has-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", + "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -5638,9 +5661,9 @@ } }, "node_modules/ora": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.0.tgz", - "integrity": "sha512-1/D8uRFY0ay2kgBpmAwmSA404w4OoPVhHMqRqtjvrcK/dnzcEZxMJ+V4DUbyICu8IIVRclHcOf5wlD1tMY4GUQ==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/ora/-/ora-6.3.1.tgz", + "integrity": "sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==", "dev": true, "dependencies": { "chalk": "^5.0.0", @@ -5802,13 +5825,13 @@ "dev": true }, "node_modules/path-scurry": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.8.0.tgz", - "integrity": "sha512-IjTrKseM404/UAWA8bBbL3Qp6O2wXkanuIE3seCxBH7ctRuvH1QRawy1N3nVDHGkdeZsjOsSe/8AQBL/VQCy2g==", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.9.1.tgz", + "integrity": "sha512-UgmoiySyjFxP6tscZDgWGEAgsW5ok8W3F5CJDnnH2pozwSTGE6eH7vwTotMwATWA2r5xqdkKdxYPkwlJjAI/3g==", "dev": true, "dependencies": { "lru-cache": "^9.1.1", - "minipass": "^5.0.0" + "minipass": "^5.0.0 || ^6.0.0" }, "engines": { "node": ">=16 || 14 >=14.17" @@ -5827,12 +5850,12 @@ } }, "node_modules/path-scurry/node_modules/minipass": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", - "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.0.tgz", + "integrity": "sha512-mvD5U4pUen1aWcjTxUgdoMg6PB98dcV0obc/OiPzls79++IpgNoO+MCbOHRlKfWIOvjIjmjUygjZmSStP7B0Og==", "dev": true, "engines": { - "node": ">=8" + "node": ">=16 || 14 >=14.17" } }, "node_modules/path-type": { @@ -7779,7 +7802,7 @@ "css-blank-pseudo": "^5.0.2", "css-has-pseudo": "^5.0.2", "css-prefers-color-scheme": "^8.0.2", - "cssdb": "^7.5.3", + "cssdb": "^7.6.0", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^5.0.2", @@ -9073,6 +9096,36 @@ "postcss": "^8.4" } }, + "plugins/postcss-relative-color-syntax": { + "name": "@csstools/postcss-relative-color-syntax", + "version": "0.0.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "CC0-1.0", + "dependencies": { + "@csstools/css-color-parser": "^1.1.2", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.0.0" + }, + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "plugins/postcss-scope-pseudo-class": { "name": "@csstools/postcss-scope-pseudo-class", "version": "2.0.2", diff --git a/packages/color-helpers/CHANGELOG.md b/packages/color-helpers/CHANGELOG.md index 428eece71..5fc3ce330 100644 --- a/packages/color-helpers/CHANGELOG.md +++ b/packages/color-helpers/CHANGELOG.md @@ -1,5 +1,11 @@ # Changes to Color Helpers +### Unreleased (minor) + +- Fix gamut mapping +- Fix `XYZ_D50_to_ProPhoto` +- Export `sRGB_to_HWB` + ### 2.0.0 (March 25, 2023) - Removed certain implementation specific helpers. Keeping this package more focussed on general purpose color transformations. diff --git a/packages/color-helpers/dist/conversions/index.d.ts b/packages/color-helpers/dist/conversions/index.d.ts index 7295fedfa..9a2ed427c 100644 --- a/packages/color-helpers/dist/conversions/index.d.ts +++ b/packages/color-helpers/dist/conversions/index.d.ts @@ -27,6 +27,7 @@ export * from './oklab-to-oklch'; export * from './oklab-to-xyz'; export * from './oklch-to-oklab'; export * from './srgb-to-hsl'; +export * from './srgb-to-hwb'; export * from './srgb-to-luminance'; export * from './xyz-to-lab'; export * from './xyz-to-lin-2020'; diff --git a/packages/color-helpers/dist/conversions/srgb-to-hwb.d.ts b/packages/color-helpers/dist/conversions/srgb-to-hwb.d.ts new file mode 100644 index 000000000..9a79caf7b --- /dev/null +++ b/packages/color-helpers/dist/conversions/srgb-to-hwb.d.ts @@ -0,0 +1,11 @@ +import type { Color } from 'types/color'; +/** + * Convert an array of gamma-corrected sRGB values in the 0.0 to 1.0 range to HWB. + * + * @param {Color} RGB [r, g, b] + * - Red component 0..1 + * - Green component 0..1 + * - Blue component 0..1 + * @return {number[]} Array of HWB values + */ +export declare function sRGB_to_HWB(RGB: Color): Color; diff --git a/packages/color-helpers/dist/index.cjs b/packages/color-helpers/dist/index.cjs index 4a4468a8a..cf3e43108 100644 --- a/packages/color-helpers/dist/index.cjs +++ b/packages/color-helpers/dist/index.cjs @@ -22,7 +22,12 @@ * @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 deltaEOK(t,_){const[o,n,r]=t,[e,a,i]=_,l=o-e,u=n-a,c=r-i;return Math.sqrt(l**2+u**2+c**2)}function binarySearchGamut(t,_,o){let n=0,r=t[1];const e=t;for(;r-n>1e-4;){const t=clip(_(e));deltaEOK(OKLCH_to_OKLab(e),OKLCH_to_OKLab(o(t)))-.02<1e-4?n=e[1]:r=e[1],e[1]=(r+n)/2}return clip(_([...e]))} + */function deltaEOK(t,_){const[o,n,r]=t,[e,a,i]=_,l=o-e,u=n-a,c=r-i;return Math.sqrt(l**2+u**2+c**2)} +/** + * @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/map-gamut.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). + */function inGamut(t){const[_,o,n]=t;return _>=-1e-4&&_<=1.0001&&o>=-1e-4&&o<=1.0001&&n>=-1e-4&&n<=1.0001}var t=Object.freeze({__proto__:null,clip:clip,inGamut:inGamut});const _=.02,o=1e-5;function binarySearchGamut(t,n,r){const e=t;let a=0,i=e[1];for(;i-a>o;){const t=(a+i)/2;e[1]=t;const o=n(e);if(inGamut(o)){a=t;continue}const l=clip(o);if(deltaEOK(OKLCH_to_OKLab(r(l)),OKLCH_to_OKLab(e))<_)return l;i=t}return clip(n([...e]))} /** * Convert an array of of sRGB values where in-gamut values are in the range * [0 - 1] to linear light (un-companded) form. @@ -76,7 +81,7 @@ function lin_sRGB(t){return t.map((function(t){const _=t<0?-1:1,o=Math.abs(t);re * * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js * @see https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio - */var t=Object.freeze({__proto__:null,binarySearchGamut:binarySearchGamut,contrast:function contrast(t,_){const o=sRGB_to_luminance(t),n=sRGB_to_luminance(_);return o>n?(o+.05)/(n+.05):(n+.05)/(o+.05)},deltaEOK:deltaEOK,mapGamut:function mapGamut(t,_,o){return binarySearchGamut(t,_,o)},multiplyMatrices:multiplyMatrices});const _=[.3457/.3585,1,.2958/.3585]; + */var n=Object.freeze({__proto__:null,binarySearchGamut:binarySearchGamut,contrast:function contrast(t,_){const o=sRGB_to_luminance(t),n=sRGB_to_luminance(_);return o>n?(o+.05)/(n+.05):(n+.05)/(o+.05)},deltaEOK:deltaEOK,mapGamut:function mapGamut(t,_,o){return binarySearchGamut(t,_,o)},multiplyMatrices:multiplyMatrices});const r=[.3457/.3585,1,.2958/.3585]; /** * Bradford chromatic adaptation from D50 to D65 * @@ -182,7 +187,7 @@ function HWB_to_sRGB(t){const _=t[0];let o=t[1],n=t[2];if(o/=100,n/=100,o+n>=1){ * @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 http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html - */function Lab_to_XYZ(t){const o=24389/27,n=216/24389,r=[];r[1]=(t[0]+16)/116,r[0]=t[1]/500+r[1],r[2]=r[1]-t[2]/200;return[Math.pow(r[0],3)>n?Math.pow(r[0],3):(116*r[0]-16)/o,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/o,Math.pow(r[2],3)>n?Math.pow(r[2],3):(116*r[2]-16)/o].map(((t,o)=>t*_[o]))} + */function Lab_to_XYZ(t){const _=24389/27,o=216/24389,n=[];n[1]=(t[0]+16)/116,n[0]=t[1]/500+n[1],n[2]=n[1]-t[2]/200;return[Math.pow(n[0],3)>o?Math.pow(n[0],3):(116*n[0]-16)/_,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/_,Math.pow(n[2],3)>o?Math.pow(n[2],3):(116*n[2]-16)/_].map(((t,_)=>t*r[_]))} /** * @license W3C https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document * @@ -318,7 +323,8 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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). - */function XYZ_to_Lab(t){const o=t.map(((t,o)=>t/_[o])).map((t=>t>.008856451679035631?Math.cbrt(t):(903.2962962962963*t+16)/116));return[116*o[1]-16,500*(o[0]-o[1]),200*(o[1]-o[2])]} + */ +function XYZ_to_Lab(t){const _=t.map(((t,_)=>t/r[_])).map((t=>t>.008856451679035631?Math.cbrt(t):(903.2962962962963*t+16)/116));return[116*_[1]-16,500*(_[0]-_[1]),200*(_[1]-_[2])]} /** * Convert XYZ to linear-light rec2020 * @@ -370,7 +376,7 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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 - */var o=Object.freeze({__proto__:null,D50:_,D50_to_D65:D50_to_D65,D65:[.3127/.329,1,.3583/.329],D65_to_D50:D65_to_D50,HSL_to_sRGB:HSL_to_sRGB,HWB_to_sRGB:HWB_to_sRGB,LCH_to_Lab:LCH_to_Lab,Lab_to_LCH:Lab_to_LCH,Lab_to_XYZ:Lab_to_XYZ,OKLCH_to_OKLab:OKLCH_to_OKLab,OKLab_to_OKLCH:OKLab_to_OKLCH,OKLab_to_XYZ:OKLab_to_XYZ,XYZ_to_Lab:XYZ_to_Lab,XYZ_to_OKLab:XYZ_to_OKLab,XYZ_to_lin_2020:XYZ_to_lin_2020,XYZ_to_lin_P3:XYZ_to_lin_P3,XYZ_to_lin_ProPhoto:XYZ_to_lin_ProPhoto,XYZ_to_lin_a98rgb:XYZ_to_lin_a98rgb,XYZ_to_lin_sRGB:XYZ_to_lin_sRGB,XYZ_to_uv:function XYZ_to_uv(t){const _=t[0],o=t[1],n=_+15*o+3*t[2];return[4*_/n,9*o/n]} + */var e=Object.freeze({__proto__:null,D50:r,D50_to_D65:D50_to_D65,D65:[.3127/.329,1,.3583/.329],D65_to_D50:D65_to_D50,HSL_to_sRGB:HSL_to_sRGB,HWB_to_sRGB:HWB_to_sRGB,LCH_to_Lab:LCH_to_Lab,Lab_to_LCH:Lab_to_LCH,Lab_to_XYZ:Lab_to_XYZ,OKLCH_to_OKLab:OKLCH_to_OKLab,OKLab_to_OKLCH:OKLab_to_OKLCH,OKLab_to_XYZ:OKLab_to_XYZ,XYZ_to_Lab:XYZ_to_Lab,XYZ_to_OKLab:XYZ_to_OKLab,XYZ_to_lin_2020:XYZ_to_lin_2020,XYZ_to_lin_P3:XYZ_to_lin_P3,XYZ_to_lin_ProPhoto:XYZ_to_lin_ProPhoto,XYZ_to_lin_a98rgb:XYZ_to_lin_a98rgb,XYZ_to_lin_sRGB:XYZ_to_lin_sRGB,XYZ_to_uv:function XYZ_to_uv(t){const _=t[0],o=t[1],n=_+15*o+3*t[2];return[4*_/n,9*o/n]} /** * Convert an array of three XYZ values to x,y chromaticity coordinates * @@ -379,9 +385,4 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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 - */,XYZ_to_xy:function XYZ_to_xy(t){const _=t[0],o=t[1],n=_+o+t[2];return[_/n,o/n]},gam_2020:gam_2020,gam_P3:gam_P3,gam_ProPhoto:gam_ProPhoto,gam_a98rgb:gam_a98rgb,gam_sRGB:gam_sRGB,hueToRGB:function hueToRGB(t,_,o){return o<0&&(o+=6),o>=6&&(o-=6),o<1?(_-t)*o+t:o<3?_:o<4?(_-t)*(4-o)+t:t},lin_2020:lin_2020,lin_2020_to_XYZ:lin_2020_to_XYZ,lin_P3:lin_P3,lin_P3_to_XYZ:lin_P3_to_XYZ,lin_ProPhoto:lin_ProPhoto,lin_ProPhoto_to_XYZ:lin_ProPhoto_to_XYZ,lin_a98rgb:lin_a98rgb,lin_a98rgb_to_XYZ:lin_a98rgb_to_XYZ,lin_sRGB:lin_sRGB,lin_sRGB_to_XYZ:lin_sRGB_to_XYZ,naive_CMYK_to_sRGB:function naive_CMYK_to_sRGB(t){const _=t[0],o=t[1],n=t[2],r=t[3];return[1-Math.min(1,_*(1-r)+r),1-Math.min(1,o*(1-r)+r),1-Math.min(1,n*(1-r)+r)]},sRGB_to_HSL:sRGB_to_HSL,sRGB_to_luminance:sRGB_to_luminance}); -/** - * @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/map-gamut.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). - */var n=Object.freeze({__proto__:null,clip:clip,inGamut:function inGamut(t){const[_,o,n]=t;return _>=-1e-4&&_<=1.0001&&o>=-1e-4&&o<=1.0001&&n>=-1e-4&&n<=1.0001}});var r=Object.freeze({__proto__:null,HSL_to_XYZ_D50:function HSL_to_XYZ_D50(t){let _=t;return _=HSL_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},HWB_to_XYZ_D50:function HWB_to_XYZ_D50(t){let _=t;return _=HWB_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},LCH_to_XYZ_D50:function LCH_to_XYZ_D50(t){let _=t;return _=LCH_to_Lab(_),_=Lab_to_XYZ(_),_},Lab_to_XYZ_D50:function Lab_to_XYZ_D50(t){let _=t;return _=Lab_to_XYZ(_),_},OKLCH_to_XYZ_D50:function OKLCH_to_XYZ_D50(t){let _=t;return _=OKLCH_to_OKLab(_),_=OKLab_to_XYZ(_),_=D65_to_D50(_),_},OKLab_to_XYZ_D50:function OKLab_to_XYZ_D50(t){let _=t;return _=OKLab_to_XYZ(_),_=D65_to_D50(_),_},P3_to_XYZ_D50:function P3_to_XYZ_D50(t){let _=t;return _=lin_P3(_),_=lin_P3_to_XYZ(_),_=D65_to_D50(_),_},ProPhoto_RGB_to_XYZ_D50:function ProPhoto_RGB_to_XYZ_D50(t){let _=t;return _=lin_ProPhoto(_),_=lin_ProPhoto_to_XYZ(_),_},XYZ_D50_to_HSL:function XYZ_D50_to_HSL(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_=sRGB_to_HSL(_),_},XYZ_D50_to_HWB:function XYZ_D50_to_HWB(t){let _=t;_=D50_to_D65(_),_=XYZ_to_lin_sRGB(_);const o=gam_sRGB(_);_=sRGB_to_HSL(o);const n=Math.min(o[0],o[1],o[2]),r=1-Math.max(o[0],o[1],o[2]);return[_[0],100*n,100*r]},XYZ_D50_to_LCH:function XYZ_D50_to_LCH(t){let _=t;return _=XYZ_to_Lab(_),_=Lab_to_LCH(_),_},XYZ_D50_to_Lab:function XYZ_D50_to_Lab(t){let _=t;return _=XYZ_to_Lab(_),_},XYZ_D50_to_OKLCH:function XYZ_D50_to_OKLCH(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_=OKLab_to_OKLCH(_),_},XYZ_D50_to_OKLab:function XYZ_D50_to_OKLab(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_},XYZ_D50_to_P3:function XYZ_D50_to_P3(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_P3(_),_=gam_P3(_),_},XYZ_D50_to_ProPhoto:function XYZ_D50_to_ProPhoto(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_ProPhoto(_),_=gam_ProPhoto(_),_},XYZ_D50_to_XYZ_D50:function XYZ_D50_to_XYZ_D50(t){return t},XYZ_D50_to_XYZ_D65:function XYZ_D50_to_XYZ_D65(t){let _=t;return _=D50_to_D65(_),_},XYZ_D50_to_a98_RGB:function XYZ_D50_to_a98_RGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_a98rgb(_),_=gam_a98rgb(_),_},XYZ_D50_to_lin_sRGB:function XYZ_D50_to_lin_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_},XYZ_D50_to_rec_2020:function XYZ_D50_to_rec_2020(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_2020(_),_=gam_2020(_),_},XYZ_D50_to_sRGB:function XYZ_D50_to_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_},XYZ_D65_to_XYZ_D50:function XYZ_D65_to_XYZ_D50(t){let _=t;return _=D65_to_D50(_),_},a98_RGB_to_XYZ_D50:function a98_RGB_to_XYZ_D50(t){let _=t;return _=lin_a98rgb(_),_=lin_a98rgb_to_XYZ(_),_=D65_to_D50(_),_},lin_sRGB_to_XYZ_D50:function lin_sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},rec_2020_to_XYZ_D50:function rec_2020_to_XYZ_D50(t){let _=t;return _=lin_2020(_),_=lin_2020_to_XYZ(_),_=D65_to_D50(_),_},sRGB_to_XYZ_D50:function sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_}});exports.calculations=t,exports.conversions=o,exports.namedColors={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},exports.utils=n,exports.xyz=r; + */,XYZ_to_xy:function XYZ_to_xy(t){const _=t[0],o=t[1],n=_+o+t[2];return[_/n,o/n]},gam_2020:gam_2020,gam_P3:gam_P3,gam_ProPhoto:gam_ProPhoto,gam_a98rgb:gam_a98rgb,gam_sRGB:gam_sRGB,hueToRGB:function hueToRGB(t,_,o){return o<0&&(o+=6),o>=6&&(o-=6),o<1?(_-t)*o+t:o<3?_:o<4?(_-t)*(4-o)+t:t},lin_2020:lin_2020,lin_2020_to_XYZ:lin_2020_to_XYZ,lin_P3:lin_P3,lin_P3_to_XYZ:lin_P3_to_XYZ,lin_ProPhoto:lin_ProPhoto,lin_ProPhoto_to_XYZ:lin_ProPhoto_to_XYZ,lin_a98rgb:lin_a98rgb,lin_a98rgb_to_XYZ:lin_a98rgb_to_XYZ,lin_sRGB:lin_sRGB,lin_sRGB_to_XYZ:lin_sRGB_to_XYZ,naive_CMYK_to_sRGB:function naive_CMYK_to_sRGB(t){const _=t[0],o=t[1],n=t[2],r=t[3];return[1-Math.min(1,_*(1-r)+r),1-Math.min(1,o*(1-r)+r),1-Math.min(1,n*(1-r)+r)]},sRGB_to_HSL:sRGB_to_HSL,sRGB_to_HWB:function sRGB_to_HWB(t){const _=sRGB_to_HSL(t),o=Math.min(t[0],t[1],t[2]),n=1-Math.max(t[0],t[1],t[2]);return[_[0],100*o,100*n]},sRGB_to_luminance:sRGB_to_luminance});var a=Object.freeze({__proto__:null,HSL_to_XYZ_D50:function HSL_to_XYZ_D50(t){let _=t;return _=HSL_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},HWB_to_XYZ_D50:function HWB_to_XYZ_D50(t){let _=t;return _=HWB_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},LCH_to_XYZ_D50:function LCH_to_XYZ_D50(t){let _=t;return _=LCH_to_Lab(_),_=Lab_to_XYZ(_),_},Lab_to_XYZ_D50:function Lab_to_XYZ_D50(t){let _=t;return _=Lab_to_XYZ(_),_},OKLCH_to_XYZ_D50:function OKLCH_to_XYZ_D50(t){let _=t;return _=OKLCH_to_OKLab(_),_=OKLab_to_XYZ(_),_=D65_to_D50(_),_},OKLab_to_XYZ_D50:function OKLab_to_XYZ_D50(t){let _=t;return _=OKLab_to_XYZ(_),_=D65_to_D50(_),_},P3_to_XYZ_D50:function P3_to_XYZ_D50(t){let _=t;return _=lin_P3(_),_=lin_P3_to_XYZ(_),_=D65_to_D50(_),_},ProPhoto_RGB_to_XYZ_D50:function ProPhoto_RGB_to_XYZ_D50(t){let _=t;return _=lin_ProPhoto(_),_=lin_ProPhoto_to_XYZ(_),_},XYZ_D50_to_HSL:function XYZ_D50_to_HSL(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_=sRGB_to_HSL(_),_},XYZ_D50_to_HWB:function XYZ_D50_to_HWB(t){let _=t;_=D50_to_D65(_),_=XYZ_to_lin_sRGB(_);const o=gam_sRGB(_);_=sRGB_to_HSL(o);const n=Math.min(o[0],o[1],o[2]),r=1-Math.max(o[0],o[1],o[2]);return[_[0],100*n,100*r]},XYZ_D50_to_LCH:function XYZ_D50_to_LCH(t){let _=t;return _=XYZ_to_Lab(_),_=Lab_to_LCH(_),_},XYZ_D50_to_Lab:function XYZ_D50_to_Lab(t){let _=t;return _=XYZ_to_Lab(_),_},XYZ_D50_to_OKLCH:function XYZ_D50_to_OKLCH(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_=OKLab_to_OKLCH(_),_},XYZ_D50_to_OKLab:function XYZ_D50_to_OKLab(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_},XYZ_D50_to_P3:function XYZ_D50_to_P3(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_P3(_),_=gam_P3(_),_},XYZ_D50_to_ProPhoto:function XYZ_D50_to_ProPhoto(t){let _=t;return _=XYZ_to_lin_ProPhoto(_),_=gam_ProPhoto(_),_},XYZ_D50_to_XYZ_D50:function XYZ_D50_to_XYZ_D50(t){return t},XYZ_D50_to_XYZ_D65:function XYZ_D50_to_XYZ_D65(t){let _=t;return _=D50_to_D65(_),_},XYZ_D50_to_a98_RGB:function XYZ_D50_to_a98_RGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_a98rgb(_),_=gam_a98rgb(_),_},XYZ_D50_to_lin_sRGB:function XYZ_D50_to_lin_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_},XYZ_D50_to_rec_2020:function XYZ_D50_to_rec_2020(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_2020(_),_=gam_2020(_),_},XYZ_D50_to_sRGB:function XYZ_D50_to_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_},XYZ_D65_to_XYZ_D50:function XYZ_D65_to_XYZ_D50(t){let _=t;return _=D65_to_D50(_),_},a98_RGB_to_XYZ_D50:function a98_RGB_to_XYZ_D50(t){let _=t;return _=lin_a98rgb(_),_=lin_a98rgb_to_XYZ(_),_=D65_to_D50(_),_},lin_sRGB_to_XYZ_D50:function lin_sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},rec_2020_to_XYZ_D50:function rec_2020_to_XYZ_D50(t){let _=t;return _=lin_2020(_),_=lin_2020_to_XYZ(_),_=D65_to_D50(_),_},sRGB_to_XYZ_D50:function sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_}});exports.calculations=n,exports.conversions=e,exports.namedColors={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]},exports.utils=t,exports.xyz=a; diff --git a/packages/color-helpers/dist/index.mjs b/packages/color-helpers/dist/index.mjs index 7b00b351b..9a1bb789f 100644 --- a/packages/color-helpers/dist/index.mjs +++ b/packages/color-helpers/dist/index.mjs @@ -22,7 +22,12 @@ function clip(t){return t.map((t=>t<0?0:t>1?1:t))} * @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 deltaEOK(t,_){const[o,n,r]=t,[e,a,i]=_,l=o-e,u=n-a,c=r-i;return Math.sqrt(l**2+u**2+c**2)}function binarySearchGamut(t,_,o){let n=0,r=t[1];const e=t;for(;r-n>1e-4;){const t=clip(_(e));deltaEOK(OKLCH_to_OKLab(e),OKLCH_to_OKLab(o(t)))-.02<1e-4?n=e[1]:r=e[1],e[1]=(r+n)/2}return clip(_([...e]))} + */function deltaEOK(t,_){const[o,n,r]=t,[e,a,i]=_,l=o-e,u=n-a,c=r-i;return Math.sqrt(l**2+u**2+c**2)} +/** + * @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/map-gamut.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). + */function inGamut(t){const[_,o,n]=t;return _>=-1e-4&&_<=1.0001&&o>=-1e-4&&o<=1.0001&&n>=-1e-4&&n<=1.0001}var t=Object.freeze({__proto__:null,clip:clip,inGamut:inGamut});const _=.02,o=1e-5;function binarySearchGamut(t,n,r){const e=t;let a=0,i=e[1];for(;i-a>o;){const t=(a+i)/2;e[1]=t;const o=n(e);if(inGamut(o)){a=t;continue}const l=clip(o);if(deltaEOK(OKLCH_to_OKLab(r(l)),OKLCH_to_OKLab(e))<_)return l;i=t}return clip(n([...e]))} /** * Convert an array of of sRGB values where in-gamut values are in the range * [0 - 1] to linear light (un-companded) form. @@ -76,7 +81,7 @@ function lin_sRGB(t){return t.map((function(t){const _=t<0?-1:1,o=Math.abs(t);re * * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js * @see https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio - */var t=Object.freeze({__proto__:null,binarySearchGamut:binarySearchGamut,contrast:function contrast(t,_){const o=sRGB_to_luminance(t),n=sRGB_to_luminance(_);return o>n?(o+.05)/(n+.05):(n+.05)/(o+.05)},deltaEOK:deltaEOK,mapGamut:function mapGamut(t,_,o){return binarySearchGamut(t,_,o)},multiplyMatrices:multiplyMatrices});const _=[.3457/.3585,1,.2958/.3585]; + */var n=Object.freeze({__proto__:null,binarySearchGamut:binarySearchGamut,contrast:function contrast(t,_){const o=sRGB_to_luminance(t),n=sRGB_to_luminance(_);return o>n?(o+.05)/(n+.05):(n+.05)/(o+.05)},deltaEOK:deltaEOK,mapGamut:function mapGamut(t,_,o){return binarySearchGamut(t,_,o)},multiplyMatrices:multiplyMatrices});const r=[.3457/.3585,1,.2958/.3585]; /** * Bradford chromatic adaptation from D50 to D65 * @@ -182,7 +187,7 @@ function HWB_to_sRGB(t){const _=t[0];let o=t[1],n=t[2];if(o/=100,n/=100,o+n>=1){ * @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 http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html - */function Lab_to_XYZ(t){const o=24389/27,n=216/24389,r=[];r[1]=(t[0]+16)/116,r[0]=t[1]/500+r[1],r[2]=r[1]-t[2]/200;return[Math.pow(r[0],3)>n?Math.pow(r[0],3):(116*r[0]-16)/o,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/o,Math.pow(r[2],3)>n?Math.pow(r[2],3):(116*r[2]-16)/o].map(((t,o)=>t*_[o]))} + */function Lab_to_XYZ(t){const _=24389/27,o=216/24389,n=[];n[1]=(t[0]+16)/116,n[0]=t[1]/500+n[1],n[2]=n[1]-t[2]/200;return[Math.pow(n[0],3)>o?Math.pow(n[0],3):(116*n[0]-16)/_,t[0]>8?Math.pow((t[0]+16)/116,3):t[0]/_,Math.pow(n[2],3)>o?Math.pow(n[2],3):(116*n[2]-16)/_].map(((t,_)=>t*r[_]))} /** * @license W3C https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document * @@ -318,7 +323,8 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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). - */function XYZ_to_Lab(t){const o=t.map(((t,o)=>t/_[o])).map((t=>t>.008856451679035631?Math.cbrt(t):(903.2962962962963*t+16)/116));return[116*o[1]-16,500*(o[0]-o[1]),200*(o[1]-o[2])]} + */ +function XYZ_to_Lab(t){const _=t.map(((t,_)=>t/r[_])).map((t=>t>.008856451679035631?Math.cbrt(t):(903.2962962962963*t+16)/116));return[116*_[1]-16,500*(_[0]-_[1]),200*(_[1]-_[2])]} /** * Convert XYZ to linear-light rec2020 * @@ -370,7 +376,7 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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 - */var o=Object.freeze({__proto__:null,D50:_,D50_to_D65:D50_to_D65,D65:[.3127/.329,1,.3583/.329],D65_to_D50:D65_to_D50,HSL_to_sRGB:HSL_to_sRGB,HWB_to_sRGB:HWB_to_sRGB,LCH_to_Lab:LCH_to_Lab,Lab_to_LCH:Lab_to_LCH,Lab_to_XYZ:Lab_to_XYZ,OKLCH_to_OKLab:OKLCH_to_OKLab,OKLab_to_OKLCH:OKLab_to_OKLCH,OKLab_to_XYZ:OKLab_to_XYZ,XYZ_to_Lab:XYZ_to_Lab,XYZ_to_OKLab:XYZ_to_OKLab,XYZ_to_lin_2020:XYZ_to_lin_2020,XYZ_to_lin_P3:XYZ_to_lin_P3,XYZ_to_lin_ProPhoto:XYZ_to_lin_ProPhoto,XYZ_to_lin_a98rgb:XYZ_to_lin_a98rgb,XYZ_to_lin_sRGB:XYZ_to_lin_sRGB,XYZ_to_uv:function XYZ_to_uv(t){const _=t[0],o=t[1],n=_+15*o+3*t[2];return[4*_/n,9*o/n]} + */var e=Object.freeze({__proto__:null,D50:r,D50_to_D65:D50_to_D65,D65:[.3127/.329,1,.3583/.329],D65_to_D50:D65_to_D50,HSL_to_sRGB:HSL_to_sRGB,HWB_to_sRGB:HWB_to_sRGB,LCH_to_Lab:LCH_to_Lab,Lab_to_LCH:Lab_to_LCH,Lab_to_XYZ:Lab_to_XYZ,OKLCH_to_OKLab:OKLCH_to_OKLab,OKLab_to_OKLCH:OKLab_to_OKLCH,OKLab_to_XYZ:OKLab_to_XYZ,XYZ_to_Lab:XYZ_to_Lab,XYZ_to_OKLab:XYZ_to_OKLab,XYZ_to_lin_2020:XYZ_to_lin_2020,XYZ_to_lin_P3:XYZ_to_lin_P3,XYZ_to_lin_ProPhoto:XYZ_to_lin_ProPhoto,XYZ_to_lin_a98rgb:XYZ_to_lin_a98rgb,XYZ_to_lin_sRGB:XYZ_to_lin_sRGB,XYZ_to_uv:function XYZ_to_uv(t){const _=t[0],o=t[1],n=_+15*o+3*t[2];return[4*_/n,9*o/n]} /** * Convert an array of three XYZ values to x,y chromaticity coordinates * @@ -379,9 +385,4 @@ function OKLab_to_OKLCH(t){const _=180*Math.atan2(t[2],t[1])/Math.PI;return[t[0] * @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 - */,XYZ_to_xy:function XYZ_to_xy(t){const _=t[0],o=t[1],n=_+o+t[2];return[_/n,o/n]},gam_2020:gam_2020,gam_P3:gam_P3,gam_ProPhoto:gam_ProPhoto,gam_a98rgb:gam_a98rgb,gam_sRGB:gam_sRGB,hueToRGB:function hueToRGB(t,_,o){return o<0&&(o+=6),o>=6&&(o-=6),o<1?(_-t)*o+t:o<3?_:o<4?(_-t)*(4-o)+t:t},lin_2020:lin_2020,lin_2020_to_XYZ:lin_2020_to_XYZ,lin_P3:lin_P3,lin_P3_to_XYZ:lin_P3_to_XYZ,lin_ProPhoto:lin_ProPhoto,lin_ProPhoto_to_XYZ:lin_ProPhoto_to_XYZ,lin_a98rgb:lin_a98rgb,lin_a98rgb_to_XYZ:lin_a98rgb_to_XYZ,lin_sRGB:lin_sRGB,lin_sRGB_to_XYZ:lin_sRGB_to_XYZ,naive_CMYK_to_sRGB:function naive_CMYK_to_sRGB(t){const _=t[0],o=t[1],n=t[2],r=t[3];return[1-Math.min(1,_*(1-r)+r),1-Math.min(1,o*(1-r)+r),1-Math.min(1,n*(1-r)+r)]},sRGB_to_HSL:sRGB_to_HSL,sRGB_to_luminance:sRGB_to_luminance}); -/** - * @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/map-gamut.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). - */var n=Object.freeze({__proto__:null,clip:clip,inGamut:function inGamut(t){const[_,o,n]=t;return _>=-1e-4&&_<=1.0001&&o>=-1e-4&&o<=1.0001&&n>=-1e-4&&n<=1.0001}});var r=Object.freeze({__proto__:null,HSL_to_XYZ_D50:function HSL_to_XYZ_D50(t){let _=t;return _=HSL_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},HWB_to_XYZ_D50:function HWB_to_XYZ_D50(t){let _=t;return _=HWB_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},LCH_to_XYZ_D50:function LCH_to_XYZ_D50(t){let _=t;return _=LCH_to_Lab(_),_=Lab_to_XYZ(_),_},Lab_to_XYZ_D50:function Lab_to_XYZ_D50(t){let _=t;return _=Lab_to_XYZ(_),_},OKLCH_to_XYZ_D50:function OKLCH_to_XYZ_D50(t){let _=t;return _=OKLCH_to_OKLab(_),_=OKLab_to_XYZ(_),_=D65_to_D50(_),_},OKLab_to_XYZ_D50:function OKLab_to_XYZ_D50(t){let _=t;return _=OKLab_to_XYZ(_),_=D65_to_D50(_),_},P3_to_XYZ_D50:function P3_to_XYZ_D50(t){let _=t;return _=lin_P3(_),_=lin_P3_to_XYZ(_),_=D65_to_D50(_),_},ProPhoto_RGB_to_XYZ_D50:function ProPhoto_RGB_to_XYZ_D50(t){let _=t;return _=lin_ProPhoto(_),_=lin_ProPhoto_to_XYZ(_),_},XYZ_D50_to_HSL:function XYZ_D50_to_HSL(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_=sRGB_to_HSL(_),_},XYZ_D50_to_HWB:function XYZ_D50_to_HWB(t){let _=t;_=D50_to_D65(_),_=XYZ_to_lin_sRGB(_);const o=gam_sRGB(_);_=sRGB_to_HSL(o);const n=Math.min(o[0],o[1],o[2]),r=1-Math.max(o[0],o[1],o[2]);return[_[0],100*n,100*r]},XYZ_D50_to_LCH:function XYZ_D50_to_LCH(t){let _=t;return _=XYZ_to_Lab(_),_=Lab_to_LCH(_),_},XYZ_D50_to_Lab:function XYZ_D50_to_Lab(t){let _=t;return _=XYZ_to_Lab(_),_},XYZ_D50_to_OKLCH:function XYZ_D50_to_OKLCH(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_=OKLab_to_OKLCH(_),_},XYZ_D50_to_OKLab:function XYZ_D50_to_OKLab(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_},XYZ_D50_to_P3:function XYZ_D50_to_P3(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_P3(_),_=gam_P3(_),_},XYZ_D50_to_ProPhoto:function XYZ_D50_to_ProPhoto(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_ProPhoto(_),_=gam_ProPhoto(_),_},XYZ_D50_to_XYZ_D50:function XYZ_D50_to_XYZ_D50(t){return t},XYZ_D50_to_XYZ_D65:function XYZ_D50_to_XYZ_D65(t){let _=t;return _=D50_to_D65(_),_},XYZ_D50_to_a98_RGB:function XYZ_D50_to_a98_RGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_a98rgb(_),_=gam_a98rgb(_),_},XYZ_D50_to_lin_sRGB:function XYZ_D50_to_lin_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_},XYZ_D50_to_rec_2020:function XYZ_D50_to_rec_2020(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_2020(_),_=gam_2020(_),_},XYZ_D50_to_sRGB:function XYZ_D50_to_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_},XYZ_D65_to_XYZ_D50:function XYZ_D65_to_XYZ_D50(t){let _=t;return _=D65_to_D50(_),_},a98_RGB_to_XYZ_D50:function a98_RGB_to_XYZ_D50(t){let _=t;return _=lin_a98rgb(_),_=lin_a98rgb_to_XYZ(_),_=D65_to_D50(_),_},lin_sRGB_to_XYZ_D50:function lin_sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},rec_2020_to_XYZ_D50:function rec_2020_to_XYZ_D50(t){let _=t;return _=lin_2020(_),_=lin_2020_to_XYZ(_),_=D65_to_D50(_),_},sRGB_to_XYZ_D50:function sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_}});const e={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};export{t as calculations,o as conversions,e as namedColors,n as utils,r as xyz}; + */,XYZ_to_xy:function XYZ_to_xy(t){const _=t[0],o=t[1],n=_+o+t[2];return[_/n,o/n]},gam_2020:gam_2020,gam_P3:gam_P3,gam_ProPhoto:gam_ProPhoto,gam_a98rgb:gam_a98rgb,gam_sRGB:gam_sRGB,hueToRGB:function hueToRGB(t,_,o){return o<0&&(o+=6),o>=6&&(o-=6),o<1?(_-t)*o+t:o<3?_:o<4?(_-t)*(4-o)+t:t},lin_2020:lin_2020,lin_2020_to_XYZ:lin_2020_to_XYZ,lin_P3:lin_P3,lin_P3_to_XYZ:lin_P3_to_XYZ,lin_ProPhoto:lin_ProPhoto,lin_ProPhoto_to_XYZ:lin_ProPhoto_to_XYZ,lin_a98rgb:lin_a98rgb,lin_a98rgb_to_XYZ:lin_a98rgb_to_XYZ,lin_sRGB:lin_sRGB,lin_sRGB_to_XYZ:lin_sRGB_to_XYZ,naive_CMYK_to_sRGB:function naive_CMYK_to_sRGB(t){const _=t[0],o=t[1],n=t[2],r=t[3];return[1-Math.min(1,_*(1-r)+r),1-Math.min(1,o*(1-r)+r),1-Math.min(1,n*(1-r)+r)]},sRGB_to_HSL:sRGB_to_HSL,sRGB_to_HWB:function sRGB_to_HWB(t){const _=sRGB_to_HSL(t),o=Math.min(t[0],t[1],t[2]),n=1-Math.max(t[0],t[1],t[2]);return[_[0],100*o,100*n]},sRGB_to_luminance:sRGB_to_luminance});var a=Object.freeze({__proto__:null,HSL_to_XYZ_D50:function HSL_to_XYZ_D50(t){let _=t;return _=HSL_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},HWB_to_XYZ_D50:function HWB_to_XYZ_D50(t){let _=t;return _=HWB_to_sRGB(_),_=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},LCH_to_XYZ_D50:function LCH_to_XYZ_D50(t){let _=t;return _=LCH_to_Lab(_),_=Lab_to_XYZ(_),_},Lab_to_XYZ_D50:function Lab_to_XYZ_D50(t){let _=t;return _=Lab_to_XYZ(_),_},OKLCH_to_XYZ_D50:function OKLCH_to_XYZ_D50(t){let _=t;return _=OKLCH_to_OKLab(_),_=OKLab_to_XYZ(_),_=D65_to_D50(_),_},OKLab_to_XYZ_D50:function OKLab_to_XYZ_D50(t){let _=t;return _=OKLab_to_XYZ(_),_=D65_to_D50(_),_},P3_to_XYZ_D50:function P3_to_XYZ_D50(t){let _=t;return _=lin_P3(_),_=lin_P3_to_XYZ(_),_=D65_to_D50(_),_},ProPhoto_RGB_to_XYZ_D50:function ProPhoto_RGB_to_XYZ_D50(t){let _=t;return _=lin_ProPhoto(_),_=lin_ProPhoto_to_XYZ(_),_},XYZ_D50_to_HSL:function XYZ_D50_to_HSL(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_=sRGB_to_HSL(_),_},XYZ_D50_to_HWB:function XYZ_D50_to_HWB(t){let _=t;_=D50_to_D65(_),_=XYZ_to_lin_sRGB(_);const o=gam_sRGB(_);_=sRGB_to_HSL(o);const n=Math.min(o[0],o[1],o[2]),r=1-Math.max(o[0],o[1],o[2]);return[_[0],100*n,100*r]},XYZ_D50_to_LCH:function XYZ_D50_to_LCH(t){let _=t;return _=XYZ_to_Lab(_),_=Lab_to_LCH(_),_},XYZ_D50_to_Lab:function XYZ_D50_to_Lab(t){let _=t;return _=XYZ_to_Lab(_),_},XYZ_D50_to_OKLCH:function XYZ_D50_to_OKLCH(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_=OKLab_to_OKLCH(_),_},XYZ_D50_to_OKLab:function XYZ_D50_to_OKLab(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_OKLab(_),_},XYZ_D50_to_P3:function XYZ_D50_to_P3(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_P3(_),_=gam_P3(_),_},XYZ_D50_to_ProPhoto:function XYZ_D50_to_ProPhoto(t){let _=t;return _=XYZ_to_lin_ProPhoto(_),_=gam_ProPhoto(_),_},XYZ_D50_to_XYZ_D50:function XYZ_D50_to_XYZ_D50(t){return t},XYZ_D50_to_XYZ_D65:function XYZ_D50_to_XYZ_D65(t){let _=t;return _=D50_to_D65(_),_},XYZ_D50_to_a98_RGB:function XYZ_D50_to_a98_RGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_a98rgb(_),_=gam_a98rgb(_),_},XYZ_D50_to_lin_sRGB:function XYZ_D50_to_lin_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_},XYZ_D50_to_rec_2020:function XYZ_D50_to_rec_2020(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_2020(_),_=gam_2020(_),_},XYZ_D50_to_sRGB:function XYZ_D50_to_sRGB(t){let _=t;return _=D50_to_D65(_),_=XYZ_to_lin_sRGB(_),_=gam_sRGB(_),_},XYZ_D65_to_XYZ_D50:function XYZ_D65_to_XYZ_D50(t){let _=t;return _=D65_to_D50(_),_},a98_RGB_to_XYZ_D50:function a98_RGB_to_XYZ_D50(t){let _=t;return _=lin_a98rgb(_),_=lin_a98rgb_to_XYZ(_),_=D65_to_D50(_),_},lin_sRGB_to_XYZ_D50:function lin_sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_},rec_2020_to_XYZ_D50:function rec_2020_to_XYZ_D50(t){let _=t;return _=lin_2020(_),_=lin_2020_to_XYZ(_),_=D65_to_D50(_),_},sRGB_to_XYZ_D50:function sRGB_to_XYZ_D50(t){let _=t;return _=lin_sRGB(_),_=lin_sRGB_to_XYZ(_),_=D65_to_D50(_),_}});const i={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]};export{n as calculations,e as conversions,i as namedColors,t as utils,a as xyz}; diff --git a/packages/color-helpers/src/calculations/binary-search-gamut.ts b/packages/color-helpers/src/calculations/binary-search-gamut.ts index fc95f163c..71130293b 100644 --- a/packages/color-helpers/src/calculations/binary-search-gamut.ts +++ b/packages/color-helpers/src/calculations/binary-search-gamut.ts @@ -2,27 +2,39 @@ import { clip } from 'utils/clip'; import { OKLCH_to_OKLab } from 'conversions/oklch-to-oklab'; import { deltaEOK } from 'calculations/delta-EOK'; import type { Color } from 'types/color'; +import { inGamut } from 'utils'; + +const JND = 0.02; +const EPSILON = 0.00001; export function binarySearchGamut( startOKLCH: Color, toDestination: (x: Color) => Color, fromDestination: (x: Color) => Color, ): Color { - let min = 0; - let max = startOKLCH[1]; + const current = startOKLCH; - while (max - min > 0.0001) { - const clipped = clip(toDestination(current)); - const deltaE = deltaEOK(OKLCH_to_OKLab(current), OKLCH_to_OKLab(fromDestination(clipped))); - // are we inside the gamut (or very close to the boundary, outside) - if (deltaE - 0.02 < 0.0001) { - min = current[1]; - } else { - max = current[1]; + let min = 0.0; + let max = current[1]; + + while ((max - min) > EPSILON) { + const chroma = (min + max) / 2.0; + current[1] = chroma; + + const converted = toDestination(current); + if (inGamut(converted)) { + min = chroma; + continue; } - // binary search - current[1] = (max + min) / 2; + + const clipped = clip(converted); + const delta_e = deltaEOK(OKLCH_to_OKLab(fromDestination(clipped)), OKLCH_to_OKLab(current)); + if (delta_e < JND) { + return clipped; + } + + max = chroma; } return clip(toDestination([...current])); diff --git a/packages/color-helpers/src/conversions/index.ts b/packages/color-helpers/src/conversions/index.ts index 7295fedfa..9a2ed427c 100644 --- a/packages/color-helpers/src/conversions/index.ts +++ b/packages/color-helpers/src/conversions/index.ts @@ -27,6 +27,7 @@ export * from './oklab-to-oklch'; export * from './oklab-to-xyz'; export * from './oklch-to-oklab'; export * from './srgb-to-hsl'; +export * from './srgb-to-hwb'; export * from './srgb-to-luminance'; export * from './xyz-to-lab'; export * from './xyz-to-lin-2020'; diff --git a/packages/color-helpers/src/conversions/srgb-to-hwb.ts b/packages/color-helpers/src/conversions/srgb-to-hwb.ts new file mode 100644 index 000000000..4f74a12fc --- /dev/null +++ b/packages/color-helpers/src/conversions/srgb-to-hwb.ts @@ -0,0 +1,19 @@ +import type { Color } from 'types/color'; +import { sRGB_to_HSL } from './srgb-to-hsl'; + +/** + * Convert an array of gamma-corrected sRGB values in the 0.0 to 1.0 range to HWB. + * + * @param {Color} RGB [r, g, b] + * - Red component 0..1 + * - Green component 0..1 + * - Blue component 0..1 + * @return {number[]} Array of HWB values + */ +export function sRGB_to_HWB(RGB: Color): Color { + const y = sRGB_to_HSL(RGB); + + const white = Math.min(RGB[0], RGB[1], RGB[2]); + const black = 1 - Math.max(RGB[0], RGB[1], RGB[2]); + return ([y[0], white * 100, black * 100]); +} diff --git a/packages/color-helpers/src/conversions/xyz/index.ts b/packages/color-helpers/src/conversions/xyz/index.ts index d623d726f..af21e2675 100644 --- a/packages/color-helpers/src/conversions/xyz/index.ts +++ b/packages/color-helpers/src/conversions/xyz/index.ts @@ -420,7 +420,6 @@ export function ProPhoto_RGB_to_XYZ_D50(x: Color): Color { */ export function XYZ_D50_to_ProPhoto(x: Color): Color { let y = x; - y = D50_to_D65(y); y = XYZ_to_lin_ProPhoto(y); y = gam_ProPhoto(y); return y; diff --git a/packages/css-color-parser/CHANGELOG.md b/packages/css-color-parser/CHANGELOG.md index c3ef0277c..727d36126 100644 --- a/packages/css-color-parser/CHANGELOG.md +++ b/packages/css-color-parser/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to CSS Color Parser +### Unreleased (minor) + +- Add support for relative color syntax. + ### 1.1.2 (April 10, 2023) - Updated `@csstools/css-tokenizer` to `2.1.1` (patch) diff --git a/packages/css-color-parser/dist/color-data.d.ts b/packages/css-color-parser/dist/color-data.d.ts index 0e4e33153..1977e6ad1 100644 --- a/packages/css-color-parser/dist/color-data.d.ts +++ b/packages/css-color-parser/dist/color-data.d.ts @@ -1,7 +1,7 @@ import type { Color } from '@csstools/color-helpers'; import type { ComponentValue } from '@csstools/css-parser-algorithms'; import { ColorNotation } from './color-notation'; -import { TokenNumber } from '@csstools/css-tokenizer'; +import { TokenDimension, TokenNumber, TokenPercentage } from '@csstools/css-tokenizer'; export type ColorData = { colorNotation: ColorNotation; channels: Color; @@ -28,5 +28,6 @@ export declare function colorData_to_XYZ_D50(colorData: ColorData): ColorData; export declare function colorDataTo(colorData: ColorData, toNotation: ColorNotation): ColorData; export declare function convertPowerlessComponentsToMissingComponents(a: Color, colorNotation: ColorNotation): Color; export declare function fillInMissingComponents(a: Color, b: Color): Color; -export declare function colorDataChannelsToCalcGlobals(x: ColorData): Map; +export declare function normalizeRelativeColorDataChannels(x: ColorData): Map; +export declare function noneToZeroInRelativeColorDataChannels(x: Map): Map; export declare function colorDataFitsRGB_Gamut(x: ColorData): boolean; diff --git a/packages/css-color-parser/dist/color-notation.d.ts b/packages/css-color-parser/dist/color-notation.d.ts index eaa0f7b0c..242ebfb87 100644 --- a/packages/css-color-parser/dist/color-notation.d.ts +++ b/packages/css-color-parser/dist/color-notation.d.ts @@ -6,11 +6,12 @@ export declare enum ColorNotation { HWB = "hwb", LCH = "lch", Lab = "lab", - Linear_RGB = "srgb-linear", + Linear_sRGB = "srgb-linear", OKLCH = "oklch", OKLab = "oklab", ProPhoto_RGB = "prophoto-rgb", RGB = "rgb", + sRGB = "srgb", Rec2020 = "rec2020", XYZ_D50 = "xyz-d50", XYZ_D65 = "xyz-d65" diff --git a/packages/css-color-parser/dist/functions/color.d.ts b/packages/css-color-parser/dist/functions/color.d.ts index 7871b18e3..34b95e2c3 100644 --- a/packages/css-color-parser/dist/functions/color.d.ts +++ b/packages/css-color-parser/dist/functions/color.d.ts @@ -1,4 +1,4 @@ -import type { ColorData } from '../color-data'; +import { ColorData } from '../color-data'; import type { ColorParser } from '../color-parser'; import { FunctionNode } from '@csstools/css-parser-algorithms'; -export declare function color(colorNode: FunctionNode, colorParser: ColorParser): ColorData | false; +export declare function color(colorFunctionNode: FunctionNode, colorParser: ColorParser): ColorData | false; diff --git a/packages/css-color-parser/dist/functions/three-channel-space-separated.d.ts b/packages/css-color-parser/dist/functions/three-channel-space-separated.d.ts index a821db38e..8fb7e41b7 100644 --- a/packages/css-color-parser/dist/functions/three-channel-space-separated.d.ts +++ b/packages/css-color-parser/dist/functions/three-channel-space-separated.d.ts @@ -1,6 +1,7 @@ -import type { ColorData } from '../color-data'; -import type { FunctionNode } from '@csstools/css-parser-algorithms'; +import { ColorData } from '../color-data'; +import { FunctionNode } from '@csstools/css-parser-algorithms'; import { ColorNotation } from '../color-notation'; import { SyntaxFlag } from '../color-data'; import { normalizeChannelValuesFn } from './normalize-channel-values'; -export declare function threeChannelSpaceSeparated(colorFunctionNode: FunctionNode, normalizeChannelValues: normalizeChannelValuesFn, colorNotation: ColorNotation, syntaxFlags: Array): ColorData | false; +import { ColorParser } from '../color-parser'; +export declare function threeChannelSpaceSeparated(colorFunctionNode: FunctionNode, normalizeChannelValues: normalizeChannelValuesFn, colorNotation: ColorNotation, syntaxFlags: Array, colorParser: ColorParser): ColorData | false; diff --git a/packages/css-color-parser/dist/gamut-mapping/p3.d.ts b/packages/css-color-parser/dist/gamut-mapping/p3.d.ts new file mode 100644 index 000000000..d0130b521 --- /dev/null +++ b/packages/css-color-parser/dist/gamut-mapping/p3.d.ts @@ -0,0 +1,2 @@ +import { Color } from '@csstools/color-helpers'; +export declare function XYZ_D50_to_P3_Gamut(color: Color): Color; diff --git a/packages/css-color-parser/dist/gamut-mapping/srgb.d.ts b/packages/css-color-parser/dist/gamut-mapping/srgb.d.ts new file mode 100644 index 000000000..87b3ad800 --- /dev/null +++ b/packages/css-color-parser/dist/gamut-mapping/srgb.d.ts @@ -0,0 +1,2 @@ +import { Color } from '@csstools/color-helpers'; +export declare function XYZ_D50_to_sRGB_Gamut(color: Color): Color; diff --git a/packages/css-color-parser/dist/index.cjs b/packages/css-color-parser/dist/index.cjs index fb9b19efc..9d03c12f9 100644 --- a/packages/css-color-parser/dist/index.cjs +++ b/packages/css-color-parser/dist/index.cjs @@ -1 +1 @@ -"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/css-parser-algorithms"),t=require("@csstools/color-helpers"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:t.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_RGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_RGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a=colorData_to_XYZ_D50(e),n={...e};switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:n.colorNotation=exports.ColorNotation.RGB,n.channels=t.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.Linear_RGB:n.colorNotation=exports.ColorNotation.Linear_RGB,n.channels=t.xyz.XYZ_D50_to_lin_sRGB(a.channels);break;case exports.ColorNotation.Display_P3:n.colorNotation=exports.ColorNotation.Display_P3,n.channels=t.xyz.XYZ_D50_to_P3(a.channels);break;case exports.ColorNotation.Rec2020:n.colorNotation=exports.ColorNotation.Rec2020,n.channels=t.xyz.XYZ_D50_to_rec_2020(a.channels);break;case exports.ColorNotation.ProPhoto_RGB:n.colorNotation=exports.ColorNotation.ProPhoto_RGB,n.channels=t.xyz.XYZ_D50_to_ProPhoto(a.channels);break;case exports.ColorNotation.A98_RGB:n.colorNotation=exports.ColorNotation.A98_RGB,n.channels=t.xyz.XYZ_D50_to_a98_RGB(a.channels);break;case exports.ColorNotation.HSL:n.colorNotation=exports.ColorNotation.HSL,n.channels=t.xyz.XYZ_D50_to_HSL(a.channels);break;case exports.ColorNotation.HWB:n.colorNotation=exports.ColorNotation.HWB,n.channels=t.xyz.XYZ_D50_to_HWB(a.channels);break;case exports.ColorNotation.Lab:n.colorNotation=exports.ColorNotation.Lab,n.channels=t.xyz.XYZ_D50_to_Lab(a.channels);break;case exports.ColorNotation.LCH:n.colorNotation=exports.ColorNotation.LCH,n.channels=t.xyz.XYZ_D50_to_LCH(a.channels);break;case exports.ColorNotation.OKLCH:n.colorNotation=exports.ColorNotation.OKLCH,n.channels=t.xyz.XYZ_D50_to_OKLCH(a.channels);break;case exports.ColorNotation.OKLab:n.colorNotation=exports.ColorNotation.OKLab,n.channels=t.xyz.XYZ_D50_to_OKLab(a.channels);break;case exports.ColorNotation.XYZ_D50:n.colorNotation=exports.ColorNotation.XYZ_D50,n.channels=t.xyz.XYZ_D50_to_XYZ_D50(a.channels);break;case exports.ColorNotation.XYZ_D65:n.colorNotation=exports.ColorNotation.XYZ_D65,n.channels=t.xyz.XYZ_D50_to_XYZ_D65(a.channels);break;default:throw new Error("Unsupported color notation")}if(o===e.colorNotation)n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[2],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[2,1,0]);break;case exports.ColorNotation.HWB:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:n.channels=carryForwardMissingComponents(e.channels,[0],n.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:n.channels=carryForwardMissingComponents(e.channels,[0,1,2],n.channels,[0,1,2])}}return n.channels=convertPowerlessComponentsToMissingComponents(n.channels,o),n}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),a[1]<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function fillInMissingComponents(e,o){const a=[...e];for(let n=0;nString.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=c.value[4].value;continue}}return!1}if(!l)return!1;t.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&t.push({color:l,percentage:i}),2!==t.length)return!1;let c=t[0].percentage,u=t[1].percentage;return(!1===c||!(c<0||c>100))&&((!1===u||!(u<0||u>100))&&(!1===c&&!1===u?(c=50,u=50):!1!==c&&!1===u?u=100-c:!1===c&&!1!==u&&(c=100-u),(0!==c||0!==u)&&(!1!==c&&!1!==u&&(c+u>100&&(c=c/(c+u)*100,u=u/(c+u)*100),c+u<100&&(s=(c+u)/100,c=c/(c+u)*100,u=u/(c+u)*100),{a:{color:t[0].color,percentage:c},b:{color:t[1].color,percentage:u},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let c=n.alpha;if("number"!=typeof c)return!1;switch(i=Number.isNaN(i)?c:i,c=Number.isNaN(c)?i:c,e){case"srgb":l=exports.ColorNotation.RGB,a.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.HEX&&(r=colorDataTo(a,exports.ColorNotation.RGB).channels),n.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.HEX&&(s=colorDataTo(n,exports.ColorNotation.RGB).channels);break;case"srgb-linear":l=exports.ColorNotation.Linear_RGB,a.colorNotation!==exports.ColorNotation.Linear_RGB&&(r=colorDataTo(a,exports.ColorNotation.Linear_RGB).channels),n.colorNotation!==exports.ColorNotation.Linear_RGB&&(s=colorDataTo(n,exports.ColorNotation.Linear_RGB).channels);break;case"lab":l=exports.ColorNotation.Lab,a.colorNotation!==exports.ColorNotation.Lab&&(r=colorDataTo(a,exports.ColorNotation.Lab).channels),n.colorNotation!==exports.ColorNotation.Lab&&(s=colorDataTo(n,exports.ColorNotation.Lab).channels);break;case"oklab":l=exports.ColorNotation.OKLab,a.colorNotation!==exports.ColorNotation.OKLab&&(r=colorDataTo(a,exports.ColorNotation.OKLab).channels),n.colorNotation!==exports.ColorNotation.OKLab&&(s=colorDataTo(n,exports.ColorNotation.OKLab).channels);break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50,a.colorNotation!==exports.ColorNotation.XYZ_D50&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D50).channels),n.colorNotation!==exports.ColorNotation.XYZ_D50&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D50).channels);break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65,a.colorNotation!==exports.ColorNotation.XYZ_D65&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D65).channels),n.colorNotation!==exports.ColorNotation.XYZ_D65&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D65).channels)}r=fillInMissingComponents(r,s),s=fillInMissingComponents(s,r),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],c),s[1]=premultiply(s[1],c),s[2]=premultiply(s[2],c);const u=interpolate(i,c,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),u),un_premultiply(interpolate(r[1],s[1],t),u),un_premultiply(interpolate(r[2],s[2],t),u)],alpha:u*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,c=0,u=0,p=0,N=0,h=0,x=exports.ColorNotation.RGB,m=n.alpha;if("number"!=typeof m)return!1;let y=t.alpha;if("number"!=typeof y)return!1;switch(m=Number.isNaN(m)?y:m,y=Number.isNaN(y)?m:y,e){case"hsl":x=exports.ColorNotation.HSL,n.colorNotation!==exports.ColorNotation.HSL&&(s=colorDataTo(n,exports.ColorNotation.HSL).channels),t.colorNotation!==exports.ColorNotation.HSL&&(l=colorDataTo(t,exports.ColorNotation.HSL).channels);break;case"hwb":x=exports.ColorNotation.HWB,n.colorNotation!==exports.ColorNotation.HWB&&(s=colorDataTo(n,exports.ColorNotation.HWB).channels),t.colorNotation!==exports.ColorNotation.HWB&&(l=colorDataTo(t,exports.ColorNotation.HWB).channels);break;case"lch":x=exports.ColorNotation.LCH,n.colorNotation!==exports.ColorNotation.LCH&&(s=colorDataTo(n,exports.ColorNotation.LCH).channels),t.colorNotation!==exports.ColorNotation.LCH&&(l=colorDataTo(t,exports.ColorNotation.LCH).channels);break;case"oklch":x=exports.ColorNotation.OKLCH,n.colorNotation!==exports.ColorNotation.OKLCH&&(s=colorDataTo(n,exports.ColorNotation.OKLCH).channels),t.colorNotation!==exports.ColorNotation.OKLCH&&(l=colorDataTo(t,exports.ColorNotation.OKLCH).channels)}switch(s=fillInMissingComponents(s,l),l=fillInMissingComponents(l,s),e){case"hsl":case"hwb":i=s[0],c=l[0],u=s[1],p=l[1],N=s[2],h=l[2];break;case"lch":case"oklch":u=s[0],p=l[0],N=s[1],h=l[1],i=s[2],c=l[2]}const C=c-i;switch(o){case"shorter":C>180?i+=360:C<-180&&(c+=360);break;case"longer":-180<180&&(C>0?i+=360:c+=360);break;case"increasing":C<0&&(c+=360);break;case"decreasing":C>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}u=premultiply(u,m),N=premultiply(N,m),p=premultiply(p,y),h=premultiply(h,y);let T=[0,0,0];const b=interpolate(m,y,r);switch(e){case"hsl":case"hwb":T=[interpolate(i,c,r),un_premultiply(interpolate(u,p,r),b),un_premultiply(interpolate(N,h,r),b)];break;case"lch":case"oklch":T=[un_premultiply(interpolate(u,p,r),b),un_premultiply(interpolate(N,h,r),b),interpolate(i,c,r)]}return{colorNotation:x,channels:T,alpha:b*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;tn.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const o=hslSpaceSeparated(e);if(!1!==o)return o}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[])}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tn.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const o=rgbSpaceSeparated(e);if(!1!==o)return o}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[])}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=t.xyz.XYZ_D50_to_P3(e);if(t.utils.inGamut(o))return t.utils.clip(o);let a=e.slice();return a=t.conversions.D50_to_D65(a),a=t.conversions.XYZ_to_OKLab(a),a=t.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),t.calculations.mapGamut(a,(e=>(e=t.conversions.OKLCH_to_OKLab(e),e=t.conversions.OKLab_to_XYZ(e),e=t.conversions.XYZ_to_lin_P3(e),t.conversions.gam_P3(e))),(e=>(e=t.conversions.lin_P3(e),e=t.conversions.lin_P3_to_XYZ(e),e=t.conversions.XYZ_to_OKLab(e),t.conversions.OKLab_to_OKLCH(e))))}function XYZ_D50_to_sRGB_Gamut(e){const o=t.xyz.XYZ_D50_to_sRGB(e);if(t.utils.inGamut(o))return t.utils.clip(o);let a=e.slice();return a=t.conversions.D50_to_D65(a),a=t.conversions.XYZ_to_OKLab(a),a=t.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),t.calculations.mapGamut(a,(e=>(e=t.conversions.OKLCH_to_OKLab(e),e=t.conversions.OKLab_to_XYZ(e),e=t.conversions.XYZ_to_lin_sRGB(e),t.conversions.gam_sRGB(e))),(e=>(e=t.conversions.lin_sRGB(e),e=t.conversions.lin_sRGB_to_XYZ(e),e=t.conversions.XYZ_to_OKLab(e),t.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(n.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e);case"hsl":case"hsla":return hsl(e);case"hwb":return threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[]);case"lab":return threeChannelSpaceSeparated(e,normalize_Lab_ChannelValues,exports.ColorNotation.Lab,[]);case"lch":return threeChannelSpaceSeparated(e,normalize_LCH_ChannelValues,exports.ColorNotation.LCH,[]);case"oklab":return threeChannelSpaceSeparated(e,normalize_OKLab_ChannelValues,exports.ColorNotation.OKLab,[]);case"oklch":return threeChannelSpaceSeparated(e,normalize_OKLCH_ChannelValues,exports.ColorNotation.OKLCH,[]);case"color":return color$1(e);case"color-mix":return colorMix(e,color);default:return!1}}if(n.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);if(!1!==o)return o;const a="transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])};return!1!==a&&a}return!1}return!1},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){return!colorDataTo(e,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToMissingComponents(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):t.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),c=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],u=[a.TokenType.CloseParen,")",-1,-1,void 0],p=[a.TokenType.Whitespace," ",-1,-1,void 0],N=[new n.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new n.TokenNode(p),new n.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new n.TokenNode(p),new n.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new n.TokenNode(p),new n.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===o?new n.FunctionNode(c,u,N):new n.FunctionNode(c,u,[...N,new n.TokenNode(p),new n.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new n.TokenNode(p),new n.TokenNode([a.TokenType.Number,o.toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new n.FunctionNode(c,u,[...N,new n.TokenNode(p),new n.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new n.TokenNode(p),e.alpha])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToMissingComponents(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):t.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),c=[a.TokenType.CloseParen,")",-1,-1,void 0],u=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new n.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new n.TokenNode(p),new n.TokenNode(u),new n.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new n.TokenNode(p),new n.TokenNode(u),new n.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===o?new n.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],c,N):new n.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],c,[...N,new n.TokenNode(p),new n.TokenNode(u),new n.TokenNode([a.TokenType.Number,o.toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new n.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],c,[...N,new n.TokenNode(p),new n.TokenNode(u),e.alpha])}; +"use strict";var e,o,a=require("@csstools/css-tokenizer"),n=require("@csstools/color-helpers"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-calc");function colorData_to_XYZ_D50(e){switch(e.colorNotation){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:case exports.ColorNotation.sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Linear_sRGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Display_P3:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Rec2020:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.A98_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.ProPhoto_RGB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HSL:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.HWB:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.Lab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLab:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.LCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.OKLCH:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D50:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case exports.ColorNotation.XYZ_D65:return{...e,colorNotation:exports.ColorNotation.XYZ_D50,channels:n.xyz.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}exports.ColorNotation=void 0,(e=exports.ColorNotation||(exports.ColorNotation={})).A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65",exports.SyntaxFlag=void 0,(o=exports.SyntaxFlag||(exports.SyntaxFlag={})).ColorKeyword="color-keyword",o.HasAlpha="has-alpha",o.HasDimensionValues="has-dimension-values",o.HasNoneKeywords="has-none-keywords",o.HasNumberValues="has-number-values",o.HasPercentageAlpha="has-percentage-alpha",o.HasPercentageValues="has-percentage-values",o.HasVariableAlpha="has-variable-alpha",o.Hex="hex",o.LegacyHSL="legacy-hsl",o.LegacyRGB="legacy-rgb",o.NamedColor="named-color",o.RelativeColorSyntax="relative-color-syntax",o.ColorMix="color-mix";const s=new Set([exports.ColorNotation.A98_RGB,exports.ColorNotation.Display_P3,exports.ColorNotation.HEX,exports.ColorNotation.Linear_sRGB,exports.ColorNotation.ProPhoto_RGB,exports.ColorNotation.RGB,exports.ColorNotation.sRGB,exports.ColorNotation.Rec2020,exports.ColorNotation.XYZ_D50,exports.ColorNotation.XYZ_D65]);function colorDataTo(e,o){const a=colorData_to_XYZ_D50(e),t={...e};switch(o){case exports.ColorNotation.HEX:case exports.ColorNotation.RGB:t.colorNotation=exports.ColorNotation.RGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.sRGB:t.colorNotation=exports.ColorNotation.sRGB,t.channels=n.xyz.XYZ_D50_to_sRGB(a.channels);break;case exports.ColorNotation.Linear_sRGB:t.colorNotation=exports.ColorNotation.Linear_sRGB,t.channels=n.xyz.XYZ_D50_to_lin_sRGB(a.channels);break;case exports.ColorNotation.Display_P3:t.colorNotation=exports.ColorNotation.Display_P3,t.channels=n.xyz.XYZ_D50_to_P3(a.channels);break;case exports.ColorNotation.Rec2020:t.colorNotation=exports.ColorNotation.Rec2020,t.channels=n.xyz.XYZ_D50_to_rec_2020(a.channels);break;case exports.ColorNotation.ProPhoto_RGB:t.colorNotation=exports.ColorNotation.ProPhoto_RGB,t.channels=n.xyz.XYZ_D50_to_ProPhoto(a.channels);break;case exports.ColorNotation.A98_RGB:t.colorNotation=exports.ColorNotation.A98_RGB,t.channels=n.xyz.XYZ_D50_to_a98_RGB(a.channels);break;case exports.ColorNotation.HSL:t.colorNotation=exports.ColorNotation.HSL,t.channels=n.xyz.XYZ_D50_to_HSL(a.channels);break;case exports.ColorNotation.HWB:t.colorNotation=exports.ColorNotation.HWB,t.channels=n.xyz.XYZ_D50_to_HWB(a.channels);break;case exports.ColorNotation.Lab:t.colorNotation=exports.ColorNotation.Lab,t.channels=n.xyz.XYZ_D50_to_Lab(a.channels);break;case exports.ColorNotation.LCH:t.colorNotation=exports.ColorNotation.LCH,t.channels=n.xyz.XYZ_D50_to_LCH(a.channels);break;case exports.ColorNotation.OKLCH:t.colorNotation=exports.ColorNotation.OKLCH,t.channels=n.xyz.XYZ_D50_to_OKLCH(a.channels);break;case exports.ColorNotation.OKLab:t.colorNotation=exports.ColorNotation.OKLab,t.channels=n.xyz.XYZ_D50_to_OKLab(a.channels);break;case exports.ColorNotation.XYZ_D50:t.colorNotation=exports.ColorNotation.XYZ_D50,t.channels=n.xyz.XYZ_D50_to_XYZ_D50(a.channels);break;case exports.ColorNotation.XYZ_D65:t.colorNotation=exports.ColorNotation.XYZ_D65,t.channels=n.xyz.XYZ_D50_to_XYZ_D65(a.channels);break;default:throw new Error("Unsupported color notation")}if(o===e.colorNotation)t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else if(s.has(o)&&s.has(e.colorNotation))t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2]);else switch(o){case exports.ColorNotation.HSL:switch(e.colorNotation){case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[2],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0])}break;case exports.ColorNotation.HWB:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2])}break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0])}break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:switch(e.colorNotation){case exports.ColorNotation.HSL:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[2,1,0]);break;case exports.ColorNotation.HWB:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[2]);break;case exports.ColorNotation.Lab:case exports.ColorNotation.OKLab:t.channels=carryForwardMissingComponents(e.channels,[0],t.channels,[0]);break;case exports.ColorNotation.LCH:case exports.ColorNotation.OKLCH:t.channels=carryForwardMissingComponents(e.channels,[0,1,2],t.channels,[0,1,2])}}return t.channels=convertPowerlessComponentsToMissingComponents(t.channels,o),t}function convertPowerlessComponentsToMissingComponents(e,o){const a=[...e];switch(o){case exports.ColorNotation.HSL:(reducePrecision(a[2])<=0||reducePrecision(a[2])>=100)&&(a[0]=NaN,a[1]=NaN),a[1]<=0&&(a[0]=NaN);break;case exports.ColorNotation.HWB:Math.max(0,reducePrecision(a[1]))+Math.max(0,reducePrecision(a[2]))>=100&&(a[0]=NaN);break;case exports.ColorNotation.Lab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.LCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=100)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLab:(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN);break;case exports.ColorNotation.OKLCH:reducePrecision(a[1])<=0&&(a[2]=NaN),(reducePrecision(a[0])<=0||reducePrecision(a[0])>=1)&&(a[1]=NaN,a[2]=NaN)}return a}function carryForwardMissingComponents(e,o,a,n){const t=[...a];for(const a of o)Number.isNaN(e[o[a]])&&(t[n[a]]=NaN);return t}function fillInMissingComponents(e,o){const a=[...e];for(let n=0;nString.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(e,o){const n=[];for(let t=0;t=0){i=u.value[4].value;continue}}return!1}if(!l)return!1;n.push({color:l,percentage:i}),l=!1,i=!1}}if(l&&n.push({color:l,percentage:i}),2!==n.length)return!1;let u=n[0].percentage,c=n[1].percentage;return(!1===u||!(u<0||u>100))&&((!1===c||!(c<0||c>100))&&(!1===u&&!1===c?(u=50,c=50):!1!==u&&!1===c?c=100-u:!1===u&&!1!==c&&(u=100-c),(0!==u||0!==c)&&(!1!==u&&!1!==c&&(u+c>100&&(u=u/(u+c)*100,c=c/(u+c)*100),u+c<100&&(s=(u+c)/100,u=u/(u+c)*100,c=c/(u+c)*100),{a:{color:n[0].color,percentage:u},b:{color:n[1].color,percentage:c},alphaMultiplier:s}))))}function colorMixRectangular(e,o){if(!o)return!1;const a=o.a.color,n=o.b.color,t=o.a.percentage/100;let r=a.channels,s=n.channels,l=exports.ColorNotation.RGB,i=a.alpha;if("number"!=typeof i)return!1;let u=n.alpha;if("number"!=typeof u)return!1;switch(i=Number.isNaN(i)?u:i,u=Number.isNaN(u)?i:u,e){case"srgb":l=exports.ColorNotation.RGB,a.colorNotation!==exports.ColorNotation.RGB&&a.colorNotation!==exports.ColorNotation.sRGB&&a.colorNotation!==exports.ColorNotation.HEX&&(r=colorDataTo(a,exports.ColorNotation.RGB).channels),n.colorNotation!==exports.ColorNotation.RGB&&n.colorNotation!==exports.ColorNotation.sRGB&&n.colorNotation!==exports.ColorNotation.HEX&&(s=colorDataTo(n,exports.ColorNotation.RGB).channels);break;case"srgb-linear":l=exports.ColorNotation.Linear_sRGB,a.colorNotation!==exports.ColorNotation.Linear_sRGB&&(r=colorDataTo(a,exports.ColorNotation.Linear_sRGB).channels),n.colorNotation!==exports.ColorNotation.Linear_sRGB&&(s=colorDataTo(n,exports.ColorNotation.Linear_sRGB).channels);break;case"lab":l=exports.ColorNotation.Lab,a.colorNotation!==exports.ColorNotation.Lab&&(r=colorDataTo(a,exports.ColorNotation.Lab).channels),n.colorNotation!==exports.ColorNotation.Lab&&(s=colorDataTo(n,exports.ColorNotation.Lab).channels);break;case"oklab":l=exports.ColorNotation.OKLab,a.colorNotation!==exports.ColorNotation.OKLab&&(r=colorDataTo(a,exports.ColorNotation.OKLab).channels),n.colorNotation!==exports.ColorNotation.OKLab&&(s=colorDataTo(n,exports.ColorNotation.OKLab).channels);break;case"xyz-d50":l=exports.ColorNotation.XYZ_D50,a.colorNotation!==exports.ColorNotation.XYZ_D50&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D50).channels),n.colorNotation!==exports.ColorNotation.XYZ_D50&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D50).channels);break;case"xyz":case"xyz-d65":l=exports.ColorNotation.XYZ_D65,a.colorNotation!==exports.ColorNotation.XYZ_D65&&(r=colorDataTo(a,exports.ColorNotation.XYZ_D65).channels),n.colorNotation!==exports.ColorNotation.XYZ_D65&&(s=colorDataTo(n,exports.ColorNotation.XYZ_D65).channels)}r=fillInMissingComponents(r,s),s=fillInMissingComponents(s,r),r[0]=premultiply(r[0],i),r[1]=premultiply(r[1],i),r[2]=premultiply(r[2],i),s[0]=premultiply(s[0],u),s[1]=premultiply(s[1],u),s[2]=premultiply(s[2],u);const c=interpolate(i,u,t);return{colorNotation:l,channels:[un_premultiply(interpolate(r[0],s[0],t),c),un_premultiply(interpolate(r[1],s[1],t),c),un_premultiply(interpolate(r[2],s[2],t),c)],alpha:c*o.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function colorMixPolar(e,o,a){if(!a)return!1;const n=a.a.color,t=a.b.color,r=a.a.percentage/100;let s=n.channels,l=t.channels,i=0,u=0,c=0,p=0,N=0,m=0,h=exports.ColorNotation.RGB,y=n.alpha;if("number"!=typeof y)return!1;let x=t.alpha;if("number"!=typeof x)return!1;switch(y=Number.isNaN(y)?x:y,x=Number.isNaN(x)?y:x,e){case"hsl":h=exports.ColorNotation.HSL,n.colorNotation!==exports.ColorNotation.HSL&&(s=colorDataTo(n,exports.ColorNotation.HSL).channels),t.colorNotation!==exports.ColorNotation.HSL&&(l=colorDataTo(t,exports.ColorNotation.HSL).channels);break;case"hwb":h=exports.ColorNotation.HWB,n.colorNotation!==exports.ColorNotation.HWB&&(s=colorDataTo(n,exports.ColorNotation.HWB).channels),t.colorNotation!==exports.ColorNotation.HWB&&(l=colorDataTo(t,exports.ColorNotation.HWB).channels);break;case"lch":h=exports.ColorNotation.LCH,n.colorNotation!==exports.ColorNotation.LCH&&(s=colorDataTo(n,exports.ColorNotation.LCH).channels),t.colorNotation!==exports.ColorNotation.LCH&&(l=colorDataTo(t,exports.ColorNotation.LCH).channels);break;case"oklch":h=exports.ColorNotation.OKLCH,n.colorNotation!==exports.ColorNotation.OKLCH&&(s=colorDataTo(n,exports.ColorNotation.OKLCH).channels),t.colorNotation!==exports.ColorNotation.OKLCH&&(l=colorDataTo(t,exports.ColorNotation.OKLCH).channels)}switch(s=fillInMissingComponents(s,l),l=fillInMissingComponents(l,s),e){case"hsl":case"hwb":i=s[0],u=l[0],c=s[1],p=l[1],N=s[2],m=l[2];break;case"lch":case"oklch":c=s[0],p=l[0],N=s[1],m=l[1],i=s[2],u=l[2]}const C=u-i;switch(o){case"shorter":C>180?i+=360:C<-180&&(u+=360);break;case"longer":-180<180&&(C>0?i+=360:u+=360);break;case"increasing":C<0&&(u+=360);break;case"decreasing":C>0&&(i+=360);break;default:throw new Error("Unknown hue interpolation method")}c=premultiply(c,y),N=premultiply(N,y),p=premultiply(p,x),m=premultiply(m,x);let T=[0,0,0];const b=interpolate(y,x,r);switch(e){case"hsl":case"hwb":T=[interpolate(i,u,r),un_premultiply(interpolate(c,p,r),b),un_premultiply(interpolate(N,m,r),b)];break;case"lch":case"oklch":T=[un_premultiply(interpolate(c,p,r),b),un_premultiply(interpolate(N,m,r),b),interpolate(i,u,r)]}return{colorNotation:h,channels:T,alpha:b*a.alphaMultiplier,syntaxFlags:new Set([exports.SyntaxFlag.ColorMix])}}function interpolate(e,o,a){return Number.isNaN(e)?o:Number.isNaN(o)?e:e*a+o*(1-a)}function premultiply(e,o){return Number.isNaN(o)?e:Number.isNaN(e)?NaN:e*o}function un_premultiply(e,o){return 0===o||Number.isNaN(o)?e:Number.isNaN(e)?NaN:e/o}function hex(e){const o=toLowerCaseAZ(e[4].value);if(o.match(/[^a-f0-9]/))return!1;const a={colorNotation:exports.ColorNotation.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([exports.SyntaxFlag.Hex])},n=o.length;if(3===n){const e=o[0],n=o[1],t=o[2];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a}if(6===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a}if(4===n){const e=o[0],n=o[1],t=o[2],r=o[3];return a.channels=[parseInt(e+e,16)/255,parseInt(n+n,16)/255,parseInt(t+t,16)/255],a.alpha=parseInt(r+r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}if(8===n){const e=o[0]+o[1],n=o[2]+o[3],t=o[4]+o[5],r=o[6]+o[7];return a.channels=[parseInt(e,16)/255,parseInt(n,16)/255,parseInt(t,16)/255],a.alpha=parseInt(r,16)/255,a.syntaxFlags.add(exports.SyntaxFlag.HasAlpha),a}return!1}function normalizeHue(e){if(e[0]===a.TokenType.Number)return e[4].value=e[4].value%360,e[1]=e[4].value.toString(),e;if(e[0]===a.TokenType.Dimension){let o=e[4].value;switch(toLowerCaseAZ(e[4].unit)){case"deg":break;case"rad":o=180*e[4].value/Math.PI;break;case"grad":o=.9*e[4].value;break;case"turn":o=360*e[4].value;break;default:return!1}return o%=360,[a.TokenType.Number,o.toString(),e[2],e[3],{value:o,type:a.NumberType.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(e,o){const n=[];for(let t=0;t.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_sRGB(e),n.conversions.gam_sRGB(e))),(e=>(e=n.conversions.lin_sRGB(e),e=n.conversions.lin_sRGB_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(e,o,s,l,i){const u=toLowerCaseAZ(e.getName()),c=[],p=[],N=[],m=[];let h,y,x=!1;const C={colorNotation:s,channels:[0,0,0],alpha:1,syntaxFlags:new Set(l)};let T=c;for(let o=0;ot.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=hslCommaSeparated(e);if(!1!==o)return o}{const a=hslSpaceSeparated(e,o);if(!1!==a)return a}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,exports.ColorNotation.HSL,[exports.SyntaxFlag.LegacyHSL])}function hslSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,exports.ColorNotation.HSL,[],o)}function normalize_HWB_ChannelValues(e,o){const n=[];for(let t=0;tt.isTokenNode(e)&&e.value[0]===a.TokenType.Comma))){const o=rgbCommaSeparated(e);if(!1!==o)return o}else{const a=rgbSpaceSeparated(e,o);if(!1!==a)return a}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,exports.ColorNotation.RGB,[exports.SyntaxFlag.LegacyRGB])}function rgbSpaceSeparated(e,o){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,exports.ColorNotation.RGB,[],o)}function toPrecision(e,o=7){e=+e,o=+o;const a=(Math.floor(e)+"").length;if(o>a)return+e.toFixed(o-a);{const n=10**(a-o);return Math.round(e/n)*n}}function XYZ_D50_to_P3_Gamut(e){const o=n.xyz.XYZ_D50_to_P3(e);if(n.utils.inGamut(o))return n.utils.clip(o);let a=e.slice();return a=n.conversions.D50_to_D65(a),a=n.conversions.XYZ_to_OKLab(a),a=n.conversions.OKLab_to_OKLCH(a),a[0]<1e-6&&(a=[0,0,0]),a[0]>.999999&&(a=[1,0,0]),n.calculations.mapGamut(a,(e=>(e=n.conversions.OKLCH_to_OKLab(e),e=n.conversions.OKLab_to_XYZ(e),e=n.conversions.XYZ_to_lin_P3(e),n.conversions.gam_P3(e))),(e=>(e=n.conversions.lin_P3(e),e=n.conversions.lin_P3_to_XYZ(e),e=n.conversions.XYZ_to_OKLab(e),n.conversions.OKLab_to_OKLCH(e))))}exports.color=function color(e){if(t.isFunctionNode(e)){switch(toLowerCaseAZ(e.getName())){case"rgb":case"rgba":return rgb(e,color);case"hsl":case"hsla":return hsl(e,color);case"hwb":return o=color,threeChannelSpaceSeparated(e,normalize_HWB_ChannelValues,exports.ColorNotation.HWB,[],o);case"lab":return lab(e,color);case"lch":return lch(e,color);case"oklab":return oklab(e,color);case"oklch":return oklch(e,color);case"color":return color$1(e,color);case"color-mix":return colorMix(e,color)}}var o;if(t.isTokenNode(e)){if(e.value[0]===a.TokenType.Hash)return hex(e.value);if(e.value[0]===a.TokenType.Ident){const o=namedColor(e.value[4].value);return!1!==o?o:"transparent"===toLowerCaseAZ(e.value[4].value)&&{colorNotation:exports.ColorNotation.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([exports.SyntaxFlag.ColorKeyword])}}}return!1},exports.colorDataFitsRGB_Gamut=function colorDataFitsRGB_Gamut(e){return!colorDataTo(e,exports.ColorNotation.RGB).channels.find((e=>e<-1e-5||e>1.00001))},exports.colorDataTo=colorDataTo,exports.serializeP3=function serializeP3(e,o=!0){e.channels=convertPowerlessComponentsToMissingComponents(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation!==exports.ColorNotation.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_P3(colorData_to_XYZ_D50(e).channels));const s=toPrecision(r[0],6),l=toPrecision(r[1],6),i=toPrecision(r[2],6),u=[a.TokenType.Function,"color(",-1,-1,{value:"color"}],c=[a.TokenType.CloseParen,")",-1,-1,void 0],p=[a.TokenType.Whitespace," ",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Number}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Number}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode(u,c,N):new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Integer}])])}return new t.FunctionNode(u,c,[...N,new t.TokenNode(p),new t.TokenNode([a.TokenType.Delim,"/",-1,-1,{value:"/"}]),new t.TokenNode(p),e.alpha])},exports.serializeRGB=function serializeRGB(e,o=!0){e.channels=convertPowerlessComponentsToMissingComponents(e.channels,e.colorNotation);let r=e.channels.map((e=>Number.isNaN(e)?0:e));e.colorNotation===exports.ColorNotation.HWB?r=n.conversions.HWB_to_sRGB(r):e.colorNotation===exports.ColorNotation.HSL?r=n.conversions.HSL_to_sRGB(r):e.colorNotation!==exports.ColorNotation.RGB&&e.colorNotation!==exports.ColorNotation.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(e).channels):n.xyz.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(e).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),l=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),u=[a.TokenType.CloseParen,")",-1,-1,void 0],c=[a.TokenType.Whitespace," ",-1,-1,void 0],p=[a.TokenType.Comma,",",-1,-1,void 0],N=[new t.TokenNode([a.TokenType.Number,s.toString(),-1,-1,{value:r[0],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,l.toString(),-1,-1,{value:r[1],type:a.NumberType.Integer}]),new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,i.toString(),-1,-1,{value:r[2],type:a.NumberType.Integer}])];if("number"==typeof e.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(e.alpha)?0:e.alpha)));return 1===toPrecision(o,4)?new t.FunctionNode([a.TokenType.Function,"rgb(",-1,-1,{value:"rgb"}],u,N):new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),new t.TokenNode([a.TokenType.Number,toPrecision(o,4).toString(),-1,-1,{value:e.alpha,type:a.NumberType.Number}])])}return new t.FunctionNode([a.TokenType.Function,"rgba(",-1,-1,{value:"rgba"}],u,[...N,new t.TokenNode(p),new t.TokenNode(c),e.alpha])}; diff --git a/packages/css-color-parser/dist/index.mjs b/packages/css-color-parser/dist/index.mjs index a4cb23757..b5e11cc6f 100644 --- a/packages/css-color-parser/dist/index.mjs +++ b/packages/css-color-parser/dist/index.mjs @@ -1 +1 @@ -import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{isWhitespaceNode as n,isCommentNode as o,isTokenNode as r,isFunctionNode as t,FunctionNode as l,TokenNode as s}from"@csstools/css-parser-algorithms";import{xyz as c,namedColors as u,utils as i,conversions as h,calculations as m}from"@csstools/color-helpers";import{mathFunctionNames as p,calcFromComponentValues as N}from"@csstools/css-calc";var _,b;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case _.HEX:case _.RGB:return{...e,colorNotation:_.XYZ_D50,channels:c.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Linear_RGB:return{...e,colorNotation:_.XYZ_D50,channels:c.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Display_P3:return{...e,colorNotation:_.XYZ_D50,channels:c.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Rec2020:return{...e,colorNotation:_.XYZ_D50,channels:c.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.A98_RGB:return{...e,colorNotation:_.XYZ_D50,channels:c.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.ProPhoto_RGB:return{...e,colorNotation:_.XYZ_D50,channels:c.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HSL:return{...e,colorNotation:_.XYZ_D50,channels:c.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HWB:return{...e,colorNotation:_.XYZ_D50,channels:c.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Lab:return{...e,colorNotation:_.XYZ_D50,channels:c.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLab:return{...e,colorNotation:_.XYZ_D50,channels:c.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.LCH:return{...e,colorNotation:_.XYZ_D50,channels:c.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLCH:return{...e,colorNotation:_.XYZ_D50,channels:c.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D50:return{...e,colorNotation:_.XYZ_D50,channels:c.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D65:return{...e,colorNotation:_.XYZ_D50,channels:c.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_RGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(_||(_={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(b||(b={}));const g=new Set([_.A98_RGB,_.Display_P3,_.HEX,_.Linear_RGB,_.ProPhoto_RGB,_.RGB,_.Rec2020,_.XYZ_D50,_.XYZ_D65]);function colorDataTo(e,a){const n=colorData_to_XYZ_D50(e),o={...e};switch(a){case _.HEX:case _.RGB:o.colorNotation=_.RGB,o.channels=c.XYZ_D50_to_sRGB(n.channels);break;case _.Linear_RGB:o.colorNotation=_.Linear_RGB,o.channels=c.XYZ_D50_to_lin_sRGB(n.channels);break;case _.Display_P3:o.colorNotation=_.Display_P3,o.channels=c.XYZ_D50_to_P3(n.channels);break;case _.Rec2020:o.colorNotation=_.Rec2020,o.channels=c.XYZ_D50_to_rec_2020(n.channels);break;case _.ProPhoto_RGB:o.colorNotation=_.ProPhoto_RGB,o.channels=c.XYZ_D50_to_ProPhoto(n.channels);break;case _.A98_RGB:o.colorNotation=_.A98_RGB,o.channels=c.XYZ_D50_to_a98_RGB(n.channels);break;case _.HSL:o.colorNotation=_.HSL,o.channels=c.XYZ_D50_to_HSL(n.channels);break;case _.HWB:o.colorNotation=_.HWB,o.channels=c.XYZ_D50_to_HWB(n.channels);break;case _.Lab:o.colorNotation=_.Lab,o.channels=c.XYZ_D50_to_Lab(n.channels);break;case _.LCH:o.colorNotation=_.LCH,o.channels=c.XYZ_D50_to_LCH(n.channels);break;case _.OKLCH:o.colorNotation=_.OKLCH,o.channels=c.XYZ_D50_to_OKLCH(n.channels);break;case _.OKLab:o.colorNotation=_.OKLab,o.channels=c.XYZ_D50_to_OKLab(n.channels);break;case _.XYZ_D50:o.colorNotation=_.XYZ_D50,o.channels=c.XYZ_D50_to_XYZ_D50(n.channels);break;case _.XYZ_D65:o.colorNotation=_.XYZ_D65,o.channels=c.XYZ_D50_to_XYZ_D65(n.channels);break;default:throw new Error("Unsupported color notation")}if(a===e.colorNotation)o.channels=carryForwardMissingComponents(e.channels,[0,1,2],o.channels,[0,1,2]);else if(g.has(a)&&g.has(e.colorNotation))o.channels=carryForwardMissingComponents(e.channels,[0,1,2],o.channels,[0,1,2]);else switch(a){case _.HSL:switch(e.colorNotation){case _.HWB:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[0]);break;case _.Lab:case _.OKLab:o.channels=carryForwardMissingComponents(e.channels,[2],o.channels,[0]);break;case _.LCH:case _.OKLCH:o.channels=carryForwardMissingComponents(e.channels,[0,1,2],o.channels,[2,1,0])}break;case _.HWB:switch(e.colorNotation){case _.HSL:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[0]);break;case _.LCH:case _.OKLCH:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[2])}break;case _.Lab:case _.OKLab:switch(e.colorNotation){case _.HSL:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[2]);break;case _.Lab:case _.OKLab:case _.LCH:case _.OKLCH:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[0])}break;case _.LCH:case _.OKLCH:switch(e.colorNotation){case _.HSL:o.channels=carryForwardMissingComponents(e.channels,[0,1,2],o.channels,[2,1,0]);break;case _.HWB:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[2]);break;case _.Lab:case _.OKLab:o.channels=carryForwardMissingComponents(e.channels,[0],o.channels,[0]);break;case _.LCH:case _.OKLCH:o.channels=carryForwardMissingComponents(e.channels,[0,1,2],o.channels,[0,1,2])}}return o.channels=convertPowerlessComponentsToMissingComponents(o.channels,a),o}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case _.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),n[1]<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case _.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,o){const r=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(r[o[n]]=NaN);return r}function fillInMissingComponents(e,a){const n=[...e];for(let o=0;oe<-1e-5||e>1.00001))}function normalize(e,a,n,o){return Math.min(Math.max(e/a,n),o)}const d=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(d,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,o){const r=[];for(let t=0;t=0){i=h.value[4].value;continue}}return!1}if(!u)return!1;s.push({color:u,percentage:i}),u=!1,i=!1}}if(u&&s.push({color:u,percentage:i}),2!==s.length)return!1;let h=s[0].percentage,m=s[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(c=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:s[0].color,percentage:h},b:{color:s[1].color,percentage:m},alphaMultiplier:c}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,o=a.b.color,r=a.a.percentage/100;let t=n.channels,l=o.channels,s=_.RGB,c=n.alpha;if("number"!=typeof c)return!1;let u=o.alpha;if("number"!=typeof u)return!1;switch(c=Number.isNaN(c)?u:c,u=Number.isNaN(u)?c:u,e){case"srgb":s=_.RGB,n.colorNotation!==_.RGB&&n.colorNotation!==_.HEX&&(t=colorDataTo(n,_.RGB).channels),o.colorNotation!==_.RGB&&n.colorNotation!==_.HEX&&(l=colorDataTo(o,_.RGB).channels);break;case"srgb-linear":s=_.Linear_RGB,n.colorNotation!==_.Linear_RGB&&(t=colorDataTo(n,_.Linear_RGB).channels),o.colorNotation!==_.Linear_RGB&&(l=colorDataTo(o,_.Linear_RGB).channels);break;case"lab":s=_.Lab,n.colorNotation!==_.Lab&&(t=colorDataTo(n,_.Lab).channels),o.colorNotation!==_.Lab&&(l=colorDataTo(o,_.Lab).channels);break;case"oklab":s=_.OKLab,n.colorNotation!==_.OKLab&&(t=colorDataTo(n,_.OKLab).channels),o.colorNotation!==_.OKLab&&(l=colorDataTo(o,_.OKLab).channels);break;case"xyz-d50":s=_.XYZ_D50,n.colorNotation!==_.XYZ_D50&&(t=colorDataTo(n,_.XYZ_D50).channels),o.colorNotation!==_.XYZ_D50&&(l=colorDataTo(o,_.XYZ_D50).channels);break;case"xyz":case"xyz-d65":s=_.XYZ_D65,n.colorNotation!==_.XYZ_D65&&(t=colorDataTo(n,_.XYZ_D65).channels),o.colorNotation!==_.XYZ_D65&&(l=colorDataTo(o,_.XYZ_D65).channels)}t=fillInMissingComponents(t,l),l=fillInMissingComponents(l,t),t[0]=premultiply(t[0],c),t[1]=premultiply(t[1],c),t[2]=premultiply(t[2],c),l[0]=premultiply(l[0],u),l[1]=premultiply(l[1],u),l[2]=premultiply(l[2],u);const i=interpolate(c,u,r);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],r),i),un_premultiply(interpolate(t[1],l[1],r),i),un_premultiply(interpolate(t[2],l[2],r),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([b.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const o=n.a.color,r=n.b.color,t=n.a.percentage/100;let l=o.channels,s=r.channels,c=0,u=0,i=0,h=0,m=0,p=0,N=_.RGB,g=o.alpha;if("number"!=typeof g)return!1;let d=r.alpha;if("number"!=typeof d)return!1;switch(g=Number.isNaN(g)?d:g,d=Number.isNaN(d)?g:d,e){case"hsl":N=_.HSL,o.colorNotation!==_.HSL&&(l=colorDataTo(o,_.HSL).channels),r.colorNotation!==_.HSL&&(s=colorDataTo(r,_.HSL).channels);break;case"hwb":N=_.HWB,o.colorNotation!==_.HWB&&(l=colorDataTo(o,_.HWB).channels),r.colorNotation!==_.HWB&&(s=colorDataTo(r,_.HWB).channels);break;case"lch":N=_.LCH,o.colorNotation!==_.LCH&&(l=colorDataTo(o,_.LCH).channels),r.colorNotation!==_.LCH&&(s=colorDataTo(r,_.LCH).channels);break;case"oklch":N=_.OKLCH,o.colorNotation!==_.OKLCH&&(l=colorDataTo(o,_.OKLCH).channels),r.colorNotation!==_.OKLCH&&(s=colorDataTo(r,_.OKLCH).channels)}switch(l=fillInMissingComponents(l,s),s=fillInMissingComponents(s,l),e){case"hsl":case"hwb":c=l[0],u=s[0],i=l[1],h=s[1],m=l[2],p=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],p=s[1],c=l[2],u=s[2]}const f=u-c;switch(a){case"shorter":f>180?c+=360:f<-180&&(u+=360);break;case"longer":-180<180&&(f>0?c+=360:u+=360);break;case"increasing":f<0&&(u+=360);break;case"decreasing":f>0&&(c+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,g),m=premultiply(m,g),h=premultiply(h,d),p=premultiply(p,d);let v=[0,0,0];const y=interpolate(g,d,t);switch(e){case"hsl":case"hwb":v=[interpolate(c,u,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y)];break;case"lch":case"oklch":v=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y),interpolate(c,u,t)]}return{colorNotation:N,channels:v,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([b.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:_.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([b.Hex])},o=a.length;if(3===o){const e=a[0],o=a[1],r=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n}if(6===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n}if(4===o){const e=a[0],o=a[1],r=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(b.HasAlpha),n}if(8===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(b.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let o=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":o=180*n[4].value/Math.PI;break;case"grad":o=.9*n[4].value;break;case"turn":o=360*n[4].value;break;default:return!1}return o%=360,[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,o){const r=[];for(let t=0;tr(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,_.HSL,[b.LegacyHSL])}function hslSpaceSeparated(e){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,_.HSL,[])}function normalize_HWB_ChannelValues(n,o){const r=[];for(let t=0;tr(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,_.RGB,[b.LegacyRGB])}function rgbSpaceSeparated(e){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,_.RGB,[])}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const o=10**(n-a);return Math.round(e/o)*o}}function serializeP3(n,o=!0){n.channels=convertPowerlessComponentsToMissingComponents(n.channels,n.colorNotation);let r=n.channels.map((e=>Number.isNaN(e)?0:e));n.colorNotation!==_.Display_P3&&(r=o?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(n).channels):c.XYZ_D50_to_P3(colorData_to_XYZ_D50(n).channels));const t=toPrecision(r[0],6),u=toPrecision(r[1],6),i=toPrecision(r[2],6),h=[e.Function,"color(",-1,-1,{value:"color"}],m=[e.CloseParen,")",-1,-1,void 0],p=[e.Whitespace," ",-1,-1,void 0],N=[new s([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new s(p),new s([e.Number,t.toString(),-1,-1,{value:r[0],type:a.Number}]),new s(p),new s([e.Number,u.toString(),-1,-1,{value:r[1],type:a.Number}]),new s(p),new s([e.Number,i.toString(),-1,-1,{value:r[2],type:a.Number}])];if("number"==typeof n.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(n.alpha)?0:n.alpha)));return new l(h,m,1===o?N:[...N,new s(p),new s([e.Delim,"/",-1,-1,{value:"/"}]),new s(p),new s([e.Number,o.toString(),-1,-1,{value:n.alpha,type:a.Integer}])])}return new l(h,m,[...N,new s(p),new s([e.Delim,"/",-1,-1,{value:"/"}]),new s(p),n.alpha])}function XYZ_D50_to_P3_Gamut(e){const a=c.XYZ_D50_to_P3(e);if(i.inGamut(a))return i.clip(a);let n=e.slice();return n=h.D50_to_D65(n),n=h.XYZ_to_OKLab(n),n=h.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),m.mapGamut(n,(e=>(e=h.OKLCH_to_OKLab(e),e=h.OKLab_to_XYZ(e),e=h.XYZ_to_lin_P3(e),h.gam_P3(e))),(e=>(e=h.lin_P3(e),e=h.lin_P3_to_XYZ(e),e=h.XYZ_to_OKLab(e),h.OKLab_to_OKLCH(e))))}function serializeRGB(n,o=!0){n.channels=convertPowerlessComponentsToMissingComponents(n.channels,n.colorNotation);let r=n.channels.map((e=>Number.isNaN(e)?0:e));n.colorNotation!==_.RGB&&n.colorNotation!==_.HEX&&(r=o?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(n).channels):c.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(n).channels));const t=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[0])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[1])))),i=Math.min(255,Math.max(0,Math.round(255*toPrecision(r[2])))),h=[e.CloseParen,")",-1,-1,void 0],m=[e.Whitespace," ",-1,-1,void 0],p=[e.Comma,",",-1,-1,void 0],N=[new s([e.Number,t.toString(),-1,-1,{value:r[0],type:a.Integer}]),new s(p),new s(m),new s([e.Number,u.toString(),-1,-1,{value:r[1],type:a.Integer}]),new s(p),new s(m),new s([e.Number,i.toString(),-1,-1,{value:r[2],type:a.Integer}])];if("number"==typeof n.alpha){const o=Math.min(1,Math.max(0,toPrecision(Number.isNaN(n.alpha)?0:n.alpha)));return 1===o?new l([e.Function,"rgb(",-1,-1,{value:"rgb"}],h,N):new l([e.Function,"rgba(",-1,-1,{value:"rgba"}],h,[...N,new s(p),new s(m),new s([e.Number,o.toString(),-1,-1,{value:n.alpha,type:a.Integer}])])}return new l([e.Function,"rgba(",-1,-1,{value:"rgba"}],h,[...N,new s(p),new s(m),n.alpha])}function XYZ_D50_to_sRGB_Gamut(e){const a=c.XYZ_D50_to_sRGB(e);if(i.inGamut(a))return i.clip(a);let n=e.slice();return n=h.D50_to_D65(n),n=h.XYZ_to_OKLab(n),n=h.OKLab_to_OKLCH(n),n[0]<1e-6&&(n=[0,0,0]),n[0]>.999999&&(n=[1,0,0]),m.mapGamut(n,(e=>(e=h.OKLCH_to_OKLab(e),e=h.OKLab_to_XYZ(e),e=h.XYZ_to_lin_sRGB(e),h.gam_sRGB(e))),(e=>(e=h.lin_sRGB(e),e=h.lin_sRGB_to_XYZ(e),e=h.XYZ_to_OKLab(e),h.OKLab_to_OKLCH(e))))}function color(a){if(t(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a);case"hsl":case"hsla":return hsl(a);case"hwb":return threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,_.HWB,[]);case"lab":return threeChannelSpaceSeparated(a,normalize_Lab_ChannelValues,_.Lab,[]);case"lch":return threeChannelSpaceSeparated(a,normalize_LCH_ChannelValues,_.LCH,[]);case"oklab":return threeChannelSpaceSeparated(a,normalize_OKLab_ChannelValues,_.OKLab,[]);case"oklch":return threeChannelSpaceSeparated(a,normalize_OKLCH_ChannelValues,_.OKLCH,[]);case"color":return color$1(a);case"color-mix":return colorMix(a,color);default:return!1}}if(r(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);if(!1!==e)return e;const n="transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:_.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([b.ColorKeyword])};return!1!==n&&n}return!1}return!1}export{_ as ColorNotation,b as SyntaxFlag,color,colorDataFitsRGB_Gamut,colorDataTo,serializeP3,serializeRGB}; +import{TokenType as e,NumberType as a}from"@csstools/css-tokenizer";import{xyz as n,utils as o,conversions as r,calculations as t,namedColors as l}from"@csstools/color-helpers";import{isWhitespaceNode as s,isCommentNode as u,isTokenNode as c,isFunctionNode as i,TokenNode as h,FunctionNode as m}from"@csstools/css-parser-algorithms";import{mathFunctionNames as p,calcFromComponentValues as N}from"@csstools/css-calc";var _,b;function colorData_to_XYZ_D50(e){switch(e.colorNotation){case _.HEX:case _.RGB:case _.sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Linear_sRGB:return{...e,colorNotation:_.XYZ_D50,channels:n.lin_sRGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Display_P3:return{...e,colorNotation:_.XYZ_D50,channels:n.P3_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Rec2020:return{...e,colorNotation:_.XYZ_D50,channels:n.rec_2020_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.A98_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.a98_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.ProPhoto_RGB:return{...e,colorNotation:_.XYZ_D50,channels:n.ProPhoto_RGB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HSL:return{...e,colorNotation:_.XYZ_D50,channels:n.HSL_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.HWB:return{...e,colorNotation:_.XYZ_D50,channels:n.HWB_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.Lab:return{...e,colorNotation:_.XYZ_D50,channels:n.Lab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLab:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLab_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.LCH:return{...e,colorNotation:_.XYZ_D50,channels:n.LCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.OKLCH:return{...e,colorNotation:_.XYZ_D50,channels:n.OKLCH_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D50:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D50_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};case _.XYZ_D65:return{...e,colorNotation:_.XYZ_D50,channels:n.XYZ_D65_to_XYZ_D50(e.channels.map((e=>Number.isNaN(e)?0:e)))};default:throw new Error("Unsupported color notation")}}!function(e){e.A98_RGB="a98-rgb",e.Display_P3="display-p3",e.HEX="hex",e.HSL="hsl",e.HWB="hwb",e.LCH="lch",e.Lab="lab",e.Linear_sRGB="srgb-linear",e.OKLCH="oklch",e.OKLab="oklab",e.ProPhoto_RGB="prophoto-rgb",e.RGB="rgb",e.sRGB="srgb",e.Rec2020="rec2020",e.XYZ_D50="xyz-d50",e.XYZ_D65="xyz-d65"}(_||(_={})),function(e){e.ColorKeyword="color-keyword",e.HasAlpha="has-alpha",e.HasDimensionValues="has-dimension-values",e.HasNoneKeywords="has-none-keywords",e.HasNumberValues="has-number-values",e.HasPercentageAlpha="has-percentage-alpha",e.HasPercentageValues="has-percentage-values",e.HasVariableAlpha="has-variable-alpha",e.Hex="hex",e.LegacyHSL="legacy-hsl",e.LegacyRGB="legacy-rgb",e.NamedColor="named-color",e.RelativeColorSyntax="relative-color-syntax",e.ColorMix="color-mix"}(b||(b={}));const g=new Set([_.A98_RGB,_.Display_P3,_.HEX,_.Linear_sRGB,_.ProPhoto_RGB,_.RGB,_.sRGB,_.Rec2020,_.XYZ_D50,_.XYZ_D65]);function colorDataTo(e,a){const o=colorData_to_XYZ_D50(e),r={...e};switch(a){case _.HEX:case _.RGB:r.colorNotation=_.RGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case _.sRGB:r.colorNotation=_.sRGB,r.channels=n.XYZ_D50_to_sRGB(o.channels);break;case _.Linear_sRGB:r.colorNotation=_.Linear_sRGB,r.channels=n.XYZ_D50_to_lin_sRGB(o.channels);break;case _.Display_P3:r.colorNotation=_.Display_P3,r.channels=n.XYZ_D50_to_P3(o.channels);break;case _.Rec2020:r.colorNotation=_.Rec2020,r.channels=n.XYZ_D50_to_rec_2020(o.channels);break;case _.ProPhoto_RGB:r.colorNotation=_.ProPhoto_RGB,r.channels=n.XYZ_D50_to_ProPhoto(o.channels);break;case _.A98_RGB:r.colorNotation=_.A98_RGB,r.channels=n.XYZ_D50_to_a98_RGB(o.channels);break;case _.HSL:r.colorNotation=_.HSL,r.channels=n.XYZ_D50_to_HSL(o.channels);break;case _.HWB:r.colorNotation=_.HWB,r.channels=n.XYZ_D50_to_HWB(o.channels);break;case _.Lab:r.colorNotation=_.Lab,r.channels=n.XYZ_D50_to_Lab(o.channels);break;case _.LCH:r.colorNotation=_.LCH,r.channels=n.XYZ_D50_to_LCH(o.channels);break;case _.OKLCH:r.colorNotation=_.OKLCH,r.channels=n.XYZ_D50_to_OKLCH(o.channels);break;case _.OKLab:r.colorNotation=_.OKLab,r.channels=n.XYZ_D50_to_OKLab(o.channels);break;case _.XYZ_D50:r.colorNotation=_.XYZ_D50,r.channels=n.XYZ_D50_to_XYZ_D50(o.channels);break;case _.XYZ_D65:r.colorNotation=_.XYZ_D65,r.channels=n.XYZ_D50_to_XYZ_D65(o.channels);break;default:throw new Error("Unsupported color notation")}if(a===e.colorNotation)r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else if(g.has(a)&&g.has(e.colorNotation))r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2]);else switch(a){case _.HSL:switch(e.colorNotation){case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[2],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0])}break;case _.HWB:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2])}break;case _.Lab:case _.OKLab:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0])}break;case _.LCH:case _.OKLCH:switch(e.colorNotation){case _.HSL:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[2,1,0]);break;case _.HWB:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[2]);break;case _.Lab:case _.OKLab:r.channels=carryForwardMissingComponents(e.channels,[0],r.channels,[0]);break;case _.LCH:case _.OKLCH:r.channels=carryForwardMissingComponents(e.channels,[0,1,2],r.channels,[0,1,2])}}return r.channels=convertPowerlessComponentsToMissingComponents(r.channels,a),r}function convertPowerlessComponentsToMissingComponents(e,a){const n=[...e];switch(a){case _.HSL:(reducePrecision(n[2])<=0||reducePrecision(n[2])>=100)&&(n[0]=NaN,n[1]=NaN),n[1]<=0&&(n[0]=NaN);break;case _.HWB:Math.max(0,reducePrecision(n[1]))+Math.max(0,reducePrecision(n[2]))>=100&&(n[0]=NaN);break;case _.Lab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.LCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=100)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLab:(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN);break;case _.OKLCH:reducePrecision(n[1])<=0&&(n[2]=NaN),(reducePrecision(n[0])<=0||reducePrecision(n[0])>=1)&&(n[1]=NaN,n[2]=NaN)}return n}function carryForwardMissingComponents(e,a,n,o){const r=[...n];for(const n of a)Number.isNaN(e[a[n]])&&(r[o[n]]=NaN);return r}function fillInMissingComponents(e,a){const n=[...e];for(let o=0;oe<-1e-5||e>1.00001))}function normalize(e,a,n,o){return Math.min(Math.max(e/a,n),o)}const v=/[A-Z]/g;function toLowerCaseAZ(e){return e.replace(v,(e=>String.fromCharCode(e.charCodeAt(0)+32)))}function normalize_Color_ChannelValues(n,o){const r=[];for(let t=0;t=0){l=h.value[4].value;continue}}return!1}if(!t)return!1;o.push({color:t,percentage:l}),t=!1,l=!1}}if(t&&o.push({color:t,percentage:l}),2!==o.length)return!1;let h=o[0].percentage,m=o[1].percentage;return(!1===h||!(h<0||h>100))&&((!1===m||!(m<0||m>100))&&(!1===h&&!1===m?(h=50,m=50):!1!==h&&!1===m?m=100-h:!1===h&&!1!==m&&(h=100-m),(0!==h||0!==m)&&(!1!==h&&!1!==m&&(h+m>100&&(h=h/(h+m)*100,m=m/(h+m)*100),h+m<100&&(r=(h+m)/100,h=h/(h+m)*100,m=m/(h+m)*100),{a:{color:o[0].color,percentage:h},b:{color:o[1].color,percentage:m},alphaMultiplier:r}))))}function colorMixRectangular(e,a){if(!a)return!1;const n=a.a.color,o=a.b.color,r=a.a.percentage/100;let t=n.channels,l=o.channels,s=_.RGB,u=n.alpha;if("number"!=typeof u)return!1;let c=o.alpha;if("number"!=typeof c)return!1;switch(u=Number.isNaN(u)?c:u,c=Number.isNaN(c)?u:c,e){case"srgb":s=_.RGB,n.colorNotation!==_.RGB&&n.colorNotation!==_.sRGB&&n.colorNotation!==_.HEX&&(t=colorDataTo(n,_.RGB).channels),o.colorNotation!==_.RGB&&o.colorNotation!==_.sRGB&&o.colorNotation!==_.HEX&&(l=colorDataTo(o,_.RGB).channels);break;case"srgb-linear":s=_.Linear_sRGB,n.colorNotation!==_.Linear_sRGB&&(t=colorDataTo(n,_.Linear_sRGB).channels),o.colorNotation!==_.Linear_sRGB&&(l=colorDataTo(o,_.Linear_sRGB).channels);break;case"lab":s=_.Lab,n.colorNotation!==_.Lab&&(t=colorDataTo(n,_.Lab).channels),o.colorNotation!==_.Lab&&(l=colorDataTo(o,_.Lab).channels);break;case"oklab":s=_.OKLab,n.colorNotation!==_.OKLab&&(t=colorDataTo(n,_.OKLab).channels),o.colorNotation!==_.OKLab&&(l=colorDataTo(o,_.OKLab).channels);break;case"xyz-d50":s=_.XYZ_D50,n.colorNotation!==_.XYZ_D50&&(t=colorDataTo(n,_.XYZ_D50).channels),o.colorNotation!==_.XYZ_D50&&(l=colorDataTo(o,_.XYZ_D50).channels);break;case"xyz":case"xyz-d65":s=_.XYZ_D65,n.colorNotation!==_.XYZ_D65&&(t=colorDataTo(n,_.XYZ_D65).channels),o.colorNotation!==_.XYZ_D65&&(l=colorDataTo(o,_.XYZ_D65).channels)}t=fillInMissingComponents(t,l),l=fillInMissingComponents(l,t),t[0]=premultiply(t[0],u),t[1]=premultiply(t[1],u),t[2]=premultiply(t[2],u),l[0]=premultiply(l[0],c),l[1]=premultiply(l[1],c),l[2]=premultiply(l[2],c);const i=interpolate(u,c,r);return{colorNotation:s,channels:[un_premultiply(interpolate(t[0],l[0],r),i),un_premultiply(interpolate(t[1],l[1],r),i),un_premultiply(interpolate(t[2],l[2],r),i)],alpha:i*a.alphaMultiplier,syntaxFlags:new Set([b.ColorMix])}}function colorMixPolar(e,a,n){if(!n)return!1;const o=n.a.color,r=n.b.color,t=n.a.percentage/100;let l=o.channels,s=r.channels,u=0,c=0,i=0,h=0,m=0,p=0,N=_.RGB,g=o.alpha;if("number"!=typeof g)return!1;let v=r.alpha;if("number"!=typeof v)return!1;switch(g=Number.isNaN(g)?v:g,v=Number.isNaN(v)?g:v,e){case"hsl":N=_.HSL,o.colorNotation!==_.HSL&&(l=colorDataTo(o,_.HSL).channels),r.colorNotation!==_.HSL&&(s=colorDataTo(r,_.HSL).channels);break;case"hwb":N=_.HWB,o.colorNotation!==_.HWB&&(l=colorDataTo(o,_.HWB).channels),r.colorNotation!==_.HWB&&(s=colorDataTo(r,_.HWB).channels);break;case"lch":N=_.LCH,o.colorNotation!==_.LCH&&(l=colorDataTo(o,_.LCH).channels),r.colorNotation!==_.LCH&&(s=colorDataTo(r,_.LCH).channels);break;case"oklch":N=_.OKLCH,o.colorNotation!==_.OKLCH&&(l=colorDataTo(o,_.OKLCH).channels),r.colorNotation!==_.OKLCH&&(s=colorDataTo(r,_.OKLCH).channels)}switch(l=fillInMissingComponents(l,s),s=fillInMissingComponents(s,l),e){case"hsl":case"hwb":u=l[0],c=s[0],i=l[1],h=s[1],m=l[2],p=s[2];break;case"lch":case"oklch":i=l[0],h=s[0],m=l[1],p=s[1],u=l[2],c=s[2]}const d=c-u;switch(a){case"shorter":d>180?u+=360:d<-180&&(c+=360);break;case"longer":-180<180&&(d>0?u+=360:c+=360);break;case"increasing":d<0&&(c+=360);break;case"decreasing":d>0&&(u+=360);break;default:throw new Error("Unknown hue interpolation method")}i=premultiply(i,g),m=premultiply(m,g),h=premultiply(h,v),p=premultiply(p,v);let f=[0,0,0];const y=interpolate(g,v,t);switch(e){case"hsl":case"hwb":f=[interpolate(u,c,t),un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y)];break;case"lch":case"oklch":f=[un_premultiply(interpolate(i,h,t),y),un_premultiply(interpolate(m,p,t),y),interpolate(u,c,t)]}return{colorNotation:N,channels:f,alpha:y*n.alphaMultiplier,syntaxFlags:new Set([b.ColorMix])}}function interpolate(e,a,n){return Number.isNaN(e)?a:Number.isNaN(a)?e:e*n+a*(1-n)}function premultiply(e,a){return Number.isNaN(a)?e:Number.isNaN(e)?NaN:e*a}function un_premultiply(e,a){return 0===a||Number.isNaN(a)?e:Number.isNaN(e)?NaN:e/a}function hex(e){const a=toLowerCaseAZ(e[4].value);if(a.match(/[^a-f0-9]/))return!1;const n={colorNotation:_.HEX,channels:[0,0,0],alpha:1,syntaxFlags:new Set([b.Hex])},o=a.length;if(3===o){const e=a[0],o=a[1],r=a[2];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n}if(6===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n}if(4===o){const e=a[0],o=a[1],r=a[2],t=a[3];return n.channels=[parseInt(e+e,16)/255,parseInt(o+o,16)/255,parseInt(r+r,16)/255],n.alpha=parseInt(t+t,16)/255,n.syntaxFlags.add(b.HasAlpha),n}if(8===o){const e=a[0]+a[1],o=a[2]+a[3],r=a[4]+a[5],t=a[6]+a[7];return n.channels=[parseInt(e,16)/255,parseInt(o,16)/255,parseInt(r,16)/255],n.alpha=parseInt(t,16)/255,n.syntaxFlags.add(b.HasAlpha),n}return!1}function normalizeHue(n){if(n[0]===e.Number)return n[4].value=n[4].value%360,n[1]=n[4].value.toString(),n;if(n[0]===e.Dimension){let o=n[4].value;switch(toLowerCaseAZ(n[4].unit)){case"deg":break;case"rad":o=180*n[4].value/Math.PI;break;case"grad":o=.9*n[4].value;break;case"turn":o=360*n[4].value;break;default:return!1}return o%=360,[e.Number,o.toString(),n[2],n[3],{value:o,type:a.Number}]}return!1}function normalize_legacy_HSL_ChannelValues(n,o){const r=[];for(let t=0;t.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_sRGB(e),r.gam_sRGB(e))),(e=>(e=r.lin_sRGB(e),e=r.lin_sRGB_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function threeChannelSpaceSeparated(a,n,o,t,l){const m=toLowerCaseAZ(a.getName()),g=[],v=[],d=[],f=[];let y,C,L=!1;const H={colorNotation:o,channels:[0,0,0],alpha:1,syntaxFlags:new Set(t)};let D=g;for(let n=0;nc(a)&&a.value[0]===e.Comma))){const e=hslCommaSeparated(a);if(!1!==e)return e}{const e=hslSpaceSeparated(a,n);if(!1!==e)return e}return!1}function hslCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_HSL_ChannelValues,_.HSL,[b.LegacyHSL])}function hslSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_HSL_ChannelValues,_.HSL,[],a)}function normalize_HWB_ChannelValues(n,o){const r=[];for(let t=0;tc(a)&&a.value[0]===e.Comma))){const e=rgbCommaSeparated(a);if(!1!==e)return e}else{const e=rgbSpaceSeparated(a,n);if(!1!==e)return e}return!1}function rgbCommaSeparated(e){return threeChannelLegacySyntax(e,normalize_legacy_sRGB_ChannelValues,_.RGB,[b.LegacyRGB])}function rgbSpaceSeparated(e,a){return threeChannelSpaceSeparated(e,normalize_modern_sRGB_ChannelValues,_.RGB,[],a)}function toPrecision(e,a=7){e=+e,a=+a;const n=(Math.floor(e)+"").length;if(a>n)return+e.toFixed(a-n);{const o=10**(n-a);return Math.round(e/o)*o}}function XYZ_D50_to_P3_Gamut(e){const a=n.XYZ_D50_to_P3(e);if(o.inGamut(a))return o.clip(a);let l=e.slice();return l=r.D50_to_D65(l),l=r.XYZ_to_OKLab(l),l=r.OKLab_to_OKLCH(l),l[0]<1e-6&&(l=[0,0,0]),l[0]>.999999&&(l=[1,0,0]),t.mapGamut(l,(e=>(e=r.OKLCH_to_OKLab(e),e=r.OKLab_to_XYZ(e),e=r.XYZ_to_lin_P3(e),r.gam_P3(e))),(e=>(e=r.lin_P3(e),e=r.lin_P3_to_XYZ(e),e=r.XYZ_to_OKLab(e),r.OKLab_to_OKLCH(e))))}function serializeP3(o,r=!0){o.channels=convertPowerlessComponentsToMissingComponents(o.channels,o.colorNotation);let t=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation!==_.Display_P3&&(t=r?XYZ_D50_to_P3_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_P3(colorData_to_XYZ_D50(o).channels));const l=toPrecision(t[0],6),s=toPrecision(t[1],6),u=toPrecision(t[2],6),c=[e.Function,"color(",-1,-1,{value:"color"}],i=[e.CloseParen,")",-1,-1,void 0],p=[e.Whitespace," ",-1,-1,void 0],N=[new h([e.Ident,"display-p3",-1,-1,{value:"display-p3"}]),new h(p),new h([e.Number,l.toString(),-1,-1,{value:t[0],type:a.Number}]),new h(p),new h([e.Number,s.toString(),-1,-1,{value:t[1],type:a.Number}]),new h(p),new h([e.Number,u.toString(),-1,-1,{value:t[2],type:a.Number}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m(c,i,N):new m(c,i,[...N,new h(p),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(p),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Integer}])])}return new m(c,i,[...N,new h(p),new h([e.Delim,"/",-1,-1,{value:"/"}]),new h(p),o.alpha])}function serializeRGB(o,t=!0){o.channels=convertPowerlessComponentsToMissingComponents(o.channels,o.colorNotation);let l=o.channels.map((e=>Number.isNaN(e)?0:e));o.colorNotation===_.HWB?l=r.HWB_to_sRGB(l):o.colorNotation===_.HSL?l=r.HSL_to_sRGB(l):o.colorNotation!==_.RGB&&o.colorNotation!==_.HEX&&(l=t?XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(o).channels):n.XYZ_D50_to_sRGB(colorData_to_XYZ_D50(o).channels));const s=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[0])))),u=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[1])))),c=Math.min(255,Math.max(0,Math.round(255*toPrecision(l[2])))),i=[e.CloseParen,")",-1,-1,void 0],p=[e.Whitespace," ",-1,-1,void 0],N=[e.Comma,",",-1,-1,void 0],b=[new h([e.Number,s.toString(),-1,-1,{value:l[0],type:a.Integer}]),new h(N),new h(p),new h([e.Number,u.toString(),-1,-1,{value:l[1],type:a.Integer}]),new h(N),new h(p),new h([e.Number,c.toString(),-1,-1,{value:l[2],type:a.Integer}])];if("number"==typeof o.alpha){const n=Math.min(1,Math.max(0,toPrecision(Number.isNaN(o.alpha)?0:o.alpha)));return 1===toPrecision(n,4)?new m([e.Function,"rgb(",-1,-1,{value:"rgb"}],i,b):new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new h(N),new h(p),new h([e.Number,toPrecision(n,4).toString(),-1,-1,{value:o.alpha,type:a.Number}])])}return new m([e.Function,"rgba(",-1,-1,{value:"rgba"}],i,[...b,new h(N),new h(p),o.alpha])}function color(a){if(i(a)){switch(toLowerCaseAZ(a.getName())){case"rgb":case"rgba":return rgb(a,color);case"hsl":case"hsla":return hsl(a,color);case"hwb":return n=color,threeChannelSpaceSeparated(a,normalize_HWB_ChannelValues,_.HWB,[],n);case"lab":return lab(a,color);case"lch":return lch(a,color);case"oklab":return oklab(a,color);case"oklch":return oklch(a,color);case"color":return color$1(a,color);case"color-mix":return colorMix(a,color)}}var n;if(c(a)){if(a.value[0]===e.Hash)return hex(a.value);if(a.value[0]===e.Ident){const e=namedColor(a.value[4].value);return!1!==e?e:"transparent"===toLowerCaseAZ(a.value[4].value)&&{colorNotation:_.RGB,channels:[0,0,0],alpha:0,syntaxFlags:new Set([b.ColorKeyword])}}}return!1}export{_ as ColorNotation,b as SyntaxFlag,color,colorDataFitsRGB_Gamut,colorDataTo,serializeP3,serializeRGB}; diff --git a/packages/css-color-parser/dist/serialize/p3.d.ts b/packages/css-color-parser/dist/serialize/p3.d.ts index 74d5e0b70..503c5a256 100644 --- a/packages/css-color-parser/dist/serialize/p3.d.ts +++ b/packages/css-color-parser/dist/serialize/p3.d.ts @@ -1,5 +1,3 @@ import { ColorData } from '../color-data'; import { FunctionNode } from '@csstools/css-parser-algorithms'; -import { Color } from '@csstools/color-helpers'; export declare function serializeP3(color: ColorData, gamutMapping?: boolean): FunctionNode; -export declare function XYZ_D50_to_P3_Gamut(color: Color): Color; diff --git a/packages/css-color-parser/dist/serialize/rgb.d.ts b/packages/css-color-parser/dist/serialize/rgb.d.ts index 25dcee3e3..b4c381336 100644 --- a/packages/css-color-parser/dist/serialize/rgb.d.ts +++ b/packages/css-color-parser/dist/serialize/rgb.d.ts @@ -1,5 +1,3 @@ import { ColorData } from '../color-data'; import { FunctionNode } from '@csstools/css-parser-algorithms'; -import { Color } from '@csstools/color-helpers'; export declare function serializeRGB(color: ColorData, gamutMapping?: boolean): FunctionNode; -export declare function XYZ_D50_to_sRGB_Gamut(color: Color): Color; diff --git a/packages/css-color-parser/src/color-data.ts b/packages/css-color-parser/src/color-data.ts index 947a2f378..a8067d00d 100644 --- a/packages/css-color-parser/src/color-data.ts +++ b/packages/css-color-parser/src/color-data.ts @@ -1,7 +1,7 @@ import type { Color } from '@csstools/color-helpers'; import type { ComponentValue } from '@csstools/css-parser-algorithms'; import { ColorNotation } from './color-notation'; -import { NumberType, TokenNumber, TokenType } from '@csstools/css-tokenizer'; +import { NumberType, TokenDimension, TokenNumber, TokenPercentage, TokenType } from '@csstools/css-tokenizer'; import { xyz } from '@csstools/color-helpers'; export type ColorData = { @@ -32,12 +32,13 @@ export function colorData_to_XYZ_D50(colorData: ColorData): ColorData { switch (colorData.colorNotation) { case ColorNotation.HEX: case ColorNotation.RGB: + case ColorNotation.sRGB: return { ...colorData, colorNotation: ColorNotation.XYZ_D50, channels: xyz.sRGB_to_XYZ_D50(colorData.channels.map((x) => Number.isNaN(x) ? 0 : x)), }; - case ColorNotation.Linear_RGB: + case ColorNotation.Linear_sRGB: return { ...colorData, colorNotation: ColorNotation.XYZ_D50, @@ -124,9 +125,10 @@ const predefinedRGB_or_XYZ_Spaces = new Set([ ColorNotation.A98_RGB, ColorNotation.Display_P3, ColorNotation.HEX, - ColorNotation.Linear_RGB, + ColorNotation.Linear_sRGB, ColorNotation.ProPhoto_RGB, ColorNotation.RGB, + ColorNotation.sRGB, ColorNotation.Rec2020, ColorNotation.XYZ_D50, ColorNotation.XYZ_D65, @@ -146,8 +148,12 @@ export function colorDataTo(colorData: ColorData, toNotation: ColorNotation): Co outputColorData.colorNotation = ColorNotation.RGB; outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); break; - case ColorNotation.Linear_RGB: - outputColorData.colorNotation = ColorNotation.Linear_RGB; + case ColorNotation.sRGB: + outputColorData.colorNotation = ColorNotation.sRGB; + outputColorData.channels = xyz.XYZ_D50_to_sRGB(xyzColorData.channels); + break; + case ColorNotation.Linear_sRGB: + outputColorData.colorNotation = ColorNotation.Linear_sRGB; outputColorData.channels = xyz.XYZ_D50_to_lin_sRGB(xyzColorData.channels); break; case ColorNotation.Display_P3: @@ -366,8 +372,8 @@ export function fillInMissingComponents(a: Color, b: Color): Color { return output; } -export function colorDataChannelsToCalcGlobals(x: ColorData): Map { - const globals: Map = new Map(); +export function normalizeRelativeColorDataChannels(x: ColorData): Map { + const globals: Map = new Map(); switch (x.colorNotation) { case ColorNotation.RGB: @@ -380,6 +386,74 @@ export function colorDataChannelsToCalcGlobals(x: ColorData): Map): Map { + const globals: Map = new Map(); + + for (const [key, value] of x) { + if (Number.isNaN(value[4].value)) { + globals.set(key, dummyNumberToken(0)); + } else { + globals.set(key, value); + } + } + + return globals; +} + function dummyNumberToken(x: number): TokenNumber { return [TokenType.Number, x.toString(), -1, -1, { value: x, type: NumberType.Number }]; } +function dummyPercentageToken(x: number): TokenPercentage { + return [TokenType.Percentage, x.toString() + '%', -1, -1, { value: x }]; +} + +function dummyAngleToken(x: number): TokenDimension { + return [TokenType.Dimension, x.toString() + 'deg', -1, -1, { value: x, type: NumberType.Number, unit: 'deg' }]; +} + function reducePrecision(x: number, precision = 7): number { const factor = Math.pow(10, precision); return Math.round(x * factor) / factor; diff --git a/packages/css-color-parser/src/color-notation.ts b/packages/css-color-parser/src/color-notation.ts index 4c87efc69..a5ba40c59 100644 --- a/packages/css-color-parser/src/color-notation.ts +++ b/packages/css-color-parser/src/color-notation.ts @@ -6,11 +6,12 @@ export enum ColorNotation { HWB = 'hwb', LCH = 'lch', Lab = 'lab', - Linear_RGB = 'srgb-linear', + Linear_sRGB = 'srgb-linear', OKLCH = 'oklch', OKLab = 'oklab', ProPhoto_RGB = 'prophoto-rgb', RGB = 'rgb', + sRGB = 'srgb', Rec2020 = 'rec2020', XYZ_D50 = 'xyz-d50', XYZ_D65 = 'xyz-d65', diff --git a/packages/css-color-parser/src/functions/color-mix.ts b/packages/css-color-parser/src/functions/color-mix.ts index 3852ba361..c2fa47fbd 100644 --- a/packages/css-color-parser/src/functions/color-mix.ts +++ b/packages/css-color-parser/src/functions/color-mix.ts @@ -297,24 +297,32 @@ function colorMixRectangular(colorSpace: string, colors: ColorMixColors | false) case 'srgb': outputColorNotation = ColorNotation.RGB; - if (a_color.colorNotation !== ColorNotation.RGB && a_color.colorNotation !== ColorNotation.HEX) { + if ( + a_color.colorNotation !== ColorNotation.RGB && + a_color.colorNotation !== ColorNotation.sRGB && + a_color.colorNotation !== ColorNotation.HEX + ) { a_channels = colorDataTo(a_color, ColorNotation.RGB).channels; } - if (b_color.colorNotation !== ColorNotation.RGB && a_color.colorNotation !== ColorNotation.HEX) { + if ( + b_color.colorNotation !== ColorNotation.RGB && + b_color.colorNotation !== ColorNotation.sRGB && + b_color.colorNotation !== ColorNotation.HEX + ) { b_channels = colorDataTo(b_color, ColorNotation.RGB).channels; } break; case 'srgb-linear': - outputColorNotation = ColorNotation.Linear_RGB; + outputColorNotation = ColorNotation.Linear_sRGB; - if (a_color.colorNotation !== ColorNotation.Linear_RGB) { - a_channels = colorDataTo(a_color, ColorNotation.Linear_RGB).channels; + if (a_color.colorNotation !== ColorNotation.Linear_sRGB) { + a_channels = colorDataTo(a_color, ColorNotation.Linear_sRGB).channels; } - if (b_color.colorNotation !== ColorNotation.Linear_RGB) { - b_channels = colorDataTo(b_color, ColorNotation.Linear_RGB).channels; + if (b_color.colorNotation !== ColorNotation.Linear_sRGB) { + b_channels = colorDataTo(b_color, ColorNotation.Linear_sRGB).channels; } break; diff --git a/packages/css-color-parser/src/functions/color.ts b/packages/css-color-parser/src/functions/color.ts index c0d925632..64f7820d2 100644 --- a/packages/css-color-parser/src/functions/color.ts +++ b/packages/css-color-parser/src/functions/color.ts @@ -1,55 +1,236 @@ -import type { ColorData } from '../color-data'; +import { ColorData, SyntaxFlag, colorDataTo, noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data'; import type { ColorParser } from '../color-parser'; import { ColorNotation } from '../color-notation'; -import { FunctionNode, isCommentNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; -import { TokenType } from '@csstools/css-tokenizer'; +import { ComponentValue, FunctionNode, TokenNode, isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode } from '@csstools/css-parser-algorithms'; +import { CSSToken, TokenDimension, TokenNumber, TokenPercentage, TokenType } from '@csstools/css-tokenizer'; import { normalize_Color_ChannelValues } from './color-normalize-channel-values'; -import { threeChannelSpaceSeparated } from './three-channel-space-separated'; import { toLowerCaseAZ } from '../util/to-lower-case-a-z'; +import { calcFromComponentValues, mathFunctionNames } from '@csstools/css-calc'; const colorSpaces = new Set(['srgb', 'srgb-linear', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec2020', 'xyz', 'xyz-d50', 'xyz-d65']); -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export function color(colorNode: FunctionNode, colorParser: ColorParser): ColorData | false { - for (let i = 0; i < colorNode.value.length; i++) { - const node = colorNode.value[i]; +export function color(colorFunctionNode: FunctionNode, colorParser: ColorParser): ColorData | false { + const syntaxFlags: Array = []; + + const channel1: Array = []; + const channel2: Array = []; + const channel3: Array = []; + const channelAlpha: Array = []; + + let colorSpace: string | false = false; + let relativeToColor: ColorData | false = false; + let relativeColorChannels: Map | undefined = undefined; + let relativeColorChannelsWithoutNone: Map | undefined = undefined; + + const colorData: ColorData = { + colorNotation: ColorNotation.sRGB, + channels: [0, 0, 0], + alpha: 1, + syntaxFlags: (new Set(syntaxFlags)), + }; + + let focus = channel1; + for (let i = 0; i < colorFunctionNode.value.length; i++) { + let node = colorFunctionNode.value[i]; if (isWhitespaceNode(node) || isCommentNode(node)) { + // consume as much whitespace as possible + while (isWhitespaceNode(colorFunctionNode.value[i + 1]) || isCommentNode(colorFunctionNode.value[i + 1])) { + i++; + } + continue; } + if (focus === channel1 && channel1.length) { + focus = channel2; + } + + if (focus === channel2 && channel2.length) { + focus = channel3; + } + + if (isTokenNode(node) && node.value[0] === TokenType.Delim && node.value[4].value === '/') { + if (focus === channelAlpha) { + return false; + } + + focus = channelAlpha; + continue; + } + + if (isFunctionNode(node)) { + if (focus === channelAlpha && toLowerCaseAZ(node.getName()) === 'var') { + colorData.syntaxFlags.add(SyntaxFlag.HasVariableAlpha); + focus.push(node); + continue; + } + + if (!mathFunctionNames.has(toLowerCaseAZ(node.getName()))) { + return false; + } + + const [[result]] = calcFromComponentValues([[node]], { toCanonicalUnits: true, precision: 100, globals: relativeColorChannelsWithoutNone }); + if ( + !result || + !isTokenNode(result) || + ( + ( + result.value[0] === TokenType.Percentage || + result.value[0] === TokenType.Number || + result.value[0] === TokenType.Dimension + ) && + Number.isNaN(result.value[4].value) + ) + ) { + return false; + } + + node = result; + } + if ( + focus === channel1 && + channel1.length === 0 && isTokenNode(node) && - node.value[0] === TokenType.Ident + node.value[0] === TokenType.Ident && + colorSpaces.has(toLowerCaseAZ(node.value[4].value)) ) { - const colorSpace = toLowerCaseAZ(node.value[4].value); - if (!colorSpaces.has(colorSpace)) { + if (colorSpace) { return false; } - return threeChannelSpaceSeparated( - new FunctionNode( - colorNode.name, - colorNode.endToken, - colorNode.value.slice(i + 1), - ), - normalize_Color_ChannelValues, - colorSpaceNameToColorNotation(colorSpace), - [], - ); + colorSpace = toLowerCaseAZ(node.value[4].value); + colorData.colorNotation = colorSpaceNameToColorNotation(colorSpace); + + if (relativeToColor) { + if (relativeToColor.colorNotation !== colorData.colorNotation) { + relativeToColor = colorDataTo(relativeToColor, colorData.colorNotation); + } + + relativeColorChannels = normalizeRelativeColorDataChannels(relativeToColor); + relativeColorChannelsWithoutNone = noneToZeroInRelativeColorDataChannels(relativeColorChannels); + } + + continue; } + if ( + focus === channel1 && + channel1.length === 0 && + isTokenNode(node) && + node.value[0] === TokenType.Ident && + toLowerCaseAZ(node.value[4].value) === 'from' + ) { + if (relativeToColor) { + return false; + } + + if (colorSpace) { + return false; + } + + while (isWhitespaceNode(colorFunctionNode.value[i + 1]) || isCommentNode(colorFunctionNode.value[i + 1])) { + i++; + } + + i++; + node = colorFunctionNode.value[i]; + + relativeToColor = colorParser(node); + if (relativeToColor === false) { + return false; + } + + colorData.syntaxFlags.add(SyntaxFlag.RelativeColorSyntax); + continue; + } + + if (isTokenNode(node)) { + if (node.value[0] === TokenType.Ident && relativeColorChannels && relativeColorChannels.has(toLowerCaseAZ(node.value[4].value))) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + focus.push(new TokenNode(relativeColorChannels.get(toLowerCaseAZ(node.value[4].value))!)); + continue; + } + + focus.push(node); + continue; + } + + return false; + } + + if (!colorSpace) { + return false; + } + + if (focus.length !== 1) { + return false; + } + + if ( + channel1.length !== 1 || + channel2.length !== 1 || + channel3.length !== 1 + ) { + return false; + } + + if ( + !isTokenNode(channel1[0]) || + !isTokenNode(channel2[0]) || + !isTokenNode(channel3[0]) + ) { + return false; + } + + if (relativeColorChannels && !relativeColorChannels.has('alpha')) { + return false; + } + + const channelValues: Array = [ + channel1[0].value, + channel2[0].value, + channel3[0].value, + ]; + + if (channelAlpha.length === 1) { + colorData.syntaxFlags.add(SyntaxFlag.HasAlpha); + + if (isTokenNode(channelAlpha[0])) { + channelValues.push(channelAlpha[0].value); + } else { + colorData.alpha = channelAlpha[0]; + } + } else if (relativeColorChannels && relativeColorChannels.has('alpha')) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + channelValues.push(relativeColorChannels.get('alpha')!); + } + + const normalizedChannelValues = normalize_Color_ChannelValues(channelValues, colorData); + if (normalizedChannelValues === false) { return false; } - return false; + colorData.channels = [ + normalizedChannelValues[0][4].value, + normalizedChannelValues[1][4].value, + normalizedChannelValues[2][4].value, + ]; + + if (normalizedChannelValues.length === 4) { + colorData.alpha = normalizedChannelValues[3][4].value; + } + + return colorData; } + function colorSpaceNameToColorNotation(colorSpace: string): ColorNotation { switch (colorSpace) { case 'srgb': - return ColorNotation.RGB; + return ColorNotation.sRGB; case 'srgb-linear': - return ColorNotation.Linear_RGB; + return ColorNotation.Linear_sRGB; case 'display-p3': return ColorNotation.Display_P3; case 'a98-rgb': diff --git a/packages/css-color-parser/src/functions/hsl.ts b/packages/css-color-parser/src/functions/hsl.ts index f3450be69..e50ef04e8 100644 --- a/packages/css-color-parser/src/functions/hsl.ts +++ b/packages/css-color-parser/src/functions/hsl.ts @@ -8,7 +8,6 @@ import { threeChannelLegacySyntax } from './three-channel-legacy-syntax'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; import { TokenType } from '@csstools/css-tokenizer'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function hsl(hslNode: FunctionNode, colorParser: ColorParser): ColorData | false { if (hslNode.value.some((x) => isTokenNode(x) && x.value[0] === TokenType.Comma)) { const output = hslCommaSeparated(hslNode); @@ -18,7 +17,7 @@ export function hsl(hslNode: FunctionNode, colorParser: ColorParser): ColorData } { - const output = hslSpaceSeparated(hslNode); + const output = hslSpaceSeparated(hslNode, colorParser); if (output !== false) { return output; } @@ -38,11 +37,12 @@ function hslCommaSeparated(hslNode: FunctionNode): ColorData | false { ); } -function hslSpaceSeparated(hslNode: FunctionNode): ColorData | false { +function hslSpaceSeparated(hslNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( hslNode, normalize_modern_HSL_ChannelValues, ColorNotation.HSL, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/hwb.ts b/packages/css-color-parser/src/functions/hwb.ts index 69b67705c..3b0e87262 100644 --- a/packages/css-color-parser/src/functions/hwb.ts +++ b/packages/css-color-parser/src/functions/hwb.ts @@ -5,12 +5,12 @@ import { ColorNotation } from '../color-notation'; import { normalize_HWB_ChannelValues } from './hwb-normalize-channel-values'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function hwb(hwbNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( hwbNode, normalize_HWB_ChannelValues, ColorNotation.HWB, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/lab.ts b/packages/css-color-parser/src/functions/lab.ts index d6d823a3d..bc8a01210 100644 --- a/packages/css-color-parser/src/functions/lab.ts +++ b/packages/css-color-parser/src/functions/lab.ts @@ -5,12 +5,12 @@ import { ColorNotation } from '../color-notation'; import { normalize_Lab_ChannelValues } from './lab-normalize-channel-values'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function lab(labNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( labNode, normalize_Lab_ChannelValues, ColorNotation.Lab, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/lch.ts b/packages/css-color-parser/src/functions/lch.ts index 213cf0558..c4f634f12 100644 --- a/packages/css-color-parser/src/functions/lch.ts +++ b/packages/css-color-parser/src/functions/lch.ts @@ -5,12 +5,12 @@ import { ColorNotation } from '../color-notation'; import { normalize_LCH_ChannelValues } from './lch-normalize-channel-values'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function lch(lchNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( lchNode, normalize_LCH_ChannelValues, ColorNotation.LCH, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/oklab.ts b/packages/css-color-parser/src/functions/oklab.ts index 24f6e066c..51cff51ea 100644 --- a/packages/css-color-parser/src/functions/oklab.ts +++ b/packages/css-color-parser/src/functions/oklab.ts @@ -5,12 +5,12 @@ import { ColorNotation } from '../color-notation'; import { normalize_OKLab_ChannelValues } from './oklab-normalize-channel-values'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function oklab(oklabNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( oklabNode, normalize_OKLab_ChannelValues, ColorNotation.OKLab, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/oklch.ts b/packages/css-color-parser/src/functions/oklch.ts index cc990e807..283bdacfc 100644 --- a/packages/css-color-parser/src/functions/oklch.ts +++ b/packages/css-color-parser/src/functions/oklch.ts @@ -5,12 +5,12 @@ import { ColorNotation } from '../color-notation'; import { normalize_OKLCH_ChannelValues } from './oklch-normalize-channel-values'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function oklch(oklchNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( oklchNode, normalize_OKLCH_ChannelValues, ColorNotation.OKLCH, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/rgb.ts b/packages/css-color-parser/src/functions/rgb.ts index e637a4642..3d29c1ceb 100644 --- a/packages/css-color-parser/src/functions/rgb.ts +++ b/packages/css-color-parser/src/functions/rgb.ts @@ -8,7 +8,6 @@ import { threeChannelLegacySyntax } from './three-channel-legacy-syntax'; import { threeChannelSpaceSeparated } from './three-channel-space-separated'; import { TokenType } from '@csstools/css-tokenizer'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars export function rgb(rgbNode: FunctionNode, colorParser: ColorParser): ColorData | false { if (rgbNode.value.some((x) => isTokenNode(x) && x.value[0] === TokenType.Comma)) { const output = rgbCommaSeparated(rgbNode); @@ -16,7 +15,7 @@ export function rgb(rgbNode: FunctionNode, colorParser: ColorParser): ColorData return output; } } else { - const output = rgbSpaceSeparated(rgbNode); + const output = rgbSpaceSeparated(rgbNode, colorParser); if (output !== false) { return output; } @@ -36,11 +35,12 @@ function rgbCommaSeparated(rgbNode: FunctionNode): ColorData | false { ); } -function rgbSpaceSeparated(rgbNode: FunctionNode): ColorData | false { +function rgbSpaceSeparated(rgbNode: FunctionNode, colorParser: ColorParser): ColorData | false { return threeChannelSpaceSeparated( rgbNode, normalize_modern_sRGB_ChannelValues, ColorNotation.RGB, [], + colorParser, ); } diff --git a/packages/css-color-parser/src/functions/three-channel-space-separated.ts b/packages/css-color-parser/src/functions/three-channel-space-separated.ts index f01519561..baeb757ef 100644 --- a/packages/css-color-parser/src/functions/three-channel-space-separated.ts +++ b/packages/css-color-parser/src/functions/three-channel-space-separated.ts @@ -1,6 +1,6 @@ -import type { ColorData } from '../color-data'; -import type { ComponentValue, FunctionNode } from '@csstools/css-parser-algorithms'; -import { CSSToken, TokenType } from '@csstools/css-tokenizer'; +import { ColorData, colorData_to_XYZ_D50, noneToZeroInRelativeColorDataChannels, normalizeRelativeColorDataChannels } from '../color-data'; +import { ComponentValue, FunctionNode, TokenNode } from '@csstools/css-parser-algorithms'; +import { CSSToken, TokenDimension, TokenNumber, TokenPercentage, TokenType } from '@csstools/css-tokenizer'; import { ColorNotation } from '../color-notation'; import { SyntaxFlag } from '../color-data'; import { calcFromComponentValues } from '@csstools/css-calc'; @@ -8,17 +8,27 @@ import { isCommentNode, isFunctionNode, isTokenNode, isWhitespaceNode } from '@c import { normalizeChannelValuesFn } from './normalize-channel-values'; import { toLowerCaseAZ } from '../util/to-lower-case-a-z'; import { mathFunctionNames } from '@csstools/css-calc'; +import { ColorParser } from '../color-parser'; +import { colorDataTo } from '../color-data'; +import { XYZ_D50_to_sRGB_Gamut } from '../gamut-mapping/srgb'; +import { conversions } from '@csstools/color-helpers'; export function threeChannelSpaceSeparated( colorFunctionNode: FunctionNode, normalizeChannelValues: normalizeChannelValuesFn, colorNotation: ColorNotation, syntaxFlags: Array, + colorParser: ColorParser, ): ColorData | false { + const functionName = toLowerCaseAZ(colorFunctionNode.getName()); + const channel1: Array = []; const channel2: Array = []; const channel3: Array = []; const channelAlpha: Array = []; + let relativeToColor: ColorData | false = false; + let relativeColorChannels: Map | undefined = undefined; + let relativeColorChannelsWithoutNone: Map | undefined = undefined; const colorData: ColorData = { colorNotation: colorNotation, @@ -36,21 +46,15 @@ export function threeChannelSpaceSeparated( i++; } - if (!channel1.length) { - continue; - } - - if (focus === channel1) { - focus = channel2; - continue; - } + continue; + } - if (focus === channel2) { - focus = channel3; - continue; - } + if (focus === channel1 && channel1.length) { + focus = channel2; + } - continue; + if (focus === channel2 && channel2.length) { + focus = channel3; } if (isTokenNode(node) && node.value[0] === TokenType.Delim && node.value[4].value === '/') { @@ -73,7 +77,7 @@ export function threeChannelSpaceSeparated( return false; } - const [[result]] = calcFromComponentValues([[node]], { toCanonicalUnits: true, precision: 100 }); + const [[result]] = calcFromComponentValues([[node]], { toCanonicalUnits: true, precision: 100, globals: relativeColorChannelsWithoutNone }); if ( !result || !isTokenNode(result) || @@ -92,7 +96,65 @@ export function threeChannelSpaceSeparated( node = result; } + if ( + focus === channel1 && + channel1.length === 0 && + isTokenNode(node) && + node.value[0] === TokenType.Ident && + toLowerCaseAZ(node.value[4].value) === 'from' && + functionName !== 'hsla' && + functionName !== 'rgba' + ) { + if (relativeToColor) { + return false; + } + + while (isWhitespaceNode(colorFunctionNode.value[i + 1]) || isCommentNode(colorFunctionNode.value[i + 1])) { + i++; + } + + i++; + node = colorFunctionNode.value[i]; + + relativeToColor = colorParser(node); + if (relativeToColor === false) { + return false; + } + + colorData.syntaxFlags.add(SyntaxFlag.RelativeColorSyntax); + + if (relativeToColor.colorNotation !== colorNotation) { + relativeToColor = colorDataTo(relativeToColor, colorNotation); + } + + if ( + colorNotation === ColorNotation.HEX || + colorNotation === ColorNotation.RGB + ) { + relativeToColor.channels = XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(relativeToColor).channels); + } else if ( + colorNotation === ColorNotation.HSL + ) { // https://github.com/w3c/csswg-drafts/issues/8444 + relativeToColor.channels = conversions.sRGB_to_HSL(XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(relativeToColor).channels)); + } else if ( + colorNotation === ColorNotation.HWB + ) { // https://github.com/w3c/csswg-drafts/issues/8444 + relativeToColor.channels = conversions.sRGB_to_HWB(XYZ_D50_to_sRGB_Gamut(colorData_to_XYZ_D50(relativeToColor).channels)); + } + + relativeColorChannels = normalizeRelativeColorDataChannels(relativeToColor); + relativeColorChannelsWithoutNone = noneToZeroInRelativeColorDataChannels(relativeColorChannels); + + continue; + } + if (isTokenNode(node)) { + if (node.value[0] === TokenType.Ident && relativeColorChannels && relativeColorChannels.has(toLowerCaseAZ(node.value[4].value))) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + focus.push(new TokenNode(relativeColorChannels.get(toLowerCaseAZ(node.value[4].value))!)); + continue; + } + focus.push(node); continue; } @@ -120,6 +182,10 @@ export function threeChannelSpaceSeparated( return false; } + if (relativeColorChannels && !relativeColorChannels.has('alpha')) { + return false; + } + const channelValues: Array = [ channel1[0].value, channel2[0].value, @@ -134,6 +200,9 @@ export function threeChannelSpaceSeparated( } else { colorData.alpha = channelAlpha[0]; } + } else if (relativeColorChannels && relativeColorChannels.has('alpha')) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + channelValues.push(relativeColorChannels.get('alpha')!); } const normalizedChannelValues = normalizeChannelValues(channelValues, colorData); diff --git a/packages/css-color-parser/src/gamut-mapping/p3.ts b/packages/css-color-parser/src/gamut-mapping/p3.ts new file mode 100644 index 000000000..2977e150c --- /dev/null +++ b/packages/css-color-parser/src/gamut-mapping/p3.ts @@ -0,0 +1,32 @@ +import { calculations, Color, conversions, utils, xyz } from '@csstools/color-helpers'; + +export function XYZ_D50_to_P3_Gamut(color: Color): Color { + const srgb = xyz.XYZ_D50_to_P3(color); + if (utils.inGamut(srgb)) { + return utils.clip(srgb); + } + + let oklch = color.slice() as Color; + oklch = conversions.D50_to_D65(oklch); + oklch = conversions.XYZ_to_OKLab(oklch); + oklch = conversions.OKLab_to_OKLCH(oklch); + if (oklch[0] < 0.000001) { + oklch = [0, 0, 0] as Color; + } + + if (oklch[0] > 0.999999) { + oklch = [1, 0, 0] as Color; + } + + return calculations.mapGamut(oklch, (x: Color) => { + x = conversions.OKLCH_to_OKLab(x); + x = conversions.OKLab_to_XYZ(x); + x = conversions.XYZ_to_lin_P3(x); + return conversions.gam_P3(x); + }, (x: Color) => { + x = conversions.lin_P3(x); + x = conversions.lin_P3_to_XYZ(x); + x = conversions.XYZ_to_OKLab(x); + return conversions.OKLab_to_OKLCH(x); + }); +} diff --git a/packages/css-color-parser/src/gamut-mapping/srgb.ts b/packages/css-color-parser/src/gamut-mapping/srgb.ts new file mode 100644 index 000000000..eb969be1d --- /dev/null +++ b/packages/css-color-parser/src/gamut-mapping/srgb.ts @@ -0,0 +1,32 @@ +import { calculations, Color, conversions, utils, xyz } from '@csstools/color-helpers'; + +export function XYZ_D50_to_sRGB_Gamut(color: Color): Color { + const srgb = xyz.XYZ_D50_to_sRGB(color); + if (utils.inGamut(srgb)) { + return utils.clip(srgb); + } + + let oklch = color.slice() as Color; + oklch = conversions.D50_to_D65(oklch); + oklch = conversions.XYZ_to_OKLab(oklch); + oklch = conversions.OKLab_to_OKLCH(oklch); + if (oklch[0] < 0.000001) { + oklch = [0, 0, 0] as Color; + } + + if (oklch[0] > 0.999999) { + oklch = [1, 0, 0] as Color; + } + + return calculations.mapGamut(oklch, (x: Color) => { + x = conversions.OKLCH_to_OKLab(x); + x = conversions.OKLab_to_XYZ(x); + x = conversions.XYZ_to_lin_sRGB(x); + return conversions.gam_sRGB(x); + }, (x: Color) => { + x = conversions.lin_sRGB(x); + x = conversions.lin_sRGB_to_XYZ(x); + x = conversions.XYZ_to_OKLab(x); + return conversions.OKLab_to_OKLCH(x); + }); +} diff --git a/packages/css-color-parser/src/index.ts b/packages/css-color-parser/src/index.ts index c6a930b9c..a5ca64139 100644 --- a/packages/css-color-parser/src/index.ts +++ b/packages/css-color-parser/src/index.ts @@ -49,8 +49,6 @@ export function color(colorNode: ComponentValue): ColorData | false { return colorFn(colorNode, color); case 'color-mix': return colorMix(colorNode, color); - default: - return false; } } @@ -65,15 +63,8 @@ export function color(colorNode: ComponentValue): ColorData | false { return namedColorData; } - const keywordColorData = colorKeyword(colorNode.value[4].value); - if (keywordColorData !== false) { - return keywordColorData; - } - - return false; + return colorKeyword(colorNode.value[4].value); } - - return false; } return false; diff --git a/packages/css-color-parser/src/serialize/p3.ts b/packages/css-color-parser/src/serialize/p3.ts index 1554e7764..dcf9f5a92 100644 --- a/packages/css-color-parser/src/serialize/p3.ts +++ b/packages/css-color-parser/src/serialize/p3.ts @@ -4,8 +4,9 @@ import { colorData_to_XYZ_D50 } from '../color-data'; import { ColorNotation } from '../color-notation'; import { FunctionNode, TokenNode } from '@csstools/css-parser-algorithms'; import { NumberType, TokenType } from '@csstools/css-tokenizer'; -import { calculations, Color, conversions, utils, xyz } from '@csstools/color-helpers'; +import { xyz } from '@csstools/color-helpers'; import { toPrecision } from './to-precision'; +import { XYZ_D50_to_P3_Gamut } from '../gamut-mapping/p3'; export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode { color.channels = convertPowerlessComponentsToMissingComponents(color.channels, color.colorNotation); @@ -41,7 +42,7 @@ export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode if (typeof color.alpha === 'number') { const a = Math.min(1, Math.max(0, toPrecision(Number.isNaN(color.alpha) ? 0 : color.alpha))); - if (a === 1) { + if (toPrecision(a, 4) === 1) { return new FunctionNode( fn, close, @@ -57,7 +58,7 @@ export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode new TokenNode(space), new TokenNode([TokenType.Delim, '/', -1, -1, { value: '/' }]), new TokenNode(space), - new TokenNode([TokenType.Number, a.toString(), -1, -1, { value: color.alpha, type: NumberType.Integer }]), + new TokenNode([TokenType.Number, toPrecision(a, 4).toString(), -1, -1, { value: color.alpha, type: NumberType.Integer }]), ], ); } @@ -74,34 +75,3 @@ export function serializeP3(color: ColorData, gamutMapping = true): FunctionNode ], ); } - -export function XYZ_D50_to_P3_Gamut(color: Color): Color { - const srgb = xyz.XYZ_D50_to_P3(color); - if (utils.inGamut(srgb)) { - return utils.clip(srgb); - } - - let oklch = color.slice() as Color; - oklch = conversions.D50_to_D65(oklch); - oklch = conversions.XYZ_to_OKLab(oklch); - oklch = conversions.OKLab_to_OKLCH(oklch); - if (oklch[0] < 0.000001) { - oklch = [0, 0, 0] as Color; - } - - if (oklch[0] > 0.999999) { - oklch = [1, 0, 0] as Color; - } - - return calculations.mapGamut(oklch, (x: Color) => { - x = conversions.OKLCH_to_OKLab(x); - x = conversions.OKLab_to_XYZ(x); - x = conversions.XYZ_to_lin_P3(x); - return conversions.gam_P3(x); - }, (x: Color) => { - x = conversions.lin_P3(x); - x = conversions.lin_P3_to_XYZ(x); - x = conversions.XYZ_to_OKLab(x); - return conversions.OKLab_to_OKLCH(x); - }); -} diff --git a/packages/css-color-parser/src/serialize/rgb.ts b/packages/css-color-parser/src/serialize/rgb.ts index 45b7d9913..d0b0750bf 100644 --- a/packages/css-color-parser/src/serialize/rgb.ts +++ b/packages/css-color-parser/src/serialize/rgb.ts @@ -3,15 +3,20 @@ import type { TokenCloseParen, TokenComma, TokenWhitespace } from '@csstools/css import { ColorNotation } from '../color-notation'; import { FunctionNode, TokenNode } from '@csstools/css-parser-algorithms'; import { NumberType, TokenType } from '@csstools/css-tokenizer'; -import { calculations, Color, conversions, utils, xyz } from '@csstools/color-helpers'; +import { conversions, xyz } from '@csstools/color-helpers'; import { colorData_to_XYZ_D50 } from '../color-data'; import { toPrecision } from './to-precision'; +import { XYZ_D50_to_sRGB_Gamut } from '../gamut-mapping/srgb'; export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNode { color.channels = convertPowerlessComponentsToMissingComponents(color.channels, color.colorNotation); let srgb = color.channels.map((x) => Number.isNaN(x) ? 0 : x); - if ( + if (color.colorNotation === ColorNotation.HWB) { + srgb = conversions.HWB_to_sRGB(srgb); + } else if(color.colorNotation === ColorNotation.HSL) { + srgb = conversions.HSL_to_sRGB(srgb); + } else if ( color.colorNotation !== ColorNotation.RGB && color.colorNotation !== ColorNotation.HEX ) { @@ -42,7 +47,7 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod if (typeof color.alpha === 'number') { const a = Math.min(1, Math.max(0, toPrecision(Number.isNaN(color.alpha) ? 0 : color.alpha))); - if (a === 1) { + if (toPrecision(a, 4) === 1) { return new FunctionNode( [TokenType.Function, 'rgb(', -1, -1, { value: 'rgb' }], close, @@ -57,7 +62,7 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod ...channels, new TokenNode(comma), new TokenNode(space), - new TokenNode([TokenType.Number, a.toString(), -1, -1, { value: color.alpha, type: NumberType.Integer }]), + new TokenNode([TokenType.Number, toPrecision(a, 4).toString(), -1, -1, { value: color.alpha, type: NumberType.Number }]), ], ); } @@ -73,34 +78,3 @@ export function serializeRGB(color: ColorData, gamutMapping = true): FunctionNod ], ); } - -export function XYZ_D50_to_sRGB_Gamut(color: Color): Color { - const srgb = xyz.XYZ_D50_to_sRGB(color); - if (utils.inGamut(srgb)) { - return utils.clip(srgb); - } - - let oklch = color.slice() as Color; - oklch = conversions.D50_to_D65(oklch); - oklch = conversions.XYZ_to_OKLab(oklch); - oklch = conversions.OKLab_to_OKLCH(oklch); - if (oklch[0] < 0.000001) { - oklch = [0, 0, 0] as Color; - } - - if (oklch[0] > 0.999999) { - oklch = [1, 0, 0] as Color; - } - - return calculations.mapGamut(oklch, (x: Color) => { - x = conversions.OKLCH_to_OKLab(x); - x = conversions.OKLab_to_XYZ(x); - x = conversions.XYZ_to_lin_sRGB(x); - return conversions.gam_sRGB(x); - }, (x: Color) => { - x = conversions.lin_sRGB(x); - x = conversions.lin_sRGB_to_XYZ(x); - x = conversions.XYZ_to_OKLab(x); - return conversions.OKLab_to_OKLCH(x); - }); -} diff --git a/packages/css-color-parser/test/basic/color-function.mjs b/packages/css-color-parser/test/basic/color-function.mjs index 12e056c9f..2f2b1f26d 100644 --- a/packages/css-color-parser/test/basic/color-function.mjs +++ b/packages/css-color-parser/test/basic/color-function.mjs @@ -13,25 +13,25 @@ const tests = [ ['color(a98-rgb 0.7 0.5 0.3)', 'rgb(196, 129, 72)'], ['color(prophoto-rgb 0.7 0.5 0.3)', 'rgb(234, 133, 82)'], - ['color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066)', 'rgb(0, 255, 0)'], - ['color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703)', 'rgb(0, 255, 0)'], - ['color(a98-rgb 0.565 1 0.234)', 'rgb(0, 255, 0)'], - ['color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174)', 'rgb(0, 255, 0)'], - ['color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497)', 'rgb(0, 255, 0)'], - ['color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993)', 'rgb(0, 255, 0)'], - ['color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873)', 'rgb(0, 255, 0)'], - ['color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(0, 255, 0)'], - ['color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(0, 255, 0)'], + ['color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066)', 'rgb(1, 255, 0)'], + ['color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703)', 'rgb(1, 255, 0)'], + ['color(a98-rgb 0.565 1 0.234)', 'rgb(1, 255, 0)'], + ['color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174)', 'rgb(1, 255, 0)'], + ['color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497)', 'rgb(1, 255, 0)'], + ['color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993)', 'rgb(1, 255, 0)'], + ['color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873)', 'rgb(1, 255, 0)'], + ['color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(1, 255, 0)'], + ['color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156)', 'rgb(1, 255, 0)'], - ['color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831)', 'rgb(0, 132, 138)'], - ['color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156)', 'rgb(0, 132, 138)'], - ['color(a98-rgb 0.265 0.5134 0.5344)', 'rgb(0, 132, 138)'], - ['color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392)', 'rgb(0, 132, 138)'], - ['color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044)', 'rgb(0, 132, 138)'], - ['color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425)', 'rgb(0, 132, 138)'], - ['color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204)', 'rgb(0, 132, 138)'], - ['color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 132, 138)'], - ['color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 132, 138)'], + ['color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831)', 'rgb(0, 131, 136)'], + ['color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156)', 'rgb(0, 131, 136)'], + ['color(a98-rgb 0.265 0.5134 0.5344)', 'rgb(0, 131, 136)'], + ['color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392)', 'rgb(0, 131, 136)'], + ['color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044)', 'rgb(0, 131, 136)'], + ['color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425)', 'rgb(0, 131, 136)'], + ['color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204)', 'rgb(0, 131, 136)'], + ['color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 131, 136)'], + ['color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071)', 'rgb(0, 131, 136)'], ['color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097)', 'rgb(229, 125, 245)'], ['color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531)', 'rgb(229, 125, 245)'], @@ -48,5 +48,6 @@ for (const test of tests) { assert.deepStrictEqual( serialize_sRGB_data(color(parse(test[0]))), test[1], + `"${test[0]}" : ${test[1]}`, ); } diff --git a/packages/css-color-parser/test/basic/color-mix-function.mjs b/packages/css-color-parser/test/basic/color-mix-function.mjs index 7c7328b12..d59508c57 100644 --- a/packages/css-color-parser/test/basic/color-mix-function.mjs +++ b/packages/css-color-parser/test/basic/color-mix-function.mjs @@ -52,22 +52,25 @@ const tests = [ ['color-mix(in hsl, green 40%, oklch(0.747 0.196 322.2))', 'rgb(28, 89, 245)'], ['color-mix(in hsl, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(28, 89, 245)'], - ['color-mix(in oklch, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 254)'], + ['color-mix(in oklch, green 40%, color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(display-p3 0.843565234 0.509345345 0.9342344435))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(rec2020 0.7728366085950608 0.49153213847089583 0.9202627474826224))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 253)'], + ['color-mix(in oklch, green 40%, color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693))', 'rgb(0, 148, 253)'], ['color-mix(in oklch, green 40%, oklch(0.747 0.196 322.2))', 'rgb(0, 148, 254)'], - ['color-mix(in oklch, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(0, 148, 254)'], + ['color-mix(in oklch, green 40%, hsl(292deg 85.71% 72.55%))', 'rgb(0, 148, 253)'], + + ['color-mix(in srgb, color(xyz 1 none 0) 30%, rgb(none 255 128))', 'rgb(255, 255, 110)'], ]; for (const test of tests) { assert.deepStrictEqual( serialize_sRGB_data(color(parse(test[0]))), test[1], + `"${test[0]}" : ${test[1]}`, ); } diff --git a/packages/css-color-parser/test/basic/invalid.mjs b/packages/css-color-parser/test/basic/invalid.mjs new file mode 100644 index 000000000..1ac745e69 --- /dev/null +++ b/packages/css-color-parser/test/basic/invalid.mjs @@ -0,0 +1,52 @@ +import { color } from '@csstools/css-color-parser'; +import assert from 'assert'; +import { parse } from '../util/parse.mjs'; + +const testCases = []; + +for (const legacyFunctionName of [ 'rgb', 'rgba', 'hsl', 'hsla' ]) { + testCases.push( + `${legacyFunctionName}( )`, + `${legacyFunctionName}(255 )`, + `${legacyFunctionName}(255, )`, + `${legacyFunctionName}(255, 0 )`, + `${legacyFunctionName}(255, 0, )`, + `${legacyFunctionName}(255, 0, foo(0))`, + `${legacyFunctionName}(255, 0, var(--foo))`, + `${legacyFunctionName}(255, 0, 0, )`, + `${legacyFunctionName}(255, 0, 0, 0, )`, + `${legacyFunctionName}(255, 0, 0, 0, 0)`, + `${legacyFunctionName}(255 0, 0, 0)`, + `${legacyFunctionName}(0, 255 0, 0)`, + `${legacyFunctionName}(0, 0, 255 0)`, + `${legacyFunctionName}(255 0, 0, 0, 0)`, + `${legacyFunctionName}(0, 255 0, 0, 0)`, + `${legacyFunctionName}(0, 0, 255 0, 0)`, + `${legacyFunctionName}(0, 0, 0, 255 0)`, + + `${legacyFunctionName}(0, 0, 10px)`, + `${legacyFunctionName}(0, 0, (0))`, + `${legacyFunctionName}(0, 0, foo(0))`, + `${legacyFunctionName}(0, 0, foo)`, + `${legacyFunctionName}(0, 0, #foo)`, + `${legacyFunctionName}(0, 0, /* 0 */)`, + + `${legacyFunctionName}(10px, 0, 0)`, + `${legacyFunctionName}((0), 0, 0)`, + `${legacyFunctionName}(foo(0), 0, 0)`, + `${legacyFunctionName}(foo, 0, 0)`, + `${legacyFunctionName}(#foo, 0, 0)`, + `${legacyFunctionName}(/* 0 */, 0, 0)`, + + `${legacyFunctionName}(0 0 0, 0.5)`, + ); +} + +testCases.push('foo(0 0 0 / 0.5)'); + +testCases.forEach((testCase) => { + assert.deepStrictEqual( + color(parse(testCase)), + false, + ); +}); diff --git a/packages/css-color-parser/test/basic/lab.mjs b/packages/css-color-parser/test/basic/lab.mjs index 2c9381415..b58a1ddc0 100644 --- a/packages/css-color-parser/test/basic/lab.mjs +++ b/packages/css-color-parser/test/basic/lab.mjs @@ -40,7 +40,7 @@ assert.deepStrictEqual( assert.deepStrictEqual( serialize_sRGB_data(color(parse('lab(86.6146% -106.5599 102.8717)'))), - 'rgb(0, 251, 41)', + 'rgb(0, 249, 66)', ); assert.deepStrictEqual( diff --git a/packages/css-color-parser/test/basic/lch.mjs b/packages/css-color-parser/test/basic/lch.mjs index 75ae822ae..d33b855cb 100644 --- a/packages/css-color-parser/test/basic/lch.mjs +++ b/packages/css-color-parser/test/basic/lch.mjs @@ -11,7 +11,7 @@ const tests = [ ['lch(70% 45 -180)', 'rgb(27, 193, 169)', 'color(display-p3 0.35511 0.7445 0.66623)'], ['lch(70% 70 90)', 'rgb(195, 169, 14)', 'color(display-p3 0.74935 0.66735 0.2273)'], ['lch(55% 60 270)', 'rgb(33, 135, 237)', 'color(display-p3 0.26152 0.52336 0.89912)'], - ['lch(86.6146% 148.1135 136.0089)', 'rgb(0, 251, 41)', 'color(display-p3 0 1 0)'], + ['lch(86.6146% 148.1135 136.0089)', 'rgb(0, 249, 66)', 'color(display-p3 0 1 0.00064)'], ]; for (const test of tests) { diff --git a/packages/css-color-parser/test/basic/relative-color.mjs b/packages/css-color-parser/test/basic/relative-color.mjs new file mode 100644 index 000000000..a274d1050 --- /dev/null +++ b/packages/css-color-parser/test/basic/relative-color.mjs @@ -0,0 +1,195 @@ +import { color } from '@csstools/css-color-parser'; +import assert from 'assert'; +import { parse } from '../util/parse.mjs'; +import { serialize_sRGB_data } from '../util/serialize.mjs'; + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from indianred 255 G b)'))), + 'rgb(255, 92, 92)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 0.5) 30 30 30)'))), + 'rgba(30, 30, 30, 0.5)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 0.5) 30 30 30 / 0.7)'))), + 'rgba(30, 30, 30, 0.7)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 0.3) 30 30 30 / alpha)'))), + 'rgba(30, 30, 30, 0.3)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 50%) 30 30 30)'))), + 'rgba(30, 30, 30, 0.5)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 50%) 30 30 30 / 70%)'))), + 'rgba(30, 30, 30, 0.7)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rgb(50 50 50 / 30%) 30 30 30 / alpha)'))), + 'rgba(30, 30, 30, 0.3)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rebeccapurple h s l)'))), + 'rgb(102, 51, 153)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rebeccapurple calc(h - 10deg) s l)'))), + 'rgb(85, 51, 153)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rebeccapurple h calc(s - 1%) l)'))), + 'rgb(102, 52, 152)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rebeccapurple h s calc(l - 1%))'))), + 'rgb(99, 50, 149)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rebeccapurple calc(h)calc(s)calc(l))'))), + 'rgb(102, 51, 153)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rebeccapurple calc(r + 1) calc(g + 1) calc(b + 1))'))), + 'rgb(103, 52, 154)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('rgb(from rebeccapurple calc(r + 0.1) calc(g + 0.1) calc(b + 0.1))'))), + 'rgb(102, 51, 153)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('color(from rebeccapurple srgb calc(r + 1) calc(g + 1) calc(b + 1))'))), + 'rgb(255, 255, 255)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('color(from rebeccapurple srgb calc(r + 0.1) calc(g + 0.1) calc(b + 0.1))'))), + 'rgb(128, 77, 179)', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rgb(50 50 50 / calc(10px + 10)) h s l)'))), + '', +); + +assert.deepStrictEqual( + serialize_sRGB_data(color(parse('hsl(from rgb(50 50 50 / var(--foo)) h s l)'))), + '', +); + +[ + ['color(from color(srgb 0 1 0) srgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) srgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) srgb r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) srgb r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) srgb r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) srgb r g b)', 'rgb(0, 240, 119)'], + + ['color(from color(srgb 0 1 0) srgb-linear r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) srgb-linear r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) srgb-linear r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) srgb-linear r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) srgb-linear r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) srgb-linear r g b)', 'rgb(0, 240, 119)'], + + ['color(from color(srgb 0 1 0) display-p3 r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) display-p3 r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) display-p3 r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) display-p3 r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) display-p3 r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) display-p3 r g b)', 'rgb(0, 240, 119)'], + + ['color(from color(srgb 0 1 0) a98-rgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) a98-rgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) a98-rgb r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) a98-rgb r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) a98-rgb r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) a98-rgb r g b)', 'rgb(0, 240, 119)'], + + ['color(from color(srgb 0 1 0) prophoto-rgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) prophoto-rgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) prophoto-rgb r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) prophoto-rgb r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) prophoto-rgb r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) prophoto-rgb r g b)', 'rgb(0, 240, 119)'], + + ['color(from color(srgb 0 1 0) rec2020 r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) rec2020 r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) rec2020 r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) rec2020 r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 0) rec2020 r g b)', 'rgb(0, 243, 124)'], + ['color(from color(rec2020 0 1 0) rec2020 r g b)', 'rgb(0, 240, 119)'], + + // None : 1 + ['color(from color(srgb 0 1 none) srgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 none) srgb r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 none) srgb r g b)', 'rgb(0, 249, 99)'], + ['color(from color(a98-rgb 0 1 none) srgb r g b)', 'rgb(0, 236, 116)'], + ['color(from color(prophoto-rgb 0 1 none) srgb r g b)', 'rgb(0, 243, 151)'], + ['color(from color(rec2020 0 1 none) srgb r g b)', 'rgb(0, 240, 139)'], + + ['color(from color(srgb 0 1 none) srgb-linear r g b)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 none) srgb-linear r g b)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 none) srgb-linear r g b)', 'rgb(0, 249, 99)'], + ['color(from color(a98-rgb 0 1 none) srgb-linear r g b)', 'rgb(0, 236, 116)'], + ['color(from color(prophoto-rgb 0 1 none) srgb-linear r g b)', 'rgb(0, 243, 151)'], + ['color(from color(rec2020 0 1 none) srgb-linear r g b)', 'rgb(0, 240, 139)'], + + ['color(from color(srgb 0 1 none) display-p3 r g b)', 'rgb(77, 251, 0)'], + ['color(from color(srgb-linear 0 1 none) display-p3 r g b)', 'rgb(77, 251, 0)'], + ['color(from color(display-p3 0 1 none) display-p3 r g b)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 none) display-p3 r g b)', 'rgb(0, 233, 108)'], + ['color(from color(prophoto-rgb 0 1 none) display-p3 r g b)', 'rgb(0, 243, 137)'], + ['color(from color(rec2020 0 1 none) display-p3 r g b)', 'rgb(0, 240, 123)'], + + ['color(from color(srgb 0 1 none) a98-rgb r g b)', 'rgb(54, 253, 0)'], + ['color(from color(srgb-linear 0 1 none) a98-rgb r g b)', 'rgb(54, 253, 0)'], + ['color(from color(display-p3 0 1 none) a98-rgb r g b)', 'rgb(0, 249, 83)'], + ['color(from color(a98-rgb 0 1 none) a98-rgb r g b)', 'rgb(0, 236, 104)'], + ['color(from color(prophoto-rgb 0 1 none) a98-rgb r g b)', 'rgb(0, 243, 143)'], + ['color(from color(rec2020 0 1 none) a98-rgb r g b)', 'rgb(0, 240, 130)'], + + // None : 2 + ['color(from color(srgb 0 1 0) srgb r g none)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) srgb r g none)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) srgb r g none)', 'rgb(0, 249, 99)'], + ['color(from color(a98-rgb 0 1 0) srgb r g none)', 'rgb(0, 236, 116)'], + ['color(from color(prophoto-rgb 0 1 0) srgb r g none)', 'rgb(0, 243, 151)'], + ['color(from color(rec2020 0 1 0) srgb r g none)', 'rgb(0, 240, 139)'], + + ['color(from color(srgb 0 1 0) srgb-linear r g none)', 'rgb(0, 255, 0)'], + ['color(from color(srgb-linear 0 1 0) srgb-linear r g none)', 'rgb(0, 255, 0)'], + ['color(from color(display-p3 0 1 0) srgb-linear r g none)', 'rgb(0, 249, 99)'], + ['color(from color(a98-rgb 0 1 0) srgb-linear r g none)', 'rgb(0, 236, 116)'], + ['color(from color(prophoto-rgb 0 1 0) srgb-linear r g none)', 'rgb(0, 243, 151)'], + ['color(from color(rec2020 0 1 0) srgb-linear r g none)', 'rgb(0, 240, 139)'], + + ['color(from color(srgb 0 1 0) display-p3 r g none)', 'rgb(77, 251, 0)'], + ['color(from color(srgb-linear 0 1 0) display-p3 r g none)', 'rgb(77, 251, 0)'], + ['color(from color(display-p3 0 1 0) display-p3 r g none)', 'rgb(0, 249, 66)'], + ['color(from color(a98-rgb 0 1 0) display-p3 r g none)', 'rgb(0, 233, 108)'], + ['color(from color(prophoto-rgb 0 1 0) display-p3 r g none)', 'rgb(0, 243, 137)'], + ['color(from color(rec2020 0 1 0) display-p3 r g none)', 'rgb(0, 240, 123)'], +].forEach(([input, expected]) => { + assert.deepStrictEqual( + serialize_sRGB_data(color(parse(input))), + expected, + `${input}: ${expected}`, + ); +}); diff --git a/packages/css-color-parser/test/test.mjs b/packages/css-color-parser/test/test.mjs index 65c21a656..9a6a838ec 100644 --- a/packages/css-color-parser/test/test.mjs +++ b/packages/css-color-parser/test/test.mjs @@ -3,9 +3,11 @@ import './basic/color-function.mjs'; import './basic/color-mix-function.mjs'; import './basic/keywords.mjs'; import './basic/lab.mjs'; +import './basic/invalid.mjs'; import './basic/lch.mjs'; import './basic/named-colors.mjs'; import './basic/none.mjs'; +import './basic/relative-color.mjs'; import './basic/variables.mjs'; import './wpt/index.mjs'; diff --git a/packages/css-color-parser/test/util/canonical.mjs b/packages/css-color-parser/test/util/canonical.mjs index 5e7ca33b2..843dbfd13 100644 --- a/packages/css-color-parser/test/util/canonical.mjs +++ b/packages/css-color-parser/test/util/canonical.mjs @@ -1,12 +1,12 @@ import { color } from '@csstools/css-color-parser'; -import assert from 'assert'; import { parse } from '../util/parse.mjs'; import { serialize_sRGB_data } from '../util/serialize.mjs'; export function canonicalize(x) { const result = serialize_sRGB_data(color(parse(x))); - - assert.ok(!!result); + if (!result) { + return ''; + } return result; } diff --git a/packages/css-color-parser/test/wpt/color-computed-lab.mjs b/packages/css-color-parser/test/wpt/color-computed-lab.mjs index 33910a161..9e68b6f12 100644 --- a/packages/css-color-parser/test/wpt/color-computed-lab.mjs +++ b/packages/css-color-parser/test/wpt/color-computed-lab.mjs @@ -19,8 +19,8 @@ const tests = [ ['lab(20 0 10/50%)', 'rgba(52, 48, 34, 0.5)', 'color(display-p3 0.20256 0.18882 0.13828 / 0.5)'], ['lab(400 0 10/50%)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], ['lab(100 0 10/50%)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['lab(50 -160 160)', 'rgb(0, 134, 16)', 'color(display-p3 0 0.53919 0)'], - ['lab(50 -200 200)', 'rgb(50, 128, 0)', 'color(display-p3 0.25694 0.50249 0)'], + ['lab(50 -160 160)', 'rgb(0, 132, 35)', 'color(display-p3 0 0.53135 0.05051)'], + ['lab(50 -200 200)', 'rgb(51, 128, 0)', 'color(display-p3 0.26 0.50158 0)'], ['lab(0 0 0 / -10%)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], ['lab(0 0 0 / 110%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['lab(0 0 0 / 300%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], @@ -40,16 +40,16 @@ const tests = [ ['oklab(0 0 0)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 1)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], - ['oklab(0.2 0 0.1/0.5)', 'rgba(32, 20, 0, 0.5)', 'color(display-p3 0.12305 0.07772 0 / 0.5)'], - ['oklab(0.2 0 0.1/50%)', 'rgba(32, 20, 0, 0.5)', 'color(display-p3 0.12305 0.07772 0 / 0.5)'], + ['oklab(0.2 0 0.1/0.5)', 'rgba(31, 20, 0, 0.5)', 'color(display-p3 0.11443 0.08142 0 / 0.5)'], + ['oklab(0.2 0 0.1/50%)', 'rgba(31, 20, 0, 0.5)', 'color(display-p3 0.11443 0.08142 0 / 0.5)'], ['oklab(4 0 0.1/50%)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['oklab(0.5 -1.6 1.6)', 'rgb(48, 118, 0)', 'color(display-p3 0.24068 0.46594 0)'], - ['oklab(0.5 -2 2)', 'rgb(48, 118, 0)', 'color(display-p3 0.24073 0.46592 0)'], + ['oklab(0.5 -1.6 1.6)', 'rgb(53, 117, 0)', 'color(display-p3 0.25974 0.45977 0)'], + ['oklab(0.5 -2 2)', 'rgb(55, 117, 0)', 'color(display-p3 0.25973 0.45977 0)'], ['oklab(0 0 0 / -10%)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], ['oklab(0 0 0 / 110%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 300%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(-0.4 0 0)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], - ['oklab(0.5 -0.2 0)', 'rgb(0, 119, 102)', 'color(display-p3 0 0.47537 0.4034)'], + ['oklab(0.5 -0.2 0)', 'rgb(0, 117, 101)', 'color(display-p3 0 0.46541 0.40143)'], ['oklab(0.5 0 -0.2)', 'rgb(59, 81, 211)', 'color(display-p3 0.24856 0.31486 0.7965)'], ['oklab(calc(0.5 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], ['oklab(calc(-0.5 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], @@ -60,20 +60,20 @@ const tests = [ ['oklab(none none none / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], ['oklab(0 0 0 / none)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], - ['lab(20 -62.5 112.5 / 0.5)', 'rgba(35, 50, 0, 0.5)', 'color(display-p3 0.14663 0.19586 0 / 0.5)'], - ['lab(20% -50% 90%/0.5)', 'rgba(35, 50, 0, 0.5)', 'color(display-p3 0.14663 0.19586 0 / 0.5)'], - ['oklab(0.2 0.28 -0.32 / 0.5)', 'rgba(39, 0, 61, 0.5)', 'color(display-p3 0.13803 0 0.23544 / 0.5)'], - ['oklab(20% 70% -80%/0.5)', 'rgba(39, 0, 61, 0.5)', 'color(display-p3 0.13803 0 0.23544 / 0.5)'], + ['lab(20 -62.5 112.5 / 0.5)', 'rgba(37, 49, 0, 0.5)', 'color(display-p3 0.14983 0.19329 0 / 0.5)'], + ['lab(20% -50% 90%/0.5)', 'rgba(37, 49, 0, 0.5)', 'color(display-p3 0.14983 0.19329 0 / 0.5)'], + ['oklab(0.2 0.28 -0.32 / 0.5)', 'rgba(37, 0, 56, 0.5)', 'color(display-p3 0.13416 0 0.22429 / 0.5)'], + ['oklab(20% 70% -80%/0.5)', 'rgba(37, 0, 56, 0.5)', 'color(display-p3 0.13416 0 0.22429 / 0.5)'], ['lch(0 0 0deg)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['lch(0 0 0deg / 1)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['lch(0 0 0deg / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], ['lch(100 230 0deg / 0.5)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['lch(20 50 20deg/0.5)', 'rgba(107, 0, 27, 0.5)', 'color(display-p3 0.38092 0.00312 0.11269 / 0.5)'], - ['lch(20 50 20deg/50%)', 'rgba(107, 0, 27, 0.5)', 'color(display-p3 0.38092 0.00312 0.11269 / 0.5)'], + ['lch(20 50 20deg/0.5)', 'rgba(104, 0, 29, 0.5)', 'color(display-p3 0.38092 0.00312 0.11269 / 0.5)'], + ['lch(20 50 20deg/50%)', 'rgba(104, 0, 29, 0.5)', 'color(display-p3 0.38092 0.00312 0.11269 / 0.5)'], ['lch(10 20 20deg / -10%)', 'rgba(51, 15, 19, 0)', 'color(display-p3 0.18359 0.06826 0.0765 / 0)'], ['lch(10 20 20deg / 110%)', 'rgb(51, 15, 19)', 'color(display-p3 0.18359 0.06826 0.0765)'], - ['lch(10 20 1.28rad)', 'rgb(40, 24, 0)', 'color(display-p3 0.14986 0.09736 0)'], + ['lch(10 20 1.28rad)', 'rgb(37, 25, 0)', 'color(display-p3 0.14474 0.09967 0)'], ['lch(10 20 380deg)', 'rgb(51, 15, 19)', 'color(display-p3 0.18359 0.06826 0.0765)'], ['lch(10 20 -340deg)', 'rgb(51, 15, 19)', 'color(display-p3 0.18359 0.06826 0.0765)'], ['lch(10 20 740deg)', 'rgb(51, 15, 19)', 'color(display-p3 0.18359 0.06826 0.0765)'], @@ -96,20 +96,20 @@ const tests = [ ['oklch(0 0 0deg / 1)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklch(0 0 0deg / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], ['oklch(1 2.3 0deg / 0.5)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['oklch(0.2 0.5 20deg/0.5)', 'rgba(55, 0, 3, 0.5)', 'color(display-p3 0.2031 0 0.00893 / 0.5)'], - ['oklch(0.2 0.5 20deg/50%)', 'rgba(55, 0, 3, 0.5)', 'color(display-p3 0.2031 0 0.00893 / 0.5)'], - ['oklch(0.1 0.2 20deg / -10%)', 'rgba(17, 0, 0, 0)', 'color(display-p3 0.06116 0 0 / 0)'], - ['oklch(0.1 0.2 20deg / 110%)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], - ['oklch(0.1 0.2 1.28rad)', 'rgb(10, 2, 0)', 'color(display-p3 0.03405 0.0064 0)'], - ['oklch(0.1 0.2 380deg)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], - ['oklch(0.1 0.2 -340deg)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], - ['oklch(0.1 0.2 740deg)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], - ['oklch(0.1 0.2 -700deg)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], + ['oklch(0.2 0.5 20deg/0.5)', 'rgba(54, 0, 4, 0.5)', 'color(display-p3 0.18813 0 0.01902 / 0.5)'], + ['oklch(0.2 0.5 20deg/50%)', 'rgba(54, 0, 4, 0.5)', 'color(display-p3 0.18813 0 0.01902 / 0.5)'], + ['oklch(0.1 0.2 20deg / -10%)', 'rgba(15, 0, 0, 0)', 'color(display-p3 0.04964 0 0.00188 / 0)'], + ['oklch(0.1 0.2 20deg / 110%)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], + ['oklch(0.1 0.2 1.28rad)', 'rgb(7, 2, 0)', 'color(display-p3 0.02425 0.00999 0)'], + ['oklch(0.1 0.2 380deg)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], + ['oklch(0.1 0.2 -340deg)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], + ['oklch(0.1 0.2 740deg)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], + ['oklch(0.1 0.2 -700deg)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], ['oklch(-0.4 0 0)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], - ['oklch(0.2 -0.2 0)', 'rgb(0, 30, 23)', 'color(display-p3 0 0.11866 0.09185)'], + ['oklch(0.2 -0.2 0)', 'rgb(0, 29, 23)', 'color(display-p3 0 0.11055 0.09019)'], ['oklch(0 0 0 / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], - ['oklch(0.1 0.2 20 / 110%)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], - ['oklch(0.1 0.2 -700)', 'rgb(17, 0, 0)', 'color(display-p3 0.06116 0 0)'], + ['oklch(0.1 0.2 20 / 110%)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], + ['oklch(0.1 0.2 -700)', 'rgb(15, 0, 0)', 'color(display-p3 0.04964 0 0.00188)'], ['oklch(calc(0.5 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], ['oklch(calc(-0.5 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], @@ -119,10 +119,10 @@ const tests = [ ['oklch(none none none / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], ['oklch(0 0 0 / none)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], - ['lch(20 120 10 / 0.5)', 'rgba(118, 0, 48, 0.5)', 'color(display-p3 0.43858 0 0.18219 / 0.5)'], - ['lch(20% 80% 10/0.5)', 'rgba(118, 0, 48, 0.5)', 'color(display-p3 0.43858 0 0.18219 / 0.5)'], - ['oklch(0.2 0.24 10 / 0.5)', 'rgba(54, 0, 11, 0.5)', 'color(display-p3 0.19929 0 0.04185 / 0.5)'], - ['oklch(20% 60% 10/0.5)', 'rgba(54, 0, 11, 0.5)', 'color(display-p3 0.19929 0 0.04185 / 0.5)'], + ['lch(20 120 10 / 0.5)', 'rgba(113, 0, 49, 0.5)', 'color(display-p3 0.42656 0 0.18551 / 0.5)'], + ['lch(20% 80% 10/0.5)', 'rgba(113, 0, 49, 0.5)', 'color(display-p3 0.42656 0 0.18551 / 0.5)'], + ['oklch(0.2 0.24 10 / 0.5)', 'rgba(52, 0, 12, 0.5)', 'color(display-p3 0.19503 0 0.04399 / 0.5)'], + ['oklch(20% 60% 10/0.5)', 'rgba(52, 0, 12, 0.5)', 'color(display-p3 0.19503 0 0.04399 / 0.5)'], ]; for (const test of tests) { diff --git a/packages/css-color-parser/test/wpt/color-computed-oklab.mjs b/packages/css-color-parser/test/wpt/color-computed-oklab.mjs index a6e01c568..52bef7d7d 100644 --- a/packages/css-color-parser/test/wpt/color-computed-oklab.mjs +++ b/packages/css-color-parser/test/wpt/color-computed-oklab.mjs @@ -19,19 +19,19 @@ const tests = [ ['oklab(0 0 0)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 1)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 0.5)', 'rgba(0, 0, 0, 0.5)', 'color(display-p3 0 0 0 / 0.5)'], - ['oklab(0.2 0 0.1/0.5)', 'rgba(32, 20, 0, 0.5)', 'color(display-p3 0.12305 0.07772 0 / 0.5)'], - ['oklab(0.2 0 0.1/50%)', 'rgba(32, 20, 0, 0.5)', 'color(display-p3 0.12305 0.07772 0 / 0.5)'], + ['oklab(0.2 0 0.1/0.5)', 'rgba(31, 20, 0, 0.5)', 'color(display-p3 0.11443 0.08142 0 / 0.5)'], + ['oklab(0.2 0 0.1/50%)', 'rgba(31, 20, 0, 0.5)', 'color(display-p3 0.11443 0.08142 0 / 0.5)'], ['oklab(4 0 0.1/50%)', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['oklab(0.5 -0.4 0.4)', 'rgb(48, 118, 0)', 'color(display-p3 0.24068 0.46594 0)'], - ['oklab(0.5 -1 1)', 'rgb(48, 118, 0)', 'color(display-p3 0.24074 0.46592 0)'], + ['oklab(0.5 -0.4 0.4)', 'rgb(53, 117, 0)', 'color(display-p3 0.25974 0.45978 0)'], + ['oklab(0.5 -1 1)', 'rgb(55, 117, 0)', 'color(display-p3 0.25974 0.45977 0)'], ['oklab(0 0 0 / -10%)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], ['oklab(0 0 0 / 110%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(0 0 0 / 300%)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], ['oklab(-0.4 0 0)', 'rgb(0, 0, 0)', 'color(display-p3 0 0 0)'], - ['oklab(0.5 -0.1 0)', 'rgb(0, 117, 101)', 'color(display-p3 0.1594 0.45196 0.39888)'], + ['oklab(0.5 -0.1 0)', 'rgb(0, 116, 101)', 'color(display-p3 0.1594 0.45196 0.39888)'], ['oklab(0.5 0 -0.1)', 'rgb(77, 95, 156)', 'color(display-p3 0.31641 0.3713 0.59541)'], ['oklab(calc(0.50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))', 'rgba(255, 255, 255, 0.5)', 'color(display-p3 1 1 1 / 0.5)'], - ['oklab(calc(0.50 / 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))', 'rgba(17, 16, 0, 0.5)', 'color(display-p3 0.068 0.06171 0 / 0.5)'], + ['oklab(calc(0.50 / 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))', 'rgba(17, 16, 0, 0.5)', 'color(display-p3 0.06561 0.06186 0 / 0.5)'], ['oklab(calc(-0.50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], ['oklab(none none none / none)', 'rgba(0, 0, 0, 0)', 'color(display-p3 0 0 0 / 0)'], diff --git a/packages/css-color-parser/test/wpt/color-computed-relative-color.mjs b/packages/css-color-parser/test/wpt/color-computed-relative-color.mjs index f5d91b1f8..eff8cacdc 100644 --- a/packages/css-color-parser/test/wpt/color-computed-relative-color.mjs +++ b/packages/css-color-parser/test/wpt/color-computed-relative-color.mjs @@ -2,338 +2,1256 @@ import { color } from '@csstools/css-color-parser'; import assert from 'assert'; import { parse } from '../util/parse.mjs'; import { serialize_sRGB_data } from '../util/serialize.mjs'; +import { canonicalize } from '../util/canonical.mjs'; -// Testing no modifications. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b)'))), - 'rgb(102, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b / alpha)'))), - 'rgb(102, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g b / alpha)'))), - 'rgba(51, 102, 153, 0.8)', -); -// TODO -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)'))), -// 'rgba(102, 153, 102, 0.5)', -// ); - -// Test nesting relative colors. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(from rebeccapurple r g b) r g b)'))), - 'rgb(102, 51, 153)', -); - -// // Testing non-sRGB origin colors to see gamut mapping. -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from color(display-p3 0 1 0) r g b / alpha)'))), -// 'rgb(0, 249, 66)', -// ); // Naive clip based mapping would give rgb(0, 255, 0). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from lab(100 104.3 -50.9) r g b)'))), -// 'rgb(255, 255, 255)', -// ); // Naive clip based mapping would give rgb(255, 150, 255). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from lab(0 104.3 -50.9) r g b)'))), -// 'rgb(42, 0, 34)', -// ); // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from lch(100 116 334) r g b)'))), -// 'rgb(255, 255, 255)', -// ); // Naive clip based mapping would give rgb(255, 150, 255). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from lch(0 116 334) r g b)'))), -// 'rgb(42, 0, 34)', -// ); // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from oklab(100 0.365 -0.16) r g b)'))), -// 'rgb(255, 255, 255)', -// ); // Naive clip based mapping would give rgb(255, 92, 255). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from oklab(0 0.365 -0.16) r g b)'))), -// 'rgb(0, 0, 0)', -// ); // Naive clip based mapping would give rgb(19, 0, 24). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from oklch(100 0.399 336.3) r g b)'))), -// 'rgb(255, 255, 255)', -// ); // Naive clip based mapping would give rgb(255, 91, 255). -// assert.deepStrictEqual( -// serialize_sRGB_data(color(parse('rgb(from oklch(0 0.399 336.3) r g b)'))), -// 'rgb(0, 0, 0)', -// ); // Naive clip based mapping would give rgb(20, 0, 24). - -// Testing replacement with 0. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 0 0 0)'))), - 'rgb(0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 0 0 0 / 0)'))), - 'rgba(0, 0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 0 g b / alpha)'))), - 'rgb(0, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 0 b / alpha)'))), - 'rgb(102, 0, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g 0 / alpha)'))), - 'rgb(102, 51, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b / 0)'))), - 'rgba(102, 51, 153, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)'))), - 'rgba(0, 102, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)'))), - 'rgba(51, 0, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)'))), - 'rgba(51, 102, 0, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g b / 0)'))), - 'rgba(51, 102, 153, 0)', -); - -// Testing replacement with a number. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 25 g b / alpha)'))), - 'rgb(25, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 25 b / alpha)'))), - 'rgb(102, 25, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g 25 / alpha)'))), - 'rgb(102, 51, 25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b / .25)'))), - 'rgba(102, 51, 153, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)'))), - 'rgba(25, 102, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)'))), - 'rgba(51, 25, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)'))), - 'rgba(51, 102, 25, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g b / .20)'))), - 'rgba(51, 102, 153, 0.2)', -); - -// Testing replacement with a percentage. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 20% g b / alpha)'))), - 'rgb(51, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 20% b / alpha)'))), - 'rgb(102, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g 20% / alpha)'))), - 'rgb(102, 51, 51)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b / 20%)'))), - 'rgba(102, 51, 153, 0.2)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)'))), - 'rgba(51, 102, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)'))), - 'rgba(51, 51, 153, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)'))), - 'rgba(51, 102, 51, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g b / 20%)'))), - 'rgba(51, 102, 153, 0.2)', -); - -// Testing replacement with a number for r, g, b but percent for alpha. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 25 g b / 25%)'))), - 'rgba(25, 51, 153, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 25 b / 25%)'))), - 'rgba(102, 25, 153, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g 25 / 25%)'))), - 'rgba(102, 51, 25, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)'))), - 'rgba(25, 102, 153, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)'))), - 'rgba(51, 25, 153, 0.25)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)'))), - 'rgba(51, 102, 25, 0.25)', -); - -// Testing permutation. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple g b r)'))), - 'rgb(51, 153, 102)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple b alpha r / g)'))), - 'rgba(153, 255, 102, 0.2)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r r r / r)'))), - 'rgba(102, 102, 102, 0.4)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple alpha alpha alpha / alpha)'))), - 'rgb(255, 255, 255)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) g b r)'))), - 'rgb(102, 153, 51)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) b alpha r / g)'))), - 'rgba(153, 204, 51, 0.4)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r r r / r)'))), - 'rgba(51, 51, 51, 0.2)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)'))), - 'rgba(204, 204, 204, 0.8)', -); - -// Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax). -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 20% 10)'))), - 'rgb(102, 51, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r 10 20%)'))), - 'rgb(102, 10, 51)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple 0% 10 10)'))), - 'rgb(0, 10, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 20% 10)'))), - 'rgb(51, 51, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) r 10 20%)'))), - 'rgb(51, 10, 51)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) 0% 10 10)'))), - 'rgb(0, 10, 10)', -); - -// r g b -// 102 51 153 -// 40% 20% 60%) -// Testing with calc(). -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple calc(r) calc(g) calc(b))'))), - 'rgb(102, 51, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r calc(g * 2) 10)'))), - 'rgb(102, 102, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple b calc(r * .5) 10)'))), - 'rgb(153, 51, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r calc(g * .5 + g * .5) 10)'))), - 'rgb(102, 51, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)'))), - 'rgb(102, 51, 10)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))'))), - 'rgba(51, 102, 153, 0.8)', -); - -// Testing with 'none'. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple none none none)'))), - 'rgb(0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple none none none / none)'))), - 'rgba(0, 0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g none)'))), - 'rgb(102, 51, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g none / alpha)'))), - 'rgb(102, 51, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rebeccapurple r g b / none)'))), - 'rgba(102, 51, 153, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20% 40% 60% / 80%) r g none / alpha)'))), - 'rgba(51, 102, 0, 0.8)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20% 40% 60% / 80%) r g b / none)'))), - 'rgba(51, 102, 153, 0)', -); -// FIXME: Clarify with spec editors if 'none' should pass through to the constants. -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(none none none) r g b)'))), - 'rgb(0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(none none none / none) r g b / alpha)'))), - 'rgba(0, 0, 0, 0)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20% none 60%) r g b)'))), - 'rgb(51, 0, 153)', -); -assert.deepStrictEqual( - serialize_sRGB_data(color(parse('rgb(from rgb(20% 40% 60% / none) r g b / alpha)'))), - 'rgba(51, 102, 153, 0)', -); +const tests = [ + ['rgb(from rebeccapurple r g b)', 'rgb(102, 51, 153)'], + ['rgb(from rebeccapurple r g b / alpha)', 'rgb(102, 51, 153)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g b / alpha)', 'rgba(51, 102, 153, 0.8)'], + ['rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)', 'rgba(102, 153, 102, 0.5)'], + + // Test nesting relative colors. + ['rgb(from rgb(from rebeccapurple r g b) r g b)', 'rgb(102, 51, 153)'], + + // Testing non-sRGB origin colors to see gamut mapping. + ['rgb(from color(display-p3 0 1 0) r g b / alpha)', 'rgb(0, 249, 66)'], // Naive clip based mapping would give rgb(0, 255, 0). + ['rgb(from lab(100 104.3 -50.9) r g b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['rgb(from lab(0 104.3 -50.9) r g b)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['rgb(from lch(100 116 334) r g b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['rgb(from lch(0 116 334) r g b)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['rgb(from oklab(1 0.365 -0.16) r g b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 92, 255). + ['rgb(from oklab(0 0.365 -0.16) r g b)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(19, 0, 24). + ['rgb(from oklch(1 0.399 336.3) r g b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 91, 255). + ['rgb(from oklch(0 0.399 336.3) r g b)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(20, 0, 24). + + // Testing replacement with 0. + ['rgb(from rebeccapurple 0 0 0)', 'rgb(0, 0, 0)'], + ['rgb(from rebeccapurple 0 0 0 / 0)', 'rgba(0, 0, 0, 0)'], + ['rgb(from rebeccapurple 0 g b / alpha)', 'rgb(0, 51, 153)'], + ['rgb(from rebeccapurple r 0 b / alpha)', 'rgb(102, 0, 153)'], + ['rgb(from rebeccapurple r g 0 / alpha)', 'rgb(102, 51, 0)'], + ['rgb(from rebeccapurple r g b / 0)', 'rgba(102, 51, 153, 0)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)', 'rgba(0, 102, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)', 'rgba(51, 0, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)', 'rgba(51, 102, 0, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g b / 0)', 'rgba(51, 102, 153, 0)'], + + // Testing replacement with a number. + ['rgb(from rebeccapurple 25 g b / alpha)', 'rgb(25, 51, 153)'], + ['rgb(from rebeccapurple r 25 b / alpha)', 'rgb(102, 25, 153)'], + ['rgb(from rebeccapurple r g 25 / alpha)', 'rgb(102, 51, 25)'], + ['rgb(from rebeccapurple r g b / .25)', 'rgba(102, 51, 153, 0.25)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)', 'rgba(25, 102, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)', 'rgba(51, 25, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)', 'rgba(51, 102, 25, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g b / .20)', 'rgba(51, 102, 153, 0.2)'], + + // Testing replacement with a percentage. + ['rgb(from rebeccapurple 20% g b / alpha)', 'rgb(51, 51, 153)'], + ['rgb(from rebeccapurple r 20% b / alpha)', 'rgb(102, 51, 153)'], + ['rgb(from rebeccapurple r g 20% / alpha)', 'rgb(102, 51, 51)'], + ['rgb(from rebeccapurple r g b / 20%)', 'rgba(102, 51, 153, 0.2)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)', 'rgba(51, 102, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)', 'rgba(51, 51, 153, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)', 'rgba(51, 102, 51, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g b / 20%)', 'rgba(51, 102, 153, 0.2)'], + + // Testing replacement with a number for r, g, b but percent for alpha. + ['rgb(from rebeccapurple 25 g b / 25%)', 'rgba(25, 51, 153, 0.25)'], + ['rgb(from rebeccapurple r 25 b / 25%)', 'rgba(102, 25, 153, 0.25)'], + ['rgb(from rebeccapurple r g 25 / 25%)', 'rgba(102, 51, 25, 0.25)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)', 'rgba(25, 102, 153, 0.25)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)', 'rgba(51, 25, 153, 0.25)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)', 'rgba(51, 102, 25, 0.25)'], + + // Testing permutation. + ['rgb(from rebeccapurple g b r)', 'rgb(51, 153, 102)'], + ['rgb(from rebeccapurple b alpha r / g)', 'rgb(153, 1, 102)'], + ['rgb(from rebeccapurple r r r / r)', 'rgb(102, 102, 102)'], + ['rgb(from rebeccapurple alpha alpha alpha / alpha)', 'rgb(1, 1, 1)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) g b r)', 'rgb(102, 153, 51, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) b alpha r / g)', 'rgb(153, 1, 51)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r r r / r)', 'rgba(51, 51, 51)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)', 'rgba(1, 1, 1, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) calc(255 * alpha) calc(255 * alpha) calc(255 * alpha) / alpha)', 'rgba(204, 204, 204, 0.8)'], + + // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax). + ['rgb(from rebeccapurple r 20% 10)', 'rgb(102, 51, 10)'], + ['rgb(from rebeccapurple r 10 20%)', 'rgb(102, 10, 51)'], + ['rgb(from rebeccapurple 0% 10 10)', 'rgb(0, 10, 10)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 20% 10)', 'rgb(51, 51, 10, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) r 10 20%)', 'rgb(51, 10, 51, 0.8)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) 0% 10 10)', 'rgb(0, 10, 10, 0.8)'], + + // r g b + // 102 51 153 + // 40% 20% 60%) + // Testing with calc(). + ['rgb(from rebeccapurple calc(r) calc(g) calc(b))', 'rgb(102, 51, 153)'], + ['rgb(from rebeccapurple r calc(g * 2) 10)', 'rgb(102, 102, 10)'], + ['rgb(from rebeccapurple b calc(r * .5) 10)', 'rgb(153, 51, 10)'], + ['rgb(from rebeccapurple r calc(g * .5 + g * .5) 10)', 'rgb(102, 51, 10)'], + ['rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)', 'rgb(102, 51, 10)'], + ['rgb(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))', 'rgba(51, 102, 153, 0.8)'], + + // Testing with 'none'. + ['rgb(from rebeccapurple none none none)', 'rgb(0, 0, 0)'], + ['rgb(from rebeccapurple none none none / none)', 'rgba(0, 0, 0, 0)'], + ['rgb(from rebeccapurple r g none)', 'rgb(102, 51, 0)'], + ['rgb(from rebeccapurple r g none / alpha)', 'rgb(102, 51, 0)'], + ['rgb(from rebeccapurple r g b / none)', 'rgba(102, 51, 153, 0)'], + ['rgb(from rgb(20% 40% 60% / 80%) r g none / alpha)', 'rgba(51, 102, 0, 0.8)'], + ['rgb(from rgb(20% 40% 60% / 80%) r g b / none)', 'rgba(51, 102, 153, 0)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['rgb(from rgb(none none none) r g b)', 'rgb(0, 0, 0)'], + ['rgb(from rgb(none none none / none) r g b / alpha)', 'rgba(0, 0, 0, 0)'], + ['rgb(from rgb(20% none 60%) r g b)', 'rgb(51, 0, 153)'], + ['rgb(from rgb(20% 40% 60% / none) r g b / alpha)', 'rgba(51, 102, 153, 0)'], + + + // hsl(from ...) + + // Testing no modifications. + ['hsl(from rebeccapurple h s l)', 'rgb(102, 51, 153)'], + ['hsl(from rebeccapurple h s l / alpha)', 'rgb(102, 51, 153)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h s l / alpha)', 'rgba(51, 102, 153, 0.8)'], + ['hsl(from hsl(120deg 20% 50% / .5) h s l / alpha)', 'rgba(102, 153, 102, 0.5)'], + + // Test nesting relative colors. + ['hsl(from hsl(from rebeccapurple h s l) h s l)', 'rgb(102, 51, 153)'], + + // Testing non-sRGB origin colors to see gamut mapping. + ['hsl(from color(display-p3 0 1 0) h s l / alpha)', 'rgb(0, 249, 66)'], // Naive clip based mapping would give rgb(0, 255, 0). + ['hsl(from lab(100 104.3 -50.9) h s l)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['hsl(from lab(0 104.3 -50.9) h s l)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['hsl(from lch(100 116 334) h s l)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['hsl(from lch(0 116 334) h s l)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['hsl(from oklab(1 0.365 -0.16) h s l)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 92, 255). + ['hsl(from oklab(0 0.365 -0.16) h s l)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(19, 0, 24). + ['hsl(from oklch(1 0.399 336.3) h s l)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 91, 255). + ['hsl(from oklch(0 0.399 336.3) h s l)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(20, 0, 24). + + // Testing replacement with 0. + ['hsl(from rebeccapurple 0 0% 0%)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple 0deg 0% 0%)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple 0 0% 0% / 0)', 'rgba(0, 0, 0, 0)'], + ['hsl(from rebeccapurple 0deg 0% 0% / 0)', 'rgba(0, 0, 0, 0)'], + ['hsl(from rebeccapurple 0 s l / alpha)', 'rgb(153, 51, 51)'], + ['hsl(from rebeccapurple 0deg s l / alpha)', 'rgb(153, 51, 51)'], + ['hsl(from rebeccapurple h 0% l / alpha)', 'rgb(102, 102, 102)'], + ['hsl(from rebeccapurple h s 0% / alpha)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple h s l / 0)', 'rgba(102, 51, 153, 0)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)', 'rgba(153, 51, 51, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)', 'rgba(153, 51, 51, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)', 'rgba(102, 102, 102, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)', 'rgba(0, 0, 0, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h s l / 0)', 'rgba(51, 102, 153, 0)'], + + // Testing replacement with a constant. + ['hsl(from rebeccapurple 25 s l / alpha)', 'rgb(153, 94, 51)'], + ['hsl(from rebeccapurple 25deg s l / alpha)', 'rgb(153, 94, 51)'], + ['hsl(from rebeccapurple h 20% l / alpha)', 'rgb(102, 82, 122)'], + ['hsl(from rebeccapurple h s 20% / alpha)', 'rgb(51, 26, 77)'], + ['hsl(from rebeccapurple h s l / .25)', 'rgba(102, 51, 153, 0.25)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)', 'rgba(153, 94, 51, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)', 'rgba(153, 94, 51, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)', 'rgba(82, 102, 122, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)', 'rgba(26, 51, 77, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h s l / .2)', 'rgba(51, 102, 153, 0.2)'], + + // Testing valid permutation (types match). + ['hsl(from rebeccapurple h l s)', 'rgb(128, 77, 179)'], + ['hsl(from rebeccapurple h alpha l / s)', 'rgba(102, 101, 103, 0.5)'], + ['hsl(from rebeccapurple h l l / l)', 'rgba(102, 61, 143, 0.4)'], + ['hsl(from rebeccapurple h alpha alpha / alpha)', 'rgb(3, 3, 3)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h l s)', 'rgba(77, 127, 178, 0.8)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)', 'rgba(101, 102, 103, 0.5)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)', 'rgba(61, 102, 143, 0.4)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)', 'rgba(2, 2, 2, 0.8)'], + + // Testing with calc(). + ['hsl(from rebeccapurple calc(h) calc(s) calc(l))', 'rgb(102, 51, 153)'], + ['hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))', 'rgba(51, 102, 153, 0.8)'], + + // Testing with 'none'. + ['hsl(from rebeccapurple none none none)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple none none none / none)', 'rgba(0, 0, 0, 0)'], + ['hsl(from rebeccapurple h s none)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple h s none / alpha)', 'rgb(0, 0, 0)'], + ['hsl(from rebeccapurple h s l / none)', 'rgba(102, 51, 153, 0)'], + ['hsl(from rebeccapurple none s l / alpha)', 'rgb(153, 51, 51)'], + ['hsl(from hsl(120deg 20% 50% / .5) h s none / alpha)', 'rgba(0, 0, 0, 0.5)'], + ['hsl(from hsl(120deg 20% 50% / .5) h s l / none)', 'rgba(102, 153, 102, 0)'], + ['hsl(from hsl(120deg 20% 50% / .5) none s l / alpha)', 'rgba(153, 102, 102, 0.5)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['hsl(from hsl(none none none) h s l)', 'rgb(0, 0, 0)'], + ['hsl(from hsl(none none none / none) h s l / alpha)', 'rgba(0, 0, 0, 0)'], + ['hsl(from hsl(120deg none 50% / .5) h s l)', 'rgb(128, 128, 128, 0.5)'], + ['hsl(from hsl(120deg 20% 50% / none) h s l / alpha)', 'rgba(102, 153, 102, 0)'], + ['hsl(from hsl(none 20% 50% / .5) h s l / alpha)', 'rgba(153, 102, 102, 0.5)'], + + // hwb(from ...) + + // Testing no modifications. + ['hwb(from rebeccapurple h w b)', 'rgb(102, 51, 153)'], + ['hwb(from rebeccapurple h w b / alpha)', 'rgb(102, 51, 153)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w b / alpha)', 'rgba(51, 102, 153, 0.8)'], + ['hwb(from hsl(120deg 20% 50% / .5) h w b / alpha)', 'rgba(102, 153, 102, 0.5)'], + + // Test nesting relative colors. + ['hwb(from hwb(from rebeccapurple h w b) h w b)', 'rgb(102, 51, 153)'], + + // Testing non-sRGB origin colors to see gamut mapping. + ['hwb(from color(display-p3 0 1 0) h w b / alpha)', 'rgb(0, 249, 66)'], // Naive clip based mapping would give rgb(0, 255, 0). + ['hwb(from lab(100 104.3 -50.9) h w b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['hwb(from lab(0 104.3 -50.9) h w b)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['hwb(from lch(100 116 334) h w b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 150, 255). + ['hwb(from lch(0 116 334) h w b)', 'rgb(42, 0, 34)'], // Naive clip based mapping would give rgb(90, 0, 76). NOTE: 0% lightness in Lab/LCH does not automatically correspond with sRGB black, + ['hwb(from oklab(1 0.365 -0.16) h w b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 92, 255). + ['hwb(from oklab(0 0.365 -0.16) h w b)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(19, 0, 24). + ['hwb(from oklch(1 0.399 336.3) h w b)', 'rgb(255, 255, 255)'], // Naive clip based mapping would give rgb(255, 91, 255). + ['hwb(from oklch(0 0.399 336.3) h w b)', 'rgb(0, 0, 0)'], // Naive clip based mapping would give rgb(20, 0, 24). + + // Testing replacement with 0. + ['hwb(from rebeccapurple 0 0% 0%)', 'rgb(255, 0, 0)'], + ['hwb(from rebeccapurple 0deg 0% 0%)', 'rgb(255, 0, 0)'], + ['hwb(from rebeccapurple 0 0% 0% / 0)', 'rgba(255, 0, 0, 0)'], + ['hwb(from rebeccapurple 0deg 0% 0% / 0)', 'rgba(255, 0, 0, 0)'], + ['hwb(from rebeccapurple 0 w b / alpha)', 'rgb(153, 51, 51)'], + ['hwb(from rebeccapurple 0deg w b / alpha)', 'rgb(153, 51, 51)'], + ['hwb(from rebeccapurple h 0% b / alpha)', 'rgb(77, 0, 153)'], + ['hwb(from rebeccapurple h w 0% / alpha)', 'rgb(153, 51, 255)'], + ['hwb(from rebeccapurple h w b / 0)', 'rgba(102, 51, 153, 0)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) 0 w b / alpha)', 'rgba(153, 51, 51, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) 0deg w b / alpha)', 'rgba(153, 51, 51, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h 0% b / alpha)', 'rgba(0, 77, 153, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w 0% / alpha)', 'rgba(51, 153, 255, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w b / 0)', 'rgba(51, 102, 153, 0)'], + + // Testing replacement with a constant. + ['hwb(from rebeccapurple 25 w b / alpha)', 'rgb(153, 94, 51)'], + ['hwb(from rebeccapurple 25deg w b / alpha)', 'rgb(153, 94, 51)'], + ['hwb(from rebeccapurple h 20% b / alpha)', 'rgb(102, 51, 153)'], + ['hwb(from rebeccapurple h w 20% / alpha)', 'rgb(128, 51, 204)'], + ['hwb(from rebeccapurple h w b / .2)', 'rgba(102, 51, 153, 0.2)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) 25 w b / alpha)', 'rgba(153, 94, 51, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) 25deg w b / alpha)', 'rgba(153, 94, 51, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h 20% b / alpha)', 'rgba(51, 102, 153, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w 20% / alpha)', 'rgba(51, 128, 204, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w b / .2)', 'rgba(51, 102, 153, 0.2)'], + + // Testing valid permutation (types match). + ['hwb(from rebeccapurple h b w)', 'rgb(153, 102, 204)'], + ['hwb(from rebeccapurple h calc(100% * alpha) w / b)', 'rgba(212, 212, 212, 0.4)'], + ['hwb(from rebeccapurple h w w / w)', 'rgba(128, 51, 204, 0.2)'], + ['hwb(from rebeccapurple h calc(100% * alpha) calc(100% * alpha) / alpha)', 'rgb(128, 128, 128)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h b w)', 'rgba(102, 153, 204, 0.8)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h calc(100% * alpha) w / b)', 'rgba(204, 204, 204, 0.4)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)', 'rgba(51, 128, 204, 0.2)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) h calc(100% * alpha) calc(100% * alpha) / alpha)', 'rgba(128, 128, 128, 0.8)'], + + // Testing with calc(). + ['hwb(from rebeccapurple calc(h) calc(w) calc(b))', 'rgb(102, 51, 153)'], + ['hwb(from rgb(20%, 40%, 60%, 80%) calc(h) calc(w) calc(b) / calc(alpha))', 'rgba(51, 102, 153, 0.8)'], + + // Testing with 'none'. + ['hwb(from rebeccapurple none none none)', 'rgb(255, 0, 0)'], + ['hwb(from rebeccapurple none none none / none)', 'rgba(255, 0, 0, 0)'], + ['hwb(from rebeccapurple h w none)', 'rgb(153, 51, 255)'], + ['hwb(from rebeccapurple h w none / alpha)', 'rgb(153, 51, 255)'], + ['hwb(from rebeccapurple h w b / none)', 'rgba(102, 51, 153, 0)'], + ['hwb(from rebeccapurple none w b / alpha)', 'rgb(153, 51, 51)'], + ['hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)', 'rgba(51, 255, 51, 0.5)'], + ['hwb(from hwb(120deg 20% 50% / .5) h w b / none)', 'rgba(51, 128, 51, 0)'], + ['hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)', 'rgba(128, 51, 51, 0.5)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['hwb(from hwb(none none none) h w b)', 'rgb(255, 0, 0)'], + ['hwb(from hwb(none none none / none) h w b / alpha)', 'rgba(255, 0, 0, 0)'], + ['hwb(from hwb(120deg none 50% / .5) h w b)', 'rgba(0, 128, 0, 0.5)'], + ['hwb(from hwb(120deg 20% 50% / none) h w b / alpha)', 'rgba(51, 128, 51, 0)'], + ['hwb(from hwb(none 20% 50% / .5) h w b / alpha)', 'rgba(128, 51, 51, 0.5)'], + + // lab() + + // Testing no modifications. + ['lab(from lab(25 20 50) l a b)', 'lab(25 20 50)'], + ['lab(from lab(25 20 50) l a b / alpha)', 'lab(25 20 50)'], + ['lab(from lab(25 20 50 / 40%) l a b / alpha)', 'lab(25 20 50 / 0.4)'], + ['lab(from lab(200 300 400 / 500%) l a b / alpha)', 'lab(200 300 400)'], + ['lab(from lab(-200 -300 -400 / -500%) l a b / alpha)', 'lab(0 -300 -400 / 0)'], + + // Test nesting relative colors. + ['lab(from lab(from lab(25 20 50) l a b) l a b)', 'lab(25 20 50)'], + + // Testing non-lab origin to see conversion. + ['lab(from color(display-p3 0 0 0) l a b / alpha)', 'lab(0 0 0)'], + + // Testing replacement with 0. + ['lab(from lab(25 20 50) 0 0 0)', 'lab(0 0 0)'], + ['lab(from lab(25 20 50) 0 0 0 / 0)', 'lab(0 0 0 / 0)'], + ['lab(from lab(25 20 50) 0 a b / alpha)', 'lab(0 20 50)'], + ['lab(from lab(25 20 50) l 0 b / alpha)', 'lab(25 0 50)'], + ['lab(from lab(25 20 50) l a 0 / alpha)', 'lab(25 20 0)'], + ['lab(from lab(25 20 50) l a b / 0)', 'lab(25 20 50 / 0)'], + ['lab(from lab(25 20 50 / 40%) 0 a b / alpha)', 'lab(0 20 50 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l 0 b / alpha)', 'lab(25 0 50 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a 0 / alpha)', 'lab(25 20 0 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a b / 0)', 'lab(25 20 50 / 0)'], + + // Testing replacement with a constant. + ['lab(from lab(25 20 50) 35 a b / alpha)', 'lab(35 20 50)'], + ['lab(from lab(25 20 50) l 35 b / alpha)', 'lab(25 35 50)'], + ['lab(from lab(25 20 50) l a 35 / alpha)', 'lab(25 20 35)'], + ['lab(from lab(25 20 50) l a b / .35)', 'lab(25 20 50 / 0.35)'], + ['lab(from lab(25 20 50 / 40%) 35 a b / alpha)', 'lab(35 20 50 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l 35 b / alpha)', 'lab(25 35 50 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a 35 / alpha)', 'lab(25 20 35 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a b / .35)', 'lab(25 20 50 / 0.35)'], + ['lab(from lab(0.7 45 30 / 40%) 200 300 400 / 500)', 'lab(200 300 400)'], + ['lab(from lab(0.7 45 30 / 40%) -200 -300 -400 / -500)', 'lab(0 -300 -400 / 0)'], + + // Testing valid permutation (types match). + ['lab(from lab(25 20 50) l b a)', 'lab(25 50 20)'], + ['lab(from lab(25 20 50) l a a / a)', 'lab(25 20 20)'], + ['lab(from lab(25 20 50 / 40%) l b a)', 'lab(25 50 20 / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a a / a)', 'lab(25 20 20)'], + + // Testing with calc(). + ['lab(from lab(25 20 50) calc(l) calc(a) calc(b))', 'lab(25 20 50)'], + ['lab(from lab(25 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))', 'lab(25 20 50 / 0.4)'], + + // Testing with 'none'. + ['lab(from lab(25 20 50) none none none)', 'lab(none none none)'], + ['lab(from lab(25 20 50) none none none / none)', 'lab(none none none / none)'], + ['lab(from lab(25 20 50) l a none)', 'lab(25 20 none)'], + ['lab(from lab(25 20 50) l a none / alpha)', 'lab(25 20 none)'], + ['lab(from lab(25 20 50) l a b / none)', 'lab(25 20 50 / none)'], + ['lab(from lab(25 20 50 / 40%) l a none / alpha)', 'lab(25 20 none / 0.4)'], + ['lab(from lab(25 20 50 / 40%) l a b / none)', 'lab(25 20 50 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['lab(from lab(none none none) l a b)', 'lab(0 0 0)'], + ['lab(from lab(none none none / none) l a b / alpha)', 'lab(0 0 0 / 0)'], + ['lab(from lab(25 none 50) l a b)', 'lab(25 0 50)'], + ['lab(from lab(25 20 50 / none) l a b / alpha)', 'lab(25 20 50 / 0)'], + + // oklab() + + // Testing no modifications. + ['oklab(from oklab(0.25 0.2 0.5) l a b)', 'oklab(0.25 0.2 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5) l a b / alpha)', 'oklab(0.25 0.2 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / alpha)', 'oklab(0.25 0.2 0.5 / 0.4)'], + ['oklab(from oklab(2 3 4 / 500%) l a b / alpha)', 'oklab(1 3 4)'], + ['oklab(from oklab(-2 -3 -4 / -500%) l a b / alpha)', 'oklab(0 -3 -4 / 0)'], + + // Test nesting relative colors. + ['oklab(from oklab(from oklab(0.25 0.2 0.5) l a b) l a b)', 'oklab(0.25 0.2 0.5)'], + + // Testing non-oklab origin to see conversion. + ['oklab(from color(display-p3 0 0 0) l a b / alpha)', 'oklab(0 0 0)'], + + // Testing replacement with 0. + ['oklab(from oklab(0.25 0.2 0.5) 0 0 0)', 'oklab(0 0 0)'], + ['oklab(from oklab(0.25 0.2 0.5) 0 0 0 / 0)', 'oklab(0 0 0 / 0)'], + ['oklab(from oklab(0.25 0.2 0.5) 0 a b / alpha)', 'oklab(0 0.2 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5) l 0 b / alpha)', 'oklab(0.25 0 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5) l a 0 / alpha)', 'oklab(0.25 0.2 0)'], + ['oklab(from oklab(0.25 0.2 0.5) l a b / 0)', 'oklab(0.25 0.2 0.5 / 0)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) 0 a b / alpha)', 'oklab(0 0.2 0.5 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l 0 b / alpha)', 'oklab(0.25 0 0.5 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0 / alpha)', 'oklab(0.25 0.2 0 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / 0)', 'oklab(0.25 0.2 0.5 / 0)'], + + // Testing replacement with a constant. + ['oklab(from oklab(0.25 0.2 0.5) 0.35 a b / alpha)', 'oklab(0.35 0.2 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5) l 0.35 b / alpha)', 'oklab(0.25 0.35 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5) l a 0.35 / alpha)', 'oklab(0.25 0.2 0.35)'], + ['oklab(from oklab(0.25 0.2 0.5) l a b / .35)', 'oklab(0.25 0.2 0.5 / 0.35)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) 0.35 a b / alpha)', 'oklab(0.35 0.2 0.5 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l 0.35 b / alpha)', 'oklab(0.25 0.35 0.5 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0.35 / alpha)', 'oklab(0.25 0.2 0.35 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / .35)', 'oklab(0.25 0.2 0.5 / 0.35)'], + ['oklab(from oklab(0.7 0.45 0.3 / 40%) 2 3 4 / 500)', 'oklab(1 3 4)'], + ['oklab(from oklab(0.7 0.45 0.3 / 40%) -2 -3 -4 / -500)', 'oklab(0 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['oklab(from oklab(0.25 0.2 0.5) l b a)', 'oklab(0.25 0.5 0.2)'], + ['oklab(from oklab(0.25 0.2 0.5) l a a / a)', 'oklab(0.25 0.2 0.2 / 0.2)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l b a)', 'oklab(0.25 0.5 0.2 / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a a / a)', 'oklab(0.25 0.2 0.2 / 0.2)'], + + // Testing with calc(). + ['oklab(from oklab(0.25 0.2 0.5) calc(l) calc(a) calc(b))', 'oklab(0.25 0.2 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) calc(l) calc(a) calc(b) / calc(alpha))', 'oklab(0.25 0.2 0.5 / 0.4)'], + + // Testing with 'none'. + ['oklab(from oklab(0.25 0.2 0.5) none none none)', 'oklab(none none none)'], + ['oklab(from oklab(0.25 0.2 0.5) none none none / none)', 'oklab(none none none / none)'], + ['oklab(from oklab(0.25 0.2 0.5) l a none)', 'oklab(0.25 0.2 none)'], + ['oklab(from oklab(0.25 0.2 0.5) l a none / alpha)', 'oklab(0.25 0.2 none)'], + ['oklab(from oklab(0.25 0.2 0.5) l a b / none)', 'oklab(0.25 0.2 0.5 / none)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a none / alpha)', 'oklab(0.25 0.2 none / 0.4)'], + ['oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / none)', 'oklab(0.25 0.2 0.5 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['oklab(from oklab(none none none) l a b)', 'oklab(0 0 0)'], + ['oklab(from oklab(none none none / none) l a b / alpha)', 'oklab(0 0 0 / 0)'], + ['oklab(from oklab(0.25 none 0.5) l a b)', 'oklab(0.25 0 0.5)'], + ['oklab(from oklab(0.25 0.2 0.5 / none) l a b / alpha)', 'oklab(0.25 0.2 0.5 / 0)'], + + // lab and oklab tests that require different results due to percent scaling differences. + ['lab(from lab(.7 45 30) calc(100 * alpha) b a / l)', 'lab(100 30 45 / 0.7)'], + ['lab(from lab(.7 45 30) calc(100 * alpha) a b / alpha)', 'lab(100 45 30)'], + ['lab(from lab(.7 45 30) calc(100 * alpha) a a / alpha)', 'lab(100 45 45)'], + ['lab(from lab(.7 45 30 / 40%) calc(100 * alpha) b a / l)', 'lab(40 30 45 / 0.7)'], + ['lab(from lab(.7 45 30 / 40%) calc(100 * alpha) a b / alpha)', 'lab(40 45 30 / 0.4)'], + ['lab(from lab(.7 45 30 / 40%) calc(100 * alpha) a a / alpha)', 'lab(40 45 45 / 0.4)'], + + ['oklab(from oklab(.7 0.45 0.3) alpha b a / l)', 'oklab(1 0.3 0.45 / 0.7)'], + ['oklab(from oklab(.7 0.45 0.3) alpha a b / alpha)', 'oklab(1 0.45 0.3)'], + ['oklab(from oklab(.7 0.45 0.3) alpha a a / alpha)', 'oklab(1 0.45 0.45)'], + ['oklab(from oklab(.7 0.45 0.3 / 40%) alpha b a / l)', 'oklab(0.4 0.3 0.45 / 0.7)'], + ['oklab(from oklab(.7 0.45 0.3 / 40%) alpha a b / alpha)', 'oklab(0.4 0.45 0.3 / 0.4)'], + ['oklab(from oklab(.7 0.45 0.3 / 40%) alpha a a / alpha)', 'oklab(0.4 0.45 0.45 / 0.4)'], + + // lch() + + // Testing no modifications. + ['lch(from lch(0.7 45 30) l c h)', 'lch(0.7 45 30)'], + ['lch(from lch(0.7 45 30) l c h / alpha)', 'lch(0.7 45 30)'], + ['lch(from lch(0.7 45 30 / 40%) l c h / alpha)', 'lch(0.7 45 30 / 0.4)'], + ['lch(from lch(200 300 400 / 500%) l c h / alpha)', 'lch(200 300 40)'], + ['lch(from lch(-200 -300 -400 / -500%) l c h / alpha)', 'lch(0 0 320 / 0)'], + + // Test nesting relative colors. + ['lch(from lch(from lch(0.7 45 30) l c h) l c h)', 'lch(0.7 45 30)'], + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + ['lch(from color(display-p3 0 0 0) l c h / alpha)', 'lch(0 0 0)'], + ['lch(from lab(0.7 45 30) l c h / alpha)', 'lch(0.7 54.08327 33.690067)'], + + // Testing replacement with 0. + ['lch(from lch(0.7 45 30) 0 0 0)', 'lch(0 0 0)'], + ['lch(from lch(0.7 45 30) 0 0 0deg)', 'lch(0 0 0)'], + ['lch(from lch(0.7 45 30) 0 0 0 / 0)', 'lch(0 0 0 / 0)'], + ['lch(from lch(0.7 45 30) 0 0 0deg / 0)', 'lch(0 0 0 / 0)'], + ['lch(from lch(0.7 45 30) 0 c h / alpha)', 'lch(0 45 30)'], + ['lch(from lch(0.7 45 30) l 0 h / alpha)', 'lch(0.7 0 30)'], + ['lch(from lch(0.7 45 30) l c 0 / alpha)', 'lch(0.7 45 0)'], + ['lch(from lch(0.7 45 30) l c 0deg / alpha)', 'lch(0.7 45 0)'], + ['lch(from lch(0.7 45 30) l c h / 0)', 'lch(0.7 45 30 / 0)'], + ['lch(from lch(0.7 45 30 / 40%) 0 c h / alpha)', 'lch(0 45 30 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l 0 h / alpha)', 'lch(0.7 0 30 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c 0 / alpha)', 'lch(0.7 45 0 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c 0deg / alpha)', 'lch(0.7 45 0 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c h / 0)', 'lch(0.7 45 30 / 0)'], + + // Testing replacement with a constant. + ['lch(from lch(0.7 45 30) 25 c h / alpha)', 'lch(25 45 30)'], + ['lch(from lch(0.7 45 30) l 25 h / alpha)', 'lch(0.7 25 30)'], + ['lch(from lch(0.7 45 30) l c 25 / alpha)', 'lch(0.7 45 25)'], + ['lch(from lch(0.7 45 30) l c 25deg / alpha)', 'lch(0.7 45 25)'], + ['lch(from lch(0.7 45 30) l c h / .25)', 'lch(0.7 45 30 / 0.25)'], + ['lch(from lch(0.7 45 30 / 40%) 25 c h / alpha)', 'lch(25 45 30 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l 25 h / alpha)', 'lch(0.7 25 30 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c 25 / alpha)', 'lch(0.7 45 25 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c 25deg / alpha)', 'lch(0.7 45 25 / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c h / .25)', 'lch(0.7 45 30 / 0.25)'], + ['lch(from lch(0.7 45 30 / 40%) 200 300 400 / 500)', 'lch(200 300 40)'], + ['lch(from lch(0.7 45 30 / 40%) -200 -300 -400 / -500)', 'lch(0 0 320 / 0)'], + ['lch(from lch(0.7 45 30 / 40%) 50 120 400deg / 500)', 'lch(50 120 40)'], + ['lch(from lch(0.7 45 30 / 40%) 50 120 -400deg / -500)', 'lch(50 120 320 / 0)'], + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is |. + ['lch(from lch(.7 45 30) l c c / alpha)', 'lch(0.7 45 45)'], + ['lch(from lch(.7 45 30 / 40%) l c c / alpha)', 'lch(0.7 45 45 / 0.4)'], + + // Testing with calc(). + ['lch(from lch(0.7 45 30) calc(l) calc(c) calc(h))', 'lch(0.7 45 30)'], + ['lch(from lch(0.7 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))', 'lch(0.7 45 30 / 0.4)'], + + // Testing with 'none'. + ['lch(from lch(0.7 45 30) none none none)', 'lch(none none none)'], + ['lch(from lch(0.7 45 30) none none none / none)', 'lch(none none none / none)'], + ['lch(from lch(0.7 45 30) l c none)', 'lch(0.7 45 none)'], + ['lch(from lch(0.7 45 30) l c none / alpha)', 'lch(0.7 45 none)'], + ['lch(from lch(0.7 45 30) l c h / none)', 'lch(0.7 45 30 / none)'], + ['lch(from lch(0.7 45 30 / 40%) l c none / alpha)', 'lch(0.7 45 none / 0.4)'], + ['lch(from lch(0.7 45 30 / 40%) l c h / none)', 'lch(0.7 45 30 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['lch(from lch(none none none) l c h)', 'lch(0 0 0)'], + ['lch(from lch(none none none / none) l c h / alpha)', 'lch(0 0 0 / 0)'], + ['lch(from lch(0.7 none 30) l c h)', 'lch(0.7 0 30)'], + ['lch(from lch(0.7 45 30 / none) l c h / alpha)', 'lch(0.7 45 30 / 0)'], + + // oklch() + + // Testing no modifications. + ['oklch(from oklch(0.7 0.45 30) l c h)', 'oklch(0.7 0.45 30)'], + ['oklch(from oklch(0.7 0.45 30) l c h / alpha)', 'oklch(0.7 0.45 30)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c h / alpha)', 'oklch(0.7 0.45 30 / 0.4)'], + ['oklch(from oklch(2 3 400 / 500%) l c h / alpha)', 'oklch(1 3 40)'], + ['oklch(from oklch(-2 -3 -400 / -500%) l c h / alpha)', 'oklch(0 0 320 / 0)'], + + // Test nesting relative colors. + ['oklch(from oklch(from oklch(0.7 0.45 30) l c h) l c h)', 'oklch(0.7 0.45 30)'], + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + ['oklch(from color(display-p3 0 0 0) l c h / alpha)', 'oklch(0 0 0)'], + // TODO: redo conversion with oklab(0.7 0.45 0.3) + ['oklch(from oklab(0.7 45 30) l c h / alpha)', 'oklch(0.7 54.08327 33.690067)'], + + // Testing replacement with 0. + ['oklch(from oklch(0.7 0.45 30) 0 0 0)', 'oklch(0 0 0)'], + ['oklch(from oklch(0.7 0.45 30) 0 0 0deg)', 'oklch(0 0 0)'], + ['oklch(from oklch(0.7 0.45 30) 0 0 0 / 0)', 'oklch(0 0 0 / 0)'], + ['oklch(from oklch(0.7 0.45 30) 0 0 0deg / 0)', 'oklch(0 0 0 / 0)'], + ['oklch(from oklch(0.7 0.45 30) 0 c h / alpha)', 'oklch(0 0.45 30)'], + ['oklch(from oklch(0.7 0.45 30) l 0 h / alpha)', 'oklch(0.7 0 30)'], + ['oklch(from oklch(0.7 0.45 30) l c 0 / alpha)', 'oklch(0.7 0.45 0)'], + ['oklch(from oklch(0.7 0.45 30) l c 0deg / alpha)', 'oklch(0.7 0.45 0)'], + ['oklch(from oklch(0.7 0.45 30) l c h / 0)', 'oklch(0.7 0.45 30 / 0)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) 0 c h / alpha)', 'oklch(0 0.45 30 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l 0 h / alpha)', 'oklch(0.7 0 30 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c 0 / alpha)', 'oklch(0.7 0.45 0 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c 0deg / alpha)', 'oklch(0.7 0.45 0 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c h / 0)', 'oklch(0.7 0.45 30 / 0)'], + + // Testing replacement with a constant. + ['oklch(from oklch(0.7 0.45 30) 0.25 c h / alpha)', 'oklch(0.25 0.45 30)'], + ['oklch(from oklch(0.7 0.45 30) l 0.25 h / alpha)', 'oklch(0.7 0.25 30)'], + ['oklch(from oklch(0.7 0.45 30) l c 25 / alpha)', 'oklch(0.7 0.45 25)'], + ['oklch(from oklch(0.7 0.45 30) l c 25deg / alpha)', 'oklch(0.7 0.45 25)'], + ['oklch(from oklch(0.7 0.45 30) l c h / .25)', 'oklch(0.7 0.45 30 / 0.25)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) 0.25 c h / alpha)', 'oklch(0.25 0.45 30 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l 0.25 h / alpha)', 'oklch(0.7 0.25 30 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c 25 / alpha)', 'oklch(0.7 0.45 25 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c 25deg / alpha)', 'oklch(0.7 0.45 25 / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c h / .25)', 'oklch(0.7 0.45 30 / 0.25)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) 2 3 400 / 500)', 'oklch(1 3 40)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) -2 -3 -400 / -500)', 'oklch(0 0 320 / 0)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 400deg / 500)', 'oklch(0.5 1.2 40)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 -400deg / -500)', 'oklch(0.5 1.2 320 / 0)'], + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is |. + ['oklch(from oklch(.7 0.45 30) l c c / alpha)', 'oklch(0.7 0.45 0.45)'], + ['oklch(from oklch(.7 0.45 30 / 40%) l c c / alpha)', 'oklch(0.7 0.45 0.45 / 0.4)'], + + // Testing with calc(). + ['oklch(from oklch(0.7 0.45 30) calc(l) calc(c) calc(h))', 'oklch(0.7 0.45 30)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))', 'oklch(0.7 0.45 30 / 0.4)'], + + // Testing with 'none'. + ['oklch(from oklch(0.7 0.45 30) none none none)', 'oklch(none none none)'], + ['oklch(from oklch(0.7 0.45 30) none none none / none)', 'oklch(none none none / none)'], + ['oklch(from oklch(0.7 0.45 30) l c none)', 'oklch(0.7 0.45 none)'], + ['oklch(from oklch(0.7 0.45 30) l c none / alpha)', 'oklch(0.7 0.45 none)'], + ['oklch(from oklch(0.7 0.45 30) l c h / none)', 'oklch(0.7 0.45 30 / none)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c none / alpha)', 'oklch(0.7 0.45 none / 0.4)'], + ['oklch(from oklch(0.7 0.45 30 / 40%) l c h / none)', 'oklch(0.7 0.45 30 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['oklch(from oklch(none none none) l c h)', 'oklch(0 0 0)'], + ['oklch(from oklch(none none none / none) l c h / alpha)', 'oklch(0 0 0 / 0)'], + ['oklch(from oklch(0.7 none 30) l c h)', 'oklch(0.7 0 30)'], + ['oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)', 'oklch(0.7 0.45 30 / 0)'], + + // lch and oklch tests that require different results due to percent scaling differences. + ['lch(from lch(.7 45 30) calc(100 * alpha) c h / l)', 'lch(100 45 30 / 0.7)'], + ['lch(from lch(.7 45 30) calc(100 * alpha) c h / alpha)', 'lch(100 45 30)'], + ['lch(from lch(.7 45 30) calc(100 * alpha) c c / alpha)', 'lch(100 45 45)'], + ['lch(from lch(.7 45 30 / 40%) calc(100 * alpha) c h / l)', 'lch(40 45 30 / 0.7)'], + ['lch(from lch(.7 45 30 / 40%) calc(100 * alpha) c h / alpha)', 'lch(40 45 30 / 0.4)'], + ['lch(from lch(.7 45 30 / 40%) calc(100 * alpha) c c / alpha)', 'lch(40 45 45 / 0.4)'], + + ['oklch(from oklch(.7 0.45 30) alpha c h / l)', 'oklch(1 0.45 30 / 0.7)'], + ['oklch(from oklch(.7 0.45 30) alpha c h / alpha)', 'oklch(1 0.45 30)'], + ['oklch(from oklch(.7 0.45 30) alpha c c / alpha)', 'oklch(1 0.45 0.45)'], + ['oklch(from oklch(.7 0.45 30 / 40%) alpha c h / l)', 'oklch(0.4 0.45 30 / 0.7)'], + ['oklch(from oklch(.7 0.45 30 / 40%) alpha c h / alpha)', 'oklch(0.4 0.45 30 / 0.4)'], + ['oklch(from oklch(.7 0.45 30 / 40%) alpha c c / alpha)', 'oklch(0.4 0.45 0.45 / 0.4)'], + + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b)', 'color(srgb 0.7 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / alpha)', 'color(srgb 0.7 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b)', 'color(srgb 0.7 0.5 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / alpha)', 'color(srgb 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(srgb 0.7 0.5 0.3) srgb r g b) srgb r g b)', 'color(srgb 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0)', 'color(srgb 0 0 0)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0 / 0)', 'color(srgb 0 0 0 / 0)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 0 g b / alpha)', 'color(srgb 0 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r 0 b / alpha)', 'color(srgb 0.7 0 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g 0 / alpha)', 'color(srgb 0.7 0.5 0)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / 0)', 'color(srgb 0.7 0.5 0.3 / 0)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 0 g b / alpha)', 'color(srgb 0 0.5 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 0 b / alpha)', 'color(srgb 0.7 0 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 0 / alpha)', 'color(srgb 0.7 0.5 0 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 0)', 'color(srgb 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(srgb 0.7 0.5 0.3) srgb 0.2 g b / alpha)', 'color(srgb 0.2 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 20% g b / alpha)', 'color(srgb 0.2 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r 0.2 b / alpha)', 'color(srgb 0.7 0.2 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r 20% b / alpha)', 'color(srgb 0.7 0.2 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g 0.2 / alpha)', 'color(srgb 0.7 0.5 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g 20% / alpha)', 'color(srgb 0.7 0.5 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / 0.2)', 'color(srgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / 20%)', 'color(srgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 0.2 g b / alpha)', 'color(srgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 20% g b / alpha)', 'color(srgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 0.2 b / alpha)', 'color(srgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 20% b / alpha)', 'color(srgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 0.2 / alpha)', 'color(srgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 20% / alpha)', 'color(srgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 0.2)', 'color(srgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 20%)', 'color(srgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 2 3 4)', 'color(srgb 2 3 4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 2 3 4 / 5)', 'color(srgb 2 3 4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb -2 -3 -4)', 'color(srgb -2 -3 -4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb -2 -3 -4 / -5)', 'color(srgb -2 -3 -4 / 0)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 200% 300% 400%)', 'color(srgb 2 3 4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb 200% 300% 400% / 500%)', 'color(srgb 2 3 4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb -200% -300% -400%)', 'color(srgb -2 -3 -4)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb -200% -300% -400% / -500%)', 'color(srgb -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(srgb 0.7 0.5 0.3) srgb g b r)', 'color(srgb 0.5 0.3 0.7)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb b alpha r / g)', 'color(srgb 0.3 1 0.7 / 0.5)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r r r / r)', 'color(srgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb alpha alpha alpha / alpha)', 'color(srgb 1 1 1)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb g b r)', 'color(srgb 0.5 0.3 0.7 / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb b alpha r / g)', 'color(srgb 0.3 0.4 0.7 / 0.5)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r r r / r)', 'color(srgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb alpha alpha alpha / alpha)', 'color(srgb 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(srgb 1.7 1.5 1.3) srgb r g b)', 'color(srgb 1.7 1.5 1.3)'], + ['color(from color(srgb 1.7 1.5 1.3) srgb r g b / alpha)', 'color(srgb 1.7 1.5 1.3)'], + ['color(from color(srgb 1.7 1.5 1.3 / 140%) srgb r g b)', 'color(srgb 1.7 1.5 1.3)'], + ['color(from color(srgb 1.7 1.5 1.3 / 140%) srgb r g b / alpha)', 'color(srgb 1.7 1.5 1.3)'], + ['color(from color(srgb -0.7 -0.5 -0.3) srgb r g b)', 'color(srgb -0.7 -0.5 -0.3)'], + ['color(from color(srgb -0.7 -0.5 -0.3) srgb r g b / alpha)', 'color(srgb -0.7 -0.5 -0.3)'], + ['color(from color(srgb -0.7 -0.5 -0.3 / -40%) srgb r g b)', 'color(srgb -0.7 -0.5 -0.3 / 0)'], + ['color(from color(srgb -0.7 -0.5 -0.3 / -40%) srgb r g b / alpha)', 'color(srgb -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(srgb 0.7 0.5 0.3) srgb calc(r) calc(g) calc(b))', 'color(srgb 0.7 0.5 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb calc(r) calc(g) calc(b) / calc(alpha))', 'color(srgb 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(srgb 0.7 0.5 0.3) srgb none none none)', 'color(srgb none none none)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb none none none / none)', 'color(srgb none none none / none)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g none)', 'color(srgb 0.7 0.5 none)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g none / alpha)', 'color(srgb 0.7 0.5 none)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / none)', 'color(srgb 0.7 0.5 0.3 / none)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g none / alpha)', 'color(srgb 0.7 0.5 none / 0.4)'], + ['color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / none)', 'color(srgb 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(srgb none none none) srgb r g b)', 'color(srgb 0 0 0)'], + ['color(from color(srgb none none none / none) srgb r g b / alpha)', 'color(srgb 0 0 0 / 0)'], + ['color(from color(srgb 0.7 none 0.3) srgb r g b)', 'color(srgb 0.7 0 0.3)'], + ['color(from color(srgb 0.7 0.5 0.3 / none) srgb r g b / alpha)', 'color(srgb 0.7 0.5 0.3 / 0)'], + + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b)', 'color(srgb-linear 0.7 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / alpha)', 'color(srgb-linear 0.7 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b)', 'color(srgb-linear 0.7 0.5 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b / alpha)', 'color(srgb-linear 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b) srgb-linear r g b)', 'color(srgb-linear 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 0 0 0)', 'color(srgb-linear 0 0 0)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 0 0 0 / 0)', 'color(srgb-linear 0 0 0 / 0)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 0 g b / alpha)', 'color(srgb-linear 0 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r 0 b / alpha)', 'color(srgb-linear 0.7 0 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g 0 / alpha)', 'color(srgb-linear 0.7 0.5 0)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / 0)', 'color(srgb-linear 0.7 0.5 0.3 / 0)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear 0 g b / alpha)', 'color(srgb-linear 0 0.5 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r 0 b / alpha)', 'color(srgb-linear 0.7 0 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g 0 / alpha)', 'color(srgb-linear 0.7 0.5 0 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b / 0)', 'color(srgb-linear 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 0.2 g b / alpha)', 'color(srgb-linear 0.2 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 20% g b / alpha)', 'color(srgb-linear 0.2 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r 0.2 b / alpha)', 'color(srgb-linear 0.7 0.2 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r 20% b / alpha)', 'color(srgb-linear 0.7 0.2 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g 0.2 / alpha)', 'color(srgb-linear 0.7 0.5 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g 20% / alpha)', 'color(srgb-linear 0.7 0.5 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / 0.2)', 'color(srgb-linear 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / 20%)', 'color(srgb-linear 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear 0.2 g b / alpha)', 'color(srgb-linear 0.2 0.5 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear 20% g b / alpha)', 'color(srgb-linear 0.2 0.5 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r 0.2 b / alpha)', 'color(srgb-linear 0.7 0.2 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r 20% b / alpha)', 'color(srgb-linear 0.7 0.2 0.3 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g 0.2 / alpha)', 'color(srgb-linear 0.7 0.5 0.2 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g 20% / alpha)', 'color(srgb-linear 0.7 0.5 0.2 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b / 0.2)', 'color(srgb-linear 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b / 20%)', 'color(srgb-linear 0.7 0.5 0.3 / 0.2)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 2 3 4)', 'color(srgb-linear 2 3 4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 2 3 4 / 5)', 'color(srgb-linear 2 3 4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear -2 -3 -4)', 'color(srgb-linear -2 -3 -4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear -2 -3 -4 / -5)', 'color(srgb-linear -2 -3 -4 / 0)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 200% 300% 400%)', 'color(srgb-linear 2 3 4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear 200% 300% 400% / 500%)', 'color(srgb-linear 2 3 4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear -200% -300% -400%)', 'color(srgb-linear -2 -3 -4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear -200% -300% -400% / -500%)', 'color(srgb-linear -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear g b r)', 'color(srgb-linear 0.5 0.3 0.7)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear b alpha r / g)', 'color(srgb-linear 0.3 1 0.7 / 0.5)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r r r / r)', 'color(srgb-linear 0.7 0.7 0.7 / 0.7)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear alpha alpha alpha / alpha)', 'color(srgb-linear 1 1 1)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear g b r)', 'color(srgb-linear 0.5 0.3 0.7 / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear b alpha r / g)', 'color(srgb-linear 0.3 0.4 0.7 / 0.5)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r r r / r)', 'color(srgb-linear 0.7 0.7 0.7 / 0.7)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear alpha alpha alpha / alpha)', 'color(srgb-linear 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(srgb-linear 1.7 1.5 1.3) srgb-linear r g b)', 'color(srgb-linear 1.7 1.5 1.3)'], + ['color(from color(srgb-linear 1.7 1.5 1.3) srgb-linear r g b / alpha)', 'color(srgb-linear 1.7 1.5 1.3)'], + ['color(from color(srgb-linear 1.7 1.5 1.3 / 140%) srgb-linear r g b)', 'color(srgb-linear 1.7 1.5 1.3)'], + ['color(from color(srgb-linear 1.7 1.5 1.3 / 140%) srgb-linear r g b / alpha)', 'color(srgb-linear 1.7 1.5 1.3)'], + ['color(from color(srgb-linear -0.7 -0.5 -0.3) srgb-linear r g b)', 'color(srgb-linear -0.7 -0.5 -0.3)'], + ['color(from color(srgb-linear -0.7 -0.5 -0.3) srgb-linear r g b / alpha)', 'color(srgb-linear -0.7 -0.5 -0.3)'], + ['color(from color(srgb-linear -0.7 -0.5 -0.3 / -40%) srgb-linear r g b)', 'color(srgb-linear -0.7 -0.5 -0.3 / 0)'], + ['color(from color(srgb-linear -0.7 -0.5 -0.3 / -40%) srgb-linear r g b / alpha)', 'color(srgb-linear -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear calc(r) calc(g) calc(b))', 'color(srgb-linear 0.7 0.5 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear calc(r) calc(g) calc(b) / calc(alpha))', 'color(srgb-linear 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear none none none)', 'color(srgb-linear none none none)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear none none none / none)', 'color(srgb-linear none none none / none)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g none)', 'color(srgb-linear 0.7 0.5 none)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g none / alpha)', 'color(srgb-linear 0.7 0.5 none)'], + ['color(from color(srgb-linear 0.7 0.5 0.3) srgb-linear r g b / none)', 'color(srgb-linear 0.7 0.5 0.3 / none)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g none / alpha)', 'color(srgb-linear 0.7 0.5 none / 0.4)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / 40%) srgb-linear r g b / none)', 'color(srgb-linear 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(srgb-linear none none none) srgb-linear r g b)', 'color(srgb-linear 0 0 0)'], + ['color(from color(srgb-linear none none none / none) srgb-linear r g b / alpha)', 'color(srgb-linear 0 0 0 / 0)'], + ['color(from color(srgb-linear 0.7 none 0.3) srgb-linear r g b)', 'color(srgb-linear 0.7 0 0.3)'], + ['color(from color(srgb-linear 0.7 0.5 0.3 / none) srgb-linear r g b / alpha)', 'color(srgb-linear 0.7 0.5 0.3 / 0)'], + + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b)', 'color(a98-rgb 0.7 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha)', 'color(a98-rgb 0.7 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b)', 'color(a98-rgb 0.7 0.5 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / alpha)', 'color(a98-rgb 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b) a98-rgb r g b)', 'color(a98-rgb 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0)', 'color(a98-rgb 0 0 0)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0 / 0)', 'color(a98-rgb 0 0 0 / 0)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 g b / alpha)', 'color(a98-rgb 0 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 0 b / alpha)', 'color(a98-rgb 0.7 0 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 0 / alpha)', 'color(a98-rgb 0.7 0.5 0)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 0)', 'color(a98-rgb 0.7 0.5 0.3 / 0)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 0 g b / alpha)', 'color(a98-rgb 0 0.5 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 0 b / alpha)', 'color(a98-rgb 0.7 0 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 0 / alpha)', 'color(a98-rgb 0.7 0.5 0 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 0)', 'color(a98-rgb 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0.2 g b / alpha)', 'color(a98-rgb 0.2 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 20% g b / alpha)', 'color(a98-rgb 0.2 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 0.2 b / alpha)', 'color(a98-rgb 0.7 0.2 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 20% b / alpha)', 'color(a98-rgb 0.7 0.2 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 0.2 / alpha)', 'color(a98-rgb 0.7 0.5 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 20% / alpha)', 'color(a98-rgb 0.7 0.5 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 0.2)', 'color(a98-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 20%)', 'color(a98-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 0.2 g b / alpha)', 'color(a98-rgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 20% g b / alpha)', 'color(a98-rgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 0.2 b / alpha)', 'color(a98-rgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 20% b / alpha)', 'color(a98-rgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 0.2 / alpha)', 'color(a98-rgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 20% / alpha)', 'color(a98-rgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 0.2)', 'color(a98-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 20%)', 'color(a98-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 2 3 4)', 'color(a98-rgb 2 3 4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 2 3 4 / 5)', 'color(a98-rgb 2 3 4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb -2 -3 -4)', 'color(a98-rgb -2 -3 -4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb -2 -3 -4 / -5)', 'color(a98-rgb -2 -3 -4 / 0)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 200% 300% 400%)', 'color(a98-rgb 2 3 4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 200% 300% 400% / 500%)', 'color(a98-rgb 2 3 4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb -200% -300% -400%)', 'color(a98-rgb -2 -3 -4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb -200% -300% -400% / -500%)', 'color(a98-rgb -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb g b r)', 'color(a98-rgb 0.5 0.3 0.7)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb b alpha r / g)', 'color(a98-rgb 0.3 1 0.7 / 0.5)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r r r / r)', 'color(a98-rgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb alpha alpha alpha / alpha)', 'color(a98-rgb 1 1 1)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb g b r)', 'color(a98-rgb 0.5 0.3 0.7 / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb b alpha r / g)', 'color(a98-rgb 0.3 0.4 0.7 / 0.5)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r r r / r)', 'color(a98-rgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb alpha alpha alpha / alpha)', 'color(a98-rgb 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(a98-rgb 1.7 1.5 1.3) a98-rgb r g b)', 'color(a98-rgb 1.7 1.5 1.3)'], + ['color(from color(a98-rgb 1.7 1.5 1.3) a98-rgb r g b / alpha)', 'color(a98-rgb 1.7 1.5 1.3)'], + ['color(from color(a98-rgb 1.7 1.5 1.3 / 140%) a98-rgb r g b)', 'color(a98-rgb 1.7 1.5 1.3)'], + ['color(from color(a98-rgb 1.7 1.5 1.3 / 140%) a98-rgb r g b / alpha)', 'color(a98-rgb 1.7 1.5 1.3)'], + ['color(from color(a98-rgb -0.7 -0.5 -0.3) a98-rgb r g b)', 'color(a98-rgb -0.7 -0.5 -0.3)'], + ['color(from color(a98-rgb -0.7 -0.5 -0.3) a98-rgb r g b / alpha)', 'color(a98-rgb -0.7 -0.5 -0.3)'], + ['color(from color(a98-rgb -0.7 -0.5 -0.3 / -40%) a98-rgb r g b)', 'color(a98-rgb -0.7 -0.5 -0.3 / 0)'], + ['color(from color(a98-rgb -0.7 -0.5 -0.3 / -40%) a98-rgb r g b / alpha)', 'color(a98-rgb -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb calc(r) calc(g) calc(b))', 'color(a98-rgb 0.7 0.5 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb calc(r) calc(g) calc(b) / calc(alpha))', 'color(a98-rgb 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb none none none)', 'color(a98-rgb none none none)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb none none none / none)', 'color(a98-rgb none none none / none)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g none)', 'color(a98-rgb 0.7 0.5 none)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g none / alpha)', 'color(a98-rgb 0.7 0.5 none)'], + ['color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none)', 'color(a98-rgb 0.7 0.5 0.3 / none)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g none / alpha)', 'color(a98-rgb 0.7 0.5 none / 0.4)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / none)', 'color(a98-rgb 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(a98-rgb none none none) a98-rgb r g b)', 'color(a98-rgb 0 0 0)'], + ['color(from color(a98-rgb none none none / none) a98-rgb r g b / alpha)', 'color(a98-rgb 0 0 0 / 0)'], + ['color(from color(a98-rgb 0.7 none 0.3) a98-rgb r g b)', 'color(a98-rgb 0.7 0 0.3)'], + ['color(from color(a98-rgb 0.7 0.5 0.3 / none) a98-rgb r g b / alpha)', 'color(a98-rgb 0.7 0.5 0.3 / 0)'], + + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b)', 'color(rec2020 0.7 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / alpha)', 'color(rec2020 0.7 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b)', 'color(rec2020 0.7 0.5 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / alpha)', 'color(rec2020 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b) rec2020 r g b)', 'color(rec2020 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0)', 'color(rec2020 0 0 0)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0 / 0)', 'color(rec2020 0 0 0 / 0)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 0 g b / alpha)', 'color(rec2020 0 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r 0 b / alpha)', 'color(rec2020 0.7 0 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 0 / alpha)', 'color(rec2020 0.7 0.5 0)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 0)', 'color(rec2020 0.7 0.5 0.3 / 0)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 0 g b / alpha)', 'color(rec2020 0 0.5 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 0 b / alpha)', 'color(rec2020 0.7 0 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 0 / alpha)', 'color(rec2020 0.7 0.5 0 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 0)', 'color(rec2020 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 0.2 g b / alpha)', 'color(rec2020 0.2 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 20% g b / alpha)', 'color(rec2020 0.2 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r 0.2 b / alpha)', 'color(rec2020 0.7 0.2 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r 20% b / alpha)', 'color(rec2020 0.7 0.2 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 0.2 / alpha)', 'color(rec2020 0.7 0.5 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 20% / alpha)', 'color(rec2020 0.7 0.5 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 0.2)', 'color(rec2020 0.7 0.5 0.3 / 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 20%)', 'color(rec2020 0.7 0.5 0.3 / 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 0.2 g b / alpha)', 'color(rec2020 0.2 0.5 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 20% g b / alpha)', 'color(rec2020 0.2 0.5 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 0.2 b / alpha)', 'color(rec2020 0.7 0.2 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 20% b / alpha)', 'color(rec2020 0.7 0.2 0.3 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 0.2 / alpha)', 'color(rec2020 0.7 0.5 0.2 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 20% / alpha)', 'color(rec2020 0.7 0.5 0.2 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 0.2)', 'color(rec2020 0.7 0.5 0.3 / 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 20%)', 'color(rec2020 0.7 0.5 0.3 / 0.2)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 2 3 4)', 'color(rec2020 2 3 4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 2 3 4 / 5)', 'color(rec2020 2 3 4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 -2 -3 -4)', 'color(rec2020 -2 -3 -4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 -2 -3 -4 / -5)', 'color(rec2020 -2 -3 -4 / 0)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 200% 300% 400%)', 'color(rec2020 2 3 4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 200% 300% 400% / 500%)', 'color(rec2020 2 3 4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 -200% -300% -400%)', 'color(rec2020 -2 -3 -4)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 -200% -300% -400% / -500%)', 'color(rec2020 -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 g b r)', 'color(rec2020 0.5 0.3 0.7)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 b alpha r / g)', 'color(rec2020 0.3 1 0.7 / 0.5)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r r r / r)', 'color(rec2020 0.7 0.7 0.7 / 0.7)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 alpha alpha alpha / alpha)', 'color(rec2020 1 1 1)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 g b r)', 'color(rec2020 0.5 0.3 0.7 / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 b alpha r / g)', 'color(rec2020 0.3 0.4 0.7 / 0.5)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r r r / r)', 'color(rec2020 0.7 0.7 0.7 / 0.7)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 alpha alpha alpha / alpha)', 'color(rec2020 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(rec2020 1.7 1.5 1.3) rec2020 r g b)', 'color(rec2020 1.7 1.5 1.3)'], + ['color(from color(rec2020 1.7 1.5 1.3) rec2020 r g b / alpha)', 'color(rec2020 1.7 1.5 1.3)'], + ['color(from color(rec2020 1.7 1.5 1.3 / 140%) rec2020 r g b)', 'color(rec2020 1.7 1.5 1.3)'], + ['color(from color(rec2020 1.7 1.5 1.3 / 140%) rec2020 r g b / alpha)', 'color(rec2020 1.7 1.5 1.3)'], + ['color(from color(rec2020 -0.7 -0.5 -0.3) rec2020 r g b)', 'color(rec2020 -0.7 -0.5 -0.3)'], + ['color(from color(rec2020 -0.7 -0.5 -0.3) rec2020 r g b / alpha)', 'color(rec2020 -0.7 -0.5 -0.3)'], + ['color(from color(rec2020 -0.7 -0.5 -0.3 / -40%) rec2020 r g b)', 'color(rec2020 -0.7 -0.5 -0.3 / 0)'], + ['color(from color(rec2020 -0.7 -0.5 -0.3 / -40%) rec2020 r g b / alpha)', 'color(rec2020 -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 calc(r) calc(g) calc(b))', 'color(rec2020 0.7 0.5 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 calc(r) calc(g) calc(b) / calc(alpha))', 'color(rec2020 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 none none none)', 'color(rec2020 none none none)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 none none none / none)', 'color(rec2020 none none none / none)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g none)', 'color(rec2020 0.7 0.5 none)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g none / alpha)', 'color(rec2020 0.7 0.5 none)'], + ['color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / none)', 'color(rec2020 0.7 0.5 0.3 / none)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g none / alpha)', 'color(rec2020 0.7 0.5 none / 0.4)'], + ['color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / none)', 'color(rec2020 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(rec2020 none none none) rec2020 r g b)', 'color(rec2020 0 0 0)'], + ['color(from color(rec2020 none none none / none) rec2020 r g b / alpha)', 'color(rec2020 0 0 0 / 0)'], + ['color(from color(rec2020 0.7 none 0.3) rec2020 r g b)', 'color(rec2020 0.7 0 0.3)'], + ['color(from color(rec2020 0.7 0.5 0.3 / none) rec2020 r g b / alpha)', 'color(rec2020 0.7 0.5 0.3 / 0)'], + + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b)', 'color(prophoto-rgb 0.7 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 0.7 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b) prophoto-rgb r g b)', 'color(prophoto-rgb 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0)', 'color(prophoto-rgb 0 0 0)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0 / 0)', 'color(prophoto-rgb 0 0 0 / 0)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 g b / alpha)', 'color(prophoto-rgb 0 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 0 b / alpha)', 'color(prophoto-rgb 0.7 0 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 0 / alpha)', 'color(prophoto-rgb 0.7 0.5 0)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 0)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 0 g b / alpha)', 'color(prophoto-rgb 0 0.5 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 0 b / alpha)', 'color(prophoto-rgb 0.7 0 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 0 / alpha)', 'color(prophoto-rgb 0.7 0.5 0 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 0)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0.2 g b / alpha)', 'color(prophoto-rgb 0.2 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 20% g b / alpha)', 'color(prophoto-rgb 0.2 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 0.2 b / alpha)', 'color(prophoto-rgb 0.7 0.2 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 20% b / alpha)', 'color(prophoto-rgb 0.7 0.2 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 0.2 / alpha)', 'color(prophoto-rgb 0.7 0.5 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 20% / alpha)', 'color(prophoto-rgb 0.7 0.5 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 0.2)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 20%)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 0.2 g b / alpha)', 'color(prophoto-rgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 20% g b / alpha)', 'color(prophoto-rgb 0.2 0.5 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 0.2 b / alpha)', 'color(prophoto-rgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 20% b / alpha)', 'color(prophoto-rgb 0.7 0.2 0.3 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 0.2 / alpha)', 'color(prophoto-rgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 20% / alpha)', 'color(prophoto-rgb 0.7 0.5 0.2 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 0.2)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 20%)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.2)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 2 3 4)', 'color(prophoto-rgb 2 3 4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 2 3 4 / 5)', 'color(prophoto-rgb 2 3 4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb -2 -3 -4)', 'color(prophoto-rgb -2 -3 -4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb -2 -3 -4 / -5)', 'color(prophoto-rgb -2 -3 -4 / 0)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 200% 300% 400%)', 'color(prophoto-rgb 2 3 4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 200% 300% 400% / 500%)', 'color(prophoto-rgb 2 3 4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb -200% -300% -400%)', 'color(prophoto-rgb -2 -3 -4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb -200% -300% -400% / -500%)', 'color(prophoto-rgb -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb g b r)', 'color(prophoto-rgb 0.5 0.3 0.7)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb b alpha r / g)', 'color(prophoto-rgb 0.3 1 0.7 / 0.5)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r r r / r)', 'color(prophoto-rgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb alpha alpha alpha / alpha)', 'color(prophoto-rgb 1 1 1)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb g b r)', 'color(prophoto-rgb 0.5 0.3 0.7 / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb b alpha r / g)', 'color(prophoto-rgb 0.3 0.4 0.7 / 0.5)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r r r / r)', 'color(prophoto-rgb 0.7 0.7 0.7 / 0.7)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb alpha alpha alpha / alpha)', 'color(prophoto-rgb 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(prophoto-rgb 1.7 1.5 1.3) prophoto-rgb r g b)', 'color(prophoto-rgb 1.7 1.5 1.3)'], + ['color(from color(prophoto-rgb 1.7 1.5 1.3) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 1.7 1.5 1.3)'], + ['color(from color(prophoto-rgb 1.7 1.5 1.3 / 140%) prophoto-rgb r g b)', 'color(prophoto-rgb 1.7 1.5 1.3)'], + ['color(from color(prophoto-rgb 1.7 1.5 1.3 / 140%) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 1.7 1.5 1.3)'], + ['color(from color(prophoto-rgb -0.7 -0.5 -0.3) prophoto-rgb r g b)', 'color(prophoto-rgb -0.7 -0.5 -0.3)'], + ['color(from color(prophoto-rgb -0.7 -0.5 -0.3) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb -0.7 -0.5 -0.3)'], + ['color(from color(prophoto-rgb -0.7 -0.5 -0.3 / -40%) prophoto-rgb r g b)', 'color(prophoto-rgb -0.7 -0.5 -0.3 / 0)'], + ['color(from color(prophoto-rgb -0.7 -0.5 -0.3 / -40%) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb calc(r) calc(g) calc(b))', 'color(prophoto-rgb 0.7 0.5 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb calc(r) calc(g) calc(b) / calc(alpha))', 'color(prophoto-rgb 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb none none none)', 'color(prophoto-rgb none none none)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb none none none / none)', 'color(prophoto-rgb none none none / none)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none)', 'color(prophoto-rgb 0.7 0.5 none)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none / alpha)', 'color(prophoto-rgb 0.7 0.5 none)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / none)', 'color(prophoto-rgb 0.7 0.5 0.3 / none)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g none / alpha)', 'color(prophoto-rgb 0.7 0.5 none / 0.4)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / none)', 'color(prophoto-rgb 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(prophoto-rgb none none none) prophoto-rgb r g b)', 'color(prophoto-rgb 0 0 0)'], + ['color(from color(prophoto-rgb none none none / none) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 0 0 0 / 0)'], + ['color(from color(prophoto-rgb 0.7 none 0.3) prophoto-rgb r g b)', 'color(prophoto-rgb 0.7 0 0.3)'], + ['color(from color(prophoto-rgb 0.7 0.5 0.3 / none) prophoto-rgb r g b / alpha)', 'color(prophoto-rgb 0.7 0.5 0.3 / 0)'], + + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b)', 'color(display-p3 0.7 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b / alpha)', 'color(display-p3 0.7 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b)', 'color(display-p3 0.7 0.5 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b / alpha)', 'color(display-p3 0.7 0.5 0.3 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b) display-p3 r g b)', 'color(display-p3 0.7 0.5 0.3)'], + + // Testing replacement with 0. + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 0 0 0)', 'color(display-p3 0 0 0)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 0 0 0 / 0)', 'color(display-p3 0 0 0 / 0)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 0 g b / alpha)', 'color(display-p3 0 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r 0 b / alpha)', 'color(display-p3 0.7 0 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g 0 / alpha)', 'color(display-p3 0.7 0.5 0)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b / 0)', 'color(display-p3 0.7 0.5 0.3 / 0)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 0 g b / alpha)', 'color(display-p3 0 0.5 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r 0 b / alpha)', 'color(display-p3 0.7 0 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g 0 / alpha)', 'color(display-p3 0.7 0.5 0 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b / 0)', 'color(display-p3 0.7 0.5 0.3 / 0)'], + + // Testing replacement with a constant. + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 0.2 g b / alpha)', 'color(display-p3 0.2 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 20% g b / alpha)', 'color(display-p3 0.2 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r 0.2 b / alpha)', 'color(display-p3 0.7 0.2 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r 20% b / alpha)', 'color(display-p3 0.7 0.2 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g 0.2 / alpha)', 'color(display-p3 0.7 0.5 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g 20% / alpha)', 'color(display-p3 0.7 0.5 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b / 0.2)', 'color(display-p3 0.7 0.5 0.3 / 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b / 20%)', 'color(display-p3 0.7 0.5 0.3 / 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 0.2 g b / alpha)', 'color(display-p3 0.2 0.5 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 20% g b / alpha)', 'color(display-p3 0.2 0.5 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r 0.2 b / alpha)', 'color(display-p3 0.7 0.2 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r 20% b / alpha)', 'color(display-p3 0.7 0.2 0.3 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g 0.2 / alpha)', 'color(display-p3 0.7 0.5 0.2 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g 20% / alpha)', 'color(display-p3 0.7 0.5 0.2 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b / 0.2)', 'color(display-p3 0.7 0.5 0.3 / 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b / 20%)', 'color(display-p3 0.7 0.5 0.3 / 0.2)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 2 3 4)', 'color(display-p3 2 3 4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 2 3 4 / 5)', 'color(display-p3 2 3 4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 -2 -3 -4)', 'color(display-p3 -2 -3 -4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 -2 -3 -4 / -5)', 'color(display-p3 -2 -3 -4 / 0)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 200% 300% 400%)', 'color(display-p3 2 3 4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 200% 300% 400% / 500%)', 'color(display-p3 2 3 4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 -200% -300% -400%)', 'color(display-p3 -2 -3 -4)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 -200% -300% -400% / -500%)', 'color(display-p3 -2 -3 -4 / 0)'], + + // Testing valid permutation (types match). + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 g b r)', 'color(display-p3 0.5 0.3 0.7)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 b alpha r / g)', 'color(display-p3 0.3 1 0.7 / 0.5)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r r r / r)', 'color(display-p3 0.7 0.7 0.7 / 0.7)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 alpha alpha alpha / alpha)', 'color(display-p3 1 1 1)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 g b r)', 'color(display-p3 0.5 0.3 0.7 / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 b alpha r / g)', 'color(display-p3 0.3 0.4 0.7 / 0.5)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r r r / r)', 'color(display-p3 0.7 0.7 0.7 / 0.7)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 alpha alpha alpha / alpha)', 'color(display-p3 0.4 0.4 0.4 / 0.4)'], + + // Testing out of gamut components. + ['color(from color(display-p3 1.7 1.5 1.3) display-p3 r g b)', 'color(display-p3 1.7 1.5 1.3)'], + ['color(from color(display-p3 1.7 1.5 1.3) display-p3 r g b / alpha)', 'color(display-p3 1.7 1.5 1.3)'], + ['color(from color(display-p3 1.7 1.5 1.3 / 140%) display-p3 r g b)', 'color(display-p3 1.7 1.5 1.3)'], + ['color(from color(display-p3 1.7 1.5 1.3 / 140%) display-p3 r g b / alpha)', 'color(display-p3 1.7 1.5 1.3)'], + ['color(from color(display-p3 -0.7 -0.5 -0.3) display-p3 r g b)', 'color(display-p3 -0.7 -0.5 -0.3)'], + ['color(from color(display-p3 -0.7 -0.5 -0.3) display-p3 r g b / alpha)', 'color(display-p3 -0.7 -0.5 -0.3)'], + ['color(from color(display-p3 -0.7 -0.5 -0.3 / -40%) display-p3 r g b)', 'color(display-p3 -0.7 -0.5 -0.3 / 0)'], + ['color(from color(display-p3 -0.7 -0.5 -0.3 / -40%) display-p3 r g b / alpha)', 'color(display-p3 -0.7 -0.5 -0.3 / 0)'], + + // Testing with calc(). + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 calc(r) calc(g) calc(b))', 'color(display-p3 0.7 0.5 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 calc(r) calc(g) calc(b) / calc(alpha))', 'color(display-p3 0.7 0.5 0.3 / 0.4)'], + + // Testing with 'none'. + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 none none none)', 'color(display-p3 none none none)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 none none none / none)', 'color(display-p3 none none none / none)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g none)', 'color(display-p3 0.7 0.5 none)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g none / alpha)', 'color(display-p3 0.7 0.5 none)'], + ['color(from color(display-p3 0.7 0.5 0.3) display-p3 r g b / none)', 'color(display-p3 0.7 0.5 0.3 / none)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g none / alpha)', 'color(display-p3 0.7 0.5 none / 0.4)'], + ['color(from color(display-p3 0.7 0.5 0.3 / 40%) display-p3 r g b / none)', 'color(display-p3 0.7 0.5 0.3 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(display-p3 none none none) display-p3 r g b)', 'color(display-p3 0 0 0)'], + ['color(from color(display-p3 none none none / none) display-p3 r g b / alpha)', 'color(display-p3 0 0 0 / 0)'], + ['color(from color(display-p3 0.7 none 0.3) display-p3 r g b)', 'color(display-p3 0.7 0 0.3)'], + ['color(from color(display-p3 0.7 0.5 0.3 / none) display-p3 r g b / alpha)', 'color(display-p3 0.7 0.5 0.3 / 0)'], + + ['color(from color(xyz 7 -20.5 100) xyz x y z)', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / alpha)', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y z)', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / alpha)', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(xyz 7 -20.5 100) xyz x y z) xyz x y z)', 'color(xyz-d65 7 -20.5 100)'], + + // Testing replacement with 0. + ['color(from color(xyz 7 -20.5 100) xyz 0 0 0)', 'color(xyz-d65 0 0 0)'], + ['color(from color(xyz 7 -20.5 100) xyz 0 0 0 / 0)', 'color(xyz-d65 0 0 0 / 0)'], + ['color(from color(xyz 7 -20.5 100) xyz 0 y z / alpha)', 'color(xyz-d65 0 -20.5 100)'], + ['color(from color(xyz 7 -20.5 100) xyz x 0 z / alpha)', 'color(xyz-d65 7 0 100)'], + ['color(from color(xyz 7 -20.5 100) xyz x y 0 / alpha)', 'color(xyz-d65 7 -20.5 0)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / 0)', 'color(xyz-d65 7 -20.5 100 / 0)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz 0 y z / alpha)', 'color(xyz-d65 0 -20.5 100 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x 0 z / alpha)', 'color(xyz-d65 7 0 100 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y 0 / alpha)', 'color(xyz-d65 7 -20.5 0 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / 0)', 'color(xyz-d65 7 -20.5 100 / 0)'], + + // Testing replacement with a constant. + ['color(from color(xyz 7 -20.5 100) xyz 0.2 y z / alpha)', 'color(xyz-d65 0.2 -20.5 100)'], + ['color(from color(xyz 7 -20.5 100) xyz x 0.2 z / alpha)', 'color(xyz-d65 7 0.2 100)'], + ['color(from color(xyz 7 -20.5 100) xyz x y 0.2 / alpha)', 'color(xyz-d65 7 -20.5 0.2)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / 0.2)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / 20%)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz 0.2 y z / alpha)', 'color(xyz-d65 0.2 -20.5 100 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x 0.2 z / alpha)', 'color(xyz-d65 7 0.2 100 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y 0.2 / alpha)', 'color(xyz-d65 7 -20.5 0.2 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / 0.2)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + + // Testing valid permutation (types match). + ['color(from color(xyz 7 -20.5 100) xyz y z x)', 'color(xyz-d65 -20.5 100 7)'], + ['color(from color(xyz 7 -20.5 100) xyz x x x / x)', 'color(xyz-d65 7 7 7)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz y z x)', 'color(xyz-d65 -20.5 100 7 / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x x x / x)', 'color(xyz-d65 7 7 7)'], + + // Testing with calc(). + ['color(from color(xyz 7 -20.5 100) xyz calc(x) calc(y) calc(z))', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz calc(x) calc(y) calc(z) / calc(alpha))', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + + // Testing with 'none'. + ['color(from color(xyz 7 -20.5 100) xyz none none none)', 'color(xyz-d65 none none none)'], + ['color(from color(xyz 7 -20.5 100) xyz none none none / none)', 'color(xyz-d65 none none none / none)'], + ['color(from color(xyz 7 -20.5 100) xyz x y none)', 'color(xyz-d65 7 -20.5 none)'], + ['color(from color(xyz 7 -20.5 100) xyz x y none / alpha)', 'color(xyz-d65 7 -20.5 none)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / none)', 'color(xyz-d65 7 -20.5 100 / none)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y none / alpha)', 'color(xyz-d65 7 -20.5 none / 0.4)'], + ['color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / none)', 'color(xyz-d65 7 -20.5 100 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(xyz none none none) xyz x y z)', 'color(xyz-d65 0 0 0)'], + ['color(from color(xyz none none none / none) xyz x y z / alpha)', 'color(xyz-d65 0 0 0 / 0)'], + ['color(from color(xyz 7 none 100) xyz x y z)', 'color(xyz-d65 7 0 100)'], + ['color(from color(xyz 7 -20.5 100 / none) xyz x y z / alpha)', 'color(xyz-d65 7 -20.5 100 / 0)'], + + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z)', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z / alpha)', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y z)', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y z / alpha)', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z) xyz-d65 x y z)', 'color(xyz-d65 7 -20.5 100)'], + + // Testing replacement with 0. + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 0 0 0)', 'color(xyz-d65 0 0 0)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 0 0 0 / 0)', 'color(xyz-d65 0 0 0 / 0)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 0 y z / alpha)', 'color(xyz-d65 0 -20.5 100)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x 0 z / alpha)', 'color(xyz-d65 7 0 100)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y 0 / alpha)', 'color(xyz-d65 7 -20.5 0)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z / 0)', 'color(xyz-d65 7 -20.5 100 / 0)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 0 y z / alpha)', 'color(xyz-d65 0 -20.5 100 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x 0 z / alpha)', 'color(xyz-d65 7 0 100 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y 0 / alpha)', 'color(xyz-d65 7 -20.5 0 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y z / 0)', 'color(xyz-d65 7 -20.5 100 / 0)'], + + // Testing replacement with a constant. + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 0.2 y z / alpha)', 'color(xyz-d65 0.2 -20.5 100)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x 0.2 z / alpha)', 'color(xyz-d65 7 0.2 100)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y 0.2 / alpha)', 'color(xyz-d65 7 -20.5 0.2)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z / 0.2)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z / 20%)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 0.2 y z / alpha)', 'color(xyz-d65 0.2 -20.5 100 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x 0.2 z / alpha)', 'color(xyz-d65 7 0.2 100 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y 0.2 / alpha)', 'color(xyz-d65 7 -20.5 0.2 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y z / 0.2)', 'color(xyz-d65 7 -20.5 100 / 0.2)'], + + // Testing valid permutation (types match). + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 y z x)', 'color(xyz-d65 -20.5 100 7)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x x x / x)', 'color(xyz-d65 7 7 7)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 y z x)', 'color(xyz-d65 -20.5 100 7 / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x x x / x)', 'color(xyz-d65 7 7 7)'], + + // Testing with calc(). + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 calc(x) calc(y) calc(z))', 'color(xyz-d65 7 -20.5 100)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 calc(x) calc(y) calc(z) / calc(alpha))', 'color(xyz-d65 7 -20.5 100 / 0.4)'], + + // Testing with 'none'. + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 none none none)', 'color(xyz-d65 none none none)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 none none none / none)', 'color(xyz-d65 none none none / none)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y none)', 'color(xyz-d65 7 -20.5 none)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y none / alpha)', 'color(xyz-d65 7 -20.5 none)'], + ['color(from color(xyz-d65 7 -20.5 100) xyz-d65 x y z / none)', 'color(xyz-d65 7 -20.5 100 / none)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y none / alpha)', 'color(xyz-d65 7 -20.5 none / 0.4)'], + ['color(from color(xyz-d65 7 -20.5 100 / 40%) xyz-d65 x y z / none)', 'color(xyz-d65 7 -20.5 100 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(xyz-d65 none none none) xyz-d65 x y z)', 'color(xyz-d65 0 0 0)'], + ['color(from color(xyz-d65 none none none / none) xyz-d65 x y z / alpha)', 'color(xyz-d65 0 0 0 / 0)'], + ['color(from color(xyz-d65 7 none 100) xyz-d65 x y z)', 'color(xyz-d65 7 0 100)'], + ['color(from color(xyz-d65 7 -20.5 100 / none) xyz-d65 x y z / alpha)', 'color(xyz-d65 7 -20.5 100 / 0)'], + + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z)', 'color(xyz-d50 7 -20.5 100)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z / alpha)', 'color(xyz-d50 7 -20.5 100)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y z)', 'color(xyz-d50 7 -20.5 100 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y z / alpha)', 'color(xyz-d50 7 -20.5 100 / 0.4)'], + + // Test nesting relative colors. + ['color(from color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z) xyz-d50 x y z)', 'color(xyz-d50 7 -20.5 100)'], + + // Testing replacement with 0. + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 0 0 0)', 'color(xyz-d50 0 0 0)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 0 0 0 / 0)', 'color(xyz-d50 0 0 0 / 0)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 0 y z / alpha)', 'color(xyz-d50 0 -20.5 100)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x 0 z / alpha)', 'color(xyz-d50 7 0 100)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y 0 / alpha)', 'color(xyz-d50 7 -20.5 0)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z / 0)', 'color(xyz-d50 7 -20.5 100 / 0)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 0 y z / alpha)', 'color(xyz-d50 0 -20.5 100 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x 0 z / alpha)', 'color(xyz-d50 7 0 100 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y 0 / alpha)', 'color(xyz-d50 7 -20.5 0 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y z / 0)', 'color(xyz-d50 7 -20.5 100 / 0)'], + + // Testing replacement with a constant. + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 0.2 y z / alpha)', 'color(xyz-d50 0.2 -20.5 100)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x 0.2 z / alpha)', 'color(xyz-d50 7 0.2 100)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y 0.2 / alpha)', 'color(xyz-d50 7 -20.5 0.2)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z / 0.2)', 'color(xyz-d50 7 -20.5 100 / 0.2)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z / 20%)', 'color(xyz-d50 7 -20.5 100 / 0.2)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 0.2 y z / alpha)', 'color(xyz-d50 0.2 -20.5 100 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x 0.2 z / alpha)', 'color(xyz-d50 7 0.2 100 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y 0.2 / alpha)', 'color(xyz-d50 7 -20.5 0.2 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y z / 0.2)', 'color(xyz-d50 7 -20.5 100 / 0.2)'], + + // Testing valid permutation (types match). + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 y z x)', 'color(xyz-d50 -20.5 100 7)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x x x / x)', 'color(xyz-d50 7 7 7)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 y z x)', 'color(xyz-d50 -20.5 100 7 / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x x x / x)', 'color(xyz-d50 7 7 7)'], + + // Testing with calc(). + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 calc(x) calc(y) calc(z))', 'color(xyz-d50 7 -20.5 100)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 calc(x) calc(y) calc(z) / calc(alpha))', 'color(xyz-d50 7 -20.5 100 / 0.4)'], + + // Testing with 'none'. + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 none none none)', 'color(xyz-d50 none none none)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 none none none / none)', 'color(xyz-d50 none none none / none)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y none)', 'color(xyz-d50 7 -20.5 none)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y none / alpha)', 'color(xyz-d50 7 -20.5 none)'], + ['color(from color(xyz-d50 7 -20.5 100) xyz-d50 x y z / none)', 'color(xyz-d50 7 -20.5 100 / none)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y none / alpha)', 'color(xyz-d50 7 -20.5 none / 0.4)'], + ['color(from color(xyz-d50 7 -20.5 100 / 40%) xyz-d50 x y z / none)', 'color(xyz-d50 7 -20.5 100 / none)'], + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + ['color(from color(xyz-d50 none none none) xyz-d50 x y z)', 'color(xyz-d50 0 0 0)'], + ['color(from color(xyz-d50 none none none / none) xyz-d50 x y z / alpha)', 'color(xyz-d50 0 0 0 / 0)'], + ['color(from color(xyz-d50 7 none 100) xyz-d50 x y z)', 'color(xyz-d50 7 0 100)'], + ['color(from color(xyz-d50 7 -20.5 100 / none) xyz-d50 x y z / alpha)', 'color(xyz-d50 7 -20.5 100 / 0)'], + + // Spec Examples + + // Example 14. + ['rgb(from indianred 255 g b)', 'rgb(255, 92, 92)'], + + // Example 18. + ['lch(from peru calc(l * 0.8) c h)', 'lch(49.80138 54.003296 63.680317)'], +]; + +for (const test of tests) { + assert.deepStrictEqual( + serialize_sRGB_data(color(parse(test[0]))), + canonicalize(test[1]), + `"${test[0]}" : ${test[1]}`, + ); +} diff --git a/packages/css-color-parser/test/wpt/color-invalid-relative-color.mjs b/packages/css-color-parser/test/wpt/color-invalid-relative-color.mjs new file mode 100644 index 000000000..99b23d894 --- /dev/null +++ b/packages/css-color-parser/test/wpt/color-invalid-relative-color.mjs @@ -0,0 +1,138 @@ +import { color } from '@csstools/css-color-parser'; +import assert from 'assert'; +import { parse } from '../util/parse.mjs'; +import { serialize_sRGB_data } from '../util/serialize.mjs'; + +const tests = [ + // Testing invalid values + ['rgb(from rebeccapurple r 10deg 10)'], + ['rgb(from rebeccapurple r 10 10deg)'], + ['rgb(from rebeccapurple 10deg g b)'], + ['rgb(from rgb(10%, 20%, 30%, 40%) r 10deg 10)'], + ['rgb(from rgb(10%, 20%, 30%, 40%) r 10 10deg)'], + ['rgb(from rgb(10%, 20%, 30%, 40%) 10deg g b)'], + + // Testing invalid component names + ['rgb(from rebeccapurple red g b)'], + ['rgb(from rebeccapurple l g b)'], + ['rgb(from rebeccapurple h g b)'], + + // Testing invalid function name variation (only rgb() is valid, rgba() is invalid) + ['rgba(from rebeccapurple r g b)'], + ['rgba(from rgb(10%, 20%, 30%, 40%) r g b / alpha)'], + + + // hsl(from ...) + + // Testing invalid permutation (types don't match). + ['hsl(from rebeccapurple s h l)'], + ['hsl(from rebeccapurple s s s / s)'], + ['hsl(from rebeccapurple h h h / h)'], + ['hsl(from rgb(10%, 20%, 30%, 40%) s h l)'], + ['hsl(from rgb(10%, 20%, 30%, 40%) s s s / s)'], + ['hsl(from rgb(10%, 20%, 30%, 40%) h h h / h)'], + + // Testing invalid values. + ['hsl(from rebeccapurple 10% s l)'], + ['hsl(from rgb(10%, 20%, 30%, 40%) 10% s l)'], + + // Testing invalid component names + ['hsl(from rebeccapurple hue s l)'], + ['hsl(from rebeccapurple x s l)'], + ['hsl(from rebeccapurple h g b)'], + + // Testing invalid function name variation (only hsl() is valid, hsla() is invalid) + ['hsla(from rebeccapurple h s l)'], + ['hsla(from rgb(10%, 20%, 30%, 40%) h s l / alpha)'], + + // hwb(from ...) + + // Testing invalid permutation (types don't match). + ['hwb(from rebeccapurple w h b)'], + ['hwb(from rebeccapurple b b b / b)'], + ['hwb(from rebeccapurple h h h / h)'], + ['hwb(from rebeccapurple alpha alpha alpha / alpha)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) w b h)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) b b b / b)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) h h h / h)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)'], + + // Testing invalid values. + ['hwb(from rebeccapurple h 10% 10)'], + ['hwb(from rebeccapurple h 10 10%)'], + ['hwb(from rebeccapurple 10% w b)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) h 10% 10)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) h 10 10%)'], + ['hwb(from rgb(10%, 20%, 30%, 40%) 10% w b)'], + + // Testing invalid component names + ['hwb(from rebeccapurple hue w b)'], + ['hwb(from rebeccapurple x w b)'], + ['hwb(from rebeccapurple h g b)'], + + + // Testing invalid values. + ['lab(from lab(.25 20 50) l 10deg 10)'], + ['lab(from lab(.25 20 50) l 10 10deg)'], + ['lab(from lab(.25 20 50) 10deg a b)'], + ['lab(from lab(.25 20 50 / 40%) l 10deg 10)'], + ['lab(from lab(.25 20 50 / 40%) l 10 10deg)'], + ['lab(from lab(.25 20 50 / 40%) 10deg a b)'], + + // Testing invalid component names + ['lab(from lab(.25 20 50) lightness a b)'], + ['lab(from lab(.25 20 50) x a b)'], + ['lab(from lab(.25 20 50) h g b)'], + + + + // Testing invalid permutation (types don't match). + ['lch(from lch(.70 45 30) h l c / alpha)'], + ['lch(from lch(.70 45 30 / 40%) h l c / alpha)'], + + // Testing invalid values. + ['lch(from lch(.70 45 30) l 10deg h)'], + ['lch(from lch(.70 45 30) l c 10%)'], + ['lch(from lch(.70 45 30) 10deg c h)'], + ['lch(from lch(.70 45 30 / 40%) l 10deg h)'], + ['lch(from lch(.70 45 30 / 40%) l c 10%)'], + ['lch(from lch(.70 45 30 / 40%) 10deg c h)'], + + // Testing invalid component names + ['lch(from lch(.70 45 30) lightness c h)'], + ['lch(from lch(.70 45 30) x c h)'], + ['lch(from lch(.70 45 30) l g b)'], + + + + // Testing invalid values. + ['color(from color(srgb 0.7 0.5 0.3) srgb 10deg g b)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r 10deg b)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g 10deg)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb r g b / 10deg)'], + + // Testing invalid component names + ['color(from color(srgb 0.7 0.5 0.3) srgb red g b)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb x g b)'], + ['color(from color(srgb 0.7 0.5 0.3) srgb l g b)'], + + // Testing invalid values. + ['color(from color(xyz 7 -20.5 100) xyz 10deg y z)'], + ['color(from color(xyz 7 -20.5 100) xyz x 10deg z)'], + ['color(from color(xyz 7 -20.5 100) xyz x y 10deg)'], + ['color(from color(xyz 7 -20.5 100) xyz x y z / 10deg)'], + + // Testing invalid component names + ['color(from color(xyz 7 -20.5 100) xyz red y)'], + ['color(from color(xyz 7 -20.5 100) xyz r y z)'], + ['color(from color(xyz 7 -20.5 100) xyz l y z)'], + +]; + +for (const test of tests) { + assert.deepStrictEqual( + serialize_sRGB_data(color(parse(test[0]))), + '', + test[0], + ); +} diff --git a/packages/css-color-parser/test/wpt/index.mjs b/packages/css-color-parser/test/wpt/index.mjs index fffc0546f..aa7b5c524 100644 --- a/packages/css-color-parser/test/wpt/index.mjs +++ b/packages/css-color-parser/test/wpt/index.mjs @@ -7,6 +7,7 @@ import './color-computed-hwb.mjs'; import './color-computed-lab.mjs'; import './color-computed-named-color.mjs'; import './color-computed-oklab.mjs'; +import './color-computed-relative-color.mjs'; import './color-computed-rgb.mjs'; import './color-invalid-color-function.mjs'; import './color-invalid-color-mix-function.mjs'; @@ -14,4 +15,5 @@ import './color-invalid-hex.mjs'; import './color-invalid-hsl.mjs'; import './color-invalid-hwb.mjs'; import './color-invalid-named-color.mjs'; +import './color-invalid-relative-color.mjs'; import './color-invalid-rgb.mjs'; diff --git a/plugin-packs/postcss-preset-env/CHANGELOG.md b/plugin-packs/postcss-preset-env/CHANGELOG.md index 3594b48f4..5ae90b457 100644 --- a/plugin-packs/postcss-preset-env/CHANGELOG.md +++ b/plugin-packs/postcss-preset-env/CHANGELOG.md @@ -1,5 +1,10 @@ # Changes to PostCSS Preset Env +### Unreleased (minor) + +- Added `@csstools/postcss-relative-color-syntax` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme) for usage details. +- Updated `cssdb` to `7.6.0.` (minor) + ### 8.3.3 (May 19, 2023) - Update plugin order to preserve more original values. @@ -7,7 +12,6 @@ - Updated `@csstools/postcss-is-pseudo-class` to `3.2.1` (patch) - Updated `postcss-logical` to `6.2.0` (minor) - ### 8.3.2 (April 17, 2023) - Updated `@csstools/postcss-gradients-interpolation-method` to `3.0.4` (patch) @@ -32,7 +36,7 @@ ### 8.3.0 (March 31, 2023) - Replace `postcss-media-minmax` with `@csstools/postcss-media-minmax` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax#readme) for usage details. _We hope to revert this in the future when maintenance is resumed upstream._ -- - Updated `cssdb` to `7.5.3` (patch) +- Updated `cssdb` to `7.5.3` (patch) ### 8.2.0 (March 28, 2023) diff --git a/plugin-packs/postcss-preset-env/package.json b/plugin-packs/postcss-preset-env/package.json index 17e06e043..0c70e7973 100644 --- a/plugin-packs/postcss-preset-env/package.json +++ b/plugin-packs/postcss-preset-env/package.json @@ -76,7 +76,7 @@ "css-blank-pseudo": "^5.0.2", "css-has-pseudo": "^5.0.2", "css-prefers-color-scheme": "^8.0.2", - "cssdb": "^7.5.3", + "cssdb": "^7.6.0", "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", "postcss-color-functional-notation": "^5.0.2", diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css index d4ae08e7a..bd21a69ed 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.expect.css @@ -44,24 +44,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -304,7 +304,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -402,7 +402,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -432,16 +432,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -523,10 +523,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -570,10 +568,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -587,7 +585,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -598,3 +596,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css index d4ae08e7a..bd21a69ed 100644 --- a/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.autoprefixer.false.expect.css @@ -44,24 +44,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -304,7 +304,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -402,7 +402,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -432,16 +432,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -523,10 +523,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -570,10 +568,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -587,7 +585,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -598,3 +596,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css index 359ebf620..d33fd35bc 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch38.expect.css @@ -37,24 +37,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -215,7 +215,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -313,7 +313,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -343,16 +343,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -433,10 +433,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -480,10 +478,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -497,7 +495,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -508,3 +506,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css index c295aa77c..c4facc170 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78-saf10.expect.css @@ -313,7 +313,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -343,16 +343,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -476,10 +476,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -493,7 +493,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -504,3 +504,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css index 9d46ec4b1..0b1fc27d4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.expect.css @@ -313,7 +313,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -343,16 +343,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -470,10 +470,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -487,7 +487,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -498,3 +498,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css index 9d46ec4b1..0b1fc27d4 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ch88-ff78.no-is-pseudo.expect.css @@ -313,7 +313,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -343,16 +343,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -470,10 +470,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -487,7 +487,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -498,3 +498,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.css b/plugin-packs/postcss-preset-env/test/basic.css index 36683bb06..27a475b89 100644 --- a/plugin-packs/postcss-preset-env/test/basic.css +++ b/plugin-packs/postcss-preset-env/test/basic.css @@ -453,3 +453,15 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } + +.test-css-color-5-interop { + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: oklab(from oklab(40% 0.566 0.39) l a b); + color-9: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.expect.css b/plugin-packs/postcss-preset-env/test/basic.expect.css index e614ced38..f77cbe667 100644 --- a/plugin-packs/postcss-preset-env/test/basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.expect.css @@ -45,24 +45,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -321,7 +321,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -419,7 +419,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -449,16 +449,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -540,10 +540,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -589,10 +587,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -606,7 +604,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -617,3 +615,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css index cdcc0a234..4e52f9800 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff49.expect.css @@ -43,24 +43,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -219,7 +219,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -317,7 +317,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -347,16 +347,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -436,10 +436,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -481,10 +479,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -498,7 +496,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -509,3 +507,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css index b3c376014..ccf2a89bb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ff66.expect.css @@ -42,24 +42,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -214,7 +214,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -312,7 +312,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -342,16 +342,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -431,10 +431,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -476,10 +474,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -493,7 +491,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -504,3 +502,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css index aae167faa..2b0367536 100644 --- a/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.hebrew.expect.css @@ -417,7 +417,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -447,16 +447,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -583,10 +583,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -600,7 +600,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -611,3 +611,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css index 3c714bc61..2bdbfdedd 100644 --- a/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.ie10.expect.css @@ -49,31 +49,31 @@ -ms-flex-order: 4; order: 4; - & p { - -ms-flex-order: 5; - order: 5; - } - -ms-flex-order: 6; order: 6; } +.test-nesting-rules p { + -ms-flex-order: 5; + order: 5; + } + .test-nesting-rules, #test-is-pseudo { -ms-flex-order: 7; order: 7; - & + p { - -ms-flex-order: 8; - order: 8; - } - -ms-flex-order: 9; order: 9; } +.test-nesting-rules + p, #test-is-pseudo + p { + -ms-flex-order: 8; + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { -ms-flex-order: 10; @@ -336,7 +336,7 @@ font-style: normal; font-weight: 300; font-display: swap; - src: url(a) format(woff2); + src: url(a) format("woff2"); } .block-flow { @@ -436,7 +436,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -466,16 +466,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -557,10 +557,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -606,10 +604,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -623,7 +621,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -634,3 +632,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css index 12e5c4ecd..76f6165bb 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.false.expect.css @@ -417,7 +417,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -447,16 +447,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -585,10 +585,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -602,7 +602,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -613,3 +613,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css index a8e5c9936..754da77b0 100644 --- a/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.nesting.true.expect.css @@ -459,3 +459,15 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } + +.test-css-color-5-interop { + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: oklab(from oklab(40% 0.566 0.39) l a b); + color-9: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css index c02161a45..805672a5f 100644 --- a/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.op_mini.expect.css @@ -401,7 +401,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -431,16 +431,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -565,10 +565,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -582,7 +582,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -593,3 +593,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css index 689b0bf84..fec2cf382 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.false.expect.css @@ -563,7 +563,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -593,16 +593,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -742,10 +742,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -769,8 +769,22 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115%, color(display-p3 1.2198 0.38716 0.16814) 0%, color(display-p3 1.20289 0.47522 -0.3004), color(display-p3 1.15167 0.57912 -0.3946), color(display-p3 1.06645 0.68611 -0.4296), color(display-p3 0.94738 0.78766 -0.4263), color(display-p3 0.79233 0.87807 -0.3707), color(display-p3 0.59026 0.95319 -0.1467), color(display-p3 0.27082 1.00972 0.43521), color(display-p3 -0.3983 1.04501 0.69996), color(display-p3 -0.5392 1.05733 0.93686), color(display-p3 -0.5777 1.04644 1.15396) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css index 6c8dd31a2..0455e02c9 100644 --- a/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.preserve.true.expect.css @@ -722,7 +722,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); @@ -774,21 +774,21 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-6: rgb(197, 84, 124); color-6: oklch(60% 0.150 0); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); color-7: oklch(60% 0.1250 180); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); color-8: oklch(60% 0.1250 180deg); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); color-9: oklch(60% 0.1250 0.5turn); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); color-10: oklch(60% 0.1250 200grad); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-11: oklch(60% 0.1250 3.14159rad); @@ -1002,11 +1002,11 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-2: color-mix(in lab, rgb(255 0 0 / 0), blue 65%); color-3: rgba(0, 0, 255, 0.65); color-3: color-mix(in xyz, rgb(255 0 0 / 0), blue 65%); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); color-6: rgba(179, 0, 255, 0.65); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); @@ -1040,7 +1040,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -1056,3 +1056,26 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-8: oklab(from oklab(40% 0.566 0.39) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); + color-9: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css index a49c83d70..516cafc14 100644 --- a/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.safari15.expect.css @@ -42,24 +42,24 @@ .test-nesting-rules { order: 4; - & p { - order: 5; - } - order: 6; } +.test-nesting-rules p { + order: 5; + } + .test-nesting-rules, #test-is-pseudo { order: 7; - & + p { - order: 8; - } - order: 9; } +:is(.test-nesting-rules,#test-is-pseudo) + p { + order: 8; + } + @media (max-width: 30em) { .test-custom-media-queries { order: 10; @@ -289,7 +289,7 @@ } .logical-float { - float: left; + float: inline-start; } .color-function { @@ -323,16 +323,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -412,10 +412,8 @@ @custom-selector :--view-m [data-view-size=m]; -.view { - @nest :--view-m & { +:--view-m .view { background: red; - } } .nested-calc { @@ -459,10 +457,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -476,7 +474,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -487,3 +485,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-5: hwb(from hwb(50deg 20% 30%) h w b); + color-6: lab(from lab(40% 56.6 39) l a b); + color-7: lch(from lch(40% 56.6 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css index e9854e90e..b7aa7f1cf 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff49.expect.css @@ -315,7 +315,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -345,16 +345,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -475,10 +475,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -492,7 +492,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -503,3 +503,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css index 143e2df4a..1b61bd88c 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0-ff66.expect.css @@ -310,7 +310,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -340,16 +340,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -470,10 +470,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -487,7 +487,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -498,3 +498,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css index 4f6cbcd15..46ed6e369 100644 --- a/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.stage0.expect.css @@ -417,7 +417,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -447,16 +447,16 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -583,10 +583,10 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -600,7 +600,7 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -611,3 +611,17 @@ h1.test-custom-selectors:not(.does-not-exist), h2.test-custom-selectors:not(.doe --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css index 0976a094b..b14d4c129 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-1.expect.css @@ -423,7 +423,7 @@ } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -453,16 +453,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -593,10 +593,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -610,7 +610,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -621,3 +621,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css index 99cf321ad..2cf523600 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-2.expect.css @@ -249,7 +249,7 @@ order: 23; } -.test-dir-pseudo-class:dir(rtl) { +[dir="rtl"] .test-dir-pseudo-class { order: 24; } @@ -419,11 +419,11 @@ } .logical-float { - float: inline-start; + float: left; } .color-function { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -453,16 +453,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -593,10 +593,10 @@ color-1: rgba(0, 0, 255, 0.65); color-2: rgba(0, 0, 255, 0.65); color-3: rgba(0, 0, 255, 0.65); - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } @@ -610,7 +610,7 @@ background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { .gradients-interpolation-method { --background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(245, 140, 170), rgb(238, 146, 202), rgb(227, 155, 230), rgb(210, 166, 253), color(display-p3 0.73255 0.7035 1.03328), color(display-p3 0.66377 0.75145 1.06652), color(display-p3 0.59643 0.80011 1.0696), color(display-p3 0.54198 0.8462 1.04382), color(display-p3 0.51578 0.88643 0.99318), rgb(94, 237, 237) 100%); } @@ -621,3 +621,17 @@ --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); } } + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css index 0a3cbde12..f901e3c8b 100644 --- a/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css +++ b/plugin-packs/postcss-preset-env/test/basic.vendors-3.expect.css @@ -3,7 +3,7 @@ } .test-custom-property-fallbacks { - --firebrick: lab(40% 56.6 39); + --firebrick: rgb(179, 35, 35); } .test-custom-properties { @@ -105,8 +105,8 @@ } .test-lab-function { - background-color: lab(40% 56.6 39); - color: lch(40% 68.8 34.5 / 50%); + background-color: rgb(179, 35, 35); + color: rgba(179, 34, 35, 0.5); order: 17; } @@ -395,47 +395,53 @@ } .color-function { - prop-1: color(display-p3 0.00000 0.51872 0.36985); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; - prop-3: color(display-p3 0.02472 0.01150 0.00574 / 1); - prop-4: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22)); + prop-3: rgb(7, 3, 1); + prop-4: rgb(7, 3, 1); prop-5: color(display-p3 1 1 1 1); } .oklab { - color-1: oklab(40% 0.001236 0.0039); - color-2: oklab(40% 0.1236 0.0039 / 1); - color-3: oklab(40% 0.1236 0.0039 / .5); - color-4: oklab(40% 0.1236 0.0039 / 100%); - color-5: oklab(40% 0.1236 0.0039 / 50%); - color-6: oklab(60% 0.1 0); + color-1: rgb(73, 71, 69); + color-2: rgb(121, 34, 67); + color-3: rgba(121, 34, 67, 0.5); + color-4: rgb(121, 34, 67); + color-5: rgba(121, 34, 67, 0.5); + color-6: rgb(177, 102, 126); color-7: oklab(60% 0.1 0 foo); - color-8: oklab(40.101% 0.1147 0.0453); - color-9: oklab(59.686% 0.1009 0.1192); - color-10: oklab(65.125% -0.0320 0.1274); - color-11: oklab(66.016% -0.1084 0.1114); - color-12: oklab(72.322% -0.0465 -0.1150); + color-8: rgb(125, 35, 41); + color-9: rgb(198, 93, 7); + color-10: rgb(157, 147, 24); + color-11: rgb(104, 166, 57); + color-12: rgb(98, 172, 239); } .oklch { - color-1: oklch(40% 0.1268735435 34.568626); - color-2: oklch(40% 0.1268735435 34.568626 / 1); - color-3: oklch(40% 0.1268735435 34.568626 / .5); - color-4: oklch(40% 0.1268735435 34.568626 / 100%); - color-5: oklch(40% 0.1268735435 34.568626 / 50%); - color-6: oklch(60% 0.150 0); - - color-7: oklch(60% 0.1250 180); - color-8: oklch(60% 0.1250 180deg); - color-9: oklch(60% 0.1250 0.5turn); - color-10: oklch(60% 0.1250 200grad); - color-11: oklch(60% 0.1250 3.14159rad); - - color-12: oklch(60% 0.1250 45); - color-13: oklch(60% 0.1250 45deg); - color-14: oklch(60% 0.1250 0.125turn); - color-15: oklch(60% 0.1250 50grad); - color-16: oklch(60% 0.1250 0.785398rad); + color-1: rgb(126, 37, 15); + color-2: rgb(126, 37, 15); + color-3: rgba(126, 37, 15, 0.5); + color-4: rgb(126, 37, 15); + color-5: rgba(126, 37, 15, 0.5); + color-6: rgb(197, 84, 124); + + color-7: rgb(0, 149, 131); + + color-7: color(display-p3 0.19244 0.58461 0.51559); + color-8: rgb(0, 149, 131); + color-8: color(display-p3 0.19244 0.58461 0.51559); + color-9: rgb(0, 149, 131); + color-9: color(display-p3 0.19244 0.58461 0.51559); + color-10: rgb(0, 149, 131); + color-10: color(display-p3 0.19244 0.58461 0.51559); + color-11: rgb(0, 149, 131); + color-11: color(display-p3 0.19244 0.58461 0.51559); + + color-12: rgb(188, 101, 59); + color-13: rgb(188, 101, 59); + color-14: rgb(188, 101, 59); + color-15: rgb(188, 101, 59); + color-16: rgb(188, 101, 59); color-17: oklch(60% 0.1250 0.785398unknown); } @@ -552,16 +558,34 @@ } .color-mix { - color-1: color-mix(in srgb, rgba(255, 0, 0, 0), blue 65%); - color-2: color-mix(in lab, rgba(255, 0, 0, 0), blue 65%); - color-3: color-mix(in xyz, rgba(255, 0, 0, 0), blue 65%); - color-4: color-mix(in oklch, rgba(255, 0, 0, 0), blue 65%); - color-5: color-mix(in lch, rgba(255, 0, 0, 0), blue 65%); - color-6: color-mix(in hsl, rgba(255, 0, 0, 0), blue 65%); + color-1: rgba(0, 0, 255, 0.65); + color-2: rgba(0, 0, 255, 0.65); + color-3: rgba(0, 0, 255, 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); + color-6: rgba(179, 0, 255, 0.65); } .gradients-interpolation-method { --background-image: linear-gradient(in oklch decreasing hue, hsl(0, 85%, 75%) 0%, hsl(180, 80%, 65%) 100%); - background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, oklch(80% .3 34) 0%, oklch(90% .3 200) 100%); + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, rgb(255, 157, 133) 0%, rgb(31, 251, 255) 100%); + + background-image: radial-gradient(farthest-corner circle at 50% 115% in oklch, color(display-p3 1 0.61669 0.51066) 0%, color(display-p3 0.46442 0.97081 1) 100%); +} + +.test-css-color-5-interop { + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-5: hwb(from rgb(179, 157, 51) h w b); + color-6: lab(from rgb(179, 35, 35) l a b); + color-7: lch(from rgb(163, 57, 39) l c h); + color-8: oklab(from rgb(141, 0, 0) l a b); + color-8: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-9: oklch(from rgb(130, 31, 0) l c h); + color-9: oklch(from color(display-p3 0.48896 0.1211 0) l c h); } diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css index d5bdc2298..acddbdd79 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.expect.css @@ -609,7 +609,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n } .color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); prop-4: rgb(7, 3, 1); @@ -639,16 +639,16 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); diff --git a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css index bb8539b4d..1939f5be4 100644 --- a/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css +++ b/plugin-packs/postcss-preset-env/test/layers-basic.preserve.true.expect.css @@ -721,7 +721,7 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n } .color-function:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0.00000 0.51872 0.36985); prop-2: 'color(display-p3 0.02472 0.01150 0.00574 / 1)'; prop-3: rgb(7, 3, 1); @@ -773,21 +773,21 @@ h1.test-custom-selectors:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):n color-6: rgb(197, 84, 124); color-6: oklch(60% 0.150 0); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); color-7: oklch(60% 0.1250 180); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); color-8: oklch(60% 0.1250 180deg); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); color-9: oklch(60% 0.1250 0.5turn); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); color-10: oklch(60% 0.1250 200grad); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-11: oklch(60% 0.1250 3.14159rad); diff --git a/plugins/postcss-color-function/CHANGELOG.md b/plugins/postcss-color-function/CHANGELOG.md index 9afdb3ce7..3b0d87fb0 100644 --- a/plugins/postcss-color-function/CHANGELOG.md +++ b/plugins/postcss-color-function/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Color Function +### Unreleased (patch) + +- Ignore relative color syntax + ### 2.2.1 (April 10, 2023) - Updated `@csstools/css-tokenizer` to `2.1.1` (patch) diff --git a/plugins/postcss-color-function/dist/index.cjs b/plugins/postcss-color-function/dist/index.cjs index 1e0a2af95..d6a9614a1 100644 --- a/plugins/postcss-color-function/dist/index.cjs +++ b/plugins/postcss-color-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),o=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),o=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-function",Declaration:c=>{const a=c.value;if(!t.test(a.toLowerCase()))return;if(hasFallback(c))return;if(hasSupportsAtRuleAncestor(c))return;const i=s.tokenize({css:a}),l=o.replaceComponentValues(o.parseCommaSeparatedListOfComponentValues(i),(e=>{if(o.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),p=o.stringify(l);p!==a&&(c.cloneBefore({value:p}),null!=e&&e.preserve||c.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-function",Declaration:a=>{const c=a.value;if(!o.test(c))return;if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const i=s.tokenize({css:c}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(i),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.serializeRGB(s)}})),p=t.stringify(l);p!==c&&(a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove())}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},s);return r.enableProgressiveCustomProperties&&r.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-color-function/dist/index.mjs b/plugins/postcss-color-function/dist/index.mjs index 79a76fd12..b1bc9224e 100644 --- a/plugins/postcss-color-function/dist/index.mjs +++ b/plugins/postcss-color-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as p,stringify as a}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s({postcssPlugin:"postcss-color-function",Declaration:u=>{const f=u.value;if(!i.test(f.toLowerCase()))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const m=r({css:f}),g=n(c(m),(s=>{if(p(s)&&l.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;return t(r)}})),v=a(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as r}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeRGB as t}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as a,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const r=s.parent;if(!r)return!1;const e=s.prop.toLowerCase(),o=r.index(s);for(let s=0;s({postcssPlugin:"postcss-color-function",Declaration:u=>{const f=u.value;if(!l.test(f))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const m=r({css:f}),g=n(c(m),(s=>{if(a(s)&&i.test(s.getName())){const r=e(s);if(!r)return;if(r.syntaxFlags.has(o.HasNoneKeywords))return;if(r.syntaxFlags.has(o.RelativeColorSyntax))return;return t(r)}})),v=p(g);v!==f&&(u.cloneBefore({value:v}),null!=s&&s.preserve||u.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-function",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-color-function/src/index.ts b/plugins/postcss-color-function/src/index.ts index f0b26fa2e..3a0941db3 100644 --- a/plugins/postcss-color-function/src/index.ts +++ b/plugins/postcss-color-function/src/index.ts @@ -20,7 +20,7 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) postcssPlugin: 'postcss-color-function', Declaration: (decl: Declaration) => { const originalValue = decl.value; - if (!(colorFunctionRegex.test(originalValue.toLowerCase()))) { + if (!(colorFunctionRegex.test(originalValue))) { return; } @@ -46,6 +46,10 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + return serializeRGB(colorData); } }, diff --git a/plugins/postcss-color-function/test/basic.css b/plugins/postcss-color-function/test/basic.css index 2d83964f3..396b95df7 100644 --- a/plugins/postcss-color-function/test/basic.css +++ b/plugins/postcss-color-function/test/basic.css @@ -24,8 +24,10 @@ } .test-css-color-5-interop { - color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); - color-2: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); } .test-unknown-space { diff --git a/plugins/postcss-color-function/test/basic.expect.css b/plugins/postcss-color-function/test/basic.expect.css index f2b73491f..4f26e1208 100644 --- a/plugins/postcss-color-function/test/basic.expect.css +++ b/plugins/postcss-color-function/test/basic.expect.css @@ -24,8 +24,10 @@ } .test-css-color-5-interop { - color-1: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-2: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); } .test-unknown-space { @@ -70,9 +72,9 @@ } .test-percentage-xyz { - color-1: rgb(252, 0, 135); - color-2: rgb(255, 0, 126); - color-3: rgb(255, 0, 126); + color-1: rgb(249, 0, 135); + color-2: rgb(255, 0, 127); + color-3: rgb(255, 0, 127); } .test-author-provided-fallback { @@ -107,88 +109,88 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ /* in */ prop-3: rgb(97, 112, 56); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ /* in */ prop-5: rgb(85, 204, 229); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ /* out */ prop-7: rgb(255, 201, 158); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); /* in */ prop-10: rgb(231, 224, 96); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ /* in */ prop-15: rgb(96, 158, 117); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); + prop-17: rgb(0, 212, 236); /* out */ - prop-18: rgb(255, 156, 205); + prop-18: rgb(255, 160, 204); } .test-out-of-range-values-srgb { color-1: rgb(128, 0, 255); - color-2: rgb(128, 0, 255); - color-3: rgb(26, 255, 26); - color-4: rgb(26, 255, 26); + color-2: rgb(122, 0, 236); + color-3: rgb(25, 255, 25); + color-4: rgb(169, 255, 161); } .test-lime { - color-1: rgb(0, 255, 0); - color-2: rgb(0, 255, 0); - color-3: rgb(0, 255, 0); - color-4: rgb(0, 255, 0); - color-5: rgb(0, 255, 0); - color-6: rgb(0, 255, 0); - color-7: rgb(0, 255, 0); - color-8: rgb(0, 255, 0); - color-9: rgb(0, 255, 0); + color-1: rgb(1, 255, 0); + color-2: rgb(1, 255, 0); + color-3: rgb(1, 255, 0); + color-4: rgb(1, 255, 0); + color-5: rgb(1, 255, 0); + color-6: rgb(1, 255, 0); + color-7: rgb(1, 255, 0); + color-8: rgb(1, 255, 0); + color-9: rgb(1, 255, 0); } .test-blue-teal { - color-1: rgb(0, 132, 138); - color-2: rgb(0, 132, 138); - color-3: rgb(0, 132, 138); - color-4: rgb(0, 132, 138); - color-5: rgb(0, 132, 138); - color-6: rgb(0, 132, 138); - color-7: rgb(0, 132, 138); - color-8: rgb(0, 132, 138); - color-9: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); + color-2: rgb(0, 131, 136); + color-3: rgb(0, 131, 136); + color-4: rgb(0, 131, 136); + color-5: rgb(0, 131, 136); + color-6: rgb(0, 131, 136); + color-7: rgb(0, 131, 136); + color-8: rgb(0, 131, 136); + color-9: rgb(0, 131, 136); } .test-bright-purple { @@ -211,5 +213,5 @@ } to-clone { - color: rgb(255, 10, 11); + color: rgb(255, 15, 14); } diff --git a/plugins/postcss-color-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-function/test/basic.preserve-true.expect.css index 1794c440a..ba57e0e34 100644 --- a/plugins/postcss-color-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-color-function/test/basic.preserve-true.expect.css @@ -27,10 +27,14 @@ } .test-css-color-5-interop { - color-1: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); - color-2: color(from rgb(234, 133, 82) prophoto-rgb r g none); - color-2: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); } .test-unknown-space { @@ -95,11 +99,11 @@ } .test-percentage-xyz { - color-1: rgb(252, 0, 135); + color-1: rgb(249, 0, 135); color-1: color(xyz-d50 64.331% 0.19245 0.16771); - color-2: rgb(255, 0, 126); + color-2: rgb(255, 0, 127); color-2: color(xyz-d65 0.64331 19.245% 0.16771); - color-3: rgb(255, 0, 126); + color-3: rgb(255, 0, 127); color-3: color(xyz 0.64331 0.19245 16.771%); } @@ -140,10 +144,10 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0.00000 0.51872 0.36985); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: color(display-p3 0.31275 0.62335 0.08647); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ @@ -151,7 +155,7 @@ prop-3: rgb(97, 112, 56); prop-3: color(display-p3 0.39215 0.43776 0.24705); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: color(display-p3 0.99733 0.66278 0.12085); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ @@ -159,7 +163,7 @@ prop-5: rgb(85, 204, 229); prop-5: color(display-p3 0.46284 0.78863 0.88439); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: color(display-p3 0.00652 0.18999 0.01056); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ @@ -167,12 +171,12 @@ prop-7: rgb(255, 201, 158); prop-7: color(display-p3 0.96684 0.79482 0.64336); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: color(display-p3 0.35483 0.57788 0.15007); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: color(display-p3 0.32231 0.99185 0.02928); /* in */ prop-10: rgb(231, 224, 96); @@ -180,18 +184,18 @@ /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: color(display-p3 0.16541 0.72332 0.91352); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: color(display-p3 0.99104 0.47662 0.41939); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: color(display-p3 0.49844 0.61099 0.07831); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: color(display-p3 0.99687 0.35134 0.71095); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ @@ -199,68 +203,68 @@ prop-15: rgb(96, 158, 117); prop-15: color(display-p3 0.43165 0.61289 0.47061); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: color(display-p3 0.99937 0.35096 0.69833); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); + prop-17: rgb(0, 212, 236); prop-17: color(display-p3 0.00000 0.83784 0.97033); /* out */ - prop-18: rgb(255, 156, 205); + prop-18: rgb(255, 160, 204); prop-18: color(display-p3 1.00000 0.62326 0.79886); } .test-out-of-range-values-srgb { color-1: rgb(128, 0, 255); color-1: color(srgb 0.5 0 1); - color-2: rgb(128, 0, 255); + color-2: rgb(122, 0, 236); color-2: color(srgb 0.5 -0.2 1); - color-3: rgb(26, 255, 26); + color-3: rgb(25, 255, 25); color-3: color(srgb 0.1 1 0.1); - color-4: rgb(26, 255, 26); + color-4: rgb(169, 255, 161); color-4: color(srgb 0.1 1.1 0.1); } .test-lime { - color-1: rgb(0, 255, 0); + color-1: rgb(1, 255, 0); color-1: color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066); - color-2: rgb(0, 255, 0); + color-2: rgb(1, 255, 0); color-2: color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703); - color-3: rgb(0, 255, 0); + color-3: rgb(1, 255, 0); color-3: color(a98-rgb 0.565 1 0.234); - color-4: rgb(0, 255, 0); + color-4: rgb(1, 255, 0); color-4: color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174); - color-5: rgb(0, 255, 0); + color-5: rgb(1, 255, 0); color-5: color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497); - color-6: rgb(0, 255, 0); + color-6: rgb(1, 255, 0); color-6: color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993); - color-7: rgb(0, 255, 0); + color-7: rgb(1, 255, 0); color-7: color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873); - color-8: rgb(0, 255, 0); + color-8: rgb(1, 255, 0); color-8: color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156); - color-9: rgb(0, 255, 0); + color-9: rgb(1, 255, 0); color-9: color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156); } .test-blue-teal { - color-1: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); color-1: color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831); - color-2: rgb(0, 132, 138); + color-2: rgb(0, 131, 136); color-2: color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156); - color-3: rgb(0, 132, 138); + color-3: rgb(0, 131, 136); color-3: color(a98-rgb 0.265 0.5134 0.5344); - color-4: rgb(0, 132, 138); + color-4: rgb(0, 131, 136); color-4: color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392); - color-5: rgb(0, 132, 138); + color-5: rgb(0, 131, 136); color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044); - color-6: rgb(0, 132, 138); + color-6: rgb(0, 131, 136); color-6: color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425); - color-7: rgb(0, 132, 138); + color-7: rgb(0, 131, 136); color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204); - color-8: rgb(0, 132, 138); + color-8: rgb(0, 131, 136); color-8: color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071); - color-9: rgb(0, 132, 138); + color-9: rgb(0, 131, 136); color-9: color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071); } @@ -293,6 +297,6 @@ } to-clone { - color: rgb(255, 10, 11); + color: rgb(255, 15, 14); color: color(display-p3 1 0 0); } diff --git a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css index b6f70681e..a9125302e 100644 --- a/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-color-function/test/basic.with-cloned-rules.expect.css @@ -27,10 +27,14 @@ } .test-css-color-5-interop { - color-1: color(from rgb(196, 129, 72) a98-rgb r g b / none); - color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); - color-2: color(from rgb(234, 133, 82) prophoto-rgb r g none); - color-2: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + color-1: color(from rgb(196, 129, 72) a98-rgb r g b / alpha); + color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + color-2: color(from rgb(196, 129, 72) a98-rgb r g b / none); + color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + color-3: color(from rgb(234, 133, 82) prophoto-rgb r g b); + color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + color-4: color(from rgb(234, 133, 82) prophoto-rgb r g none); + color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); } .test-unknown-space { @@ -95,11 +99,11 @@ } .test-percentage-xyz { - color-1: rgb(252, 0, 135); + color-1: rgb(249, 0, 135); color-1: color(xyz-d50 64.331% 0.19245 0.16771); - color-2: rgb(255, 0, 126); + color-2: rgb(255, 0, 127); color-2: color(xyz-d65 0.64331 19.245% 0.16771); - color-3: rgb(255, 0, 126); + color-3: rgb(255, 0, 127); color-3: color(xyz 0.64331 0.19245 16.771%); } @@ -140,10 +144,10 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0.00000 0.51872 0.36985); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: color(display-p3 0.31275 0.62335 0.08647); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ @@ -151,7 +155,7 @@ prop-3: rgb(97, 112, 56); prop-3: color(display-p3 0.39215 0.43776 0.24705); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: color(display-p3 0.99733 0.66278 0.12085); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ @@ -159,7 +163,7 @@ prop-5: rgb(85, 204, 229); prop-5: color(display-p3 0.46284 0.78863 0.88439); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: color(display-p3 0.00652 0.18999 0.01056); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ @@ -167,12 +171,12 @@ prop-7: rgb(255, 201, 158); prop-7: color(display-p3 0.96684 0.79482 0.64336); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: color(display-p3 0.35483 0.57788 0.15007); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: color(display-p3 0.32231 0.99185 0.02928); /* in */ prop-10: rgb(231, 224, 96); @@ -180,18 +184,18 @@ /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: color(display-p3 0.16541 0.72332 0.91352); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: color(display-p3 0.99104 0.47662 0.41939); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: color(display-p3 0.49844 0.61099 0.07831); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: color(display-p3 0.99687 0.35134 0.71095); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ @@ -199,68 +203,68 @@ prop-15: rgb(96, 158, 117); prop-15: color(display-p3 0.43165 0.61289 0.47061); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: color(display-p3 0.99937 0.35096 0.69833); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); + prop-17: rgb(0, 212, 236); prop-17: color(display-p3 0.00000 0.83784 0.97033); /* out */ - prop-18: rgb(255, 156, 205); + prop-18: rgb(255, 160, 204); prop-18: color(display-p3 1.00000 0.62326 0.79886); } .test-out-of-range-values-srgb { color-1: rgb(128, 0, 255); color-1: color(srgb 0.5 0 1); - color-2: rgb(128, 0, 255); + color-2: rgb(122, 0, 236); color-2: color(srgb 0.5 -0.2 1); - color-3: rgb(26, 255, 26); + color-3: rgb(25, 255, 25); color-3: color(srgb 0.1 1 0.1); - color-4: rgb(26, 255, 26); + color-4: rgb(169, 255, 161); color-4: color(srgb 0.1 1.1 0.1); } .test-lime { - color-1: rgb(0, 255, 0); + color-1: rgb(1, 255, 0); color-1: color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066); - color-2: rgb(0, 255, 0); + color-2: rgb(1, 255, 0); color-2: color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703); - color-3: rgb(0, 255, 0); + color-3: rgb(1, 255, 0); color-3: color(a98-rgb 0.565 1 0.234); - color-4: rgb(0, 255, 0); + color-4: rgb(1, 255, 0); color-4: color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174); - color-5: rgb(0, 255, 0); + color-5: rgb(1, 255, 0); color-5: color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497); - color-6: rgb(0, 255, 0); + color-6: rgb(1, 255, 0); color-6: color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993); - color-7: rgb(0, 255, 0); + color-7: rgb(1, 255, 0); color-7: color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873); - color-8: rgb(0, 255, 0); + color-8: rgb(1, 255, 0); color-8: color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156); - color-9: rgb(0, 255, 0); + color-9: rgb(1, 255, 0); color-9: color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156); } .test-blue-teal { - color-1: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); color-1: color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831); - color-2: rgb(0, 132, 138); + color-2: rgb(0, 131, 136); color-2: color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156); - color-3: rgb(0, 132, 138); + color-3: rgb(0, 131, 136); color-3: color(a98-rgb 0.265 0.5134 0.5344); - color-4: rgb(0, 132, 138); + color-4: rgb(0, 131, 136); color-4: color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392); - color-5: rgb(0, 132, 138); + color-5: rgb(0, 131, 136); color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044); - color-6: rgb(0, 132, 138); + color-6: rgb(0, 131, 136); color-6: color(rec2020 0.24657637908526203 0.44994210472189566 0.486194553499425); - color-7: rgb(0, 132, 138); + color-7: rgb(0, 131, 136); color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204); - color-8: rgb(0, 132, 138); + color-8: rgb(0, 131, 136); color-8: color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071); - color-9: rgb(0, 132, 138); + color-9: rgb(0, 131, 136); color-9: color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071); } @@ -293,11 +297,11 @@ } cloned { - color: rgb(255, 10, 11); + color: rgb(255, 15, 14); color: color(display-p3 1 0 0); } to-clone { - color: rgb(255, 10, 11); + color: rgb(255, 15, 14); color: color(display-p3 1 0 0); } diff --git a/plugins/postcss-color-function/test/lab-function-interop.expect.css b/plugins/postcss-color-function/test/lab-function-interop.expect.css index 72e91a48c..a4d4910d7 100644 --- a/plugins/postcss-color-function/test/lab-function-interop.expect.css +++ b/plugins/postcss-color-function/test/lab-function-interop.expect.css @@ -1,7 +1,7 @@ .test-lab-interop { /* rgb(196, 0, 48); from postcss-lab-function */ - color-1: rgb(196, 0, 48); - color-1: color(display-p3 0.73296 0 0.17714); + color-1: rgb(194, 0, 49); + color-1: color(display-p3 0.71499 0 0.19398); color-1: lab(40% 80 39); } diff --git a/plugins/postcss-color-function/test/lab-function-interop.preserve.false.expect.css b/plugins/postcss-color-function/test/lab-function-interop.preserve.false.expect.css index aaaf5dff8..e260e7203 100644 --- a/plugins/postcss-color-function/test/lab-function-interop.preserve.false.expect.css +++ b/plugins/postcss-color-function/test/lab-function-interop.preserve.false.expect.css @@ -1,7 +1,7 @@ .test-lab-interop { /* rgb(196, 0, 48); from postcss-lab-function */ - color-1: rgb(196, 0, 48); - color-1: color(display-p3 0.73296 0 0.17714); + color-1: rgb(194, 0, 49); + color-1: color(display-p3 0.71499 0 0.19398); } @supports (--one-a50-var: color(display-p3 0.1 0.1 0.1)) { diff --git a/plugins/postcss-color-mix-function/dist/index.cjs b/plugins/postcss-color-mix-function/dist/index.cjs index a70d0c9bc..a7a062685 100644 --- a/plugins/postcss-color-mix-function/dist/index.cjs +++ b/plugins/postcss-color-mix-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-mix-function",Declaration:a=>{const i=a.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(a))return;if(hasSupportsAtRuleAncestor(a))return;const u=s.tokenize({css:i}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),a.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&a.cloneBefore({value:p}),null!=e&&e.preserve||a.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-color-mix-function",Declaration:i=>{const a=i.value;if(!o.test(a))return;if(hasFallback(i))return;if(hasSupportsAtRuleAncestor(i))return;const u=s.tokenize({css:a}),l=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.serializeRGB(s)}})),c=t.stringify(l);if(c===a)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),i.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&i.cloneBefore({value:p}),null!=e&&e.preserve||i.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-color-mix-function/dist/index.mjs b/plugins/postcss-color-mix-function/dist/index.mjs index 6213d5e7f..a3d49ffec 100644 --- a/plugins/postcss-color-mix-function/dist/index.mjs +++ b/plugins/postcss-color-mix-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as a,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const b=m.value;if(!p.test(b.toLowerCase()))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const g=e({css:b}),P=a(i(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(a(i(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,serializeRGB as o,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as i,parseCommaSeparatedListOfComponentValues as a,isFunctionNode as c,stringify as l}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-color-mix-function",Declaration:m=>{const b=m.value;if(!p.test(b))return;if(hasFallback(m))return;if(hasSupportsAtRuleAncestor(m))return;const g=e({css:b}),P=i(a(g),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return o(e)}})),d=l(P);if(d===b)return;let v=d;null!=s&&s.subFeatures.displayP3&&(v=l(i(a(r(g)),(s=>{if(c(s)&&f.test(s.getName())){const e=t(s);if(!e)return;return n(e)?o(e):u(e)}})))),m.cloneBefore({value:d}),null!=s&&s.subFeatures.displayP3&&v!==d&&m.cloneBefore({value:v}),null!=s&&s.preserve||m.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-color-mix-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-color-mix-function/src/index.ts b/plugins/postcss-color-mix-function/src/index.ts index 3def97e6e..a246679c2 100644 --- a/plugins/postcss-color-mix-function/src/index.ts +++ b/plugins/postcss-color-mix-function/src/index.ts @@ -23,7 +23,7 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) postcssPlugin: 'postcss-color-mix-function', Declaration: (decl: Declaration) => { const originalValue = decl.value; - if (!(colorMixFunctionRegex.test(originalValue.toLowerCase()))) { + if (!(colorMixFunctionRegex.test(originalValue))) { return; } diff --git a/plugins/postcss-color-mix-function/test/basic.css b/plugins/postcss-color-mix-function/test/basic.css index 1530f8004..aeec640d6 100644 --- a/plugins/postcss-color-mix-function/test/basic.css +++ b/plugins/postcss-color-mix-function/test/basic.css @@ -141,6 +141,10 @@ color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } -.foo { +.same-color { color: color-mix(in srgb, blue, blue 65%); } + +.test-css-color-5-interop { + color-1: color-mix(in oklch, rgb(from red r 0 0 / 0), rgb(from hsl(180deg 80% 30% / 0.5) 0 g b) 65%) +} diff --git a/plugins/postcss-color-mix-function/test/basic.expect.css b/plugins/postcss-color-mix-function/test/basic.expect.css index f17a65efc..7d46dc94a 100644 --- a/plugins/postcss-color-mix-function/test/basic.expect.css +++ b/plugins/postcss-color-mix-function/test/basic.expect.css @@ -3,8 +3,8 @@ } .complex { - color: rgba(255, 99, 0, 0.339833); - color: color(display-p3 0.9361 0.42808 0.14191 / 0.339833); + color: rgba(255, 102, 0, 0.34); + color: color(display-p3 0.9361 0.42808 0.14191 / 0.34); } :root { @@ -40,18 +40,18 @@ } .spec-example-6 { - color-1: rgb(165, 155, 255); - color-1: color(display-p3 0.6399 0.60128 1); + color-1: rgb(166, 158, 255); + color-1: color(display-p3 0.64126 0.60728 1); /* TODO : https://github.com/w3c/csswg-drafts/issues/8609 */ - color-2: rgb(113, 162, 255); - color-2: color(display-p3 0.4712 0.62627 1); + color-2: rgb(116, 163, 255); + color-2: color(display-p3 0.49247 0.63302 1); color-3: rgb(128, 128, 255); } .spec-example-7 { /* TODO : https://github.com/w3c/csswg-drafts/issues/8444 */ - color-1: rgb(126, 255, 77); - color-1: color(display-p3 0.60393 1 0.34812); + color-1: rgb(0, 255, 0); + color-1: color(display-p3 0.63217 1 0.41255); } .spec-example-8 { @@ -93,8 +93,8 @@ color-2: color(display-p3 0.60204 0.43193 0.12323); /* rgb(143, 117, 0) */ - color-3: rgb(143, 117, 0); - color-3: color(display-p3 0.55128 0.45926 0); + color-3: rgb(142, 117, 0); + color-3: color(display-p3 0.54586 0.46077 0); /* rgb(89, 122, 0) */ color-4: rgb(89, 122, 0); @@ -104,18 +104,18 @@ color-5: color(display-p3 0.3137 0.48778 0.12828); /* rgb(49, 128, 0) */ - color-6: rgb(49, 128, 0); + color-6: rgb(54, 127, 0); color-6: color(display-p3 0.2789 0.49535 0.06321); /* rgb(243, 40, 0) */ color-7: rgb(243, 40, 0); /* rgb(237, 55, 0) */ - color-8: rgb(237, 55, 0); + color-8: rgb(236, 56, 0); color-8: color(display-p3 0.85526 0.28166 0.13354); /* rgb(235, 59, 0) */ - color-9: rgb(235, 59, 0); + color-9: rgb(229, 68, 0); color-9: color(display-p3 0.84845 0.29298 0.07064); } @@ -138,13 +138,17 @@ } .zero-alpha-cylindrical { - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-6: rgba(179, 0, 255, 0.65); } -.foo { +.same-color { color: rgb(0, 0, 255); } + +.test-css-color-5-interop { + color-1: rgba(92, 133, 74, 0.325) +} diff --git a/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css b/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css index 597c7939d..05e935ce3 100644 --- a/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-color-mix-function/test/basic.preserve-true.expect.css @@ -4,8 +4,8 @@ } .complex { - color: rgba(255, 99, 0, 0.339833); - color: color(display-p3 0.9361 0.42808 0.14191 / 0.339833); + color: rgba(255, 102, 0, 0.34); + color: color(display-p3 0.9361 0.42808 0.14191 / 0.34); color: color-mix( in lch, purple calc(100% * sin(0.1)), @@ -69,12 +69,12 @@ } .spec-example-6 { - color-1: rgb(165, 155, 255); - color-1: color(display-p3 0.6399 0.60128 1); + color-1: rgb(166, 158, 255); + color-1: color(display-p3 0.64126 0.60728 1); color-1: color-mix(in lch, white, blue); /* TODO : https://github.com/w3c/csswg-drafts/issues/8609 */ - color-2: rgb(113, 162, 255); - color-2: color(display-p3 0.4712 0.62627 1); + color-2: rgb(116, 163, 255); + color-2: color(display-p3 0.49247 0.63302 1); color-2: color-mix(in oklch, white, blue); color-3: rgb(128, 128, 255); color-3: color-mix(in srgb, white, blue); @@ -82,8 +82,8 @@ .spec-example-7 { /* TODO : https://github.com/w3c/csswg-drafts/issues/8444 */ - color-1: rgb(126, 255, 77); - color-1: color(display-p3 0.60393 1 0.34812); + color-1: rgb(0, 255, 0); + color-1: color(display-p3 0.63217 1 0.41255); color-1: color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow); } @@ -140,8 +140,8 @@ color-2: color-mix(in lab, red, green); /* rgb(143, 117, 0) */ - color-3: rgb(143, 117, 0); - color-3: color(display-p3 0.55128 0.45926 0); + color-3: rgb(142, 117, 0); + color-3: color(display-p3 0.54586 0.46077 0); color-3: color-mix(in lch, red, green); /* rgb(89, 122, 0) */ @@ -154,7 +154,7 @@ color-5: color-mix(in lab, red, green 90%); /* rgb(49, 128, 0) */ - color-6: rgb(49, 128, 0); + color-6: rgb(54, 127, 0); color-6: color(display-p3 0.2789 0.49535 0.06321); color-6: color-mix(in lch, red, green 90%); @@ -163,12 +163,12 @@ color-7: color-mix(in xyz, red 90%, green); /* rgb(237, 55, 0) */ - color-8: rgb(237, 55, 0); + color-8: rgb(236, 56, 0); color-8: color(display-p3 0.85526 0.28166 0.13354); color-8: color-mix(in lab, red 90%, green); /* rgb(235, 59, 0) */ - color-9: rgb(235, 59, 0); + color-9: rgb(229, 68, 0); color-9: color(display-p3 0.84845 0.29298 0.07064); color-9: color-mix(in lch, red 90%, green); } @@ -201,17 +201,22 @@ } .zero-alpha-cylindrical { - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); color-6: rgba(179, 0, 255, 0.65); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } -.foo { +.same-color { color: rgb(0, 0, 255); color: color-mix(in srgb, blue, blue 65%); } + +.test-css-color-5-interop { + color-1: rgba(92, 133, 74, 0.325); + color-1: color-mix(in oklch, rgb(from red r 0 0 / 0), rgb(from hsl(180deg 80% 30% / 0.5) 0 g b) 65%) +} diff --git a/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css index 597c7939d..05e935ce3 100644 --- a/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-color-mix-function/test/basic.with-cloned-rules.expect.css @@ -4,8 +4,8 @@ } .complex { - color: rgba(255, 99, 0, 0.339833); - color: color(display-p3 0.9361 0.42808 0.14191 / 0.339833); + color: rgba(255, 102, 0, 0.34); + color: color(display-p3 0.9361 0.42808 0.14191 / 0.34); color: color-mix( in lch, purple calc(100% * sin(0.1)), @@ -69,12 +69,12 @@ } .spec-example-6 { - color-1: rgb(165, 155, 255); - color-1: color(display-p3 0.6399 0.60128 1); + color-1: rgb(166, 158, 255); + color-1: color(display-p3 0.64126 0.60728 1); color-1: color-mix(in lch, white, blue); /* TODO : https://github.com/w3c/csswg-drafts/issues/8609 */ - color-2: rgb(113, 162, 255); - color-2: color(display-p3 0.4712 0.62627 1); + color-2: rgb(116, 163, 255); + color-2: color(display-p3 0.49247 0.63302 1); color-2: color-mix(in oklch, white, blue); color-3: rgb(128, 128, 255); color-3: color-mix(in srgb, white, blue); @@ -82,8 +82,8 @@ .spec-example-7 { /* TODO : https://github.com/w3c/csswg-drafts/issues/8444 */ - color-1: rgb(126, 255, 77); - color-1: color(display-p3 0.60393 1 0.34812); + color-1: rgb(0, 255, 0); + color-1: color(display-p3 0.63217 1 0.41255); color-1: color-mix(in hsl, color(display-p3 0 1 0) 80%, yellow); } @@ -140,8 +140,8 @@ color-2: color-mix(in lab, red, green); /* rgb(143, 117, 0) */ - color-3: rgb(143, 117, 0); - color-3: color(display-p3 0.55128 0.45926 0); + color-3: rgb(142, 117, 0); + color-3: color(display-p3 0.54586 0.46077 0); color-3: color-mix(in lch, red, green); /* rgb(89, 122, 0) */ @@ -154,7 +154,7 @@ color-5: color-mix(in lab, red, green 90%); /* rgb(49, 128, 0) */ - color-6: rgb(49, 128, 0); + color-6: rgb(54, 127, 0); color-6: color(display-p3 0.2789 0.49535 0.06321); color-6: color-mix(in lch, red, green 90%); @@ -163,12 +163,12 @@ color-7: color-mix(in xyz, red 90%, green); /* rgb(237, 55, 0) */ - color-8: rgb(237, 55, 0); + color-8: rgb(236, 56, 0); color-8: color(display-p3 0.85526 0.28166 0.13354); color-8: color-mix(in lab, red 90%, green); /* rgb(235, 59, 0) */ - color-9: rgb(235, 59, 0); + color-9: rgb(229, 68, 0); color-9: color(display-p3 0.84845 0.29298 0.07064); color-9: color-mix(in lch, red 90%, green); } @@ -201,17 +201,22 @@ } .zero-alpha-cylindrical { - color-4: rgba(125, 0, 190, 0.65); - color-4: color(display-p3 0.45007 0 0.73452 / 0.65); + color-4: rgba(122, 0, 182, 0.65); + color-4: color(display-p3 0.44471 0 0.71665 / 0.65); color-4: color-mix(in oklch, rgb(255 0 0 / 0), blue 65%); - color-5: rgba(153, 0, 125, 0.65); - color-5: color(display-p3 0.56492 0 0.48893 / 0.65); + color-5: rgba(149, 0, 122, 0.65); + color-5: color(display-p3 0.55417 0 0.48083 / 0.65); color-5: color-mix(in lch, rgb(255 0 0 / 0), blue 65%); color-6: rgba(179, 0, 255, 0.65); color-6: color-mix(in hsl, rgb(255 0 0 / 0), blue 65%); } -.foo { +.same-color { color: rgb(0, 0, 255); color: color-mix(in srgb, blue, blue 65%); } + +.test-css-color-5-interop { + color-1: rgba(92, 133, 74, 0.325); + color-1: color-mix(in oklch, rgb(from red r 0 0 / 0), rgb(from hsl(180deg 80% 30% / 0.5) 0 g b) 65%) +} diff --git a/plugins/postcss-color-mix-function/test/variables.expect.css b/plugins/postcss-color-mix-function/test/variables.expect.css index f34ea2ecc..6737cc302 100644 --- a/plugins/postcss-color-mix-function/test/variables.expect.css +++ b/plugins/postcss-color-mix-function/test/variables.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(235, 59, 0); - --firebrick-a50: rgb(235, 59, 0); + --firebrick: rgb(229, 68, 0); + --firebrick-a50: rgb(229, 68, 0); --opacity-50: 50%; --firebrick-a50-var: color-mix(in lch, red, green var(--opacity-50)); diff --git a/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css b/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css index 4280fa0e6..73c75514d 100644 --- a/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-color-mix-function/test/variables.preserve-true.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(235, 59, 0); - --firebrick-a50: rgb(235, 59, 0); + --firebrick: rgb(229, 68, 0); + --firebrick-a50: rgb(229, 68, 0); --opacity-50: 50%; --firebrick-a50-var: color-mix(in lch, red, green var(--opacity-50)); diff --git a/plugins/postcss-gradients-interpolation-method/README.md b/plugins/postcss-gradients-interpolation-method/README.md index e88a2b4f0..9eea71d4a 100644 --- a/plugins/postcss-gradients-interpolation-method/README.md +++ b/plugins/postcss-gradients-interpolation-method/README.md @@ -2,7 +2,7 @@ [][npm-url] [][css-url] [][cli-url] [][discord] -[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Specification]. +[PostCSS Gradients Interpolation Method] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4]. ```pcss .example { @@ -24,7 +24,7 @@ --background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%); } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { :root { --background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } @@ -162,4 +162,4 @@ _Custom properties do not fallback to the previous declaration_ [PostCSS]: https://github.com/postcss/postcss [PostCSS Gradients Interpolation Method]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method -[CSS Specification]: https://drafts.csswg.org/css-images-4/#linear-gradients +[CSS Images Module 4]: https://drafts.csswg.org/css-images-4/#linear-gradients diff --git a/plugins/postcss-gradients-interpolation-method/docs/README.md b/plugins/postcss-gradients-interpolation-method/docs/README.md index 647d3d542..23a585ec1 100644 --- a/plugins/postcss-gradients-interpolation-method/docs/README.md +++ b/plugins/postcss-gradients-interpolation-method/docs/README.md @@ -16,7 +16,7 @@

-[] lets you use different interpolation methods in CSS gradient functions following [CSS Specification]. +[] lets you use different interpolation methods in CSS gradient functions following [CSS Images Module 4]. ```pcss @@ -99,4 +99,4 @@ is wrapped with `@supports` when used in Custom Properties. By default, it is en _Custom properties do not fallback to the previous declaration_ -[CSS Specification]: +[CSS Images Module 4]: diff --git a/plugins/postcss-gradients-interpolation-method/package.json b/plugins/postcss-gradients-interpolation-method/package.json index 281261f99..8e1ac1c88 100644 --- a/plugins/postcss-gradients-interpolation-method/package.json +++ b/plugins/postcss-gradients-interpolation-method/package.json @@ -63,9 +63,11 @@ "bugs": "https://github.com/csstools/postcss-plugins/issues", "keywords": [ "color", + "color space interpolation", "conic", "css", "gradients", + "hue interpolation method", "interpolation", "linear", "postcss", diff --git a/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css b/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css index 249e567cc..4e66ae472 100644 --- a/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/examples/example.expect.css @@ -7,7 +7,7 @@ --background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%); } -@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) and (color: hsl(0 0% 0% / 0)) { +@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) { :root { --background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%); } diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css index 1aefb4436..f5f03e622 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); } @@ -19,7 +19,7 @@ } } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); } @@ -37,7 +37,7 @@ } } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); } diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css index 53b8b3e3b..9795b2cc6 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-false.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); diff --git a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css index 1aefb4436..f5f03e622 100644 --- a/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css +++ b/plugins/postcss-gradients-interpolation-method/test/variables.preserve-true.expect.css @@ -7,7 +7,7 @@ --gradient-prop-6: repeating-radial-gradient(rgb(255, 0, 0) 0, rgb(255, 0, 0) 8%, rgb(255, 255, 0) 8%, rgb(255, 255, 0) 16%, rgb(0, 0, 255) 16%, rgb(0, 0, 255) 24%); } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-1: conic-gradient(rgb(0, 255, 255) 0deg, color(display-p3 0.46959 0.99047 0.92627), color(display-p3 0.49985 0.99171 0.85485), color(display-p3 0.54521 0.98867 0.77958), rgb(116, 253, 172), rgb(143, 250, 149), rgb(169, 245, 125), rgb(193, 239, 99), rgb(215, 232, 73), rgb(236, 224, 44), rgb(255, 215, 0) 45deg, rgb(255, 215, 0) 50deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 180deg, color(display-p3 0.87681 0.15273 0.49748), color(display-p3 0.82604 0.11418 0.58428), color(display-p3 0.76599 0.08203 0.66761), color(display-p3 0.69762 0.0482 0.74597), color(display-p3 0.62186 0.00333 0.81693), color(display-p3 0.53937 -0.0428 0.87762), color(display-p3 0.44998 -0.0733 0.92496), color(display-p3 0.35136 -0.0839 0.956), color(display-p3 0.23382 -0.0697 0.9682), rgb(0, 0, 255) 100%); } @@ -19,7 +19,7 @@ } } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-2: linear-gradient(90deg, rgb(0, 0, 0) 25%, color(display-p3 0.14131 -0.067 -0.0363), color(display-p3 0.22761 -0.1199 -0.0139), color(display-p3 0.31288 -0.1584 -0.0347), color(display-p3 0.39789 -0.1854 -0.0716), color(display-p3 0.48306 -0.2009 -0.1), color(display-p3 0.56864 -0.2029 -0.1164), color(display-p3 0.65479 -0.1869 -0.1172), color(display-p3 0.74161 -0.1398 -0.093), color(display-p3 0.82917 0.03813 0.00684), rgb(255, 0, 0) 45%, color(display-p3 0.89484 0.11059 0.29739), color(display-p3 0.85721 -0.0003 0.41862), color(display-p3 0.80547 -0.0635 0.53001), color(display-p3 0.74092 -0.0802 0.63538), color(display-p3 0.66511 -0.0895 0.7332), color(display-p3 0.57951 -0.1015 0.81971), color(display-p3 0.4848 -0.1135 0.89016), color(display-p3 0.37932 -0.1162 0.93966), color(display-p3 0.25342 -0.0953 0.96388), rgb(0, 0, 255) 50%, rgb(0, 0, 255) 75%); } @@ -37,7 +37,7 @@ } } -@supports (color: rgb(0 0 0 / 0)) and (color: color(display-p3 0 0 0)) { +@supports (color: color(display-p3 0 0 0)) { :root { --gradient-prop-4: repeating-conic-gradient(from 0deg, rgb(154, 205, 50) 40deg, rgb(165, 206, 43), rgb(176, 208, 35), rgb(187, 209, 27), rgb(197, 210, 17), rgb(207, 211, 5), color(display-p3 0.84825 0.83124 0.26768), color(display-p3 0.88052 0.8359 0.2679), color(display-p3 0.91234 0.84039 0.2709), color(display-p3 0.94369 0.84473 0.27678), rgb(255, 215, 0) 60deg, rgb(255, 215, 0) 75deg, color(display-p3 0.99264 0.78957 0.18861), color(display-p3 1.0074 0.72781 0.07954), color(display-p3 1.01782 0.66411 -0.0465), color(display-p3 1.02309 0.59891 -0.0572), color(display-p3 1.0225 0.53272 0.03345), color(display-p3 1.01552 0.46604 0.13763), color(display-p3 1.00173 0.39934 0.21402), color(display-p3 0.98086 0.33297 0.28199), color(display-p3 0.95278 0.26693 0.3458), rgb(255, 0, 102) 0deg); } diff --git a/plugins/postcss-hwb-function/CHANGELOG.md b/plugins/postcss-hwb-function/CHANGELOG.md index 55194752b..1fb2b77ea 100644 --- a/plugins/postcss-hwb-function/CHANGELOG.md +++ b/plugins/postcss-hwb-function/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS HWB Function +### Unreleased (patch) + +- Ignore relative color syntax + ### 2.2.1 (April 10, 2023) - Updated `@csstools/css-tokenizer` to `2.1.1` (patch) diff --git a/plugins/postcss-hwb-function/dist/index.cjs b/plugins/postcss-hwb-function/dist/index.cjs index 41ae6f327..19fafe2e7 100644 --- a/plugins/postcss-hwb-function/dist/index.cjs +++ b/plugins/postcss-hwb-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer");const s="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&r.params.includes(s))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const t=e.prop.toLowerCase(),s=r.index(e);for(let e=0;e{const l="preserve"in Object(a)&&Boolean(null==a?void 0:a.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(a,{postcss:c})=>{const p=a.value;if(!o.test(p))return;if(l&&hasSupportsAtRuleAncestor(a))return;if(hasFallback(a))return;const u=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(t.tokenize({css:p})),(t=>{if(r.isFunctionNode(t)&&n.test(t.getName())){const r=e.color(t);if(!r)return;if(r.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords))return;return e.serializeRGB(r)}})),i=r.stringify(u);if(i!==p)if(a.variable&&l&&a.parent){const e=a.parent,r=c.atRule({name:"supports",params:s,source:a.source}),t=e.clone();t.removeAll(),t.append(a.clone()),r.append(t),insertAtSupportsAfterCorrectRule(r,e,s),a.replaceWith(a.clone({value:i}))}else l?a.cloneBefore({value:i}):a.replaceWith(a.clone({value:i}))}}};function insertAtSupportsAfterCorrectRule(e,r,t){let s=r,o=r.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===t;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms"),r=require("@csstools/css-tokenizer");const s="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(s))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e{const l="preserve"in Object(a)&&Boolean(null==a?void 0:a.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(a,{postcss:c})=>{const p=a.value;if(!o.test(p))return;if(l&&hasSupportsAtRuleAncestor(a))return;if(hasFallback(a))return;const u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(r.tokenize({css:p})),(r=>{if(t.isFunctionNode(r)&&n.test(r.getName())){const t=e.color(r);if(!t)return;if(t.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords))return;if(t.syntaxFlags.has(e.SyntaxFlag.RelativeColorSyntax))return;return e.serializeRGB(t)}})),i=t.stringify(u);if(i!==p)if(a.variable&&l&&a.parent){const e=a.parent,t=c.atRule({name:"supports",params:s,source:a.source}),r=e.clone();r.removeAll(),r.append(a.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,s),a.replaceWith(a.clone({value:i}))}else l?a.cloneBefore({value:i}):a.replaceWith(a.clone({value:i}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-hwb-function/dist/index.mjs b/plugins/postcss-hwb-function/dist/index.mjs index e0054033a..067e68918 100644 --- a/plugins/postcss-hwb-function/dist/index.mjs +++ b/plugins/postcss-hwb-function/dist/index.mjs @@ -1 +1 @@ -import{color as e,SyntaxFlag as t,serializeRGB as r}from"@csstools/css-color-parser";import{replaceComponentValues as s,parseCommaSeparatedListOfComponentValues as o,isFunctionNode as n,stringify as a}from"@csstools/css-parser-algorithms";import{tokenize as p}from"@csstools/css-tokenizer";const c="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(c))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e{const f="preserve"in Object(i)&&Boolean(null==i?void 0:i.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(i,{postcss:m})=>{const h=i.value;if(!l.test(h))return;if(f&&hasSupportsAtRuleAncestor(i))return;if(hasFallback(i))return;const d=s(o(p({css:h})),(s=>{if(n(s)&&u.test(s.getName())){const o=e(s);if(!o)return;if(o.syntaxFlags.has(t.HasNoneKeywords))return;return r(o)}})),v=a(d);if(v!==h)if(i.variable&&f&&i.parent){const e=i.parent,t=m.atRule({name:"supports",params:c,source:i.source}),r=e.clone();r.removeAll(),r.append(i.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,c),i.replaceWith(i.clone({value:v}))}else f?i.cloneBefore({value:v}):i.replaceWith(i.clone({value:v}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import{color as e,SyntaxFlag as t,serializeRGB as r}from"@csstools/css-color-parser";import{replaceComponentValues as s,parseCommaSeparatedListOfComponentValues as o,isFunctionNode as n,stringify as a}from"@csstools/css-parser-algorithms";import{tokenize as l}from"@csstools/css-tokenizer";const p="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(p))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e{const f="preserve"in Object(i)&&Boolean(null==i?void 0:i.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(i,{postcss:m})=>{const h=i.value;if(!c.test(h))return;if(f&&hasSupportsAtRuleAncestor(i))return;if(hasFallback(i))return;const v=s(o(l({css:h})),(s=>{if(n(s)&&u.test(s.getName())){const o=e(s);if(!o)return;if(o.syntaxFlags.has(t.HasNoneKeywords))return;if(o.syntaxFlags.has(t.RelativeColorSyntax))return;return r(o)}})),d=a(v);if(d!==h)if(i.variable&&f&&i.parent){const e=i.parent,t=m.atRule({name:"supports",params:p,source:i.source}),r=e.clone();r.removeAll(),r.append(i.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,p),i.replaceWith(i.clone({value:d}))}else f?i.cloneBefore({value:d}):i.replaceWith(i.clone({value:d}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-hwb-function/src/index.ts b/plugins/postcss-hwb-function/src/index.ts index df2ef22f6..2f6f40300 100644 --- a/plugins/postcss-hwb-function/src/index.ts +++ b/plugins/postcss-hwb-function/src/index.ts @@ -49,6 +49,10 @@ const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + return serializeRGB(colorData); } }, diff --git a/plugins/postcss-hwb-function/test/basic.css b/plugins/postcss-hwb-function/test/basic.css index b8ff41de4..2431851b7 100644 --- a/plugins/postcss-hwb-function/test/basic.css +++ b/plugins/postcss-hwb-function/test/basic.css @@ -18,3 +18,7 @@ to-clone { color: hwb(0 60% 40%); } + +.test-css-color-5-interop { + color-1: hwb(from hwb(50deg 20% 30%) h w b); +} diff --git a/plugins/postcss-hwb-function/test/basic.expect.css b/plugins/postcss-hwb-function/test/basic.expect.css index 9457d6699..14ee65c9c 100644 --- a/plugins/postcss-hwb-function/test/basic.expect.css +++ b/plugins/postcss-hwb-function/test/basic.expect.css @@ -18,3 +18,7 @@ to-clone { color: rgb(153, 153, 153); } + +.test-css-color-5-interop { + color-1: hwb(from rgb(179, 157, 51) h w b); +} diff --git a/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css index 7f99bd6ad..a9ced8e5c 100644 --- a/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-hwb-function/test/basic.preserve-true.expect.css @@ -28,3 +28,8 @@ to-clone { color: rgb(153, 153, 153); color: hwb(0 60% 40%); } + +.test-css-color-5-interop { + color-1: hwb(from rgb(179, 157, 51) h w b); + color-1: hwb(from hwb(50deg 20% 30%) h w b); +} diff --git a/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css index 6a88fc4de..554efb777 100644 --- a/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-hwb-function/test/basic.with-cloned-rules.expect.css @@ -33,3 +33,8 @@ to-clone { color: rgb(153, 153, 153); color: hwb(0 60% 40%); } + +.test-css-color-5-interop { + color-1: hwb(from rgb(179, 157, 51) h w b); + color-1: hwb(from hwb(50deg 20% 30%) h w b); +} diff --git a/plugins/postcss-lab-function/CHANGELOG.md b/plugins/postcss-lab-function/CHANGELOG.md index bb4d8bf4a..123fb82c7 100644 --- a/plugins/postcss-lab-function/CHANGELOG.md +++ b/plugins/postcss-lab-function/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS Lab Function +### Unreleased (patch) + +- Ignore relative color syntax + ### 5.2.1 (April 10, 2023) - Updated `@csstools/css-tokenizer` to `2.1.1` (patch) diff --git a/plugins/postcss-lab-function/dist/index.cjs b/plugins/postcss-lab-function/dist/index.cjs index b47c81346..861fcacc7 100644 --- a/plugins/postcss-lab-function/dist/index.cjs +++ b/plugins/postcss-lab-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-lab-function",Declaration:n=>{const i=n.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-lab-function",Declaration:n=>{const l=n.value;if(!o.test(l))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const i=s.tokenize({css:l}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(i),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===l)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(i)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-lab-function/dist/index.mjs b/plugins/postcss-lab-function/dist/index.mjs index c0b696dd1..78588ce0a 100644 --- a/plugins/postcss-lab-function/dist/index.mjs +++ b/plugins/postcss-lab-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-lab-function",Declaration:b=>{const d=b.value;if(!f.test(d.toLowerCase()))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const g=e({css:d}),y=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),P=c(y);if(P===d)return;let h=P;null!=s&&s.subFeatures.displayP3&&(h=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:P}),null!=s&&s.subFeatures.displayP3&&h!==P&&b.cloneBefore({value:h}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as l}from"@csstools/css-color-parser";import{replaceComponentValues as u,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-lab-function",Declaration:b=>{const g=b.value;if(!f.test(g))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const y=e({css:g}),d=u(i(y),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(e.syntaxFlags.has(o.RelativeColorSyntax))return;return a(e)}})),h=c(d);if(h===g)return;let v=h;null!=s&&s.subFeatures.displayP3&&(v=c(u(i(r(y)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(e.syntaxFlags.has(o.RelativeColorSyntax))return;return n(e)?a(e):l(e)}})))),b.cloneBefore({value:h}),null!=s&&s.subFeatures.displayP3&&v!==h&&b.cloneBefore({value:v}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-lab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-lab-function/src/index.ts b/plugins/postcss-lab-function/src/index.ts index dd690476d..1f15d43ba 100644 --- a/plugins/postcss-lab-function/src/index.ts +++ b/plugins/postcss-lab-function/src/index.ts @@ -23,7 +23,7 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) postcssPlugin: 'postcss-lab-function', Declaration: (decl: Declaration) => { const originalValue = decl.value; - if (!(lab_lch_functionRegex.test(originalValue.toLowerCase()))) { + if (!(lab_lch_functionRegex.test(originalValue))) { return; } @@ -49,6 +49,10 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + return serializeRGB(colorData); } }, @@ -74,6 +78,10 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + if (colorDataFitsRGB_Gamut(colorData)) { return serializeRGB(colorData); } diff --git a/plugins/postcss-lab-function/test/basic.css b/plugins/postcss-lab-function/test/basic.css index 4341ed3ea..53a192099 100644 --- a/plugins/postcss-lab-function/test/basic.css +++ b/plugins/postcss-lab-function/test/basic.css @@ -192,3 +192,8 @@ to-clone { color: lab(40% 56.6 39); } + +.test-css-color-5-interop { + color-1: lab(from lab(40% 56.6 39) l a b); + color-2: lch(from lch(40% 56.6 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/basic.display-p3-false.expect.css b/plugins/postcss-lab-function/test/basic.display-p3-false.expect.css index 1d19db617..9fc55ad8a 100644 --- a/plugins/postcss-lab-function/test/basic.display-p3-false.expect.css +++ b/plugins/postcss-lab-function/test/basic.display-p3-false.expect.css @@ -16,11 +16,11 @@ color-5: rgba(179, 35, 35, 0.5); color-6: rgb(222, 105, 147); - color-7: rgb(0, 166, 143); - color-8: rgb(0, 166, 143); - color-9: rgb(0, 166, 143); - color-10: rgb(0, 166, 143); - color-11: rgb(0, 166, 143); + color-7: rgb(0, 164, 142); + color-8: rgb(0, 164, 142); + color-9: rgb(0, 164, 142); + color-10: rgb(0, 164, 142); + color-11: rgb(0, 164, 142); color-12: rgb(212, 118, 84); color-13: rgb(212, 118, 84); @@ -30,10 +30,10 @@ color-17: lch(60% 50 0.785398unknown); color-18: rgb(212, 118, 84); - color-20: rgb(0, 166, 143); - color-21: rgb(0, 166, 143); - color-22: rgb(0, 166, 143); - color-23: rgb(0, 166, 143); + color-20: rgb(0, 164, 142); + color-21: rgb(0, 164, 142); + color-22: rgb(0, 164, 142); + color-23: rgb(0, 164, 142); } .test-percentages { @@ -94,12 +94,12 @@ /* teal */ prop-2: rgb(0, 0, 0); /* teal */ - prop-3: rgb(0, 45, 46); + prop-3: rgb(0, 44, 45); } .test-multiple-colors { background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84)); - background-2: linear-gradient(rgb(0, 126, 53), rgb(212, 118, 84)); + background-2: linear-gradient(rgb(0, 123, 61), rgb(212, 118, 84)); } .test-unparseable-lab-function { @@ -109,57 +109,57 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ /* in */ prop-3: rgb(97, 112, 56); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ /* in */ prop-5: rgb(85, 204, 229); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ /* out */ prop-7: rgb(255, 201, 158); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); /* in */ prop-10: rgb(231, 224, 96); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ /* in */ prop-15: rgb(96, 158, 117); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); + prop-17: rgb(0, 214, 242); /* out */ - prop-18: rgb(255, 156, 205); + prop-18: rgb(255, 162, 204); } .test-wpt-lab { @@ -170,7 +170,7 @@ lab-005: rgb(27, 193, 169); lab-006: rgb(195, 169, 14); lab-007: rgb(33, 135, 237); - lab-008: rgb(0, 251, 41); + lab-008: rgb(0, 249, 66); } .test-wpt-lch { @@ -181,7 +181,7 @@ lch-005: rgb(27, 193, 169); lch-006: rgb(195, 169, 14); lch-007: rgb(33, 135, 237); - lch-008: rgb(0, 251, 41); + lch-008: rgb(0, 249, 66); } .manual_fallback { @@ -192,3 +192,8 @@ to-clone { color: rgb(179, 35, 35); } + +.test-css-color-5-interop { + color-1: lab(from rgb(179, 35, 35) l a b); + color-2: lch(from rgb(163, 57, 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css index a6faaec0a..61af1b321 100644 --- a/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.display-p3-false.preserve-true.expect.css @@ -28,16 +28,16 @@ color-6: rgb(222, 105, 147); color-6: lch(60% 50 0); - color-7: rgb(0, 166, 143); + color-7: rgb(0, 164, 142); color-7: lch(60% 50 180); - color-8: rgb(0, 166, 143); + color-8: rgb(0, 164, 142); color-8: lch(60% 50 180deg); - color-9: rgb(0, 166, 143); + color-9: rgb(0, 164, 142); color-9: lch(60% 50 0.5turn); - color-10: rgb(0, 166, 143); + color-10: rgb(0, 164, 142); color-10: lch(60% 50 200grad); - color-11: rgb(0, 166, 143); + color-11: rgb(0, 164, 142); color-11: lch(60% 50 3.14159rad); color-12: rgb(212, 118, 84); @@ -55,14 +55,14 @@ color-18: rgb(212, 118, 84); color-18: lch(60% 50 405); - color-20: rgb(0, 166, 143); + color-20: rgb(0, 164, 142); color-20: LCH(60% 50 180DEG); - color-21: rgb(0, 166, 143); + color-21: rgb(0, 164, 142); color-21: Lch(60% 50 0.5TURN); - color-22: rgb(0, 166, 143); + color-22: rgb(0, 164, 142); color-22: lCh(60% 50 200GRAD); - color-23: rgb(0, 166, 143); + color-23: rgb(0, 164, 142); color-23: lcH(60% 50 3.14159RAD); } @@ -145,14 +145,14 @@ prop-2: rgb(0, 0, 0); prop-2: lch(0% 210 285); /* teal */ - prop-3: rgb(0, 45, 46); + prop-3: rgb(0, 44, 45); prop-3: lch(5% 210 285); } .test-multiple-colors { background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84)); background-1: linear-gradient(lab(45% -13 29), lch(60% 50 45deg)); - background-2: linear-gradient(rgb(0, 126, 53), rgb(212, 118, 84)); + background-2: linear-gradient(rgb(0, 123, 61), rgb(212, 118, 84)); background-2: linear-gradient(lab(45% -50 29), lch(60% 50 45deg)); } @@ -163,10 +163,10 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: lab(48% -53 12); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: lab(58% -54 69); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ @@ -174,7 +174,7 @@ prop-3: rgb(97, 112, 56); prop-3: lab(45% -13 29); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: lab(77% 33 97); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ @@ -182,7 +182,7 @@ prop-5: rgb(85, 204, 229); prop-5: lab(76% -29 -23); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: lab(16% -32 24); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ @@ -190,12 +190,12 @@ prop-7: rgb(255, 201, 158); prop-7: lab(85% 16 29); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: lab(55% -42 58); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: lab(87% -94 103); /* in */ prop-10: rgb(231, 224, 96); @@ -203,18 +203,18 @@ /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: lab(69% -35 -39); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: lab(68% 61 39); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: lab(60% -28 74); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: lab(65% 81 -13); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ @@ -222,15 +222,15 @@ prop-15: rgb(96, 158, 117); prop-15: lab(60% -28 15); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: lab(65% 81 -11); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); + prop-17: rgb(0, 214, 242); prop-17: lab(78% -64 -44); /* out */ - prop-18: rgb(255, 156, 205); + prop-18: rgb(255, 162, 204); prop-18: lab(76% 81 -11); } @@ -249,7 +249,7 @@ lab-006: lab(70% 0 70); lab-007: rgb(33, 135, 237); lab-007: lab(55% 0 -60); - lab-008: rgb(0, 251, 41); + lab-008: rgb(0, 249, 66); lab-008: lab(86.6146% -106.5599 102.8717); } @@ -268,7 +268,7 @@ lch-006: lch(70% 70 90); lch-007: rgb(33, 135, 237); lch-007: lch(55% 60 270); - lch-008: rgb(0, 251, 41); + lch-008: rgb(0, 249, 66); lch-008: lch(86.6146% 148.1135 136.0089); } @@ -281,3 +281,10 @@ to-clone { color: rgb(179, 35, 35); color: lab(40% 56.6 39); } + +.test-css-color-5-interop { + color-1: lab(from rgb(179, 35, 35) l a b); + color-1: lab(from lab(40% 56.6 39) l a b); + color-2: lch(from rgb(163, 57, 39) l c h); + color-2: lch(from lch(40% 56.6 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/basic.expect.css b/plugins/postcss-lab-function/test/basic.expect.css index 0bf5de292..b77d2eddd 100644 --- a/plugins/postcss-lab-function/test/basic.expect.css +++ b/plugins/postcss-lab-function/test/basic.expect.css @@ -16,16 +16,16 @@ color-5: rgba(179, 35, 35, 0.5); color-6: rgb(222, 105, 147); - color-7: rgb(0, 166, 143); + color-7: rgb(0, 164, 142); color-7: color(display-p3 0.17545 0.64269 0.56213); - color-8: rgb(0, 166, 143); + color-8: rgb(0, 164, 142); color-8: color(display-p3 0.17545 0.64269 0.56213); - color-9: rgb(0, 166, 143); + color-9: rgb(0, 164, 142); color-9: color(display-p3 0.17545 0.64269 0.56213); - color-10: rgb(0, 166, 143); + color-10: rgb(0, 164, 142); color-10: color(display-p3 0.17545 0.64269 0.56213); - color-11: rgb(0, 166, 143); + color-11: rgb(0, 164, 142); color-11: color(display-p3 0.17545 0.64269 0.56213); color-12: rgb(212, 118, 84); @@ -36,14 +36,14 @@ color-17: lch(60% 50 0.785398unknown); color-18: rgb(212, 118, 84); - color-20: rgb(0, 166, 143); + color-20: rgb(0, 164, 142); color-20: color(display-p3 0.17545 0.64269 0.56213); - color-21: rgb(0, 166, 143); + color-21: rgb(0, 164, 142); color-21: color(display-p3 0.17545 0.64269 0.56213); - color-22: rgb(0, 166, 143); + color-22: rgb(0, 164, 142); color-22: color(display-p3 0.17545 0.64269 0.56213); - color-23: rgb(0, 166, 143); + color-23: rgb(0, 164, 142); color-23: color(display-p3 0.17545 0.64269 0.56213); } @@ -109,13 +109,13 @@ prop-2: rgb(0, 0, 0); prop-2: color(display-p3 0 0 0); /* teal */ - prop-3: rgb(0, 45, 46); - prop-3: color(display-p3 0 0.1768 0.18827); + prop-3: rgb(0, 44, 45); + prop-3: color(display-p3 0 0.17286 0.18189); } .test-multiple-colors { background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84)); - background-2: linear-gradient(rgb(0, 126, 53), rgb(212, 118, 84)); + background-2: linear-gradient(rgb(0, 123, 61), rgb(212, 118, 84)); background-2: linear-gradient(color(display-p3 0.1379 0.48408 0.24136), rgb(212, 118, 84)); } @@ -126,24 +126,24 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0 0.51872 0.36985); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: color(display-p3 0.31275 0.62335 0.08647); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */ /* in */ prop-3: rgb(97, 112, 56); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: color(display-p3 0.99733 0.66278 0.12085); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */ /* in */ prop-5: rgb(85, 204, 229); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: color(display-p3 0.00652 0.18999 0.01056); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */ @@ -151,46 +151,46 @@ prop-7: rgb(255, 201, 158); prop-7: color(display-p3 0.96684 0.79482 0.64336); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: color(display-p3 0.35483 0.57788 0.15007); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: color(display-p3 0.32231 0.99185 0.02928); /* in */ prop-10: rgb(231, 224, 96); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: color(display-p3 0.16541 0.72332 0.91352); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: color(display-p3 0.99104 0.47662 0.41939); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: color(display-p3 0.49844 0.61099 0.07831); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: color(display-p3 0.99687 0.35134 0.71095); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */ /* in */ prop-15: rgb(96, 158, 117); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: color(display-p3 0.99937 0.35096 0.69833); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); - prop-17: color(display-p3 0 0.84601 0.99536); + prop-17: rgb(0, 214, 242); + prop-17: color(display-p3 0 0.83825 0.97157); /* out */ - prop-18: rgb(255, 156, 205); - prop-18: color(display-p3 1 0.58561 0.80442); + prop-18: rgb(255, 162, 204); + prop-18: color(display-p3 1 0.61552 0.80005); } .test-wpt-lab { @@ -202,8 +202,8 @@ lab-005: rgb(27, 193, 169); lab-006: rgb(195, 169, 14); lab-007: rgb(33, 135, 237); - lab-008: rgb(0, 251, 41); - lab-008: color(display-p3 0 1 0); + lab-008: rgb(0, 249, 66); + lab-008: color(display-p3 0 1 0.00064); } .test-wpt-lch { @@ -215,8 +215,8 @@ lch-005: rgb(27, 193, 169); lch-006: rgb(195, 169, 14); lch-007: rgb(33, 135, 237); - lch-008: rgb(0, 251, 41); - lch-008: color(display-p3 0 1 0); + lch-008: rgb(0, 249, 66); + lch-008: color(display-p3 0 1 0.00064); } .manual_fallback { @@ -227,3 +227,8 @@ to-clone { color: rgb(179, 35, 35); } + +.test-css-color-5-interop { + color-1: lab(from rgb(179, 35, 35) l a b); + color-2: lch(from rgb(163, 57, 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css index e06ef1aff..e2b0629cf 100644 --- a/plugins/postcss-lab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/basic.preserve-true.expect.css @@ -28,21 +28,21 @@ color-6: rgb(222, 105, 147); color-6: lch(60% 50 0); - color-7: rgb(0, 166, 143); + color-7: rgb(0, 164, 142); color-7: color(display-p3 0.17545 0.64269 0.56213); color-7: lch(60% 50 180); - color-8: rgb(0, 166, 143); + color-8: rgb(0, 164, 142); color-8: color(display-p3 0.17545 0.64269 0.56213); color-8: lch(60% 50 180deg); - color-9: rgb(0, 166, 143); + color-9: rgb(0, 164, 142); color-9: color(display-p3 0.17545 0.64269 0.56213); color-9: lch(60% 50 0.5turn); - color-10: rgb(0, 166, 143); + color-10: rgb(0, 164, 142); color-10: color(display-p3 0.17545 0.64269 0.56213); color-10: lch(60% 50 200grad); - color-11: rgb(0, 166, 143); + color-11: rgb(0, 164, 142); color-11: color(display-p3 0.17545 0.64269 0.56213); color-11: lch(60% 50 3.14159rad); @@ -61,18 +61,18 @@ color-18: rgb(212, 118, 84); color-18: lch(60% 50 405); - color-20: rgb(0, 166, 143); + color-20: rgb(0, 164, 142); color-20: color(display-p3 0.17545 0.64269 0.56213); color-20: LCH(60% 50 180DEG); - color-21: rgb(0, 166, 143); + color-21: rgb(0, 164, 142); color-21: color(display-p3 0.17545 0.64269 0.56213); color-21: Lch(60% 50 0.5TURN); - color-22: rgb(0, 166, 143); + color-22: rgb(0, 164, 142); color-22: color(display-p3 0.17545 0.64269 0.56213); color-22: lCh(60% 50 200GRAD); - color-23: rgb(0, 166, 143); + color-23: rgb(0, 164, 142); color-23: color(display-p3 0.17545 0.64269 0.56213); color-23: lcH(60% 50 3.14159RAD); } @@ -160,15 +160,15 @@ prop-2: color(display-p3 0 0 0); prop-2: lch(0% 210 285); /* teal */ - prop-3: rgb(0, 45, 46); - prop-3: color(display-p3 0 0.1768 0.18827); + prop-3: rgb(0, 44, 45); + prop-3: color(display-p3 0 0.17286 0.18189); prop-3: lch(5% 210 285); } .test-multiple-colors { background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84)); background-1: linear-gradient(lab(45% -13 29), lch(60% 50 45deg)); - background-2: linear-gradient(rgb(0, 126, 53), rgb(212, 118, 84)); + background-2: linear-gradient(rgb(0, 123, 61), rgb(212, 118, 84)); background-2: linear-gradient(color(display-p3 0.1379 0.48408 0.24136), rgb(212, 118, 84)); background-2: linear-gradient(lab(45% -50 29), lch(60% 50 45deg)); } @@ -180,11 +180,11 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0 0.51872 0.36985); prop-1: lab(48% -53 12); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: color(display-p3 0.31275 0.62335 0.08647); prop-2: lab(58% -54 69); @@ -193,7 +193,7 @@ prop-3: rgb(97, 112, 56); prop-3: lab(45% -13 29); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: color(display-p3 0.99733 0.66278 0.12085); prop-4: lab(77% 33 97); @@ -202,7 +202,7 @@ prop-5: rgb(85, 204, 229); prop-5: lab(76% -29 -23); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: color(display-p3 0.00652 0.18999 0.01056); prop-6: lab(16% -32 24); @@ -212,13 +212,13 @@ prop-7: color(display-p3 0.96684 0.79482 0.64336); prop-7: lab(85% 16 29); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: color(display-p3 0.35483 0.57788 0.15007); prop-8: lab(55% -42 58); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: color(display-p3 0.32231 0.99185 0.02928); prop-9: lab(87% -94 103); /* in */ @@ -227,21 +227,21 @@ /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: color(display-p3 0.16541 0.72332 0.91352); prop-11: lab(69% -35 -39); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: color(display-p3 0.99104 0.47662 0.41939); prop-12: lab(68% 61 39); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: color(display-p3 0.49844 0.61099 0.07831); prop-13: lab(60% -28 74); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: color(display-p3 0.99687 0.35134 0.71095); prop-14: lab(65% 81 -13); @@ -250,18 +250,18 @@ prop-15: rgb(96, 158, 117); prop-15: lab(60% -28 15); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: color(display-p3 0.99937 0.35096 0.69833); prop-16: lab(65% 81 -11); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); - prop-17: color(display-p3 0 0.84601 0.99536); + prop-17: rgb(0, 214, 242); + prop-17: color(display-p3 0 0.83825 0.97157); prop-17: lab(78% -64 -44); /* out */ - prop-18: rgb(255, 156, 205); - prop-18: color(display-p3 1 0.58561 0.80442); + prop-18: rgb(255, 162, 204); + prop-18: color(display-p3 1 0.61552 0.80005); prop-18: lab(76% 81 -11); } @@ -281,8 +281,8 @@ lab-006: lab(70% 0 70); lab-007: rgb(33, 135, 237); lab-007: lab(55% 0 -60); - lab-008: rgb(0, 251, 41); - lab-008: color(display-p3 0 1 0); + lab-008: rgb(0, 249, 66); + lab-008: color(display-p3 0 1 0.00064); lab-008: lab(86.6146% -106.5599 102.8717); } @@ -302,8 +302,8 @@ lch-006: lch(70% 70 90); lch-007: rgb(33, 135, 237); lch-007: lch(55% 60 270); - lch-008: rgb(0, 251, 41); - lch-008: color(display-p3 0 1 0); + lch-008: rgb(0, 249, 66); + lch-008: color(display-p3 0 1 0.00064); lch-008: lch(86.6146% 148.1135 136.0089); } @@ -316,3 +316,10 @@ to-clone { color: rgb(179, 35, 35); color: lab(40% 56.6 39); } + +.test-css-color-5-interop { + color-1: lab(from rgb(179, 35, 35) l a b); + color-1: lab(from lab(40% 56.6 39) l a b); + color-2: lch(from rgb(163, 57, 39) l c h); + color-2: lch(from lch(40% 56.6 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css index ea0b5a5d2..a3acf5751 100644 --- a/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css +++ b/plugins/postcss-lab-function/test/basic.with-cloned-rules.expect.css @@ -28,21 +28,21 @@ color-6: rgb(222, 105, 147); color-6: lch(60% 50 0); - color-7: rgb(0, 166, 143); + color-7: rgb(0, 164, 142); color-7: color(display-p3 0.17545 0.64269 0.56213); color-7: lch(60% 50 180); - color-8: rgb(0, 166, 143); + color-8: rgb(0, 164, 142); color-8: color(display-p3 0.17545 0.64269 0.56213); color-8: lch(60% 50 180deg); - color-9: rgb(0, 166, 143); + color-9: rgb(0, 164, 142); color-9: color(display-p3 0.17545 0.64269 0.56213); color-9: lch(60% 50 0.5turn); - color-10: rgb(0, 166, 143); + color-10: rgb(0, 164, 142); color-10: color(display-p3 0.17545 0.64269 0.56213); color-10: lch(60% 50 200grad); - color-11: rgb(0, 166, 143); + color-11: rgb(0, 164, 142); color-11: color(display-p3 0.17545 0.64269 0.56213); color-11: lch(60% 50 3.14159rad); @@ -61,18 +61,18 @@ color-18: rgb(212, 118, 84); color-18: lch(60% 50 405); - color-20: rgb(0, 166, 143); + color-20: rgb(0, 164, 142); color-20: color(display-p3 0.17545 0.64269 0.56213); color-20: LCH(60% 50 180DEG); - color-21: rgb(0, 166, 143); + color-21: rgb(0, 164, 142); color-21: color(display-p3 0.17545 0.64269 0.56213); color-21: Lch(60% 50 0.5TURN); - color-22: rgb(0, 166, 143); + color-22: rgb(0, 164, 142); color-22: color(display-p3 0.17545 0.64269 0.56213); color-22: lCh(60% 50 200GRAD); - color-23: rgb(0, 166, 143); + color-23: rgb(0, 164, 142); color-23: color(display-p3 0.17545 0.64269 0.56213); color-23: lcH(60% 50 3.14159RAD); } @@ -160,15 +160,15 @@ prop-2: color(display-p3 0 0 0); prop-2: lch(0% 210 285); /* teal */ - prop-3: rgb(0, 45, 46); - prop-3: color(display-p3 0 0.1768 0.18827); + prop-3: rgb(0, 44, 45); + prop-3: color(display-p3 0 0.17286 0.18189); prop-3: lch(5% 210 285); } .test-multiple-colors { background-1: linear-gradient(rgb(97, 112, 56), rgb(212, 118, 84)); background-1: linear-gradient(lab(45% -13 29), lch(60% 50 45deg)); - background-2: linear-gradient(rgb(0, 126, 53), rgb(212, 118, 84)); + background-2: linear-gradient(rgb(0, 123, 61), rgb(212, 118, 84)); background-2: linear-gradient(color(display-p3 0.1379 0.48408 0.24136), rgb(212, 118, 84)); background-2: linear-gradient(lab(45% -50 29), lch(60% 50 45deg)); } @@ -180,11 +180,11 @@ .test-gamut { /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */ /* out */ - prop-1: rgb(0, 132, 94); + prop-1: rgb(0, 129, 96); prop-1: color(display-p3 0 0.51872 0.36985); prop-1: lab(48% -53 12); /* out */ - prop-2: rgb(38, 161, 0); + prop-2: rgb(50, 160, 0); prop-2: color(display-p3 0.31275 0.62335 0.08647); prop-2: lab(58% -54 69); @@ -193,7 +193,7 @@ prop-3: rgb(97, 112, 56); prop-3: lab(45% -13 29); /* out */ - prop-4: rgb(255, 165, 0); + prop-4: rgb(255, 169, 30); prop-4: color(display-p3 0.99733 0.66278 0.12085); prop-4: lab(77% 33 97); @@ -202,7 +202,7 @@ prop-5: rgb(85, 204, 229); prop-5: lab(76% -29 -23); /* out */ - prop-6: rgb(0, 50, 0); + prop-6: rgb(0, 47, 8); prop-6: color(display-p3 0.00652 0.18999 0.01056); prop-6: lab(16% -32 24); @@ -212,13 +212,13 @@ prop-7: color(display-p3 0.96684 0.79482 0.64336); prop-7: lab(85% 16 29); /* out */ - prop-8: rgb(70, 149, 0); + prop-8: rgb(71, 149, 0); prop-8: color(display-p3 0.35483 0.57788 0.15007); prop-8: lab(55% -42 58); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */ /* out */ - prop-9: rgb(0, 253, 0); + prop-9: rgb(0, 252, 0); prop-9: color(display-p3 0.32231 0.99185 0.02928); prop-9: lab(87% -94 103); /* in */ @@ -227,21 +227,21 @@ /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */ /* out */ - prop-11: rgb(0, 187, 234); + prop-11: rgb(0, 186, 229); prop-11: color(display-p3 0.16541 0.72332 0.91352); prop-11: lab(69% -35 -39); /* out */ - prop-12: rgb(255, 117, 105); + prop-12: rgb(255, 122, 110); prop-12: color(display-p3 0.99104 0.47662 0.41939); prop-12: lab(68% 61 39); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */ /* out */ - prop-13: rgb(119, 157, 0); + prop-13: rgb(121, 156, 0); prop-13: color(display-p3 0.49844 0.61099 0.07831); prop-13: lab(60% -28 74); /* out */ - prop-14: rgb(255, 89, 183); + prop-14: rgb(255, 92, 182); prop-14: color(display-p3 0.99687 0.35134 0.71095); prop-14: lab(65% 81 -13); @@ -250,18 +250,18 @@ prop-15: rgb(96, 158, 117); prop-15: lab(60% -28 15); /* out */ - prop-16: rgb(255, 90, 179); + prop-16: rgb(255, 92, 179); prop-16: color(display-p3 0.99937 0.35096 0.69833); prop-16: lab(65% 81 -11); /* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */ /* out */ - prop-17: rgb(0, 214, 243); - prop-17: color(display-p3 0 0.84601 0.99536); + prop-17: rgb(0, 214, 242); + prop-17: color(display-p3 0 0.83825 0.97157); prop-17: lab(78% -64 -44); /* out */ - prop-18: rgb(255, 156, 205); - prop-18: color(display-p3 1 0.58561 0.80442); + prop-18: rgb(255, 162, 204); + prop-18: color(display-p3 1 0.61552 0.80005); prop-18: lab(76% 81 -11); } @@ -281,8 +281,8 @@ lab-006: lab(70% 0 70); lab-007: rgb(33, 135, 237); lab-007: lab(55% 0 -60); - lab-008: rgb(0, 251, 41); - lab-008: color(display-p3 0 1 0); + lab-008: rgb(0, 249, 66); + lab-008: color(display-p3 0 1 0.00064); lab-008: lab(86.6146% -106.5599 102.8717); } @@ -302,8 +302,8 @@ lch-006: lch(70% 70 90); lch-007: rgb(33, 135, 237); lch-007: lch(55% 60 270); - lch-008: rgb(0, 251, 41); - lch-008: color(display-p3 0 1 0); + lch-008: rgb(0, 249, 66); + lch-008: color(display-p3 0 1 0.00064); lch-008: lch(86.6146% 148.1135 136.0089); } @@ -321,3 +321,10 @@ to-clone { color: rgb(179, 35, 35); color: lab(40% 56.6 39); } + +.test-css-color-5-interop { + color-1: lab(from rgb(179, 35, 35) l a b); + color-1: lab(from lab(40% 56.6 39) l a b); + color-2: lch(from rgb(163, 57, 39) l c h); + color-2: lch(from lch(40% 56.6 39) l c h); +} diff --git a/plugins/postcss-lab-function/test/variables.display-p3-false.expect.css b/plugins/postcss-lab-function/test/variables.display-p3-false.expect.css index ead4bb30b..251a7f683 100644 --- a/plugins/postcss-lab-function/test/variables.display-p3-false.expect.css +++ b/plugins/postcss-lab-function/test/variables.display-p3-false.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(195, 0, 42); - --firebrick-a50: rgba(190, 0, 25, 0.5); + --firebrick: rgb(189, 0, 48); + --firebrick-a50: rgba(189, 0, 27, 0.5); --opacity-50: 0.5; --firebrick-a50-var: lch(40% 8034.5 / var(--opacity-50)); diff --git a/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css b/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css index 04783daf5..db19c5c77 100644 --- a/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/variables.display-p3-false.preserve-true.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(195, 0, 42); - --firebrick-a50: rgba(190, 0, 25, 0.5); + --firebrick: rgb(189, 0, 48); + --firebrick-a50: rgba(189, 0, 27, 0.5); --opacity-50: 0.5; --firebrick-a50-var: lch(40% 8034.5 / var(--opacity-50)); diff --git a/plugins/postcss-lab-function/test/variables.expect.css b/plugins/postcss-lab-function/test/variables.expect.css index 70642aae9..c3b407721 100644 --- a/plugins/postcss-lab-function/test/variables.expect.css +++ b/plugins/postcss-lab-function/test/variables.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(195, 0, 42); - --firebrick-a50: rgba(190, 0, 25, 0.5); + --firebrick: rgb(189, 0, 48); + --firebrick-a50: rgba(189, 0, 27, 0.5); --opacity-50: 0.5; --firebrick-a50-var: lch(40% 8034.5 / var(--opacity-50)); @@ -11,7 +11,7 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick: color(display-p3 0.71393 0 0.17506); + --firebrick: color(display-p3 0.70967 0 0.17938); --firebrick-a50: color(display-p3 0.68093 0.12342 0.14054 / 0.5); } } diff --git a/plugins/postcss-lab-function/test/variables.preserve-true.expect.css b/plugins/postcss-lab-function/test/variables.preserve-true.expect.css index 72029da6e..4ef10eb20 100644 --- a/plugins/postcss-lab-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-lab-function/test/variables.preserve-true.expect.css @@ -1,6 +1,6 @@ :root { - --firebrick: rgb(195, 0, 42); - --firebrick-a50: rgba(190, 0, 25, 0.5); + --firebrick: rgb(189, 0, 48); + --firebrick-a50: rgba(189, 0, 27, 0.5); --opacity-50: 0.5; --firebrick-a50-var: lch(40% 8034.5 / var(--opacity-50)); @@ -11,7 +11,7 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick: color(display-p3 0.71393 0 0.17506); + --firebrick: color(display-p3 0.70967 0 0.17938); } } diff --git a/plugins/postcss-oklab-function/CHANGELOG.md b/plugins/postcss-oklab-function/CHANGELOG.md index f8592fee8..cc4605dbf 100644 --- a/plugins/postcss-oklab-function/CHANGELOG.md +++ b/plugins/postcss-oklab-function/CHANGELOG.md @@ -1,5 +1,9 @@ # Changes to PostCSS OKLab Function +### Unreleased (patch) + +- Ignore relative color syntax + ### 2.2.1 (April 10, 2023) - Updated `@csstools/css-tokenizer` to `2.1.1` (patch) diff --git a/plugins/postcss-oklab-function/dist/index.cjs b/plugins/postcss-oklab-function/dist/index.cjs index b5ba02518..b26dee2a3 100644 --- a/plugins/postcss-oklab-function/dist/index.cjs +++ b/plugins/postcss-oklab-function/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-oklab-function",Declaration:n=>{const i=n.value;if(!o.test(i.toLowerCase()))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const l=s.tokenize({css:i}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(l),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===i)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(l)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-oklab-function",Declaration:n=>{const l=n.value;if(!o.test(l))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const i=s.tokenize({css:l}),u=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(i),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.serializeRGB(s)}})),c=t.stringify(u);if(c===l)return;let p=c;null!=e&&e.subFeatures.displayP3&&(p=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(i)),(e=>{if(t.isFunctionNode(e)&&a.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),n.cloneBefore({value:c}),null!=e&&e.subFeatures.displayP3&&p!==c&&n.cloneBefore({value:p}),null!=e&&e.preserve||n.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-oklab-function/dist/index.mjs b/plugins/postcss-oklab-function/dist/index.mjs index f0fdbcb02..49e062847 100644 --- a/plugins/postcss-oklab-function/dist/index.mjs +++ b/plugins/postcss-oklab-function/dist/index.mjs @@ -1 +1 @@ -import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as u}from"@csstools/css-color-parser";import{replaceComponentValues as l,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-oklab-function",Declaration:b=>{const d=b.value;if(!f.test(d.toLowerCase()))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const g=e({css:d}),k=l(i(g),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return a(e)}})),y=c(k);if(y===d)return;let P=y;null!=s&&s.subFeatures.displayP3&&(P=c(l(i(r(g)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;return n(e)?a(e):u(e)}})))),b.cloneBefore({value:y}),null!=s&&s.subFeatures.displayP3&&P!==y&&b.cloneBefore({value:P}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as n,serializeP3 as l}from"@csstools/css-color-parser";import{replaceComponentValues as u,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as p,stringify as c}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-oklab-function",Declaration:b=>{const g=b.value;if(!f.test(g))return;if(hasFallback(b))return;if(hasSupportsAtRuleAncestor(b))return;const y=e({css:g}),d=u(i(y),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(e.syntaxFlags.has(o.RelativeColorSyntax))return;return a(e)}})),h=c(d);if(h===g)return;let v=h;null!=s&&s.subFeatures.displayP3&&(v=c(u(i(r(y)),(s=>{if(p(s)&&m.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(e.syntaxFlags.has(o.RelativeColorSyntax))return;return n(e)?a(e):l(e)}})))),b.cloneBefore({value:h}),null!=s&&s.subFeatures.displayP3&&v!==h&&b.cloneBefore({value:v}),null!=s&&s.preserve||b.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-oklab-function",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-oklab-function/src/index.ts b/plugins/postcss-oklab-function/src/index.ts index ff47fcab1..5efa63867 100644 --- a/plugins/postcss-oklab-function/src/index.ts +++ b/plugins/postcss-oklab-function/src/index.ts @@ -23,7 +23,7 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) postcssPlugin: 'postcss-oklab-function', Declaration: (decl: Declaration) => { const originalValue = decl.value; - if (!(oklab_oklch_functionRegex.test(originalValue.toLowerCase()))) { + if (!(oklab_oklch_functionRegex.test(originalValue))) { return; } @@ -49,6 +49,10 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + return serializeRGB(colorData); } }, @@ -74,6 +78,10 @@ const basePlugin: PluginCreator = (opts?: basePluginOptions) return; } + if (colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + if (colorDataFitsRGB_Gamut(colorData)) { return serializeRGB(colorData); } diff --git a/plugins/postcss-oklab-function/test/basic.css b/plugins/postcss-oklab-function/test/basic.css index e77eb5319..06dc7f32f 100644 --- a/plugins/postcss-oklab-function/test/basic.css +++ b/plugins/postcss-oklab-function/test/basic.css @@ -161,3 +161,8 @@ color-1: oklab(74.68857553279259% 0.15476891548394156 -0.11988407503745435); color-2: oklch(74.68857553279259% 0.19576927401321545 322.2386199047718); } + +.test-css-color-5-interop { + color-1: oklab(from oklab(40% 0.566 0.39) l a b); + color-2: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugins/postcss-oklab-function/test/basic.expect.css b/plugins/postcss-oklab-function/test/basic.expect.css index 1bf17ffab..713deb154 100644 --- a/plugins/postcss-oklab-function/test/basic.expect.css +++ b/plugins/postcss-oklab-function/test/basic.expect.css @@ -21,16 +21,16 @@ color-5: rgba(126, 37, 15, 0.5); color-6: rgb(197, 84, 124); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-12: rgb(188, 101, 59); @@ -41,16 +41,16 @@ color-17: oklch(60% 0.1250 0.785398unknown); color-18: rgb(188, 101, 59); - color-20: rgb(0, 152, 131); + color-20: rgb(0, 149, 131); color-20: color(display-p3 0.19244 0.58461 0.51559); - color-21: rgb(0, 152, 131); + color-21: rgb(0, 149, 131); color-21: color(display-p3 0.19244 0.58461 0.51559); - color-22: rgb(0, 152, 131); + color-22: rgb(0, 149, 131); color-22: color(display-p3 0.19244 0.58461 0.51559); - color-23: rgb(0, 152, 131); + color-23: rgb(0, 149, 131); color-23: color(display-p3 0.19244 0.58461 0.51559); - color-24: rgb(0, 152, 131); + color-24: rgb(0, 149, 131); color-24: color(display-p3 0.19244 0.58461 0.51559); } @@ -152,8 +152,8 @@ .test-multiple-colors { background-1: linear-gradient(rgb(94, 83, 77), rgb(136, 126, 121)); - background-2: linear-gradient(rgb(164, 0, 74), rgb(136, 126, 121)); - background-2: linear-gradient(color(display-p3 0.60733 0 0.28326), rgb(136, 126, 121)); + background-2: linear-gradient(rgb(161, 0, 74), rgb(136, 126, 121)); + background-2: linear-gradient(color(display-p3 0.59283 0 0.2865), rgb(136, 126, 121)); } .test-unparseable-lab-function { @@ -176,9 +176,9 @@ .test-blue-teal { /* PR 0.18049383596973165, 0.5091259470889729, 0.5339002129941043 */ - color-1: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); color-1: color(display-p3 0.18049 0.50913 0.5339); - color-2: rgb(0, 132, 138); + color-2: rgb(0, 131, 136); color-2: color(display-p3 0.18049 0.50913 0.5339); } @@ -187,3 +187,10 @@ color-1: rgb(229, 125, 245); color-2: rgb(229, 125, 245); } + +.test-css-color-5-interop { + color-1: oklab(from rgb(141, 0, 0) l a b); + color-1: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-2: oklch(from rgb(130, 31, 0) l c h); + color-2: oklch(from color(display-p3 0.48896 0.1211 0) l c h); +} diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css index 6296b03a4..89760f9aa 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.display-p3-false.expect.css @@ -38,16 +38,16 @@ color-6: rgb(197, 84, 124); color-6: oklch(60% 0.150 0); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: oklch(60% 0.1250 180); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: oklch(60% 0.1250 180deg); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: oklch(60% 0.1250 0.5turn); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: oklch(60% 0.1250 200grad); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: oklch(60% 0.1250 3.14159rad); color-12: rgb(188, 101, 59); @@ -65,16 +65,16 @@ color-18: rgb(188, 101, 59); color-18: oklch(60% 0.1250 405); - color-20: rgb(0, 152, 131); + color-20: rgb(0, 149, 131); color-20: OKLCH(60% 0.1250 180); - color-21: rgb(0, 152, 131); + color-21: rgb(0, 149, 131); color-21: Oklch(60% 0.1250 180DEG); - color-22: rgb(0, 152, 131); + color-22: rgb(0, 149, 131); color-22: oKlch(60% 0.1250 0.5TURN); - color-23: rgb(0, 152, 131); + color-23: rgb(0, 149, 131); color-23: okLch(60% 0.1250 200GRAD); - color-24: rgb(0, 152, 131); + color-24: rgb(0, 149, 131); color-24: oklCh(60% 0.1250 3.14159RAD); } @@ -206,7 +206,7 @@ .test-multiple-colors { background-1: linear-gradient(rgb(94, 83, 77), rgb(136, 126, 121)); background-1: linear-gradient(oklab(45% 0.012 0.0129), oklch(60% 0.014 45deg)); - background-2: linear-gradient(rgb(164, 0, 74), rgb(136, 126, 121)); + background-2: linear-gradient(rgb(161, 0, 74), rgb(136, 126, 121)); background-2: linear-gradient(oklab(45% 0.22 0.0129), oklch(60% 0.014 45deg)); } @@ -232,9 +232,9 @@ .test-blue-teal { /* PR 0.18049383596973165, 0.5091259470889729, 0.5339002129941043 */ - color-1: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); color-1: oklab(55.28594002784124% -0.09801573105773553 -0.0346259351134503); - color-2: rgb(0, 132, 138); + color-2: rgb(0, 131, 136); color-2: oklch(55.28594002784124% 0.10395209914794032 199.45674366701544); } @@ -245,3 +245,10 @@ color-2: rgb(229, 125, 245); color-2: oklch(74.68857553279259% 0.19576927401321545 322.2386199047718); } + +.test-css-color-5-interop { + color-1: oklab(from rgb(141, 0, 0) l a b); + color-1: oklab(from oklab(40% 0.566 0.39) l a b); + color-2: oklch(from rgb(130, 31, 0) l c h); + color-2: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css index 40f0ad8fb..793248b63 100644 --- a/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/basic.preserve-true.expect.css @@ -38,21 +38,21 @@ color-6: rgb(197, 84, 124); color-6: oklch(60% 0.150 0); - color-7: rgb(0, 152, 131); + color-7: rgb(0, 149, 131); color-7: color(display-p3 0.19244 0.58461 0.51559); color-7: oklch(60% 0.1250 180); - color-8: rgb(0, 152, 131); + color-8: rgb(0, 149, 131); color-8: color(display-p3 0.19244 0.58461 0.51559); color-8: oklch(60% 0.1250 180deg); - color-9: rgb(0, 152, 131); + color-9: rgb(0, 149, 131); color-9: color(display-p3 0.19244 0.58461 0.51559); color-9: oklch(60% 0.1250 0.5turn); - color-10: rgb(0, 152, 131); + color-10: rgb(0, 149, 131); color-10: color(display-p3 0.19244 0.58461 0.51559); color-10: oklch(60% 0.1250 200grad); - color-11: rgb(0, 152, 131); + color-11: rgb(0, 149, 131); color-11: color(display-p3 0.19244 0.58461 0.51559); color-11: oklch(60% 0.1250 3.14159rad); @@ -71,21 +71,21 @@ color-18: rgb(188, 101, 59); color-18: oklch(60% 0.1250 405); - color-20: rgb(0, 152, 131); + color-20: rgb(0, 149, 131); color-20: color(display-p3 0.19244 0.58461 0.51559); color-20: OKLCH(60% 0.1250 180); - color-21: rgb(0, 152, 131); + color-21: rgb(0, 149, 131); color-21: color(display-p3 0.19244 0.58461 0.51559); color-21: Oklch(60% 0.1250 180DEG); - color-22: rgb(0, 152, 131); + color-22: rgb(0, 149, 131); color-22: color(display-p3 0.19244 0.58461 0.51559); color-22: oKlch(60% 0.1250 0.5TURN); - color-23: rgb(0, 152, 131); + color-23: rgb(0, 149, 131); color-23: color(display-p3 0.19244 0.58461 0.51559); color-23: okLch(60% 0.1250 200GRAD); - color-24: rgb(0, 152, 131); + color-24: rgb(0, 149, 131); color-24: color(display-p3 0.19244 0.58461 0.51559); color-24: oklCh(60% 0.1250 3.14159RAD); } @@ -229,8 +229,8 @@ .test-multiple-colors { background-1: linear-gradient(rgb(94, 83, 77), rgb(136, 126, 121)); background-1: linear-gradient(oklab(45% 0.012 0.0129), oklch(60% 0.014 45deg)); - background-2: linear-gradient(rgb(164, 0, 74), rgb(136, 126, 121)); - background-2: linear-gradient(color(display-p3 0.60733 0 0.28326), rgb(136, 126, 121)); + background-2: linear-gradient(rgb(161, 0, 74), rgb(136, 126, 121)); + background-2: linear-gradient(color(display-p3 0.59283 0 0.2865), rgb(136, 126, 121)); background-2: linear-gradient(oklab(45% 0.22 0.0129), oklch(60% 0.014 45deg)); } @@ -256,10 +256,10 @@ .test-blue-teal { /* PR 0.18049383596973165, 0.5091259470889729, 0.5339002129941043 */ - color-1: rgb(0, 132, 138); + color-1: rgb(0, 131, 136); color-1: color(display-p3 0.18049 0.50913 0.5339); color-1: oklab(55.28594002784124% -0.09801573105773553 -0.0346259351134503); - color-2: rgb(0, 132, 138); + color-2: rgb(0, 131, 136); color-2: color(display-p3 0.18049 0.50913 0.5339); color-2: oklch(55.28594002784124% 0.10395209914794032 199.45674366701544); } @@ -271,3 +271,12 @@ color-2: rgb(229, 125, 245); color-2: oklch(74.68857553279259% 0.19576927401321545 322.2386199047718); } + +.test-css-color-5-interop { + color-1: oklab(from rgb(141, 0, 0) l a b); + color-1: oklab(from color(display-p3 0.50566 0.0781 0) l a b); + color-1: oklab(from oklab(40% 0.566 0.39) l a b); + color-2: oklch(from rgb(130, 31, 0) l c h); + color-2: oklch(from color(display-p3 0.48896 0.1211 0) l c h); + color-2: oklch(from oklch(40% 0.566 39deg) l c h); +} diff --git a/plugins/postcss-oklab-function/test/variables.expect.css b/plugins/postcss-oklab-function/test/variables.expect.css index c5d5e2c5d..f6cc70185 100644 --- a/plugins/postcss-oklab-function/test/variables.expect.css +++ b/plugins/postcss-oklab-function/test/variables.expect.css @@ -1,9 +1,9 @@ :root { - --firebrick: rgb(141, 0, 58); - --firebrick-a50: rgba(139, 0, 68, 0.5); + --firebrick: rgb(140, 0, 58); + --firebrick-a50: rgba(137, 0, 68, 0.5); --opacity-50: 0.5; - --firebrick-a50-var: rgba(139, 0, 68, var(--opacity-50)); + --firebrick-a50-var: rgba(137, 0, 68, var(--opacity-50)); --point-five: 0.5; --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); @@ -11,8 +11,8 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick: color(display-p3 0.52483 0 0.21934); - --firebrick-a50: color(display-p3 0.51833 0 0.25971 / 0.5); - --firebrick-a50-var: color(display-p3 0.51833 0 0.25971 / var(--opacity-50)); + --firebrick: color(display-p3 0.51193 0 0.22329); + --firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5); + --firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50)); } } diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css index 076dec255..cba5a1a2c 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.display-p3-false.expect.css @@ -1,9 +1,9 @@ :root { - --firebrick: rgb(141, 0, 58); - --firebrick-a50: rgba(139, 0, 68, 0.5); + --firebrick: rgb(140, 0, 58); + --firebrick-a50: rgba(137, 0, 68, 0.5); --opacity-50: 0.5; - --firebrick-a50-var: rgba(139, 0, 68, var(--opacity-50)); + --firebrick-a50-var: rgba(137, 0, 68, var(--opacity-50)); --point-five: 0.5; --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); diff --git a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css index 149357b24..9fcf678f6 100644 --- a/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css +++ b/plugins/postcss-oklab-function/test/variables.preserve-true.expect.css @@ -1,9 +1,9 @@ :root { - --firebrick: rgb(141, 0, 58); - --firebrick-a50: rgba(139, 0, 68, 0.5); + --firebrick: rgb(140, 0, 58); + --firebrick-a50: rgba(137, 0, 68, 0.5); --opacity-50: 0.5; - --firebrick-a50-var: rgba(139, 0, 68, var(--opacity-50)); + --firebrick-a50-var: rgba(137, 0, 68, var(--opacity-50)); --point-five: 0.5; --firebrick-var: oklch(40% var(--point-five) 0.1324 / var(--opacity-50)); @@ -11,7 +11,7 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick: color(display-p3 0.52483 0 0.21934); + --firebrick: color(display-p3 0.51193 0 0.22329); } } @@ -23,7 +23,7 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick-a50: color(display-p3 0.51833 0 0.25971 / 0.5); + --firebrick-a50: color(display-p3 0.51567 0 0.25999 / 0.5); } } @@ -35,7 +35,7 @@ @supports (color: color(display-p3 0 0 0)) { :root { - --firebrick-a50-var: color(display-p3 0.51833 0 0.25971 / var(--opacity-50)); + --firebrick-a50-var: color(display-p3 0.51567 0 0.25999 / var(--opacity-50)); } } diff --git a/plugins/postcss-progressive-custom-properties/CHANGELOG.md b/plugins/postcss-progressive-custom-properties/CHANGELOG.md index e3e1e73aa..c7edada47 100644 --- a/plugins/postcss-progressive-custom-properties/CHANGELOG.md +++ b/plugins/postcss-progressive-custom-properties/CHANGELOG.md @@ -1,5 +1,10 @@ # Changes to PostCSS Progressive Custom Properties +### Unreleased (minor) + +- Add relative color syntax support. +- Fix false positive matches for `rgb` and `hsl` modern function notations. + ### 2.1.1 (March 25, 2023) - Smaller `@supports` check for `color-mix`. diff --git a/plugins/postcss-progressive-custom-properties/dist/index.cjs b/plugins/postcss-progressive-custom-properties/dist/index.cjs index df656fbf4..0f82de369 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.cjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.cjs @@ -1 +1 @@ -"use strict";var e=require("postcss-value-parser");const r=[{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,r){if(e.isVariable&&r)return!0;if(e.type!==r.type)return!1;if(doesNotMatchValue(e,r))return!1;if(e.nodes&&r.nodes){for(let a=0;a{a.indexOf(e.sniff)>-1&&p.push(e)}));try{e(a).walk((r=>{try{r.dimension=e.unit(r.value)}finally{!1===r.dimension&&delete r.dimension}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const a=[],t=new Map,p=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!p.has(i.prop.toString().toLowerCase()))return void p.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(a.length&&a[a.length-1].params===s){const e=a[a.length-1],r=t.get(e);if(r)return r.append(i.clone()),void i.remove()}const l=r.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),d=e.clone();d.removeAll(),d.raws.before="\n",d.append(i.clone()),i.remove(),t.set(l,d),l.append(d),a.push(l)})),0!==a.length&&a.reverse().forEach((r=>{e.after(r)}))}});creator.postcss=!0,module.exports=creator; +"use strict";var e=require("postcss-value-parser");const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&t.push(e)}));try{e(r).walk((a=>{try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,t=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!t.has(i.prop.toString().toLowerCase()))return void t.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(r.length&&r[r.length-1].params===s){const e=r[r.length-1],a=p.get(e);if(a)return a.append(i.clone()),void i.remove()}const y=a.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(i.clone()),i.remove(),p.set(y,l),y.append(l),r.push(y)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0,module.exports=creator; diff --git a/plugins/postcss-progressive-custom-properties/dist/index.mjs b/plugins/postcss-progressive-custom-properties/dist/index.mjs index 1396ad460..742d198aa 100644 --- a/plugins/postcss-progressive-custom-properties/dist/index.mjs +++ b/plugins/postcss-progressive-custom-properties/dist/index.mjs @@ -1 +1 @@ -import e from"postcss-value-parser";const r=[{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,r){if(e.isVariable&&r)return!0;if(e.type!==r.type)return!1;if(doesNotMatchValue(e,r))return!1;if(e.nodes&&r.nodes){for(let a=0;a{a.indexOf(e.sniff)>-1&&p.push(e)}));try{e(a).walk((r=>{try{r.dimension=e.unit(r.value)}finally{!1===r.dimension&&delete r.dimension}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:r})=>{const a=[],t=new Map,p=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!p.has(i.prop.toString().toLowerCase()))return void p.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(a.length&&a[a.length-1].params===s){const e=a[a.length-1],r=t.get(e);if(r)return r.append(i.clone()),void i.remove()}const l=r.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),d=e.clone();d.removeAll(),d.raws.before="\n",d.append(i.clone()),i.remove(),t.set(l,d),l.append(d),a.push(l)})),0!==a.length&&a.reverse().forEach((r=>{e.after(r)}))}});creator.postcss=!0;export{creator as default}; +import e from"postcss-value-parser";const a=[{supports:"color-mix(in lch, red, blue)",property:"color",sniff:"color-mix",matchers:[{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color-mix",nodes:[{type:"word",value:"in"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]}]},{supports:"rgb(from red r g b)",property:"color",sniff:"from ",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"from"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(srgb-linear 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"srgb-linear"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(a98-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"a98-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(prophoto-rgb 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"prophoto-rgb"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(display-p3 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"display-p3"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(rec2020 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"rec2020"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d50 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d50"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz-d65 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz-d65"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"color(xyz 0 0 0)",property:"color",sniff:"color",matchers:[{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"color",nodes:[{type:"word",value:"xyz"},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsl(0, 0%, 0%)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"hsl(0 0% 0% / 0)",property:"color",sniff:"hsl",matchers:[{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hsl",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hsla(0 0% 0% / 0)",property:"color",sniff:"hsla",matchers:[{type:"function",value:"hsla",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"hwb(0 0% 0%)",property:"color",sniff:"hwb",matchers:[{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"hwb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lab(0% 0 0)",property:"color",sniff:"lab",matchers:[{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"lch(0% 0 0)",property:"color",sniff:"lch",matchers:[{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"lch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklab(0% 0 0)",property:"color",sniff:"oklab",matchers:[{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklab",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"oklch(0% 0 0)",property:"color",sniff:"oklch",matchers:[{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"oklch",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgb(0, 0, 0, 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0},{type:"div",value:","},{type:"word",isVariable:!0}]}]},{supports:"rgb(0 0 0 / 0)",property:"color",sniff:"rgb",matchers:[{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0}]},{type:"function",value:"rgb",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"rgba(0 0 0 / 0)",property:"color",sniff:"rgba",matchers:[{type:"function",value:"rgba",nodes:[{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"space"},{type:"word",isVariable:!0},{type:"div",value:"/"},{type:"word",isVariable:!0}]}]},{supports:"1ic",property:"font-size",sniff:"ic",matchers:[{type:"word",value:"1ic",dimension:{unit:"ic"}}]}];function matches(e,a){if(e.isVariable&&a&&("word"===a.type||"string"===a.type||"function"===a.type))return!0;if(e.type!==a.type)return!1;if(doesNotMatchValue(e,a))return!1;if(e.nodes&&a.nodes){for(let r=0;r{r.indexOf(e.sniff)>-1&&t.push(e)}));try{e(r).walk((a=>{try{a.dimension=e.unit(a.value)}finally{!1===a.dimension&&delete a.dimension}for(let e=0;e({postcssPlugin:"postcss-progressive-custom-properties",RuleExit:(e,{postcss:a})=>{const r=[],p=new Map,t=new Set;e.each((i=>{if("decl"!==i.type)return;if(!i.variable)return;if("initial"===i.value.trim().toLowerCase())return;if(""===i.value.trim())return;if(!t.has(i.prop.toString().toLowerCase()))return void t.add(i.prop.toString().toLowerCase());const o=supportConditionsFromValue(i.value);if(!o.length)return;const s=o.join(" and ");if(r.length&&r[r.length-1].params===s){const e=r[r.length-1],a=p.get(e);if(a)return a.append(i.clone()),void i.remove()}const y=a.atRule({name:"supports",params:s,source:e.source,raws:{before:"\n\n",after:"\n"}}),l=e.clone();l.removeAll(),l.raws.before="\n",l.append(i.clone()),i.remove(),p.set(y,l),y.append(l),r.push(y)})),0!==r.length&&r.reverse().forEach((a=>{e.after(a)}))}});creator.postcss=!0;export{creator as default}; diff --git a/plugins/postcss-progressive-custom-properties/generate/matchers.mjs b/plugins/postcss-progressive-custom-properties/generate/matchers.mjs index 8266bd5cb..7bdabeb94 100644 --- a/plugins/postcss-progressive-custom-properties/generate/matchers.mjs +++ b/plugins/postcss-progressive-custom-properties/generate/matchers.mjs @@ -2,11 +2,18 @@ import { promises as fsp } from 'fs'; import { colorMixMatchers } from './color-mix.mjs'; import { colorMatchers, hslMatchers, hwbMatchers, labMatchers, lchMatchers, oklabMatchers, oklchMatchers, rgbMatchers } from './color.mjs'; import { icUnitMatchers } from './font-size.mjs'; +import { relativeColorSyntaxMatches } from './relative-color-syntax.mjs'; fsp.writeFile( './src/matchers.ts', 'export const matchers = ' + JSON.stringify( [ + // color mix: + ...colorMixMatchers, + + // relative color syntax: + ...relativeColorSyntaxMatches, + // color: ...colorMatchers, ...hslMatchers, @@ -17,9 +24,6 @@ fsp.writeFile( ...oklchMatchers, ...rgbMatchers, - // color mix: - ...colorMixMatchers, - // font-size: ...icUnitMatchers, ], diff --git a/plugins/postcss-progressive-custom-properties/generate/relative-color-syntax.mjs b/plugins/postcss-progressive-custom-properties/generate/relative-color-syntax.mjs new file mode 100644 index 000000000..bd5867e77 --- /dev/null +++ b/plugins/postcss-progressive-custom-properties/generate/relative-color-syntax.mjs @@ -0,0 +1,27 @@ +import { matcherForValue } from './matcher-for-value.mjs'; + +export const relativeColorSyntaxMatches = [ + { + 'supports': 'rgb(from red r g b)', + 'property': 'color', + 'sniff': 'from ', + 'matchers': [ + matcherForValue('rgb(from $a $1 $2 $3)'), + matcherForValue('rgb(from $a $1 $2 $3 / $4)'), + matcherForValue('hsl(from $a $1 $2 $3)'), + matcherForValue('hsl(from $a $1 $2 $3 / $4)'), + matcherForValue('hwb(from $a $1 $2 $3)'), + matcherForValue('hwb(from $a $1 $2 $3 / $4)'), + matcherForValue('lch(from $a $1 $2 $3)'), + matcherForValue('lch(from $a $1 $2 $3 / $4)'), + matcherForValue('oklch(from $a $1 $2 $3)'), + matcherForValue('oklch(from $a $1 $2 $3 / $4)'), + matcherForValue('lab(from $a $1 $2 $3)'), + matcherForValue('lab(from $a $1 $2 $3 / $4)'), + matcherForValue('oklab(from $a $1 $2 $3)'), + matcherForValue('oklab(from $a $1 $2 $3 / $4)'), + matcherForValue('color(from $a $b $1 $2 $3)'), + matcherForValue('color(from $a $b $1 $2 $3 / $4)'), + ], + }, +]; diff --git a/plugins/postcss-progressive-custom-properties/src/match.ts b/plugins/postcss-progressive-custom-properties/src/match.ts index a9d804b63..9f7c4ea1a 100644 --- a/plugins/postcss-progressive-custom-properties/src/match.ts +++ b/plugins/postcss-progressive-custom-properties/src/match.ts @@ -9,7 +9,16 @@ type MatcherNode = { } export function matches(a: MatcherNode, b: MatcherNode) { - if (a.isVariable && !!b) { + if ( + a.isVariable && + ( + !!b && ( + b.type === 'word' || + b.type === 'string' || + b.type === 'function' + ) + ) + ) { return true; } @@ -22,7 +31,7 @@ export function matches(a: MatcherNode, b: MatcherNode) { } if (a.nodes && b.nodes) { - for (let i = 0; i < a.nodes.length; i++) { + for (let i = 0; i < Math.max(a.nodes.length, b.nodes.length); i++) { let ia = i; let ib = i; @@ -38,9 +47,11 @@ export function matches(a: MatcherNode, b: MatcherNode) { return false; } - if (!matches(a.nodes[ia], b.nodes[ib])) { - return false; + if (matches(a.nodes[ia], b.nodes[ib])) { + continue; } + + return false; } return true; diff --git a/plugins/postcss-progressive-custom-properties/src/matchers.ts b/plugins/postcss-progressive-custom-properties/src/matchers.ts index 5e6161e49..3ee1477b4 100644 --- a/plugins/postcss-progressive-custom-properties/src/matchers.ts +++ b/plugins/postcss-progressive-custom-properties/src/matchers.ts @@ -1,16 +1,16 @@ export const matchers = [ { - 'supports': 'color(srgb 0 0 0)', + 'supports': 'color-mix(in lch, red, blue)', 'property': 'color', - 'sniff': 'color', + 'sniff': 'color-mix', 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'srgb', + 'value': 'in', }, { 'type': 'space', @@ -20,14 +20,16 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', }, { 'type': 'word', @@ -37,11 +39,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'srgb', + 'value': 'in', }, { 'type': 'space', @@ -51,7 +53,8 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', }, { 'type': 'word', @@ -66,7 +69,7 @@ export const matchers = [ }, { 'type': 'div', - 'value': '/', + 'value': ',', }, { 'type': 'word', @@ -74,20 +77,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(srgb-linear 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'srgb-linear', + 'value': 'in', }, { 'type': 'space', @@ -97,7 +93,16 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', }, { 'type': 'word', @@ -114,11 +119,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'srgb-linear', + 'value': 'in', }, { 'type': 'space', @@ -128,7 +133,8 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', }, { 'type': 'word', @@ -143,7 +149,14 @@ export const matchers = [ }, { 'type': 'div', - 'value': '/', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', }, { 'type': 'word', @@ -151,20 +164,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(a98-rgb 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'a98-rgb', + 'value': 'in', }, { 'type': 'space', @@ -181,7 +187,16 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', }, { 'type': 'word', @@ -191,11 +206,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'a98-rgb', + 'value': 'in', }, { 'type': 'space', @@ -211,6 +226,14 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'space', }, @@ -220,7 +243,7 @@ export const matchers = [ }, { 'type': 'div', - 'value': '/', + 'value': ',', }, { 'type': 'word', @@ -228,20 +251,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(prophoto-rgb 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'prophoto-rgb', + 'value': 'in', }, { 'type': 'space', @@ -257,6 +273,22 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'space', }, @@ -268,11 +300,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'color-mix', 'nodes': [ { 'type': 'word', - 'value': 'prophoto-rgb', + 'value': 'in', }, { 'type': 'space', @@ -288,6 +320,14 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'space', }, @@ -297,7 +337,14 @@ export const matchers = [ }, { 'type': 'div', - 'value': '/', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', }, { 'type': 'word', @@ -308,17 +355,24 @@ export const matchers = [ ], }, { - 'supports': 'color(display-p3 0 0 0)', + 'supports': 'rgb(from red r g b)', 'property': 'color', - 'sniff': 'color', + 'sniff': 'from ', 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'rgb', 'nodes': [ { 'type': 'word', - 'value': 'display-p3', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -345,11 +399,18 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'rgb', 'nodes': [ { 'type': 'word', - 'value': 'display-p3', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -382,20 +443,20 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(rec2020 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'hsl', 'nodes': [ { 'type': 'word', - 'value': 'rec2020', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -422,11 +483,18 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'hsl', 'nodes': [ { 'type': 'word', - 'value': 'rec2020', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -459,20 +527,20 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(xyz-d50 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'hwb', 'nodes': [ { 'type': 'word', - 'value': 'xyz-d50', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -499,11 +567,18 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'hwb', 'nodes': [ { 'type': 'word', - 'value': 'xyz-d50', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -536,20 +611,20 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(xyz-d65 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'lch', 'nodes': [ { 'type': 'word', - 'value': 'xyz-d65', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -576,11 +651,18 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'lch', 'nodes': [ { 'type': 'word', - 'value': 'xyz-d65', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -613,20 +695,20 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color(xyz 0 0 0)', - 'property': 'color', - 'sniff': 'color', - 'matchers': [ { 'type': 'function', - 'value': 'color', + 'value': 'oklch', 'nodes': [ { 'type': 'word', - 'value': 'xyz', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -653,11 +735,18 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color', + 'value': 'oklch', 'nodes': [ { 'type': 'word', - 'value': 'xyz', + 'value': 'from', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -690,40 +779,37 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'hsl(0, 0%, 0%)', - 'property': 'color', - 'sniff': 'hsl', - 'matchers': [ { 'type': 'function', - 'value': 'hsl', + 'value': 'lab', 'nodes': [ + { + 'type': 'word', + 'value': 'from', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -731,20 +817,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'hsl(0 0% 0% / 0)', - 'property': 'color', - 'sniff': 'hsl', - 'matchers': [ { 'type': 'function', - 'value': 'hsl', + 'value': 'lab', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'from', }, { 'type': 'space', @@ -760,16 +839,6 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, - ], - }, - { - 'type': 'function', - 'value': 'hsl', - 'nodes': [ - { - 'type': 'word', - 'isVariable': true, - }, { 'type': 'space', }, @@ -794,17 +863,17 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'hsla(0 0% 0% / 0)', - 'property': 'color', - 'sniff': 'hsla', - 'matchers': [ { 'type': 'function', - 'value': 'hsla', + 'value': 'oklab', 'nodes': [ + { + 'type': 'word', + 'value': 'from', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -824,8 +893,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': '/', + 'type': 'space', }, { 'type': 'word', @@ -833,20 +901,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'hwb(0 0% 0%)', - 'property': 'color', - 'sniff': 'hwb', - 'matchers': [ { 'type': 'function', - 'value': 'hwb', + 'value': 'oklab', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'from', }, { 'type': 'space', @@ -862,16 +923,6 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, - ], - }, - { - 'type': 'function', - 'value': 'hwb', - 'nodes': [ - { - 'type': 'word', - 'isVariable': true, - }, { 'type': 'space', }, @@ -896,20 +947,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'lab(0% 0 0)', - 'property': 'color', - 'sniff': 'lab', - 'matchers': [ { 'type': 'function', - 'value': 'lab', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'from', }, { 'type': 'space', @@ -925,16 +969,6 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, - ], - }, - { - 'type': 'function', - 'value': 'lab', - 'nodes': [ - { - 'type': 'word', - 'isVariable': true, - }, { 'type': 'space', }, @@ -950,8 +984,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': '/', + 'type': 'space', }, { 'type': 'word', @@ -959,20 +992,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'lch(0% 0 0)', - 'property': 'color', - 'sniff': 'lch', - 'matchers': [ { 'type': 'function', - 'value': 'lch', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'from', }, { 'type': 'space', @@ -988,12 +1014,9 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, - ], - }, - { - 'type': 'function', - 'value': 'lch', - 'nodes': [ + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -1025,14 +1048,21 @@ export const matchers = [ ], }, { - 'supports': 'oklab(0% 0 0)', + 'supports': 'color(srgb 0 0 0)', 'property': 'color', - 'sniff': 'oklab', + 'sniff': 'color', 'matchers': [ { 'type': 'function', - 'value': 'oklab', + 'value': 'color', 'nodes': [ + { + 'type': 'word', + 'value': 'srgb', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -1055,8 +1085,15 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'oklab', + 'value': 'color', 'nodes': [ + { + 'type': 'word', + 'value': 'srgb', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -1088,14 +1125,21 @@ export const matchers = [ ], }, { - 'supports': 'oklch(0% 0 0)', + 'supports': 'color(srgb-linear 0 0 0)', 'property': 'color', - 'sniff': 'oklch', + 'sniff': 'color', 'matchers': [ { 'type': 'function', - 'value': 'oklch', + 'value': 'color', 'nodes': [ + { + 'type': 'word', + 'value': 'srgb-linear', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -1118,8 +1162,15 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'oklch', + 'value': 'color', 'nodes': [ + { + 'type': 'word', + 'value': 'srgb-linear', + }, + { + 'type': 'space', + }, { 'type': 'word', 'isVariable': true, @@ -1151,37 +1202,34 @@ export const matchers = [ ], }, { - 'supports': 'rgb(0, 0, 0, 0)', + 'supports': 'color(a98-rgb 0 0 0)', 'property': 'color', - 'sniff': 'rgb', + 'sniff': 'color', 'matchers': [ { 'type': 'function', - 'value': 'rgb', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'a98-rgb', }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -1189,27 +1237,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'rgb(0 0 0 / 0)', - 'property': 'color', - 'sniff': 'rgb', - 'matchers': [ { 'type': 'function', - 'value': 'rgb', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'isVariable': true, - }, - { - 'type': 'space', - }, - { - 'type': 'word', - 'isVariable': true, + 'value': 'a98-rgb', }, { 'type': 'space', @@ -1218,16 +1252,6 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, - ], - }, - { - 'type': 'function', - 'value': 'rgb', - 'nodes': [ - { - 'type': 'word', - 'isVariable': true, - }, { 'type': 'space', }, @@ -1255,17 +1279,17 @@ export const matchers = [ ], }, { - 'supports': 'rgba(0 0 0 / 0)', + 'supports': 'color(prophoto-rgb 0 0 0)', 'property': 'color', - 'sniff': 'rgba', + 'sniff': 'color', 'matchers': [ { 'type': 'function', - 'value': 'rgba', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'isVariable': true, + 'value': 'prophoto-rgb', }, { 'type': 'space', @@ -1282,8 +1306,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': '/', + 'type': 'space', }, { 'type': 'word', @@ -1291,20 +1314,13 @@ export const matchers = [ }, ], }, - ], - }, - { - 'supports': 'color-mix(in lch, red, blue)', - 'property': 'color', - 'sniff': 'color-mix', - 'matchers': [ { 'type': 'function', - 'value': 'color-mix', + 'value': 'color', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'value': 'prophoto-rgb', }, { 'type': 'space', @@ -1314,8 +1330,503 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'color(display-p3 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'display-p3', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'display-p3', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'color(rec2020 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'rec2020', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'rec2020', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'color(xyz-d50 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz-d50', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz-d50', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'color(xyz-d65 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz-d65', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz-d65', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'color(xyz 0 0 0)', + 'property': 'color', + 'sniff': 'color', + 'matchers': [ + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'color', + 'nodes': [ + { + 'type': 'word', + 'value': 'xyz', + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'hsl(0, 0%, 0%)', + 'property': 'color', + 'sniff': 'hsl', + 'matchers': [ + { + 'type': 'function', + 'value': 'hsl', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'hsl(0 0% 0% / 0)', + 'property': 'color', + 'sniff': 'hsl', + 'matchers': [ + { + 'type': 'function', + 'value': 'hsl', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + { + 'type': 'function', + 'value': 'hsl', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', }, { 'type': 'word', @@ -1323,7 +1834,7 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', }, { 'type': 'word', @@ -1331,13 +1842,27 @@ export const matchers = [ }, ], }, + ], + }, + { + 'supports': 'hsla(0 0% 0% / 0)', + 'property': 'color', + 'sniff': 'hsla', + 'matchers': [ { 'type': 'function', - 'value': 'color-mix', + 'value': 'hsla', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, }, { 'type': 'space', @@ -1348,12 +1873,29 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', }, { 'type': 'word', 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'hwb(0 0% 0%)', + 'property': 'color', + 'sniff': 'hwb', + 'matchers': [ + { + 'type': 'function', + 'value': 'hwb', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'space', }, @@ -1362,8 +1904,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -1373,11 +1914,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'hwb', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1387,8 +1928,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -1396,7 +1936,31 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'lab(0% 0 0)', + 'property': 'color', + 'sniff': 'lab', + 'matchers': [ + { + 'type': 'function', + 'value': 'lab', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', }, { 'type': 'word', @@ -1413,11 +1977,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'lab', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1427,23 +1991,39 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'lch(0% 0 0)', + 'property': 'color', + 'sniff': 'lch', + 'matchers': [ + { + 'type': 'function', + 'value': 'lch', + 'nodes': [ { 'type': 'word', 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -1460,11 +2040,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'lch', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1482,15 +2062,38 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', }, { 'type': 'word', 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'oklab(0% 0 0)', + 'property': 'color', + 'sniff': 'oklab', + 'matchers': [ + { + 'type': 'function', + 'value': 'oklab', + 'nodes': [ { - 'type': 'div', - 'value': ',', + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', }, { 'type': 'word', @@ -1500,11 +2103,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'oklab', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1522,8 +2125,25 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'oklch(0% 0 0)', + 'property': 'color', + 'sniff': 'oklch', + 'matchers': [ + { + 'type': 'function', + 'value': 'oklch', + 'nodes': [ { 'type': 'word', 'isVariable': true, @@ -1536,8 +2156,7 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', @@ -1547,11 +2166,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'oklch', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1567,6 +2186,39 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, + { + 'type': 'div', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, + }, + ], + }, + ], + }, + { + 'supports': 'rgb(0, 0, 0, 0)', + 'property': 'color', + 'sniff': 'rgb', + 'matchers': [ + { + 'type': 'function', + 'value': 'rgb', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'div', + 'value': ',', + }, + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'div', 'value': ',', @@ -1583,6 +2235,30 @@ export const matchers = [ 'type': 'word', 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'rgb(0 0 0 / 0)', + 'property': 'color', + 'sniff': 'rgb', + 'matchers': [ + { + 'type': 'function', + 'value': 'rgb', + 'nodes': [ + { + 'type': 'word', + 'isVariable': true, + }, + { + 'type': 'space', + }, + { + 'type': 'word', + 'isVariable': true, + }, { 'type': 'space', }, @@ -1594,11 +2270,11 @@ export const matchers = [ }, { 'type': 'function', - 'value': 'color-mix', + 'value': 'rgb', 'nodes': [ { 'type': 'word', - 'value': 'in', + 'isVariable': true, }, { 'type': 'space', @@ -1616,8 +2292,25 @@ export const matchers = [ }, { 'type': 'div', - 'value': ',', + 'value': '/', + }, + { + 'type': 'word', + 'isVariable': true, }, + ], + }, + ], + }, + { + 'supports': 'rgba(0 0 0 / 0)', + 'property': 'color', + 'sniff': 'rgba', + 'matchers': [ + { + 'type': 'function', + 'value': 'rgba', + 'nodes': [ { 'type': 'word', 'isVariable': true, @@ -1630,15 +2323,15 @@ export const matchers = [ 'isVariable': true, }, { - 'type': 'div', - 'value': ',', + 'type': 'space', }, { 'type': 'word', 'isVariable': true, }, { - 'type': 'space', + 'type': 'div', + 'value': '/', }, { 'type': 'word', diff --git a/plugins/postcss-progressive-custom-properties/test/basic.css b/plugins/postcss-progressive-custom-properties/test/basic.css index 55e47c123..d4b0cae0c 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.css @@ -140,3 +140,49 @@ --color-mix-2: color-mix(in lch longer, purple 50%, plum 50%); --color-mix-2: color(display-p3 0.64331 0.19245 0.16771); } + +:root { + --color-rcs-1: green; + --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + --color-rcs-2: green; + --color-rcs-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); + --color-rcs-3: green; + --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + --color-rcs-4: green; + --color-rcs-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); + --color-rcs-5: green; + --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); + --color-rcs-6: green; + --color-rcs-6: lab(from lab(40% 56.6 39) l a b); + --color-rcs-7: green; + --color-rcs-7: lch(from lch(40% 56.6 39) l c h); + --color-rcs-8: green; + --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); + --color-rcs-9: green; + --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); + --color-rcs-10: green; + --color-rcs-10: rgb(from blue r g b); + --color-rcs-11: green; + --color-rcs-11: rgb(from blue r g b / alpha); + --color-rcs-12: green; + --color-rcs-12: hsl(from blue h s l / alpha); +} + +:root { + --color-rcs-invalid-1: green; + --color-rcs-invalid-1: rgba(from blue r g b); + --color-rcs-invalid-2: green; + --color-rcs-invalid-2: hsla(from blue h s l); + --color-rcs-invalid-3: green; + --color-rcs-invalid-3: rgba(from blue r g b / alpha); + --color-rcs-invalid-4: green; + --color-rcs-invalid-4: hsla(from blue h s l / alpha); + --color-rcs-invalid-5: green; + --color-rcs-invalid-5: rgb(from blue r, g, b); + --color-rcs-invalid-6: green; + --color-rcs-invalid-6: hsl(from blue h, s, l); + --color-rcs-invalid-7: green; + --color-rcs-invalid-7: rgb(from blue r, g, b, alpha); + --color-rcs-invalid-8: green; + --color-rcs-invalid-8: hsl(from blue h, s, l, alpha); +} diff --git a/plugins/postcss-progressive-custom-properties/test/basic.expect.css b/plugins/postcss-progressive-custom-properties/test/basic.expect.css index 101f7bbda..116518d65 100644 --- a/plugins/postcss-progressive-custom-properties/test/basic.expect.css +++ b/plugins/postcss-progressive-custom-properties/test/basic.expect.css @@ -250,3 +250,89 @@ --color-mix-2: color(display-p3 0.64331 0.19245 0.16771); } } + +:root { + --color-rcs-1: green; + --color-rcs-2: green; + --color-rcs-3: green; + --color-rcs-4: green; + --color-rcs-5: green; + --color-rcs-6: green; + --color-rcs-7: green; + --color-rcs-8: green; + --color-rcs-9: green; + --color-rcs-10: green; + --color-rcs-11: green; + --color-rcs-12: green; +} + +@supports (color: rgb(from red r g b)) and (color: color(a98-rgb 0 0 0)) { +:root { + --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + --color-rcs-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none); +} +} + +@supports (color: rgb(from red r g b)) and (color: color(prophoto-rgb 0 0 0)) { +:root { + --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + --color-rcs-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none); +} +} + +@supports (color: rgb(from red r g b)) and (color: hwb(0 0% 0%)) { +:root { + --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); +} +} + +@supports (color: rgb(from red r g b)) and (color: lab(0% 0 0)) { +:root { + --color-rcs-6: lab(from lab(40% 56.6 39) l a b); +} +} + +@supports (color: rgb(from red r g b)) and (color: lch(0% 0 0)) { +:root { + --color-rcs-7: lch(from lch(40% 56.6 39) l c h); +} +} + +@supports (color: rgb(from red r g b)) and (color: oklab(0% 0 0)) { +:root { + --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); +} +} + +@supports (color: rgb(from red r g b)) and (color: oklch(0% 0 0)) { +:root { + --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); +} +} + +@supports (color: rgb(from red r g b)) { +:root { + --color-rcs-10: rgb(from blue r g b); + --color-rcs-11: rgb(from blue r g b / alpha); + --color-rcs-12: hsl(from blue h s l / alpha); +} +} + +:root { + --color-rcs-invalid-1: green; + --color-rcs-invalid-1: rgba(from blue r g b); + --color-rcs-invalid-2: green; + --color-rcs-invalid-2: hsla(from blue h s l); + --color-rcs-invalid-3: green; + --color-rcs-invalid-3: rgba(from blue r g b / alpha); + --color-rcs-invalid-4: green; + --color-rcs-invalid-4: hsla(from blue h s l / alpha); + --color-rcs-invalid-5: green; + --color-rcs-invalid-5: rgb(from blue r, g, b); + --color-rcs-invalid-6: green; + --color-rcs-invalid-6: hsl(from blue h, s, l); + --color-rcs-invalid-7: green; + --color-rcs-invalid-7: rgb(from blue r, g, b, alpha); + --color-rcs-invalid-8: green; + --color-rcs-invalid-8: hsl(from blue h, s, l, alpha); +} diff --git a/plugins/postcss-relative-color-syntax/.gitignore b/plugins/postcss-relative-color-syntax/.gitignore new file mode 100644 index 000000000..e5b28db4a --- /dev/null +++ b/plugins/postcss-relative-color-syntax/.gitignore @@ -0,0 +1,6 @@ +node_modules +package-lock.json +yarn.lock +*.result.css +*.result.css.map +*.result.html diff --git a/plugins/postcss-relative-color-syntax/.nvmrc b/plugins/postcss-relative-color-syntax/.nvmrc new file mode 100644 index 000000000..39e593ebe --- /dev/null +++ b/plugins/postcss-relative-color-syntax/.nvmrc @@ -0,0 +1 @@ +v18.8.0 diff --git a/plugins/postcss-relative-color-syntax/.tape.mjs b/plugins/postcss-relative-color-syntax/.tape.mjs new file mode 100644 index 000000000..d0afe7a41 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/.tape.mjs @@ -0,0 +1,23 @@ +import { postcssTape } from '@csstools/postcss-tape'; +import plugin from '@csstools/postcss-relative-color-syntax'; + +postcssTape(plugin)({ + basic: { + message: "supports basic usage", + }, + 'basic:preserve-true': { + message: "supports basic usage", + options: { + preserve: true + } + }, + 'examples/example': { + message: 'minimal example', + }, + 'examples/example:preserve-true': { + message: 'minimal example', + options: { + preserve: true + } + }, +}); diff --git a/plugins/postcss-relative-color-syntax/CHANGELOG.md b/plugins/postcss-relative-color-syntax/CHANGELOG.md new file mode 100644 index 000000000..41b884b42 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/CHANGELOG.md @@ -0,0 +1,5 @@ +# Changes to PostCSS Relative Color Syntax + +### Unreleased (major) + +- Initial version diff --git a/plugins/postcss-relative-color-syntax/INSTALL.md b/plugins/postcss-relative-color-syntax/INSTALL.md new file mode 100644 index 000000000..578933152 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/INSTALL.md @@ -0,0 +1,235 @@ +# Installing PostCSS Relative Color Syntax + +[PostCSS Relative Color Syntax] runs in all Node environments, with special instructions for: + +- [Node](#node) +- [PostCSS CLI](#postcss-cli) +- [PostCSS Load Config](#postcss-load-config) +- [Webpack](#webpack) +- [Next.js](#nextjs) +- [Gulp](#gulp) +- [Grunt](#grunt) + + + +## Node + +Add [PostCSS Relative Color Syntax] to your project: + +```bash +npm install postcss @csstools/postcss-relative-color-syntax --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +// commonjs +const postcss = require('postcss'); +const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); + +postcss([ + postcssRelativeColorSyntax(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +```js +// esm +import postcss from 'postcss'; +import postcssRelativeColorSyntax from '@csstools/postcss-relative-color-syntax'; + +postcss([ + postcssRelativeColorSyntax(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +## PostCSS CLI + +Add [PostCSS CLI] to your project: + +```bash +npm install postcss-cli @csstools/postcss-relative-color-syntax --save-dev +``` + +Use [PostCSS Relative Color Syntax] in your `postcss.config.js` configuration file: + +```js +const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); + +module.exports = { + plugins: [ + postcssRelativeColorSyntax(/* pluginOptions */) + ] +} +``` + +## PostCSS Load Config + +If your framework/CLI supports [`postcss-load-config`](https://github.com/postcss/postcss-load-config). + +```bash +npm install @csstools/postcss-relative-color-syntax --save-dev +``` + +`package.json`: + +```json +{ + "postcss": { + "plugins": { + "@csstools/postcss-relative-color-syntax": {} + } + } +} +``` + +`.postcssrc.json`: + +```json +{ + "plugins": { + "@csstools/postcss-relative-color-syntax": {} + } +} +``` + +_See the [README of `postcss-load-config`](https://github.com/postcss/postcss-load-config#usage) for more usage options._ + +## Webpack + +_Webpack version 5_ + +Add [PostCSS Loader] to your project: + +```bash +npm install postcss-loader @csstools/postcss-relative-color-syntax --save-dev +``` + +Use [PostCSS Relative Color Syntax] in your Webpack configuration: + +```js +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "css-loader", + options: { importLoaders: 1 }, + }, + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: [ + // Other plugins, + [ + "@csstools/postcss-relative-color-syntax", + { + // Options + }, + ], + ], + }, + }, + }, + ], + }, + ], + }, +}; +``` + +## Next.js + +Read the instructions on how to [customize the PostCSS configuration in Next.js](https://nextjs.org/docs/advanced-features/customizing-postcss-config) + +```bash +npm install @csstools/postcss-relative-color-syntax --save-dev +``` + +Use [PostCSS Relative Color Syntax] in your `postcss.config.json` file: + +```json +{ + "plugins": [ + "@csstools/postcss-relative-color-syntax" + ] +} +``` + +```json5 +{ + "plugins": [ + [ + "@csstools/postcss-relative-color-syntax", + { + // Optionally add plugin options + } + ] + ] +} +``` + +## Gulp + +Add [Gulp PostCSS] to your project: + +```bash +npm install gulp-postcss @csstools/postcss-relative-color-syntax --save-dev +``` + +Use [PostCSS Relative Color Syntax] in your Gulpfile: + +```js +const postcss = require('gulp-postcss'); +const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); + +gulp.task('css', function () { + var plugins = [ + postcssRelativeColorSyntax(/* pluginOptions */) + ]; + + return gulp.src('./src/*.css') + .pipe(postcss(plugins)) + .pipe(gulp.dest('.')); +}); +``` + +## Grunt + +Add [Grunt PostCSS] to your project: + +```bash +npm install grunt-postcss @csstools/postcss-relative-color-syntax --save-dev +``` + +Use [PostCSS Relative Color Syntax] in your Gruntfile: + +```js +const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); + +grunt.loadNpmTasks('grunt-postcss'); + +grunt.initConfig({ + postcss: { + options: { + processors: [ + postcssRelativeColorSyntax(/* pluginOptions */) + ] + }, + dist: { + src: '*.css' + } + } +}); +``` + +[Gulp PostCSS]: https://github.com/postcss/gulp-postcss +[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss +[PostCSS]: https://github.com/postcss/postcss +[PostCSS CLI]: https://github.com/postcss/postcss-cli +[PostCSS Loader]: https://github.com/postcss/postcss-loader +[PostCSS Relative Color Syntax]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax +[Next.js]: https://nextjs.org diff --git a/plugins/postcss-relative-color-syntax/LICENSE.md b/plugins/postcss-relative-color-syntax/LICENSE.md new file mode 100644 index 000000000..0bc1fa706 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/LICENSE.md @@ -0,0 +1,108 @@ +# CC0 1.0 Universal + +## Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an “owner”) of an original work of +authorship and/or a database (each, a “Work”). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific works +(“Commons”) that the public can reliably and without fear of later claims of +infringement build upon, modify, incorporate in other works, reuse and +redistribute as freely as possible in any form whatsoever and for any purposes, +including without limitation commercial purposes. These owners may contribute +to the Commons to promote the ideal of a free culture and the further +production of creative, cultural and scientific works, or to gain reputation or +greater distribution for their Work in part through the use and efforts of +others. + +For these and/or other purposes and motivations, and without any expectation of +additional consideration or compensation, the person associating CC0 with a +Work (the “Affirmer”), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and +publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be + protected by copyright and related or neighboring rights (“Copyright and + Related Rights”). Copyright and Related Rights include, but are not limited + to, the following: + 1. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + 2. moral rights retained by the original author(s) and/or performer(s); + 3. publicity and privacy rights pertaining to a person’s image or likeness + depicted in a Work; + 4. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(i), below; + 5. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + 6. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + 7. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations + thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, + applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and + unconditionally waives, abandons, and surrenders all of Affirmer’s Copyright + and Related Rights and associated claims and causes of action, whether now + known or unknown (including existing as well as future claims and causes of + action), in the Work (i) in all territories worldwide, (ii) for the maximum + duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “Waiver”). Affirmer + makes the Waiver for the benefit of each member of the public at large and + to the detriment of Affirmer’s heirs and successors, fully intending that + such Waiver shall not be subject to revocation, rescission, cancellation, + termination, or any other legal or equitable action to disrupt the quiet + enjoyment of the Work by the public as contemplated by Affirmer’s express + Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be + judged legally invalid or ineffective under applicable law, then the Waiver + shall be preserved to the maximum extent permitted taking into account + Affirmer’s express Statement of Purpose. In addition, to the extent the + Waiver is so judged Affirmer hereby grants to each affected person a + royalty-free, non transferable, non sublicensable, non exclusive, + irrevocable and unconditional license to exercise Affirmer’s Copyright and + Related Rights in the Work (i) in all territories worldwide, (ii) for the + maximum duration provided by applicable law or treaty (including future time + extensions), (iii) in any current or future medium and for any number of + copies, and (iv) for any purpose whatsoever, including without limitation + commercial, advertising or promotional purposes (the “License”). The License + shall be deemed effective as of the date CC0 was applied by Affirmer to the + Work. Should any part of the License for any reason be judged legally + invalid or ineffective under applicable law, such partial invalidity or + ineffectiveness shall not invalidate the remainder of the License, and in + such case Affirmer hereby affirms that he or she will not (i) exercise any + of his or her remaining Copyright and Related Rights in the Work or (ii) + assert any associated claims and causes of action with respect to the Work, + in either case contrary to Affirmer’s express Statement of Purpose. + +4. Limitations and Disclaimers. + 1. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + 2. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or + otherwise, including without limitation warranties of title, + merchantability, fitness for a particular purpose, non infringement, or + the absence of latent or other defects, accuracy, or the present or + absence of errors, whether or not discoverable, all to the greatest + extent permissible under applicable law. + 3. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without + limitation any person’s Copyright and Related Rights in the Work. + Further, Affirmer disclaims responsibility for obtaining any necessary + consents, permissions or other rights required for any use of the Work. + 4. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see +http://creativecommons.org/publicdomain/zero/1.0/. diff --git a/plugins/postcss-relative-color-syntax/README.md b/plugins/postcss-relative-color-syntax/README.md new file mode 100644 index 000000000..9796f5907 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/README.md @@ -0,0 +1,80 @@ +# PostCSS Relative Color Syntax [][PostCSS] + +[][npm-url] [][css-url] [][cli-url] [][discord] + +[PostCSS Relative Color Syntax] lets you use the relative color syntax in CSS color functions following [CSS Color Module 5]. + +```pcss +.example { + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} + +/* becomes */ + +.example { + background: rgb(12, 100, 100); +} +``` + +## Usage + +Add [PostCSS Relative Color Syntax] to your project: + +```bash +npm install postcss @csstools/postcss-relative-color-syntax --save-dev +``` + +Use it as a [PostCSS] plugin: + +```js +const postcss = require('postcss'); +const postcssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax'); + +postcss([ + postcssRelativeColorSyntax(/* pluginOptions */) +]).process(YOUR_CSS /*, processOptions */); +``` + +[PostCSS Relative Color Syntax] runs in all Node environments, with special +instructions for: + +- [Node](INSTALL.md#node) +- [PostCSS CLI](INSTALL.md#postcss-cli) +- [PostCSS Load Config](INSTALL.md#postcss-load-config) +- [Webpack](INSTALL.md#webpack) +- [Next.js](INSTALL.md#nextjs) +- [Gulp](INSTALL.md#gulp) +- [Grunt](INSTALL.md#grunt) + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +postcssRelativeColorSyntax({ preserve: true }) +``` + +```pcss +.example { + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} + +/* becomes */ + +.example { + background: rgb(12, 100, 100); + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} +``` + +[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test +[css-url]: https://cssdb.org/#relative-color-syntax +[discord]: https://discord.gg/bUadyRwkJS +[npm-url]: https://www.npmjs.com/package/@csstools/postcss-relative-color-syntax + +[PostCSS]: https://github.com/postcss/postcss +[PostCSS Relative Color Syntax]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax +[CSS Color Module 5]: https://www.w3.org/TR/css-color-5/#relative-colors diff --git a/plugins/postcss-relative-color-syntax/dist/has-fallback-decl.d.ts b/plugins/postcss-relative-color-syntax/dist/has-fallback-decl.d.ts new file mode 100644 index 000000000..d7ae8d890 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/dist/has-fallback-decl.d.ts @@ -0,0 +1,2 @@ +import type { Declaration } from 'postcss'; +export declare function hasFallback(node: Declaration): boolean; diff --git a/plugins/postcss-relative-color-syntax/dist/has-supports-at-rule-ancestor.d.ts b/plugins/postcss-relative-color-syntax/dist/has-supports-at-rule-ancestor.d.ts new file mode 100644 index 000000000..a46009ecc --- /dev/null +++ b/plugins/postcss-relative-color-syntax/dist/has-supports-at-rule-ancestor.d.ts @@ -0,0 +1,2 @@ +import type { Node } from 'postcss'; +export declare function hasSupportsAtRuleAncestor(node: Node): boolean; diff --git a/plugins/postcss-relative-color-syntax/dist/index.cjs b/plugins/postcss-relative-color-syntax/dist/index.cjs new file mode 100644 index 000000000..268934c77 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/dist/index.cjs @@ -0,0 +1 @@ +"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e({postcssPlugin:"postcss-relative-color-syntax",Declaration:o=>{const i=o.value;if(!a.test(i))return;if(!n.test(i))return;if(hasFallback(o))return;if(hasSupportsAtRuleAncestor(o))return;const u=s.tokenize({css:i}),c=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&l.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(!s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.serializeRGB(s)}})),p=t.stringify(c);if(p===i)return;let f=p;null!=e&&e.subFeatures.displayP3&&(f=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(s.cloneTokens(u)),(e=>{if(t.isFunctionNode(e)&&l.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(!s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),o.cloneBefore({value:p}),null!=e&&e.subFeatures.displayP3&&f!==p&&o.cloneBefore({value:f}),null!=e&&e.preserve||o.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin; diff --git a/plugins/postcss-relative-color-syntax/dist/index.d.ts b/plugins/postcss-relative-color-syntax/dist/index.d.ts new file mode 100644 index 000000000..15f89fd40 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/dist/index.d.ts @@ -0,0 +1,15 @@ +import type { PluginCreator } from 'postcss'; +/** postcss-relative-color-syntax plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean; + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean; + /** Toggle sub features. default: { displayP3: true } */ + subFeatures?: { + /** Enable displayP3 fallbacks. default: true */ + displayP3?: boolean; + }; +}; +declare const postcssPlugin: PluginCreator; +export default postcssPlugin; diff --git a/plugins/postcss-relative-color-syntax/dist/index.mjs b/plugins/postcss-relative-color-syntax/dist/index.mjs new file mode 100644 index 000000000..fdfc26da0 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/dist/index.mjs @@ -0,0 +1 @@ +import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e,cloneTokens as r}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as o,serializeRGB as a,colorDataFitsRGB_Gamut as l,serializeP3 as n}from"@csstools/css-color-parser";import{replaceComponentValues as u,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as i,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s({postcssPlugin:"postcss-relative-color-syntax",Declaration:f=>{const g=f.value;if(!b.test(g))return;if(!m.test(g))return;if(hasFallback(f))return;if(hasSupportsAtRuleAncestor(f))return;const y=e({css:g}),v=u(c(y),(s=>{if(i(s)&&h.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(!e.syntaxFlags.has(o.RelativeColorSyntax))return;return a(e)}})),F=p(v);if(F===g)return;let d=F;null!=s&&s.subFeatures.displayP3&&(d=p(u(c(r(y)),(s=>{if(i(s)&&h.test(s.getName())){const e=t(s);if(!e)return;if(e.syntaxFlags.has(o.HasNoneKeywords))return;if(!e.syntaxFlags.has(o.RelativeColorSyntax))return;return l(e)?a(e):n(e)}})))),f.cloneBefore({value:F}),null!=s&&s.subFeatures.displayP3&&d!==F&&f.cloneBefore({value:d}),null!=s&&s.preserve||f.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default}; diff --git a/plugins/postcss-relative-color-syntax/docs/README.md b/plugins/postcss-relative-color-syntax/docs/README.md new file mode 100644 index 000000000..418df8462 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/docs/README.md @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + +

+ +[] lets you use the relative color syntax in CSS color functions following [CSS Color Module 5]. + +```pcss + + +/* becomes */ + + +``` + + + + + +## Options + +### preserve + +The `preserve` option determines whether the original notation +is preserved. By default, it is not preserved. + +```js +({ preserve: true }) +``` + +```pcss + + +/* becomes */ + + +``` + + +[CSS Color Module 5]: diff --git a/plugins/postcss-relative-color-syntax/package.json b/plugins/postcss-relative-color-syntax/package.json new file mode 100644 index 000000000..fd35d148c --- /dev/null +++ b/plugins/postcss-relative-color-syntax/package.json @@ -0,0 +1,88 @@ +{ + "name": "@csstools/postcss-relative-color-syntax", + "description": "Use the relative color syntax in CSS", + "version": "0.0.0", + "contributors": [ + { + "name": "Antonio Laguna", + "email": "antonio@laguna.es", + "url": "https://antonio.laguna.es" + }, + { + "name": "Romain Menke", + "email": "romainmenke@gmail.com" + } + ], + "license": "CC0-1.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + }, + "main": "dist/index.cjs", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "require": "./dist/index.cjs", + "default": "./dist/index.mjs" + } + }, + "files": [ + "CHANGELOG.md", + "LICENSE.md", + "README.md", + "dist" + ], + "dependencies": { + "@csstools/css-color-parser": "^1.1.2", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.0.0" + }, + "peerDependencies": { + "postcss": "^8.4" + }, + "devDependencies": { + "@csstools/postcss-tape": "*" + }, + "scripts": { + "build": "rollup -c ../../rollup/default.mjs", + "docs": "node ../../.github/bin/generate-docs/install.mjs && node ../../.github/bin/generate-docs/readme.mjs", + "lint": "node ../../.github/bin/format-package-json.mjs", + "prepublishOnly": "npm run build && npm run test", + "test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs", + "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs" + }, + "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax#readme", + "repository": { + "type": "git", + "url": "https://github.com/csstools/postcss-plugins.git", + "directory": "plugins/postcss-relative-color-syntax" + }, + "bugs": "https://github.com/csstools/postcss-plugins/issues", + "keywords": [ + "color", + "postcss-plugin", + "relative color syntax" + ], + "csstools": { + "cssdbId": "relative-color-syntax", + "exportName": "postcssRelativeColorSyntax", + "humanReadableName": "PostCSS Relative Color Syntax", + "specUrl": "https://www.w3.org/TR/css-color-5/#relative-colors" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/plugins/postcss-relative-color-syntax/src/has-fallback-decl.ts b/plugins/postcss-relative-color-syntax/src/has-fallback-decl.ts new file mode 100644 index 000000000..5fc4da9e0 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/src/has-fallback-decl.ts @@ -0,0 +1,20 @@ +import type { Declaration } from 'postcss'; + +export function hasFallback(node: Declaration): boolean { + const parent = node.parent; + if (!parent) { + return false; + } + + const nodeProp = node.prop.toLowerCase(); + + const currentNodeIndex = parent.index(node); + for (let i = 0; i < currentNodeIndex; i++) { + const precedingSibling = parent.nodes[i]; + if (precedingSibling.type === 'decl' && precedingSibling.prop.toLowerCase() === nodeProp) { + return true; + } + } + + return false; +} diff --git a/plugins/postcss-relative-color-syntax/src/has-supports-at-rule-ancestor.ts b/plugins/postcss-relative-color-syntax/src/has-supports-at-rule-ancestor.ts new file mode 100644 index 000000000..f6b0d4579 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/src/has-supports-at-rule-ancestor.ts @@ -0,0 +1,23 @@ +import type { Node, AtRule } from 'postcss'; + +const supportsRegex = /(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i; + +export function hasSupportsAtRuleAncestor(node: Node): boolean { + let parent = node.parent; + while (parent) { + if (parent.type !== 'atrule') { + parent = parent.parent; + continue; + } + + if ((parent as AtRule).name.toLowerCase() === 'supports') { + if (supportsRegex.test((parent as AtRule).params)) { + return true; + } + } + + parent = parent.parent; + } + + return false; +} diff --git a/plugins/postcss-relative-color-syntax/src/index.ts b/plugins/postcss-relative-color-syntax/src/index.ts new file mode 100644 index 000000000..cb221e6f9 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/src/index.ts @@ -0,0 +1,158 @@ +import postcssProgressiveCustomProperties from '@csstools/postcss-progressive-custom-properties'; +import type { Declaration } from 'postcss'; +import type { PluginCreator } from 'postcss'; +import { cloneTokens, tokenize } from '@csstools/css-tokenizer'; +import { SyntaxFlag, color, colorDataFitsRGB_Gamut, serializeP3, serializeRGB } from '@csstools/css-color-parser'; +import { hasFallback } from './has-fallback-decl'; +import { hasSupportsAtRuleAncestor } from './has-supports-at-rule-ancestor'; +import { isFunctionNode, parseCommaSeparatedListOfComponentValues, replaceComponentValues, stringify } from '@csstools/css-parser-algorithms'; + +type basePluginOptions = { + preserve: boolean, + subFeatures: { + displayP3: boolean + } +}; + +const functionRegex = /(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i; +const nameRegex = /^(rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i; +const fromRegex = /from/i; + +/* Transform relative color syntax in CSS. */ +const basePlugin: PluginCreator = (opts?: basePluginOptions) => { + return { + postcssPlugin: 'postcss-relative-color-syntax', + Declaration: (decl: Declaration) => { + const originalValue = decl.value; + if (!(functionRegex.test(originalValue))) { + return; + } + + if (!(fromRegex.test(originalValue))) { + return; + } + + if (hasFallback(decl)) { + return; + } + + if (hasSupportsAtRuleAncestor(decl)) { + return; + } + + const tokens = tokenize({ css: originalValue }); + const replacedRGB = replaceComponentValues( + parseCommaSeparatedListOfComponentValues(tokens), + (componentValue) => { + if (isFunctionNode(componentValue) && nameRegex.test(componentValue.getName())) { + const colorData = color(componentValue); + if (!colorData) { + return; + } + + if (colorData.syntaxFlags.has(SyntaxFlag.HasNoneKeywords)) { + return; + } + + if (!colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + + return serializeRGB(colorData); + } + }, + ); + + const modifiedRGB = stringify(replacedRGB); + if (modifiedRGB === originalValue) { + return; + } + + let modifiedP3 = modifiedRGB; + if (opts?.subFeatures.displayP3) { + modifiedP3 = stringify(replaceComponentValues( + parseCommaSeparatedListOfComponentValues(cloneTokens(tokens)), + (componentValue) => { + if (isFunctionNode(componentValue) && nameRegex.test(componentValue.getName())) { + const colorData = color(componentValue); + if (!colorData) { + return; + } + + if (colorData.syntaxFlags.has(SyntaxFlag.HasNoneKeywords)) { + return; + } + + if (!colorData.syntaxFlags.has(SyntaxFlag.RelativeColorSyntax)) { + return; + } + + if (colorDataFitsRGB_Gamut(colorData)) { + return serializeRGB(colorData); + } + + return serializeP3(colorData); + } + }, + )); + } + + decl.cloneBefore({ value: modifiedRGB }); + + if (opts?.subFeatures.displayP3 && modifiedP3 !== modifiedRGB) { + decl.cloneBefore({ value: modifiedP3 }); + } + + if (!opts?.preserve) { + decl.remove(); + } + }, + }; +}; + +basePlugin.postcss = true; + +/** postcss-relative-color-syntax plugin options */ +export type pluginOptions = { + /** Preserve the original notation. default: false */ + preserve?: boolean, + /** Enable "@csstools/postcss-progressive-custom-properties". default: true */ + enableProgressiveCustomProperties?: boolean, + /** Toggle sub features. default: { displayP3: true } */ + subFeatures?: { + /** Enable displayP3 fallbacks. default: true */ + displayP3?: boolean + } +}; + +/* Transform relative color syntax in CSS. */ +const postcssPlugin: PluginCreator = (opts?: pluginOptions) => { + const options = Object.assign({ + enableProgressiveCustomProperties: true, + preserve: false, + subFeatures: { + displayP3: true, + }, + }, opts); + + // deep merge + options.subFeatures = Object.assign({ + displayP3: true, + }, options.subFeatures); + + if (options.enableProgressiveCustomProperties && (options.preserve || options.subFeatures.displayP3)) { + return { + postcssPlugin: 'postcss-relative-color-syntax', + plugins: [ + postcssProgressiveCustomProperties(), + basePlugin(options), + ], + }; + } + + return basePlugin(options); +}; + +postcssPlugin.postcss = true; + +export default postcssPlugin; diff --git a/plugins/postcss-relative-color-syntax/test/_import.mjs b/plugins/postcss-relative-color-syntax/test/_import.mjs new file mode 100644 index 000000000..482bda5c0 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/_import.mjs @@ -0,0 +1,6 @@ +import assert from 'assert'; +import plugin from '@csstools/postcss-relative-color-syntax'; +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-relative-color-syntax/test/_require.cjs b/plugins/postcss-relative-color-syntax/test/_require.cjs new file mode 100644 index 000000000..57381a4e2 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/_require.cjs @@ -0,0 +1,6 @@ +const assert = require('assert'); +const plugin = require('@csstools/postcss-relative-color-syntax'); +plugin(); + +assert.ok(plugin.postcss, 'should have "postcss flag"'); +assert.equal(typeof plugin, 'function', 'should return a function'); diff --git a/plugins/postcss-relative-color-syntax/test/basic.css b/plugins/postcss-relative-color-syntax/test/basic.css new file mode 100644 index 000000000..372c3c0f1 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/basic.css @@ -0,0 +1,108 @@ +.valid { + --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); + --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); + --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); + --color-rcs-6: lab(from lab(40% 56.6 39) l a b); + --color-rcs-7: lch(from lch(40% 56.6 39) l c h); + --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); + --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); + --color-rcs-10: rgb(from blue r g b); + --color-rcs-11: rgb(from blue r g b / alpha); + --color-rcs-12: hsl(from blue h s l / alpha); + --color-rcs-13: rgba(from blue r g b / alpha); + --color-rcs-14: hsla(from blue h s l / alpha); +} + +.invalid { + --color-rcs-invalid-1: rgba(from blue r g b); + --color-rcs-invalid-2: hsla(from blue h s l); + --color-rcs-invalid-3: rgba(from blue r g b / alpha); + --color-rcs-invalid-4: hsla(from blue h s l / alpha); + --color-rcs-invalid-5: rgb(from blue r, g, b); + --color-rcs-invalid-6: hsl(from blue h, s, l); + --color-rcs-invalid-7: rgb(from blue r, g, b, alpha); + --color-rcs-invalid-8: hsl(from blue h, s, l, alpha); +} + + +.spec-example-10 { + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} + +.spec-example-11 { + background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90deg)); +} + +.spec-example-12 { + color: lch(from green calc(l / 2) c h); +} + +.spec-example-13 { + background: rgb(from blue r g b / 80%); +} + +.spec-example-14 { + --blue-into-gray: rgb(from blue calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --red-into-gray: rgb(from red calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --line-into-gray: rgb(from lime calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --darkolivegreen-into-gray: rgb(from darkolivegreen calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); +} + +.spec-example-15 { + color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9); +} + +.spec-example-15 { + color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9); +} + +.spec-example-16 { + background: linear-gradient(in Oklab to right, oklch(from hsl(none 3% 50%) calc(l * 0.8) c h), #4C3); +} + +.spec-example-17 { + color: rgb(from indianred 255 g b); +} + +.spec-example-18 { + color: rgba(from darkblue 16, 32, b, 0.5); +} + +.spec-example-19 { + color: rgb(from darkblue 16 32 b / 0.5); +} + +.spec-example-20 { + color: hsl(from lightseagreen calc(h + 180deg) s l); +} + +.spec-example-21{ + color-1: lab(from rgb(20 30 40 / 50%) l a b / 100%); + color-2: lab(from rgb(20 30 40 / 50%) l a b / calc(alpha * 0.8)) +} + +.spec-example-22 { + --mygray: lab(from orchid l 0 0); +} + +.spec-example-23 { + color: lch(from peru calc(l * 0.8) c h); +} + +.spec-example-24 { + --complement: lch(from lightseagreen l c calc(h + 180deg)); +} + +.spec-example-25 { + --mygray: lch(from orchid l 0 h); + --mymuted: lch(from lch(from orchid l 0 h) l 30 h); +} + +.spec-example-26 { + color: lch(from lch(60% 90 320) l c calc(h - 120deg)); + color-2: hsl(from lch(60% 90 320) calc(h - 120deg) s l); +} + +.spec-example-27 { + color: oklch(from lch(60% 90 320) l c calc(h - 120deg)); +} diff --git a/plugins/postcss-relative-color-syntax/test/basic.expect.css b/plugins/postcss-relative-color-syntax/test/basic.expect.css new file mode 100644 index 000000000..cdef3ee93 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/basic.expect.css @@ -0,0 +1,118 @@ +.valid { + --color-rcs-1: rgb(196, 129, 72); + --color-rcs-3: rgb(234, 133, 82); + --color-rcs-5: rgb(179, 157, 51); + --color-rcs-6: rgb(179, 35, 35); + --color-rcs-7: rgb(163, 57, 39); + --color-rcs-8: rgb(141, 0, 0); + --color-rcs-9: rgb(130, 31, 0); + --color-rcs-10: rgb(0, 0, 255); + --color-rcs-11: rgb(0, 0, 255); + --color-rcs-12: rgb(0, 0, 255); + --color-rcs-13: rgba(from blue r g b / alpha); + --color-rcs-14: hsla(from blue h s l / alpha); +} + +@supports (color: color(display-p3 0 0 0)) { +.valid { + --color-rcs-8: color(display-p3 0.50566 0.0781 0); + --color-rcs-9: color(display-p3 0.48896 0.1211 0); +} +} + +.invalid { + --color-rcs-invalid-1: rgba(from blue r g b); + --color-rcs-invalid-2: hsla(from blue h s l); + --color-rcs-invalid-3: rgba(from blue r g b / alpha); + --color-rcs-invalid-4: hsla(from blue h s l / alpha); + --color-rcs-invalid-5: rgb(from blue r, g, b); + --color-rcs-invalid-6: hsl(from blue h, s, l); + --color-rcs-invalid-7: rgb(from blue r, g, b, alpha); + --color-rcs-invalid-8: hsl(from blue h, s, l, alpha); +} + + +.spec-example-10 { + background: rgb(12, 100, 100); +} + +.spec-example-11 { + background: rgb(77, 121, 47); +} + +.spec-example-12 { + color: rgb(1, 64, 0); + color: color(display-p3 0.06186 0.25379 0); +} + +.spec-example-13 { + background: rgba(0, 0, 255, 0.8); +} + +.spec-example-14 { + --blue-into-gray: rgb(28, 28, 28); + --red-into-gray: rgb(77, 77, 77); + --line-into-gray: rgb(150, 150, 150); + --darkolivegreen-into-gray: rgb(94, 94, 94); +} + +.spec-example-15 { + color: rgba(153, 153, 153, 0.9); +} + +.spec-example-15 { + color: rgba(153, 153, 153, 0.9); +} + +.spec-example-16 { + background: linear-gradient(in Oklab to right, rgb(97, 90, 91), #4C3); +} + +.spec-example-17 { + color: rgb(255, 92, 92); +} + +.spec-example-18 { + color: rgba(from darkblue 16, 32, b, 0.5); +} + +.spec-example-19 { + color: rgba(16, 32, 139, 0.5); +} + +.spec-example-20 { + color: rgb(178, 32, 40); +} + +.spec-example-21{ + color-1: rgb(20, 30, 40); + color-2: rgba(20, 30, 40, 0.4) +} + +.spec-example-22 { + --mygray: rgb(152, 152, 152); +} + +.spec-example-23 { + color: rgb(169, 101, 32); +} + +.spec-example-24 { + --complement: rgb(225, 130, 149); +} + +.spec-example-25 { + --mygray: rgb(152, 152, 152); + --mymuted: rgb(185, 136, 182); +} + +.spec-example-26 { + color: rgb(0, 159, 164); + color: color(display-p3 0 0.63049 0.66369); + color-2: rgb(85, 249, 219); +} + +.spec-example-27 { + color: rgb(0, 178, 186); + color: color(display-p3 0 0.71015 0.76142); +} diff --git a/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css b/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css new file mode 100644 index 000000000..e42c9455e --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/basic.preserve-true.expect.css @@ -0,0 +1,217 @@ +.valid { + --color-rcs-1: rgb(196, 129, 72); + --color-rcs-3: rgb(234, 133, 82); + --color-rcs-5: rgb(179, 157, 51); + --color-rcs-6: rgb(179, 35, 35); + --color-rcs-7: rgb(163, 57, 39); + --color-rcs-8: rgb(141, 0, 0); + --color-rcs-9: rgb(130, 31, 0); + --color-rcs-10: rgb(0, 0, 255); + --color-rcs-11: rgb(0, 0, 255); + --color-rcs-12: rgb(0, 0, 255); + --color-rcs-13: rgba(from blue r g b / alpha); + --color-rcs-14: hsla(from blue h s l / alpha); +} + +@supports (color: rgb(from red r g b)) and (color: color(a98-rgb 0 0 0)) { +.valid { + --color-rcs-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha); +} +} + +@supports (color: rgb(from red r g b)) and (color: color(prophoto-rgb 0 0 0)) { +.valid { + --color-rcs-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b); +} +} + +@supports (color: rgb(from red r g b)) and (color: hwb(0 0% 0%)) { +.valid { + --color-rcs-5: hwb(from hwb(50deg 20% 30%) h w b); +} +} + +@supports (color: rgb(from red r g b)) and (color: lab(0% 0 0)) { +.valid { + --color-rcs-6: lab(from lab(40% 56.6 39) l a b); +} +} + +@supports (color: rgb(from red r g b)) and (color: lch(0% 0 0)) { +.valid { + --color-rcs-7: lch(from lch(40% 56.6 39) l c h); +} +} + +@supports (color: color(display-p3 0 0 0)) { +.valid { + --color-rcs-8: color(display-p3 0.50566 0.0781 0); +} +} + +@supports (color: rgb(from red r g b)) and (color: oklab(0% 0 0)) { +.valid { + --color-rcs-8: oklab(from oklab(40% 0.566 0.39) l a b); +} +} + +@supports (color: color(display-p3 0 0 0)) { +.valid { + --color-rcs-9: color(display-p3 0.48896 0.1211 0); +} +} + +@supports (color: rgb(from red r g b)) and (color: oklch(0% 0 0)) { +.valid { + --color-rcs-9: oklch(from oklch(40% 0.566 39deg) l c h); +} +} + +@supports (color: rgb(from red r g b)) { +.valid { + --color-rcs-10: rgb(from blue r g b); + --color-rcs-11: rgb(from blue r g b / alpha); + --color-rcs-12: hsl(from blue h s l / alpha); +} +} + +.invalid { + --color-rcs-invalid-1: rgba(from blue r g b); + --color-rcs-invalid-2: hsla(from blue h s l); + --color-rcs-invalid-3: rgba(from blue r g b / alpha); + --color-rcs-invalid-4: hsla(from blue h s l / alpha); + --color-rcs-invalid-5: rgb(from blue r, g, b); + --color-rcs-invalid-6: hsl(from blue h, s, l); + --color-rcs-invalid-7: rgb(from blue r, g, b, alpha); + --color-rcs-invalid-8: hsl(from blue h, s, l, alpha); +} + + +.spec-example-10 { + background: rgb(12, 100, 100); + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} + +.spec-example-11 { + background: rgb(77, 121, 47); + background: oklch(from oklch(52.6% 0.115 44.6deg) l c calc(h + 90deg)); +} + +.spec-example-12 { + color: rgb(1, 64, 0); + color: color(display-p3 0.06186 0.25379 0); + color: lch(from green calc(l / 2) c h); +} + +.spec-example-13 { + background: rgba(0, 0, 255, 0.8); + background: rgb(from blue r g b / 80%); +} + +.spec-example-14 { + --blue-into-gray: rgb(28, 28, 28); + --red-into-gray: rgb(77, 77, 77); + --line-into-gray: rgb(150, 150, 150); + --darkolivegreen-into-gray: rgb(94, 94, 94); +} + +@supports (color: rgb(from red r g b)) { +.spec-example-14 { + --blue-into-gray: rgb(from blue calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --red-into-gray: rgb(from red calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --line-into-gray: rgb(from lime calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); + --darkolivegreen-into-gray: rgb(from darkolivegreen calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11)); +} +} + +.spec-example-15 { + color: rgba(153, 153, 153, 0.9); + color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9); +} + +.spec-example-15 { + color: rgba(153, 153, 153, 0.9); + color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9); +} + +.spec-example-16 { + background: linear-gradient(in Oklab to right, rgb(97, 90, 91), #4C3); + background: linear-gradient(in Oklab to right, oklch(from hsl(none 3% 50%) calc(l * 0.8) c h), #4C3); +} + +.spec-example-17 { + color: rgb(255, 92, 92); + color: rgb(from indianred 255 g b); +} + +.spec-example-18 { + color: rgba(from darkblue 16, 32, b, 0.5); +} + +.spec-example-19 { + color: rgba(16, 32, 139, 0.5); + color: rgb(from darkblue 16 32 b / 0.5); +} + +.spec-example-20 { + color: rgb(178, 32, 40); + color: hsl(from lightseagreen calc(h + 180deg) s l); +} + +.spec-example-21{ + color-1: rgb(20, 30, 40); + color-1: lab(from rgb(20 30 40 / 50%) l a b / 100%); + color-2: rgba(20, 30, 40, 0.4); + color-2: lab(from rgb(20 30 40 / 50%) l a b / calc(alpha * 0.8)) +} + +.spec-example-22 { + --mygray: rgb(152, 152, 152); +} + +@supports (color: rgb(from red r g b)) { +.spec-example-22 { + --mygray: lab(from orchid l 0 0); +} +} + +.spec-example-23 { + color: rgb(169, 101, 32); + color: lch(from peru calc(l * 0.8) c h); +} + +.spec-example-24 { + --complement: rgb(225, 130, 149); +} + +@supports (color: rgb(from red r g b)) { +.spec-example-24 { + --complement: lch(from lightseagreen l c calc(h + 180deg)); +} +} + +.spec-example-25 { + --mygray: rgb(152, 152, 152); + --mymuted: rgb(185, 136, 182); +} + +@supports (color: rgb(from red r g b)) { +.spec-example-25 { + --mygray: lch(from orchid l 0 h); + --mymuted: lch(from lch(from orchid l 0 h) l 30 h); +} +} + +.spec-example-26 { + color: rgb(0, 159, 164); + color: color(display-p3 0 0.63049 0.66369); + color: lch(from lch(60% 90 320) l c calc(h - 120deg)); + color-2: rgb(85, 249, 219); + color-2: hsl(from lch(60% 90 320) calc(h - 120deg) s l); +} + +.spec-example-27 { + color: rgb(0, 178, 186); + color: color(display-p3 0 0.71015 0.76142); + color: oklch(from lch(60% 90 320) l c calc(h - 120deg)); +} diff --git a/plugins/postcss-relative-color-syntax/test/examples/example.css b/plugins/postcss-relative-color-syntax/test/examples/example.css new file mode 100644 index 000000000..0028345a0 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/examples/example.css @@ -0,0 +1,3 @@ +.example { + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} diff --git a/plugins/postcss-relative-color-syntax/test/examples/example.expect.css b/plugins/postcss-relative-color-syntax/test/examples/example.expect.css new file mode 100644 index 000000000..97568bb15 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/examples/example.expect.css @@ -0,0 +1,3 @@ +.example { + background: rgb(12, 100, 100); +} diff --git a/plugins/postcss-relative-color-syntax/test/examples/example.preserve-true.expect.css b/plugins/postcss-relative-color-syntax/test/examples/example.preserve-true.expect.css new file mode 100644 index 000000000..c4e7d13f9 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/test/examples/example.preserve-true.expect.css @@ -0,0 +1,4 @@ +.example { + background: rgb(12, 100, 100); + background: oklab(from oklab(54.3% -22.5% -5%) calc(1.0 - l) calc(a * 0.8) b); +} diff --git a/plugins/postcss-relative-color-syntax/tsconfig.json b/plugins/postcss-relative-color-syntax/tsconfig.json new file mode 100644 index 000000000..500af6d26 --- /dev/null +++ b/plugins/postcss-relative-color-syntax/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist", + "declarationDir": ".", + "strict": true + }, + "include": ["./src/**/*"], + "exclude": ["dist"] +}