@asamuzakjp/css-color - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

dist/esm/index.d.ts

@@ -9,3 +9,4 @@ /*!
 export { cssCalc } from './js/css-calc.js';
+export { cssVar } from './js/css-var.js';
 export { resolve } from './js/resolve.js';
 export { isColor } from './js/util.js';

dist/esm/index.js

 import { convert } from "./js/convert.js";
 import { cssCalc } from "./js/css-calc.js";
+import { cssVar } from "./js/css-var.js";
 import { resolve } from "./js/resolve.js";
@@ -8,2 +9,3 @@ import { isColor } from "./js/util.js";
   cssCalc,
+  cssVar,
   isColor,
@@ -10,0 +12,0 @@ resolve

dist/esm/js/convert.js

@@ -5,3 +5,3 @@ import { NullObject, createCacheKey, getCache, CacheItem, setCache } from "./cache.js";
 import { cssCalc } from "./css-calc.js";
-import { cssVar } from "./css-var.js";
+import { resolveVar } from "./css-var.js";
 import { resolveRelativeColor } from "./relative-color.js";
@@ -39,3 +39,3 @@ import { resolve } from "./resolve.js";
   if (REG_FN_VAR.test(value)) {
-    const resolvedValue = cssVar(value, opt);
+    const resolvedValue = resolveVar(value, opt);
     if (isString(resolvedValue)) {
@@ -42,0 +42,0 @@ value = resolvedValue;

dist/esm/js/css-calc.d.ts

@@ -84,3 +84,3 @@ import { CSSToken } from '@csstools/css-tokenizer';
 /**
- * resolve CSS calc()
+ * CSS calc()
  * @param value - color value including calc()
@@ -87,0 +87,0 @@ * @param [opt] - options

dist/esm/js/css-calc.js

@@ -13,4 +13,5 @@ var __typeError = (msg) => {
 import { isString, isStringOrNumber } from "./common.js";
+import { resolveVar } from "./css-var.js";
 import { roundToPrecision } from "./util.js";
-import { VAL_SPEC, FN_VAR, SYN_FN_CALC, SYN_FN_VAR, SYN_FN_VAR_START, NUM, SYN_FN_MATH_START } from "./constant.js";
+import { VAL_SPEC, SYN_FN_CALC, SYN_FN_VAR, SYN_FN_VAR_START, NUM, SYN_FN_MATH_START } from "./constant.js";
 const {
@@ -807,3 +808,8 @@ CloseParen: PAREN_CLOSE,
       } else {
-        throw new SyntaxError(`Unexpected token ${FN_VAR} found.`);
+        const resolvedValue2 = resolveVar(value, opt);
+        if (isString(resolvedValue2)) {
+          return resolvedValue2;
+        } else {
+          return "";
+        }
       }
@@ -810,0 +816,0 @@ } else if (!REG_FN_CALC.test(value)) {

dist/esm/js/css-var.d.ts

@@ -24,2 +24,9 @@ import { CSSToken } from '@csstools/css-tokenizer';
  */
-export declare function cssVar(value: string, opt?: Options): string | NullObject;
+export declare function resolveVar(value: string, opt?: Options): string | NullObject;
+/**
+ * CSS var()
+ * @param value - color value including var()
+ * @param [opt] - options
+ * @returns resolved value
+ */
+export declare const cssVar: (value: string, opt?: Options) => string;

dist/esm/js/css-var.js

