@asamuzakjp/css-color - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

package.json

 {
   "name": "@asamuzakjp/css-color",
-  "description": "CSS color - Resolve, parse, convert CSS color.",
+  "description": "CSS color - Resolve and convert CSS colors.",
   "author": "asamuzaK",
@@ -27,2 +27,3 @@ "license": "MIT",
   "dependencies": {
+    "@csstools/css-calc": "^2.1.0",
     "lru-cache": "^11.0.2"
@@ -34,11 +35,11 @@ },
     "eslint": "^9.15.0",
-    "eslint-plugin-import-x": "^4.4.2",
-    "eslint-plugin-jsdoc": "^50.5.0",
+    "eslint-plugin-import-x": "^4.4.3",
+    "eslint-plugin-jsdoc": "^50.6.0",
     "eslint-plugin-regexp": "^2.7.0",
     "globals": "^15.12.0",
     "mocha": "^10.8.2",
-    "neostandard": "^0.11.8",
+    "neostandard": "^0.11.9",
     "npm-run-all2": "^7.0.1",
     "sinon": "^19.0.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
@@ -57,3 +58,3 @@ "overrides": {
   },
-  "version": "1.1.2"
+  "version": "2.0.0"
 }

README.md

@@ -7,3 +7,3 @@ # CSS color
 
-Resolve, parse, convert CSS color.
+Resolve and convert CSS colors.
 
@@ -21,9 +21,9 @@
 ```javascript
-import { convert, parse, resolve } from '@asamuzakjp/css-color';
+import { convert, resolve } from '@asamuzakjp/css-color';
 
-const rgb = resolve('color-mix(in srgb, red, blue)');
-// 'rgb(128, 0, 128)'
+const resolvedValue =
+  resolve('color-mix(in oklab, rgb(255 0 0), color(srgb 0 0.5 0 / 0.5))');
+// 'oklab(0.5914 0.103273 0.119688 / 0.75)'
 
-const xyz = parse('lab(46.2775% -47.5621 48.5837)');
-const hex = convert.xyzToHex(xyz);
+const convertedValue = covert.colorToHex('lab(46.2775% -47.5621 48.5837)');
 // '#008000'
@@ -36,45 +36,22 @@ ```
 
-Resolve CSS color.
+resolves CSS color
 
 #### Parameters
 
-* `color` **[string][93]** color value
-  * [<system-color>](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color)s are not supported
-* `opt` **[object][94]?** options
-  * `opt.currentColor` **[string][93]?** color to use for `currentcolor` keyword
-  * `opt.format` **[string][93]?** output format, one of `rgb`(default), `array`, `hex` or `hexAlpha`
-    * `hexAlpha` gets hex color with alpha channel, i.e. `#rrggbbaa`
-  * `opt.key` **any?** key e.g. CSS property `background-color`
+*   `color` **[string][133]** color value
+    *   system colors are not supported
 
-Returns **([string][93]? | [Array][96])** `rgba?()`, `[r, g, b, a]`, `#rrggbb(aa)?`, `null`, or if `key` is specified, `[key, rgba?()|[r, g, b, a]|#rrggbb(aa)?|null]`
-* In `rgb`:
-  * `r`, `g`, `b` values are rounded.
-  * Returns empty string for unknown / unsupported color name.
-* In `array`:
-  * Values are floats.
-  * Returns array filled with `undefined` for unknown / unsupported color name, i.e. `[undefined, undefined, undefined, undefined]`.
-* In `hex`:
-  * `transparent` returns `null`.
-  * Also returns `null` for unknown / unsupported color name.
-  * `currentcolor` resolves as `#000000` if `opt.currentColor` is not specified.
-* In `hexAlpha`:
-  * `transparent` resolves as `#00000000`.
-  * `currentcolor` resolves as `#00000000` if `opt.currentColor` is not specified.
-  * Returns `null` for unknown / unsupported color name.
+*   `opt` **[object][135]?** options (optional, default `{}`)
+    *   `opt.currentColor` **[string][133]?** color to use for `currentcolor` keyword
+    *   `opt.format` **[string][133]?** output format, one of `spec` (default), `rgb`, `hex`, `hexAlpha`
+        *   `hexAlpha` is a hex color notation with alpha channel, i.e. #rrggbbaa
+    *   `opt.key` **any?** key e.g. CSS property `background-color`
 
