@asamuzakjp/css-color - npm Package Compare versions

Comparing version 2.6.1 to 2.6.2

package.json

@@ -54,3 +54,3 @@ {
   },
-  "version": "2.6.1"
+  "version": "2.6.2"
 }

README.md

@@ -52,12 +52,54 @@ # CSS color
     * pair of `--` prefixed property name as a key and it's value,
-      e.g. `customProperty: { '--some-color': '#008000' }`
+      e.g.
+      ``` javascript
+      const opt = {
+        customProperty: {
+          '--some-color': '#008000',
+          '--some-length': '16px'
+        }
+      };
+      ```
     * and/or `callback` function to get the value of the custom property,
-      e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
+      e.g.
+      ``` javascript;
+      const node = document.getElementById('foo');
+      const opt = {
+        customProperty: {
+          callback: node.style.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 }`
+    * pair of unit as a key and number in pixels as it's value,
+      e.g. suppose `1em === 12px`, `1rem === 16px` and `100vw === 1024px`, then
+      ``` javascript
+      const opt = {
+        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 }`
+      e.g.
+      ``` javascript
+      const opt = {
+        dimension: {
+          callback: (unit) => {
+            switch (unit) {
+              case 'em':
+                return 12;
+              case 'rem':
+                return 16;
+              case 'vw':
+                return 10.24;
+              default:
+                return;
+            }
+          }
+        }
+      };
+      ```
   * `opt.format` **[string][133]?**
