@asamuzakjp/css-color - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

package.json

@@ -34,3 +34,3 @@ {
     "esbuild": "^0.24.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-import-x": "^4.5.0",
@@ -55,3 +55,3 @@ "eslint-plugin-jsdoc": "^50.6.1",
   },
-  "version": "2.5.0"
+  "version": "2.6.0"
 }

README.md

@@ -41,23 +41,38 @@ # CSS color
 
-*   `color` **[string][133]** color value
-    *   system colors are not supported
+* `color` **[string][133]** color value
+  * system colors are not supported
 
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.currentColor` **[string][133]?** color to use for `currentcolor` keyword
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
-    *   `opt.format` **[string][133]?** output format, one of `computedValue` (default), `specifiedValue`, `rgb`, `hex`, `hexAlpha`
-        *   `computedValue` is a [computed value][139] of the color
-        *   `specifiedValue` is a [specified value][140] of the color
-        *   `hexAlpha` is a hex color notation with alpha channel, i.e. `#rrggbbaa`
-    *   `opt.key` **any?** key e.g. CSS property `background-color`
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.currentColor` **[string][133]?**
+    * color to use for `currentcolor` keyword
+    * if omitted, it will be treated as a missing color,
+      i.e. `rgb(none none none / none)`
+  * `opt.customProperty` **[object][135]?**
+    * custom properties
+    * pair of `--` prefixed property name as a key and it's value,
+      e.g. `customProperty: { '--some-color': '#008000' }`
+    * and/or `callback` function to get the value of the custom property,
+      e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+  * `opt.dimension` **[object][135]?**
+    * dimension, e.g. for converting relative length to pixels
+    * pair of unit and it's value as a number in pixels,
+      e.g. if `1em === 12px`, `1rem === 16px` and `100vw === 1024px`,
+      then `dimension: { em: 12, rem: 16, vw: 10.24 }`
+    * and/or `callback` function to get the value as a number in pixels,
+      e.g. `dimension: { callback: convertUnitToPixel }`
+  * `opt.format` **[string][133]?**
+    * output format, one of below
+      * `computedValue` (default), [computed value][139] of the color
+      * `specifiedValue`, [specified value][140] of the color
+      * `hex`, hex color notation, i.e. `rrggbb`
+      * `hexAlpha`, hex color notation with alpha channel, i.e. `#rrggbbaa`
+  * `opt.key` **any?**
+    *  key to return with the value, e.g. CSS property `background-color`
 
 Returns **([string][133]? | [Array][137])** one of `rgba?()`, `#rrggbb(aa)?`, `color-name`, `'(empty-string)'`, `color(color-space r g b / alpha)`, `color(color-space x y z / alpha)`, `lab(l a b / alpha)`, `lch(l c h / alpha)`, `oklab(l a b / alpha)`, `oklch(l c h / alpha)`, `null`, or `[key, rgba?()]` etc. if `key` is specified
-*   in `computedValue`, values are numbers, however `rgb()` values are integers
-*   in `specifiedValue`, returns `empty string` for unknown and/or invalid color
-*   in `rgb`, values are rounded to integers, and returns `rgba(0, 0, 0, 0)` for unknown and/or invalid color
-*   in `hex`, returns `null` for `transparent`, and also returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
-*   in `hexAlpha`, returns `#00000000` for `transparent`, however returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
+* in `computedValue`, values are numbers, however `rgb()` values are integers
+* in `specifiedValue`, returns `empty string` for unknown and/or invalid color
+* in `rgb`, values are rounded to integers, and returns `rgba(0, 0, 0, 0)` for unknown and/or invalid color
+* in `hex`, returns `null` for `transparent`, and also returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
+* in `hexAlpha`, returns `#00000000` for `transparent`, however returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
 
@@ -74,3 +89,3 @@ ### convert
 
-*   `value` **[number][134]** color value
+* `value` **[number][134]** color value
 