+Returns **([string][133]? | [Array][137])** returns one of `rgba?()`, `color(space r g b / a)`, `color(space x y z / a)`, `lab(l a b / A)`, `lch(l c h / a)`, `oklab(l a b / A)`, `oklch(l c h / a)`, `\#rrggbb(aa)?`, `null`, and, if `key` is specified, `[key, rgba?()]` etc.
 
-### parse(color, opt)
+*   in `spec`, values are numbers, however rgb() values are integers
+*   in `rgb`, values are rounded to integers, and returns `rgba(0, 0, 0, 0)` for unknown colors
+*   in `hex`, `transparent` value is resolved as `null`, also returns `null` if any of `r`, `g`, `b`, `a` is not a number
+*   in `hexAlpha`, `transparent` resolves as `#00000000`, and returns `null` if any of `r`, `g`, `b`, `a` is not a number
 
-Parse CSS color.
-
-#### Parameters
-
-* `color` **[string][93]** color value
-  * `color-mix()` and [<system-color>](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color)s are not supported. It throws.
-* `opt` **[object][94]?** options
-  * `opt.d50` **[boolean][95]?** get xyz values in d50 white point
-
-Returns **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
-
-
 ### convert
@@ -84,141 +61,129 @@
 
+### numberToHex(value)
 
-### convert.numberToHex(n)
+convert number to hex string
 
-Convert number to hex string.
-
 #### Parameters
 
-* `n` **[number][97]** 0..255
+*   `value` **[number][134]** color value
 
-Returns **[string][93]** hex string `00`..`ff`
+Returns **[string][133]** hex string: 00..ff
 
+### colorToHex(value, opt)
 
-### convert.hexToRgb(hex)
+convert color to hex
 
-Convert hex color to rgb color array.
-
 #### Parameters
 
-* `hex` **[string][93]** `#rrggbbaa`
+*   `value` **[string][133]** color value
+*   `opt` **[object][135]?** options (optional, default `{}`)
+    *   `opt.alpha` **[boolean][136]?** return in #rrggbbaa notation
 
-Returns **[Array][96]<[number][97]>** `[r, g, b, a]` r|g|b: 0..255 a: 0..1
+Returns **[string][133]** #rrggbb|#rrggbbaa
 
+### colorToHsl(value)
 
-### convert.rgbToHex(rgb)
+convert color to hsl
 
-Convert rgb to hex color notation.
-
 #### Parameters
 
-* `rgb` **[Array][96]<[number][97]>** `[r, g, b, a]` r|g|b: 0..255 a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[string][93]** `#rrggbbaa`
+Returns **[Array][137]<[number][134]>** \[h, s, l, a]
 
+### colorToHwb(value)
 
-### convert.xyzToHex(xyz)
+convert color to hwb
 
-Convert xyz to hex color notation.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[string][93]** `#rrggbbaa`
+Returns **[Array][137]<[number][134]>** \[h, w, b, a]
 
+### colorToLab(value)
 
-### convert.xyzToHsl(xyz)
+convert color to lab
 
-Convert xyz to hsl color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[h, s, l, a]` h: 0..360 s|l: 0..100 a: 0..1
+Returns **[Array][137]<[number][134]>** \[l, a, b, aa]
 
+### colorToLch(value)
 
-### convert.xyzToHwb(xyz)
+convert color to lch
 
-Convert xyz to hwb color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[h, w, b, a]` h: 0..360 w|b: 0..100 a: 0..1
+Returns **[Array][137]<[number][134]>** \[l, c, h, aa]
 