@@ -63,3 +63,3 @@ import { tokenize, TokenType } from "@csstools/css-tokenizer";
     if (REG_FN_VAR.test(item)) {
-      const resolvedItem = cssVar(item, opt);
+      const resolvedItem = resolveVar(item, opt);
       if (isString(resolvedItem)) {
@@ -144,3 +144,3 @@ if (resolveAsColor) {
 }
-function cssVar(value, opt = {}) {
+function resolveVar(value, opt = {}) {
   const { format = "" } = opt;
@@ -158,3 +158,3 @@ if (isString(value)) {
       namespace: NAMESPACE,
-      name: "cssVar",
+      name: "resolveVar",
       value
@@ -185,7 +185,15 @@ },
 }
+const cssVar = (value, opt = {}) => {
+  const resolvedValue = resolveVar(value, opt);
+  if (isString(resolvedValue)) {
+    return resolvedValue;
+  }
+  return "";
+};
 export {
   cssVar,
   parseTokens,
-  resolveCustomProperty
+  resolveCustomProperty,
+  resolveVar
 };
 //# sourceMappingURL=css-var.js.map

dist/esm/js/resolve.js

@@ -5,3 +5,3 @@ import { createCacheKey, CacheItem, NullObject, getCache, setCache } from "./cache.js";
 import { cssCalc } from "./css-calc.js";
-import { cssVar } from "./css-var.js";
+import { resolveVar } from "./css-var.js";
 import { resolveRelativeColor } from "./relative-color.js";
@@ -41,3 +41,3 @@ import { VAL_SPEC, VAL_COMP, FN_MIX, FN_COLOR, SYN_FN_CALC, SYN_FN_REL, SYN_FN_VAR } from "./constant.js";
     }
-    const resolvedValue = cssVar(value, opt);
+    const resolvedValue = resolveVar(value, opt);
     if (resolvedValue instanceof NullObject) {
@@ -44,0 +44,0 @@ switch (format) {

package.json

@@ -73,3 +73,3 @@ {
   },
-  "version": "3.0.6"
+  "version": "3.0.7"
 }

src/index.ts

@@ -10,3 +10,4 @@ /*!
 export { cssCalc } from './js/css-calc';
+export { cssVar } from './js/css-var';
 export { resolve } from './js/resolve';
 export { isColor } from './js/util';

src/js/convert.ts

@@ -26,3 +26,3 @@ /**
 import { cssCalc } from './css-calc';
-import { cssVar } from './css-var';
+import { resolveVar } from './css-var';
 import { resolveRelativeColor } from './relative-color';
@@ -75,3 +75,3 @@ import { resolve } from './resolve';
   if (REG_FN_VAR.test(value)) {
-    const resolvedValue = cssVar(value, opt);
+    const resolvedValue = resolveVar(value, opt);
     if (isString(resolvedValue)) {
@@ -78,0 +78,0 @@ value = resolvedValue;

src/js/css-calc.ts

@@ -15,2 +15,3 @@ /**
 import { isString, isStringOrNumber } from './common';
+import { resolveVar } from './css-var';
 import { roundToPrecision } from './util';
@@ -21,3 +22,2 @@ import { Options } from './typedef';
 import {
-  FN_VAR,
   NUM,
@@ -899,3 +899,3 @@ SYN_FN_CALC,
 /**
- * resolve CSS calc()
+ * CSS calc()
  * @param value - color value including calc()
@@ -911,5 +911,9 @@ * @param [opt] - options
         return value;
-        // var() must be resolved before cssCalc()
       } else {
-        throw new SyntaxError(`Unexpected token ${FN_VAR} found.`);
+        const resolvedValue = resolveVar(value, opt);
+        if (isString(resolvedValue)) {
+          return resolvedValue;
+        } else {
+          return '';
+        }
       }
@@ -916,0 +920,0 @@ } else if (!REG_FN_CALC.test(value)) {

src/js/css-var.ts

@@ -90,4 +90,4 @@ /**
     if (REG_FN_VAR.test(item)) {
-      // recurse cssVar()
-      const resolvedItem = cssVar(item, opt);
+      // recurse resolveVar()
+      const resolvedItem = resolveVar(item, opt);
       if (isString(resolvedItem)) {
@@ -196,3 +196,6 @@ if (resolveAsColor) {
  */
-export function cssVar(value: string, opt: Options = {}): string | NullObject {
+export function resolveVar(
+  value: string,
+  opt: Options = {}
+): string | NullObject {
   const { format = '' } = opt;
@@ -210,3 +213,3 @@ if (isString(value)) {
       namespace: NAMESPACE,
-      name: 'cssVar',
+      name: 'resolveVar',
       value
@@ -237,1 +240,15 @@ },
 }
+
+/**
+ * CSS var()
+ * @param value - color value including var()
+ * @param [opt] - options
+ * @returns resolved value
+ */
+export const cssVar = (value: string, opt: Options = {}): string => {
+  const resolvedValue = resolveVar(value, opt);
+  if (isString(resolvedValue)) {
+    return resolvedValue;
+  }
+  return '';
+};

src/js/resolve.ts

@@ -20,3 +20,3 @@ /**
 import { cssCalc } from './css-calc';
-import { cssVar } from './css-var';
+import { resolveVar } from './css-var';
 import { resolveRelativeColor } from './relative-color';
@@ -116,3 +116,3 @@ import {
     }
-    const resolvedValue = cssVar(value, opt);
+    const resolvedValue = resolveVar(value, opt);
     if (resolvedValue instanceof NullObject) {
@@ -119,0 +119,0 @@ switch (format) {

No alert changes

Improved metrics

Total package byte prevSize

2045587

increased by0.19%

Lines of code

18873

increased by0.32%

No dependency changes