@@ -85,9 +100,9 @@ Returns **[string][133]** hex string: 00..ff
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.alpha` **[boolean][136]?** return in #rrggbbaa notation
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.alpha` **[boolean][136]?** return in #rrggbbaa notation
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -102,8 +117,8 @@ Returns **[string][133]** #rrggbb(aa)?
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -118,8 +133,8 @@ Returns **[Array][137]<[number][134]>** \[h, s, l, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -134,8 +149,8 @@ Returns **[Array][137]<[number][134]>** \[h, w, b, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -150,8 +165,8 @@ Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -166,8 +181,8 @@ Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -182,8 +197,8 @@ Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -198,8 +213,8 @@ Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -214,9 +229,9 @@ Returns **[Array][137]<[number][134]>** \[r, g, b, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
-    *   `opt.d50` **[boolean][136]?** xyz in d50 white point
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
+  * `opt.d50` **[boolean][136]?** xyz in d50 white point
 
@@ -231,8 +246,8 @@ Returns **[Array][137]<[number][134]>** \[x, y, z, alpha]
 
-*   `value` **[string][133]** color value
-*   `opt` **[object][135]?** options (optional, default `{}`)
-    *   `opt.cssCalc` **[object][135]?** options for [@csstools/css-calc][141], e.g. `cssCalc: { globals: new Map([['foo', 'bar'], ['baz', 1]]) }`
-    *   `opt.customProperty` **[object][135]?** custom properties
-        *   pair of `--` prefixed property name and value, e.g. `customProperty: { '--some-color': '#0000ff' }`
-        *   and/or callback function to get the value, e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+* `value` **[string][133]** color value
+* `opt` **[object][135]?** options (optional, default `{}`)
+  * `opt.customProperty` **[object][135]?**
+    * custom properties, see above
+  * `opt.dimension` **[object][135]?**
+    * dimension, see above
 
@@ -248,4 +263,4 @@ Returns **[Array][137]<[number][134]>** \[x, y, z, alpha]
 
-*   `color` **[string][133]** color value
-    *   system colors are not supported
+* `color` **[string][133]** color value
+  * system colors are not supported
 
@@ -252,0 +267,0 @@ Returns **[boolean][136]**

src/js/constant.js

@@ -13,5 +13,7 @@ /**
 export const FUNC_CALC = 'calc(';
+export const FUNC_CALC_ESC = '^calc\\(|(?<=[\\s*\\/\\(])calc\\(';
 export const FUNC_COLOR = 'color(';
 export const FUNC_MIX = 'color-mix(';
 export const FUNC_VAR = 'var(';
+export const FUNC_VAR_ESC = '^var\\(|(?<=[\\s*\\/\\(])var\\(';
 export const NONE = 'none';
@@ -18,0 +20,0 @@ export const NUM = `[+-]?(?:${_DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${_DIGIT})?`;

src/js/convert.js

@@ -5,3 +5,2 @@ /**
 
-import { calc } from '@csstools/css-calc';
 import { LRUCache } from 'lru-cache';
@@ -14,2 +13,3 @@ import {
 import { getType, isString } from './common.js';
+import { cssCalc } from './css-calc.js';
 import { cssVar } from './css-var.js';
@@ -20,4 +20,8 @@ import { resolve } from './resolve.js';
 /* constants */
-import { FUNC_CALC, FUNC_VAR, VAL_COMP } from './constant.js';
+import { FUNC_CALC_ESC, FUNC_VAR_ESC, VAL_COMP } from './constant.js';
 
+/* regexp */
+const REG_FUNC_CALC = new RegExp(FUNC_CALC_ESC);
+const REG_FUNC_VAR = new RegExp(FUNC_VAR_ESC);
+
 /* cached results */
@@ -33,2 +37,3 @@ export const cachedResults = new LRUCache({
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {?string} - value
@@ -53,3 +58,3 @@ */
   }
-  if (value.includes(FUNC_VAR)) {
+  if (REG_FUNC_VAR.test(value)) {
     value = cssVar(value, opt);
@@ -63,4 +68,4 @@ if (!value) {
   }
-  if (value.includes(FUNC_CALC)) {
-    value = calc(value, opt);
+  if (REG_FUNC_CALC.test(value)) {
+    value = cssCalc(value, opt);
   }
@@ -101,2 +106,3 @@ if (value.startsWith('color-mix')) {
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {?string} - #rrggbb | #rrggbbaa | null
@@ -125,9 +131,7 @@ */
   if (alpha) {
-    hex = resolve(value, {
-      format: 'hexAlpha'
-    });
+    opt.format = 'hexAlpha';
+    hex = resolve(value, opt);
   } else {
-    hex = resolve(value, {
-      format: 'hex'
-    });
+    opt.format = 'hex';
+    hex = resolve(value, opt);
   }
@@ -145,2 +149,3 @@ if (cacheKey) {
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [h, s, l, alpha]
@@ -167,5 +172,4 @@ */
   }
-  const hsl = convertColorToHsl(value, {
-    format: 'hsl'
-  });
+  opt.format = 'hsl';
+  const hsl = convertColorToHsl(value, opt);
   if (cacheKey) {
@@ -182,2 +186,3 @@ cachedResults.set(cacheKey, hsl);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [h, w, b, alpha]
@@ -204,5 +209,4 @@ */
   }
-  const hwb = convertColorToHwb(value, {
-    format: 'hwb'
-  });
+  opt.format = 'hwb';
+  const hwb = convertColorToHwb(value, opt);
   cachedResults.set(cacheKey, hwb);
@@ -217,2 +221,3 @@ return hwb;
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [l, a, b, alpha]
@@ -239,3 +244,3 @@ */
   }
-  const lab = convertColorToLab(value);
+  const lab = convertColorToLab(value, opt);
   if (cacheKey) {
@@ -252,2 +257,3 @@ cachedResults.set(cacheKey, lab);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [l, c, h, alpha]
@@ -274,3 +280,3 @@ */
   }
-  const lch = convertColorToLch(value);
+  const lch = convertColorToLch(value, opt);
   if (cacheKey) {
@@ -287,2 +293,3 @@ cachedResults.set(cacheKey, lch);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [l, a, b, alpha]
@@ -309,3 +316,3 @@ */
   }
-  const lab = convertColorToOklab(value);
+  const lab = convertColorToOklab(value, opt);
   if (cacheKey) {
@@ -322,2 +329,3 @@ cachedResults.set(cacheKey, lab);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [l, c, h, alpha]
@@ -344,3 +352,3 @@ */
   }
-  const lch = convertColorToOklch(value);
+  const lch = convertColorToOklch(value, opt);
   if (cacheKey) {
@@ -357,2 +365,3 @@ cachedResults.set(cacheKey, lch);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [r, g, b, alpha]
@@ -379,3 +388,3 @@ */
   }
-  const rgb = convertColorToRgb(value);
+  const rgb = convertColorToRgb(value, opt);
   if (cacheKey) {
@@ -392,2 +401,4 @@ cachedResults.set(cacheKey, rgb);
  * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.d50] - white poin in d50
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [x, y, z, alpha]
@@ -430,2 +441,4 @@ */
  * @param {object} [opt] - options
+ * @param {object} [opt.customProperty] - custom properties
+ * @param {object} [opt.dimension] - dimension
  * @returns {Array.<number>} - [x, y, z, alpha]
@@ -432,0 +445,0 @@ */

src/js/css-var.js

@@ -5,14 +5,19 @@ /**
 
-import { calc } from '@csstools/css-calc';
 import { TokenType, tokenize } from '@csstools/css-tokenizer';
 import { LRUCache } from 'lru-cache';
 import { getType, isString } from './common.js';
+import { cssCalc } from './css-calc.js';
 import { isColor, valueToJsonString } from './util.js';
 
 /* constants */
-import { FUNC_CALC, FUNC_VAR } from './constant.js';
+import { FUNC_CALC_ESC, FUNC_VAR, FUNC_VAR_ESC } from './constant.js';
 const {
-  CloseParen: CLOSE_PAREN, Comment: COMMENT, Ident: IDENT, Whitespace: W_SPACE
+  CloseParen: CLOSE_PAREN, Comment: COMMENT, EOF, Ident: IDENT,
+  Whitespace: W_SPACE
 } = TokenType;
 
+/* regexp */
+const REG_FUNC_CALC = new RegExp(FUNC_CALC_ESC);
+const REG_FUNC_VAR = new RegExp(FUNC_VAR_ESC);
+
 /* cached results */
@@ -24,3 +29,3 @@ export const cachedResults = new LRUCache({
 /**
- * resolve CSS variable
+ * resolve custom property
  * @param {Array.<Array>} tokens - tokens
@@ -31,3 +36,6 @@ * @param {object} [opt] - options
  */
-export function resolveCssVariable(tokens, opt = {}) {
+export function resolveCustomProperty(tokens, opt = {}) {
+  if (!Array.isArray(tokens)) {
+    throw new TypeError(`Expected Array but got ${getType(tokens)}.`);
+  }
   const { customProperty = {} } = opt;
@@ -37,2 +45,5 @@ const items = [];
     const token = tokens.shift();
+    if (!Array.isArray(token)) {
+      throw new TypeError(`Expected Array but got ${getType(token)}.`);
+    }
     const [type, value] = token;
@@ -45,6 +56,4 @@ // end of var()
     if (value === FUNC_VAR) {
-      const [remainedTokens, item] = resolveCssVariable(tokens, {
-        customProperty
-      });
-      tokens = remainedTokens;
+      const [restTokens, item] = resolveCustomProperty(tokens, opt);
+      tokens = restTokens;
       if (item) {
@@ -76,6 +85,5 @@ items.push(item);
     item = item.trim();
-    if (item.includes(FUNC_VAR)) {
-      item = cssVar(item, {
-        customProperty
-      });
+    if (REG_FUNC_VAR.test(item)) {
+      // recurse cssVar()
+      item = cssVar(item, opt);
       if (item) {
@@ -90,4 +98,4 @@ if (resolveAsColor) {
       }
-    } else if (item.includes(FUNC_CALC)) {
-      item = calc(item, opt);
+    } else if (REG_FUNC_CALC.test(item)) {
+      item = cssCalc(item, opt);
       if (resolveAsColor) {
@@ -124,3 +132,3 @@ if (isColor(item)) {
 export function parseTokens(tokens, opt = {}) {
-  const result = [];
+  const res = [];
   while (tokens.length) {
@@ -130,31 +138,31 @@ const token = tokens.shift();
     if (value === FUNC_VAR) {
-      const [remainedTokens, resolvedValue] = resolveCssVariable(tokens, opt);
+      const [restTokens, resolvedValue] = resolveCustomProperty(tokens, opt);
       if (!resolvedValue) {
         return null;
       }
-      tokens = remainedTokens;
-      result.push(resolvedValue);
+      tokens = restTokens;
+      res.push(resolvedValue);
     } else if (type === W_SPACE) {
-      if (result.length) {
-        const lastValue = result[result.length - 1];
+      if (res.length) {
+        const lastValue = res[res.length - 1];
         if (!lastValue.endsWith('(') && lastValue !== ' ') {
-          result.push(value);
+          res.push(value);
         }
       }
     } else if (type === CLOSE_PAREN) {
-      if (result.length) {
-        const lastValue = result[result.length - 1];
+      if (res.length) {
+        const lastValue = res[res.length - 1];
         if (lastValue === ' ') {
-          result.splice(-1, 1, value);
+          res.splice(-1, 1, value);
         } else {
-          result.push(value);
+          res.push(value);
         }
       } else {
-        result.push(value);
+        res.push(value);
       }
-    } else if (type !== COMMENT) {
-      result.push(value);
+    } else if (type !== COMMENT && type !== EOF) {
+      res.push(value);
     }
   }
-  return result;
+  return res;
 }
@@ -171,3 +179,3 @@
   if (value && isString(value)) {
-    if (!value.includes(FUNC_VAR)) {
+    if (!REG_FUNC_VAR.test(value)) {
       return value;
@@ -191,4 +199,4 @@ }
     let color = values.join('');
-    if (color.includes(FUNC_CALC)) {
-      color = calc(color, opt);
+    if (REG_FUNC_CALC.test(color)) {
+      color = cssCalc(color, opt);
     }
@@ -195,0 +203,0 @@ if (cacheKey) {

src/js/resolve.js

@@ -5,3 +5,2 @@ /**
 
-import { calc } from '@csstools/css-calc';
 import { LRUCache } from 'lru-cache';
@@ -12,2 +11,3 @@ import {
 import { getType, isString } from './common.js';
+import { cssCalc } from './css-calc.js';
 import { cssVar } from './css-var.js';
@@ -18,6 +18,10 @@ import { valueToJsonString } from './util.js';
 import {
-  FUNC_CALC, FUNC_COLOR, FUNC_MIX, FUNC_VAR, VAL_COMP, VAL_SPEC
+  FUNC_CALC_ESC, FUNC_COLOR, FUNC_MIX, FUNC_VAR_ESC, VAL_COMP, VAL_SPEC
 } from './constant.js';
 const RGB_TRANSPARENT = 'rgba(0, 0, 0, 0)';
 
+/* regexp */
+const REG_FUNC_CALC = new RegExp(FUNC_CALC_ESC);
+const REG_FUNC_VAR = new RegExp(FUNC_VAR_ESC);
+
 /* cached results */
@@ -33,3 +37,6 @@ export const cachedResults = new LRUCache({
  * @param {object} [opt] - options
- * @param {string} [opt.currentColor] - color to use for `currentcolor` keyword
+ * @param {string} [opt.currentColor]
+ *   - color to use for `currentcolor` keyword
+ *   - if omitted, it will be treated as a missing color
+ *     i.e. `rgb(none none none / none)`
  * @param {object} [opt.customProperty]
@@ -39,8 +46,16 @@ *   - custom properties
  *     e.g. `customProperty: { '--some-color': '#0000ff' }`
- *   - and/or callback function to get the value of custom property,
+ *   - and/or `callback` function to get the value of the custom property,
  *     e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+ * @param {object} [opt.dimension]
+ *   - dimension, convert relative length to pixels
+ *   - pair of unit and it's value as a number in pixels,
+ *     e.g. `dimension: { em: 12, rem: 16, vw: 10.26 }`
+ *   - and/or `callback` function to get the value as a number in pixels,
+ *     e.g. `dimension: { callback: convertUnitToPixel }`
  * @param {string} [opt.format]
- *   - output format, one of `computedValue` (default), `specifiedValue`,
- *     `rgb`, `hex`, `hexAlpha`
- *   - `hexAlpha` is a hex color notation with alpha channel, i.e. #rrggbbaa
+ *   - output format, one of below
+ *   - `computedValue` (default), [computed value][139] of the color
+ *   - `specifiedValue`, [specified value][140] of the color
+ *   - `hex`, hex color notation, i.e. `rrggbb`
+ *   - `hexAlpha`, hex color notation with alpha channel, i.e. `#rrggbbaa`
  * @param {*} [opt.key] - key e.g. CSS property `background-color`
@@ -52,9 +67,12 @@ * @returns {?string|Array}
  *     oklch(l c h / alpha), null or [key, rgba?()] etc. if `key` is specified
- *   - in `spec`, returned 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`, `alpha` is not a number
- *   - in `hexAlpha`, `transparent` resolves as `#00000000`, and returns `null`
- *     if any of `r`, `g`, `b`, `alpha` is not a number
+ *   - in `computedValue`, values are numbers, however `rgb()` values are
+ *     integers
+ *   - in `specifiedValue`, returns `empty string` for unknown and/or invalid
+ *     color
+ *   - in `rgb`, values are rounded to integers,
+ *     and returns `rgba(0, 0, 0, 0)` for unknown and/or invalid color
+ *   - in `hex`, returns `null` for `transparent`, and also returns `null` if
+ *     any of `r`, `g`, `b`, `alpha` is not a number
+ *   - in `hexAlpha`, returns `#00000000` for `transparent`,
+ *     however returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
  */
@@ -69,3 +87,3 @@ export const resolve = (color, opt = {}) => {
   let cacheKey;
-  if (!color.includes(FUNC_VAR) ||
+  if (!REG_FUNC_VAR.test(color) ||
       typeof customProperty?.callback !== 'function') {
@@ -78,3 +96,3 @@ cacheKey = `{resolve:${color},opt:${valueToJsonString(opt)}}`;
   let res, cs, r, g, b, alpha;
-  if (color.includes(FUNC_VAR)) {
+  if (REG_FUNC_VAR.test(color)) {
     if (format === VAL_SPEC) {
@@ -106,5 +124,8 @@ if (cacheKey) {
   }
+  if (opt.format !== format) {
+    opt.format = format;
+  }
   color = color.toLowerCase();
-  if (color.includes(FUNC_CALC)) {
-    color = calc(color, opt);
+  if (REG_FUNC_CALC.test(color)) {
+    color = cssCalc(color, opt);
   }
@@ -155,13 +176,7 @@ if (color === 'transparent') {
       if (currentColor.startsWith(FUNC_MIX)) {
-        [cs, r, g, b, alpha] = resolveColorMix(currentColor, {
-          format
-        });
+        [cs, r, g, b, alpha] = resolveColorMix(currentColor, opt);
       } else if (currentColor.startsWith(FUNC_COLOR)) {
-        [cs, r, g, b, alpha] = resolveColorFunc(currentColor, {
-          format
-        });
+        [cs, r, g, b, alpha] = resolveColorFunc(currentColor, opt);
       } else {
-        [cs, r, g, b, alpha] = resolveColorValue(currentColor, {
-          format
-        });
+        [cs, r, g, b, alpha] = resolveColorValue(currentColor, opt);
       }
@@ -177,5 +192,3 @@ } else if (format === VAL_COMP) {
     if (color.startsWith(FUNC_MIX)) {
-      res = resolveColorMix(color, {
-        format
-      });
+      res = resolveColorMix(color, opt);
       if (cacheKey) {
@@ -186,5 +199,3 @@ cachedResults.set(cacheKey, res);
     } else if (color.startsWith(FUNC_COLOR)) {
-      [cs, r, g, b, alpha] = resolveColorFunc(color, {
-        format
-      });
+      [cs, r, g, b, alpha] = resolveColorFunc(color, opt);
       if (alpha === 1) {
@@ -200,5 +211,3 @@ res = `color(${cs} ${r} ${g} ${b})`;
     } else {
-      const rgb = resolveColorValue(color, {
-        format
-      });
+      const rgb = resolveColorValue(color, opt);
       if (!rgb) {
@@ -241,5 +250,3 @@ res = '';
     if (color.startsWith(FUNC_MIX)) {
-      [cs, r, g, b, alpha] = resolveColorMix(color, {
-        format
-      });
+      [cs, r, g, b, alpha] = resolveColorMix(color, opt);
     }
@@ -249,18 +256,10 @@ } else if (/transparent/.test(color)) {
     if (color.startsWith(FUNC_MIX)) {
-      [cs, r, g, b, alpha] = resolveColorMix(color, {
-        format
-      });
+      [cs, r, g, b, alpha] = resolveColorMix(color, opt);
     }
   } else if (color.startsWith(FUNC_MIX)) {
-    [cs, r, g, b, alpha] = resolveColorMix(color, {
-      format
-    });
+    [cs, r, g, b, alpha] = resolveColorMix(color, opt);
   } else if (color.startsWith(FUNC_COLOR)) {
-    [cs, r, g, b, alpha] = resolveColorFunc(color, {
-      format
-    });
+    [cs, r, g, b, alpha] = resolveColorFunc(color, opt);
   } else if (color) {
-    [cs, r, g, b, alpha] = resolveColorValue(color, {
-      format
-    });
+    [cs, r, g, b, alpha] = resolveColorValue(color, opt);
   }
@@ -267,0 +266,0 @@ switch (format) {

types/js/constant.d.ts

@@ -7,5 +7,7 @@ export const ANGLE: "deg|g?rad|turn";
 export const FUNC_CALC: "calc(";
+export const FUNC_CALC_ESC: "^calc\\(|(?<=[\\s*\\/\\(])calc\\(";
 export const FUNC_COLOR: "color(";
 export const FUNC_MIX: "color-mix(";
 export const FUNC_VAR: "var(";
+export const FUNC_VAR_ESC: "^var\\(|(?<=[\\s*\\/\\(])var\\(";
 export const NONE: "none";
@@ -12,0 +14,0 @@ export const NUM: "[+-]?(?:(?:0|[1-9]\\d*)(?:\\.\\d*)?|\\.\\d+)(?:e-?(?:0|[1-9]\\d*))?";

types/js/convert.d.ts

 export const cachedResults: LRUCache<{}, {}, unknown>;
 export function preProcess(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): string | null;
@@ -9,28 +10,41 @@ export function numberToHex(value: number): string;
     customProperty?: object;
+    dimension?: object;
 }): string | null;
 export function colorToHsl(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToHwb(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToLab(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToLch(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToOklab(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToOklch(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToRgb(value: string, opt?: {
     customProperty?: object;
+    dimension?: object;
 }): Array<number>;
 export function colorToXyz(value: string, opt?: {
     customProperty?: object;
+    d50?: object;
+    dimension?: object;
 }): Array<number>;
-export function colorToXyzD50(value: string, opt?: object): Array<number>;
+export function colorToXyzD50(value: string, opt?: {
+    customProperty?: object;
+    dimension?: object;
+}): Array<number>;
 export namespace convert {
@@ -37,0 +51,0 @@ export { colorToHex };

types/js/css-var.d.ts

@@ -1,2 +0,2 @@
-export function resolveCssVariable(tokens: Array<any[]>, opt?: {
+export function resolveCustomProperty(tokens: Array<any[]>, opt?: {
     customProperty?: object;
@@ -3,0 +3,0 @@ }): Array<string | any[] | undefined>;

types/js/resolve.d.ts

@@ -5,2 +5,3 @@ export const cachedResults: LRUCache<{}, {}, unknown>;
     customProperty?: object;
+    dimension?: object;
     format?: string;
@@ -7,0 +8,0 @@ key?: any;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1338050

increased by2.05%

Number of package files

25

increased by8.7%

Lines of code

5736

increased by3.88%

Number of lines in readme file

277

increased by5.73%

No dependency changes