+### colorToOklab(value)
 
-### convert.xyzToOklab(xyz)
+convert color to oklab
 
-Convert xyz to oklab color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[l, a, b, A]` l|A: 0..1 a|b: -0.4..0.4
+Returns **[Array][137]<[number][134]>** \[l, a, b, aa]
 
+### colorToOklch(value)
 
-### convert.xyzToOklch(xyz)
+convert color to oklch
 
-Convert xyz to oklch color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[l, c, h, a]` l|a: 0..1 c: 0..0.4 h: 0..360
+Returns **[Array][137]<[number][134]>** \[l, c, h, aa]
 
+### colorToRgb(value)
 
-### convert.xyzToRgb(xyz)
+convert color to rgb
 
-Convert xyz to rgb color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[r, g, b, a]` r|g|b: 0..255 a: 0..1
+Returns **[Array][137]<[number][134]>** \[r, g, b, a]
 
+### colorToXyz(value, opt)
 
-### convert.xyzToXyzD50(xyz)
+convert color to xyz
 
-Convert xyz to xyz-d50 color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
+*   `opt` **[object][135]?** options (optional, default `{}`)
+    *   `opt.d50` **[boolean][136]?** xyz in d50 white point
 
-Returns **[Array][96]<[number][97]>** xyz - `[x, y, z, a]` x|y|z|a: 0..1
+Returns **[Array][137]<[number][134]>** \[x, y, z, a]
 
+### colorToXyzD50(value)
 
-### convert.xyzD50ToLab(xyz)
+convert color to xyz-d50
 
-Convert xyz-d50 to lab color array.
-
 #### Parameters
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+*   `value` **[string][133]** color value
 
-Returns **[Array][96]<[number][97]>** `[l, a, b, A]` l: 0..100 a|b: -125..125 A: 0..1
+Returns **[Array][137]<[number][134]>** \[x, y, z, a]
 
+---
+Copyright (c) 2024 [asamuzaK (Kazz)](https://github.com/asamuzaK/)
 
-### convert.xyzD50ToLch(xyz)
+[133]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-Convert xyz-d50 to lch color array.
+[134]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-#### Parameters
+[135]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-* `xyz` **[Array][96]<[number][97]>** `[x, y, z, a]` x|y|z|a: 0..1
+[136]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-Returns **[Array][96]<[number][97]>** `[l, c, h, a]` l: 0..100 c: 0..150 h: 0..360 a: 0..1
+[137]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
----
-Copyright (c) 2024 [asamuzaK (Kazz)](https://github.com/asamuzaK/)
-
-[93]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[94]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[95]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[96]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-[97]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[138]: https://w3c.github.io/csswg-drafts/css-color-4/#color-conversion-code

src/index.js

@@ -8,2 +8,3 @@ /*!
 
-export { convert, parse, resolve } from './js/api.js';
+export { convert } from './js/convert.js';
+export { resolve } from './js/resolve.js';

src/js/convert.js

@@ -5,10 +5,11 @@ /**
 
+import { calc } from '@csstools/css-calc';
 import { LRUCache } from 'lru-cache';
 import {
-  convertHexToRgb, convertRgbToHex, convertXyzD50ToHex, convertXyzD50ToLab,
-  convertXyzD50ToLch, convertXyzToHex, convertXyzToHsl, convertXyzToHwb,
-  convertXyzToOklab, convertXyzToOklch, convertXyzToRgb, convertXyzToXyzD50,
-  numberToHexString
+  convertColorToHsl, convertColorToHwb, convertColorToLab, convertColorToLch,
+  convertColorToOklab, convertColorToOklch, convertColorToRgb,
+  numberToHexString, parseColorFunc, parseColorValue
 } from './color.js';
-import { isString } from './common.js';
+import { getType, isString } from './common.js';
+import { resolve } from './resolve.js';
 
@@ -21,17 +22,18 @@ /* cached results */
 /**
- * convert hex color to rgb
+ * pre process
  * @param {string} value - color value
- * @returns {Array.<number>} - [r, g, b, a] r|g|b: 0..255 a: 0..1
+ * @returns {string} - value
  */
-export const hexToRgb = value => {
-  const cacheKey =
-    isString(value) && `{hexToRgb:${value.toLowerCase().trim()}}`;
-  if (cacheKey && cachedResults.has(cacheKey)) {
-    return cachedResults.get(cacheKey);
+export const preProcess = value => {
+  if (value && isString(value)) {
+    if (/calc/.test(value)) {
+      value = calc(value);
+    }
+    if (value.startsWith('color-mix')) {
+      value = resolve(value, {
+        format: 'spec'
+      });
+    }
   }
-  const res = convertHexToRgb(value);
-  if (cacheKey) {
-    cachedResults.set(cacheKey, res);
-  }
-  return res;
+  return value;
 };
@@ -42,3 +44,3 @@
  * @param {number} value - color value
- * @returns {string} - hex string
+ * @returns {string} - hex string: 00..ff
  */
@@ -50,170 +52,243 @@ export const numberToHex = value => {
   }
-  const res = numberToHexString(value);
+  const hex = numberToHexString(value);
   if (cacheKey) {
-    cachedResults.set(cacheKey, res);
+    cachedResults.set(cacheKey, hex);
   }
-  return res;
+  return hex;
 };
 
 /**
- * convert rgb to hex color
- * @param {Array.<number>} rgb - [r, g, b, a] r|g|b: 0..255 a: 0..1
- * @returns {string} - hex color;
+ * convert color to hex
+ * @param {string} value - color value
+ * @param {object} [opt] - options
+ * @param {boolean} [opt.alpha] - return in #rrggbbaa notation
+ * @returns {string} - #rrggbb|#rrggbbaa
  */
-export const rgbToHex = rgb => {
-  const cacheKey = `{name:rgbToHex,rgb:${JSON.stringify(rgb)}}`;
+export const colorToHex = (value, opt = {}) => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToHex:${value},opt:${JSON.stringify(opt)}}`;
   if (cachedResults.has(cacheKey)) {
     return cachedResults.get(cacheKey);
   }