@@ -103,5 +145,5 @@ * output format, one of below
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -119,5 +161,5 @@ Returns **[string][133]** #rrggbb(aa)?
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -135,5 +177,5 @@ Returns **[Array][137]<[number][134]>** \[h, s, l, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -151,5 +193,5 @@ Returns **[Array][137]<[number][134]>** \[h, w, b, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -167,5 +209,5 @@ Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -183,5 +225,5 @@ Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -199,5 +241,5 @@ Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -215,5 +257,5 @@ Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -231,5 +273,5 @@ Returns **[Array][137]<[number][134]>** \[r, g, b, alpha]
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
   * `opt.d50` **[boolean][136]?** xyz in d50 white point
@@ -248,5 +290,5 @@
   * `opt.customProperty` **[object][135]?**
-    * custom properties, see above
+    * custom properties, see `resolve()` function above
   * `opt.dimension` **[object][135]?**
-    * dimension, see above
+    * dimension, see `resolve()` function above
 
@@ -253,0 +295,0 @@ Returns **[Array][137]<[number][134]>** \[x, y, z, alpha]

src/js/css-calc.js

@@ -13,7 +13,7 @@ /**
 import {
-  FUNC_CALC, FUNC_CALC_ESC, FUNC_VAR, FUNC_VAR_ESC, VAL_SPEC
+  FUNC_CALC, FUNC_CALC_ESC, FUNC_VAR, FUNC_VAR_ESC, NUM, VAL_SPEC
 } from './constant.js';
 const {
-  CloseParen: CLOSE_PAREN, Comment: COMMENT, Dimension: DIM, EOF,
-  Whitespace: W_SPACE
+  CloseParen: PAREN_CLOSE, Comment: COMMENT, Dimension: DIM, EOF,
+  Function: FUNC, OpenParen: PAREN_OPEN, Whitespace: W_SPACE
 } = TokenType;
@@ -23,3 +23,5 @@
 const REG_FUNC_CALC = new RegExp(FUNC_CALC_ESC);
+const REG_FUNC_SIGN = /^(?:abs|sign)\($/;
 const REG_FUNC_VAR = new RegExp(FUNC_VAR_ESC);
+const REG_UNIT = new RegExp(`^(${NUM})([a-z]+|%)$`);
 
@@ -69,6 +71,9 @@ /* cached results */
  */
-export const parseTokens = (tokens, opt) => {
+export const parseTokens = (tokens, opt = {}) => {
   if (!Array.isArray(tokens)) {
     throw new TypeError(`Expected Array but got ${getType(tokens)}.`);
   }
+  const { format } = opt;
+  const signFunc = new Set();
+  let nest = 0;
   const res = [];
@@ -83,3 +88,8 @@ while (tokens.length) {
       case DIM: {
-        let resolvedValue = resolveDimension(token, opt);
+        let resolvedValue;
+        if (format === VAL_SPEC && !signFunc.has(nest)) {
+          resolvedValue = value;
+        } else {
+          resolvedValue = resolveDimension(token, opt);
+        }
         if (!resolvedValue) {
@@ -91,12 +101,12 @@ resolvedValue = value;
       }
-      case W_SPACE: {
-        if (res.length) {
-          const lastValue = res[res.length - 1];
-          if (!lastValue.endsWith('(') && lastValue !== ' ') {
-            res.push(value);
-          }
+      case FUNC:
+      case PAREN_OPEN: {
+        res.push(value);
+        nest++;
+        if (REG_FUNC_SIGN.test(value)) {
+          signFunc.add(nest);
         }
         break;
       }
-      case CLOSE_PAREN: {
+      case PAREN_CLOSE: {
         if (res.length) {
@@ -112,4 +122,17 @@ const lastValue = res[res.length - 1];
         }
+        if (signFunc.has(nest)) {
+          signFunc.delete(nest);
+        }
+        nest--;
         break;
       }
+      case W_SPACE: {
+        if (res.length) {
+          const lastValue = res[res.length - 1];
+          if (!lastValue.endsWith('(') && lastValue !== ' ') {
+            res.push(value);
+          }
+        }
+        break;
+      }
       default: {
@@ -159,10 +182,17 @@ if (type !== COMMENT && type !== EOF) {
   const values = parseTokens(tokens, opt);
-  let color = calc(values.join(''));
-  if (color && value.startsWith(FUNC_CALC) && format === VAL_SPEC) {
-    color = `calc(${color})`;
+  let resolvedValue = calc(values.join(''));
+  if (value.startsWith(FUNC_CALC)) {
+    if (REG_UNIT.test(resolvedValue)) {
+      const [, val, unit] = REG_UNIT.exec(resolvedValue);
+      resolvedValue = `${parseFloat(Number(val).toPrecision(6))}${unit}`;
+    }
+    // wrap with `calc()`
+    if (resolvedValue && format === VAL_SPEC) {
+      resolvedValue = `calc(${resolvedValue})`;
+    }
   }
   if (cacheKey) {
-    cachedResults.set(cacheKey, color);
+    cachedResults.set(cacheKey, resolvedValue);
   }
-  return color;
+  return resolvedValue;
 };

src/js/css-var.js

@@ -14,3 +14,3 @@ /**
 const {
-  CloseParen: CLOSE_PAREN, Comment: COMMENT, EOF, Ident: IDENT,
+  CloseParen: PAREN_CLOSE, Comment: COMMENT, EOF, Ident: IDENT,
   Whitespace: W_SPACE
@@ -48,3 +48,3 @@ } = TokenType;
     // end of var()
-    if (type === CLOSE_PAREN) {
+    if (type === PAREN_CLOSE) {
       break;
@@ -138,22 +138,32 @@ }
       res.push(resolvedValue);
-    } else if (type === W_SPACE) {
-      if (res.length) {
-        const lastValue = res[res.length - 1];
-        if (!lastValue.endsWith('(') && lastValue !== ' ') {
-          res.push(value);
+    } else {
+      switch (type) {
+        case PAREN_CLOSE: {
+          if (res.length) {
+            const lastValue = res[res.length - 1];
+            if (lastValue === ' ') {
+              res.splice(-1, 1, value);
+            } else {
+              res.push(value);
+            }
+          } else {
+            res.push(value);
+          }
+          break;
         }
-      }
-    } else if (type === CLOSE_PAREN) {
-      if (res.length) {
-        const lastValue = res[res.length - 1];
-        if (lastValue === ' ') {
-          res.splice(-1, 1, value);
-        } else {
-          res.push(value);
+        case W_SPACE: {
+          if (res.length) {
+            const lastValue = res[res.length - 1];
+            if (!lastValue.endsWith('(') && lastValue !== ' ') {
+              res.push(value);
+            }
+          }
+          break;
         }
-      } else {
-        res.push(value);
+        default: {
+          if (type !== COMMENT && type !== EOF) {
+            res.push(value);
+          }
+        }
       }
-    } else if (type !== COMMENT && type !== EOF) {
-      res.push(value);
     }
@@ -160,0 +170,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

1344743

increased by0.49%

Lines of code

5778

increased by0.73%

Number of lines in readme file

319

increased by15.16%

No dependency changes