-  const res = convertRgbToHex(rgb);
-  cachedResults.set(cacheKey, res);
-  return res;
+  value = preProcess(value);
+  const { alpha } = opt;
+  let hex;
+  if (alpha) {
+    hex = resolve(value, {
+      format: 'hexAlpha'
+    });
+  } else {
+    hex = resolve(value, {
+      format: 'hex'
+    });
+  }
+  if (cacheKey) {
+    cachedResults.set(cacheKey, hex);
+  }
+  return hex;
 };
 
 /**
- * convert xyz
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @param {string} name - function name
- * @returns {string|Array.<number>} - result
+ * convert color to hsl
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [h, s, l, a]
  */
-export const convertXyz = (xyz, name) => {
-  const cacheKey = `{${name}:${JSON.stringify(xyz)}}`;
+export const colorToHsl = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToHsl:${value}}`;
   if (cachedResults.has(cacheKey)) {
     return cachedResults.get(cacheKey);
   }
-  let res;
-  switch (name) {
-    case 'xyzD50ToHex': {
-      res = convertXyzD50ToHex(xyz);
-      break;
-    }
-    case 'xyzD50ToLab': {
-      res = convertXyzD50ToLab(xyz);
-      break;
-    }
-    case 'xyzD50ToLch': {
-      res = convertXyzD50ToLch(xyz);
-      break;
-    }
-    case 'xyzToHex': {
-      res = convertXyzToHex(xyz);
-      break;
-    }
-    case 'xyzToHsl': {
-      res = convertXyzToHsl(xyz);
-      break;
-    }
-    case 'xyzToHwb': {
-      res = convertXyzToHwb(xyz);
-      break;
-    }
-    case 'xyzToOklab': {
-      res = convertXyzToOklab(xyz);
-      break;
-    }
-    case 'xyzToOklch': {
-      res = convertXyzToOklch(xyz);
-      break;
-    }
-    case 'xyzToRgb': {
-      res = convertXyzToRgb(xyz);
-      break;
-    }
-    case 'xyzToXyzD50': {
-      res = convertXyzToXyzD50(xyz);
-      break;
-    }
-    default: {
-      throw new Error(`Invalid converter name: ${name}`);
-    }
-  }
-  cachedResults.set(cacheKey, res);
-  return res;
+  value = preProcess(value);
+  const hsl = convertColorToHsl(value, {
+    format: 'hsl'
+  });
+  cachedResults.set(cacheKey, hsl);
+  return hsl;
 };
 
 /**
- * convert xyz D50 to hex color
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {string} - hex color
+ * convert color to hwb
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [h, w, b, a]
  */
-export const xyzD50ToHex = xyz => convertXyz(xyz, 'xyzD50ToHex');
+export const colorToHwb = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToHwb:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const hwb = convertColorToHwb(value, {
+    format: 'hwb'
+  });
+  cachedResults.set(cacheKey, hwb);
+  return hwb;
+};
 
 /**
- * convert xyz-d50 to lab
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [l, a, b, aa] l: 0..100 a|b: -125..125 aa: 0..1
+ * convert color to lab
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [l, a, b, aa]
  */
-export const xyzD50ToLab = xyz => convertXyz(xyz, 'xyzD50ToLab');
+export const colorToLab = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToLab:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const lab = convertColorToLab(value);
+  cachedResults.set(cacheKey, lab);
+  return lab;
+};
 
 /**
- * convert xyz-d50 to lch
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [l, c, h, a] l: 0..100 c: 0..150 h: 0..360 a: 0..1
+ * convert color to lch
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [l, c, h, aa]
  */
-export const xyzD50ToLch = xyz => convertXyz(xyz, 'xyzD50ToLch');
+export const colorToLch = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToLch:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const lch = convertColorToLch(value);
+  cachedResults.set(cacheKey, lch);
+  return lch;
+};
 
 /**
- * convert xyz to hex color
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {string} - hex color
+ * convert color to oklab
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [l, a, b, aa]
  */
-export const xyzToHex = xyz => convertXyz(xyz, 'xyzToHex');
+export const colorToOklab = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToOklab:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const lab = convertColorToOklab(value);
+  cachedResults.set(cacheKey, lab);
+  return lab;
+};
 
 /**
- * convert xyz to hsl
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [h, s, l, a] h: 0..360 s|l: 0..100 a: 0..1
+ * convert color to oklch
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [l, c, h, aa]
  */
-export const xyzToHsl = xyz => convertXyz(xyz, 'xyzToHsl');
+export const colorToOklch = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToOklch:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const lch = convertColorToOklch(value);
+  cachedResults.set(cacheKey, lch);
+  return lch;
+};
 
 /**
- * convert xyz to hwb
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [h, w, b, a] h: 0..360 w|b: 0..100 a: 0..1
+ * convert color to rgb
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [r, g, b, a]
  */
-export const xyzToHwb = xyz => convertXyz(xyz, 'xyzToHwb');
+export const colorToRgb = value => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToRgb:${value}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  const rgb = convertColorToRgb(value);
+  cachedResults.set(cacheKey, rgb);
+  return rgb;
+};
 
 /**
- * convert xyz to oklab
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [l, a, b, aa] l|aa: 0..1 a|b: -0.4..0.4
+ * convert color to xyz
+ * @param {string} value - color value
+ * @param {object} [opt] - options
+ * @param {boolean} [opt.d50] - xyz in d50 white point
+ * @returns {Array.<number>} - [x, y, z, a]
  */
-export const xyzToOklab = xyz => convertXyz(xyz, 'xyzToOklab');
+export const colorToXyz = (value, opt = {}) => {
+  if (isString(value)) {
+    value = value.toLowerCase().trim();
+  } else {
+    throw new TypeError(`Expected String but got ${getType(value)}.`);
+  }
+  const cacheKey = `{colorToXyz:${value},opt:${JSON.stringify(opt)}}`;
+  if (cachedResults.has(cacheKey)) {
+    return cachedResults.get(cacheKey);
+  }
+  value = preProcess(value);
+  let xyz;
+  if (value.startsWith('color(')) {
+    [, ...xyz] = parseColorFunc(value, opt);
+  } else {
+    [, ...xyz] = parseColorValue(value, opt);
+  }
+  cachedResults.set(cacheKey, xyz);
+  return xyz;
+};
 
 /**
- * convert xyz to oklch
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [l, c, h, aa] l|aa: 0..1 c: 0..0.4 h: 0..360
+ * convert color to xyz-d50
+ * @param {string} value - color value
+ * @returns {Array.<number>} - [x, y, z, a]
  */
-export const xyzToOklch = xyz => convertXyz(xyz, 'xyzToOklch');
+export const colorToXyzD50 = value => colorToXyz(value, { d50: true });
 
-/**
- * convert xyz to rgb
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} - [r, g, b, a] r|g|b: 0..255 a: 0..1
- */
-export const xyzToRgb = xyz => convertXyz(xyz, 'xyzToRgb');
-
-/**
- * convert xyz to xyz-d50
- * @param {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- * @returns {Array.<number>} xyz - [x, y, z, a] x|y|z|a: 0..1
- */
-export const xyzToXyzD50 = xyz => convertXyz(xyz, 'xyzToXyzD50');
-
-/* wrap converters */
+/* convert */
 export const convert = {
-  hexToRgb,
-  numberToHex,
-  rgbToHex,
-  xyzD50ToHex,
-  xyzD50ToLab,
-  xyzD50ToLch,
-  xyzToHex,
-  xyzToHsl,
-  xyzToHwb,
-  xyzToOklab,
-  xyzToOklch,
-  xyzToRgb,
-  xyzToXyzD50
+  colorToHex,
+  colorToHsl,
+  colorToHwb,
+  colorToLab,
+  colorToLch,
+  colorToOklab,
+  colorToOklch,
+  colorToRgb,
+  colorToXyz,
+  colorToXyzD50,
+  numberToHex
 };

types/index.d.ts

@@ -1,1 +0,2 @@
-export { convert, parse, resolve } from "./js/api.js";
+export { convert } from "./js/convert.js";
+export { resolve } from "./js/resolve.js";

types/js/color.d.ts

@@ -9,41 +9,75 @@ export function validateColorComponents(arr: any[], opt?: {
 }): any[];
-export function transformMatrix(mtx: Array<Array<number>>, vct: Array<number>): Array<number>;
+export function transformMatrix(mtx: Array<Array<number>>, vct: Array<number>, skip?: boolean): Array<number>;
 export function reInsertMissingColorComponents(value: string, color?: any[]): Array<number | string>;
-export function normalizeColorComponents(colorA: any[], colorB: any[]): Array<Array<number>>;
+export function normalizeColorComponents(colorA: any[], colorB: any[], skip?: boolean): Array<Array<number>>;
 export function numberToHexString(value: number): string;
 export function angleToDeg(angle: string): number;
-export function convertRgbToLinearRgb(rgb: Array<number>): Array<number>;
-export function convertRgbToXyz(rgb: Array<number>): Array<number>;
+export function parseAlpha(a?: string | null): number;
+export function parseHexAlpha(value: string): number;
+export function convertRgbToLinearRgb(rgb: Array<number>, skip?: boolean): Array<number>;
+export function convertRgbToXyz(rgb: Array<number>, skip?: boolean): Array<number>;
 export function convertRgbToXyzD50(rgb: Array<number>): Array<number>;
 export function convertRgbToHex(rgb: Array<number>): string;
-export function convertLinearRgbToRgb(rgb: Array<number>): Array<number>;
-export function convertLinearRgbToHex(rgb: Array<number>): string;
+export function convertLinearRgbToRgb(rgb: Array<number>, round?: boolean): Array<number>;
+export function convertLinearRgbToHex(rgb: Array<number>, skip?: boolean): string;
 export function convertXyzToHex(xyz: Array<number>): string;
 export function convertXyzD50ToHex(xyz: Array<number>): string;
-export function convertXyzToRgb(xyz: Array<number>): Array<number>;
+export function convertXyzToRgb(xyz: Array<number>, skip?: boolean): Array<number>;
 export function convertXyzToXyzD50(xyz: Array<number>): Array<number>;
-export function convertXyzToHsl(xyz: Array<number>): Array<number>;
-export function convertXyzToHwb(xyz: Array<number>): Array<number>;
-export function convertXyzToOklab(xyz: Array<number>): Array<number>;
-export function convertXyzToOklch(xyz: Array<number>): Array<number>;
-export function convertXyzD50ToRgb(xyz: Array<number>): Array<number>;
-export function convertXyzD50ToLab(xyz: Array<number>): Array<number>;
-export function convertXyzD50ToLch(xyz: Array<number>): Array<number>;
+export function convertXyzToHsl(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzToHwb(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzToOklab(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzToOklch(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzD50ToRgb(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzD50ToLab(xyz: Array<number>, skip?: boolean): Array<number>;
+export function convertXyzD50ToLch(xyz: Array<number>, skip?: boolean): Array<number>;
 export function convertHexToRgb(value: string): Array<number>;
 export function convertHexToLinearRgb(value: string): Array<number>;
 export function convertHexToXyz(value: string): Array<number>;
-export function parseAlpha(a?: string | null): number;
-export function parseRgb(value: string): Array<number>;
-export function parseHsl(value: string): Array<number>;
-export function parseHwb(value: string): Array<number>;
-export function parseLab(value: string): Array<number>;
-export function parseLch(value: string): Array<number>;
-export function parseOklab(value: string): Array<number>;
-export function parseOklch(value: string): Array<number>;
-export function parseColorFunc(value: string, d50?: boolean): Array<number>;
-export function parseColorValue(value: string, d50?: boolean): Array<number>;
-export function convertColorValueToLinearRgb(value: string, opt?: object): Array<number>;
-export function convertColorValueToRgb(value: string): Array<number>;
-export function resolveColorValue(value: string): Array<number>;
-export function resolveColorFunc(value: string): Array<number>;
-export function resolveColorMix(value: string, opt?: object): Array<number>;
+export function parseRgb(value: string): Array<string | number>;
+export function parseHsl(value: string, opt?: {
+    format?: string;
+}): Array<string | number>;
+export function parseHwb(value: string, opt?: {
+    format?: string;
+}): Array<string | number>;
+export function parseLab(value: string, opt?: {
+    format?: string;
+}): Array<string | number>;
+export function parseLch(value: string, opt?: {
+    format?: string;
+}): Array<number>;
+export function parseOklab(value: string, opt?: {
+    format?: string;
+}): Array<number>;
+export function parseOklch(value: string, opt?: {
+    format?: string;
+}): Array<number>;
+export function parseColorFunc(value: string, opt?: {
+    d50?: boolean;
+    format?: string;
+}): Array<string | number>;
+export function parseColorValue(value: string, opt?: {
+    d50?: boolean;
+    format?: string;
+}): Array<number>;
+export function resolveColorValue(value: string, opt?: {
+    format?: string;
+}): Array<string | number>;
+export function resolveColorFunc(value: string, opt?: {
+    format?: string;
+}): Array<number>;
+export function convertColorToLinearRgb(value: string, opt?: object): Array<number>;
+export function convertColorToRgb(value: string, opt?: object): Array<number>;
+export function convertColorToXyz(value: string, opt?: {
+    d50?: boolean;
+}): Array<number>;
+export function convertColorToHsl(value: string, opt?: object): Array<number>;
+export function convertColorToHwb(value: string, opt?: object): Array<number>;
+export function convertColorToLab(value: string, opt?: object): Array<number>;
+export function convertColorToLch(value: string, opt?: object): Array<number>;
+export function convertColorToOklab(value: string, opt?: object): Array<number>;
+export function convertColorToOklch(value: string, opt?: object): Array<number>;
+export function resolveColorMix(value: string, opt?: {
+    format?: string;
+}): Array<number>;

types/js/convert.d.ts

 export const cachedResults: LRUCache<{}, {}, unknown>;
-export function hexToRgb(value: string): Array<number>;
+export function preProcess(value: string): string;
 export function numberToHex(value: number): string;
-export function rgbToHex(rgb: Array<number>): string;
-export function convertXyz(xyz: Array<number>, name: string): string | Array<number>;
-export function xyzD50ToHex(xyz: Array<number>): string;
-export function xyzD50ToLab(xyz: Array<number>): Array<number>;
-export function xyzD50ToLch(xyz: Array<number>): Array<number>;
-export function xyzToHex(xyz: Array<number>): string;
-export function xyzToHsl(xyz: Array<number>): Array<number>;
-export function xyzToHwb(xyz: Array<number>): Array<number>;
-export function xyzToOklab(xyz: Array<number>): Array<number>;
-export function xyzToOklch(xyz: Array<number>): Array<number>;
-export function xyzToRgb(xyz: Array<number>): Array<number>;
-export function xyzToXyzD50(xyz: Array<number>): Array<number>;
+export function colorToHex(value: string, opt?: {
+    alpha?: boolean;
+}): string;
+export function colorToHsl(value: string): Array<number>;
+export function colorToHwb(value: string): Array<number>;
+export function colorToLab(value: string): Array<number>;
+export function colorToLch(value: string): Array<number>;
+export function colorToOklab(value: string): Array<number>;
+export function colorToOklch(value: string): Array<number>;
+export function colorToRgb(value: string): Array<number>;
+export function colorToXyz(value: string, opt?: {
+    d50?: boolean;
+}): Array<number>;
+export function colorToXyzD50(value: string): Array<number>;
 export namespace convert {
-    export { hexToRgb };
+    export { colorToHex };
+    export { colorToHsl };
+    export { colorToHwb };
+    export { colorToLab };
+    export { colorToLch };
+    export { colorToOklab };
+    export { colorToOklch };
+    export { colorToRgb };
+    export { colorToXyz };
+    export { colorToXyzD50 };
     export { numberToHex };
-    export { rgbToHex };
-    export { xyzD50ToHex };
-    export { xyzD50ToLab };
-    export { xyzD50ToLch };
-    export { xyzToHex };
-    export { xyzToHsl };
-    export { xyzToHwb };
-    export { xyzToOklab };
-    export { xyzToOklch };
-    export { xyzToRgb };
-    export { xyzToXyzD50 };
 }
 import { LRUCache } from 'lru-cache';

No alert changes

Improved metrics

Total package byte prevSize

1171268

increased by62.62%

Lines of code

4315

increased by33.8%

Worsened metrics

Dependency count

2

increased by100%

Number of lines in readme file

186

decreased by-15.84%

Dependency changes

• + Added@csstools/css-calc@^2.1.0

• + Added@csstools/css-calc@2.1.1(transitive)

• + Added@csstools/css-parser-algorithms@3.0.4(transitive)

• + Added@csstools/css-tokenizer@3.0.3(transitive)