@pandacss/token-dictionary 0.0.0-dev-20240124004908 → 0.0.0-dev-20240126170252

package/dist/index.d.mts

@@ -154,7 +154,14 @@ declare class TokenDictionary extends TokenDictionary$1 {
         [k: string]: string;
     } | undefined;
     getTokenVar: (path: string) => any;
+    /**
+     * Expand token references to their CSS variable
+     */
     expandReference(value: string): string;
+    /**
+     * Resolve token references to their actual raw value
+     */
+    resolveReference(value: string): string;
 }
 
 export { Token, TokenDictionary };

package/dist/index.d.ts

@@ -154,7 +154,14 @@ declare class TokenDictionary extends TokenDictionary$1 {
         [k: string]: string;
     } | undefined;
     getTokenVar: (path: string) => any;
+    /**
+     * Expand token references to their CSS variable
+     */
     expandReference(value: string): string;
+    /**
+     * Resolve token references to their actual raw value
+     */
+    resolveReference(value: string): string;
 }
 
 export { Token, TokenDictionary };

package/dist/index.js

@@ -70,6 +70,7 @@ var isCompositeTokenValue = (value) => {
 var import_shared2 = require("@pandacss/shared");
 
 // src/utils.ts
+var import_logger = require("@pandacss/logger");
 var import_shared = require("@pandacss/shared");
 var REFERENCE_REGEX = /(\$[^\s,]+\w)|({([^}]*)})/g;
 var curlyBracketRegex = /[{}]/g;
@@ -84,14 +85,40 @@ function getReferences(value) {
 function hasReference(value) {
   return REFERENCE_REGEX.test(value);
 }
+var tokenFunctionRegex = /token\(([^)]+)\)/g;
+var closingParenthesisRegex = /\)$/g;
+var hasTokenReference = (str) => str.includes("token(");
+var tokenReplacer = (a, b) => b ? a.endsWith(")") ? a.replace(closingParenthesisRegex, `, ${b})`) : `var(${a}, ${b})` : a;
+var notFoundMessage = (key, value) => `Reference not found: \`${key}\` in "${value}"`;
 function expandReferences(value, fn) {
-  if (!hasReference(value))
+  if (!hasReference(value) && !hasTokenReference(value))
     return value;
   const references = getReferences(value);
-  return references.reduce((valueStr, key) => {
-    const value2 = fn(key) ?? key;
-    return valueStr.replace(`{${key}}`, value2);
+  const expanded = references.reduce((valueStr, key) => {
+    const resolved = fn(key);
+    if (!resolved) {
+      import_logger.logger.warn("token", notFoundMessage(key, value));
+    }
+    const expandedValue = resolved ?? (0, import_shared.esc)(key);
+    return valueStr.replace(`{${key}}`, expandedValue);
   }, value);
+  if (!expanded.includes(`token(`))
+    return expanded;
+  return expanded.replace(tokenFunctionRegex, (_, token) => {
+    const [tokenValue, tokenFallback] = token.split(",").map((s) => s.trim());
+    const result = [tokenValue, tokenFallback].filter(Boolean).map((key) => {
+      const resolved = fn(key);
+      if (!resolved) {
+        import_logger.logger.warn("token", notFoundMessage(key, value));
+      }
+      return resolved ?? (0, import_shared.esc)(key);
+    });
+    if (result.length > 1) {
+      const [a, b] = result;
+      return tokenReplacer(a, b);
+    }
+    return tokenReplacer(result[0]);
+  });
 }
 function mapToJson(map) {
   const obj = {};
@@ -953,9 +980,18 @@ var TokenDictionary2 = class extends TokenDictionary {
   getTokenVar = (0, import_shared7.memo)((path) => {
     return (0, import_shared7.getDotPath)(this.json, path);
   });
+  /**
+   * Expand token references to their CSS variable
+   */
   expandReference(value) {
     return expandReferences(value, (key) => this.get(key));
   }
+  /**
+   * Resolve token references to their actual raw value
+   */
+  resolveReference(value) {
+    return expandReferences(value, (key) => this.getByName(key)?.value);
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -43,7 +43,8 @@ var isCompositeTokenValue = (value) => {
 import { isBaseCondition, toHash, walkObject } from "@pandacss/shared";
 
 // src/utils.ts
-import { isObject } from "@pandacss/shared";
+import { logger } from "@pandacss/logger";
+import { esc, isObject } from "@pandacss/shared";
 var REFERENCE_REGEX = /(\$[^\s,]+\w)|({([^}]*)})/g;
 var curlyBracketRegex = /[{}]/g;
 function getReferences(value) {
@@ -57,14 +58,40 @@ function getReferences(value) {
 function hasReference(value) {
   return REFERENCE_REGEX.test(value);
 }
+var tokenFunctionRegex = /token\(([^)]+)\)/g;
+var closingParenthesisRegex = /\)$/g;
+var hasTokenReference = (str) => str.includes("token(");
+var tokenReplacer = (a, b) => b ? a.endsWith(")") ? a.replace(closingParenthesisRegex, `, ${b})`) : `var(${a}, ${b})` : a;
+var notFoundMessage = (key, value) => `Reference not found: \`${key}\` in "${value}"`;
 function expandReferences(value, fn) {
-  if (!hasReference(value))
+  if (!hasReference(value) && !hasTokenReference(value))
     return value;
   const references = getReferences(value);
-  return references.reduce((valueStr, key) => {
-    const value2 = fn(key) ?? key;
-    return valueStr.replace(`{${key}}`, value2);
+  const expanded = references.reduce((valueStr, key) => {
+    const resolved = fn(key);
+    if (!resolved) {
+      logger.warn("token", notFoundMessage(key, value));
+    }
+    const expandedValue = resolved ?? esc(key);
+    return valueStr.replace(`{${key}}`, expandedValue);
   }, value);
+  if (!expanded.includes(`token(`))
+    return expanded;
+  return expanded.replace(tokenFunctionRegex, (_, token) => {
+    const [tokenValue, tokenFallback] = token.split(",").map((s) => s.trim());
+    const result = [tokenValue, tokenFallback].filter(Boolean).map((key) => {
+      const resolved = fn(key);
+      if (!resolved) {
+        logger.warn("token", notFoundMessage(key, value));
+      }
+      return resolved ?? esc(key);
+    });
+    if (result.length > 1) {
+      const [a, b] = result;
+      return tokenReplacer(a, b);
+    }
+    return tokenReplacer(result[0]);
+  });
 }
 function mapToJson(map) {
   const obj = {};
@@ -926,9 +953,18 @@ var TokenDictionary2 = class extends TokenDictionary {
   getTokenVar = memo2((path) => {
     return getDotPath2(this.json, path);
   });
+  /**
+   * Expand token references to their CSS variable
+   */
   expandReference(value) {
     return expandReferences(value, (key) => this.get(key));
   }
+  /**
+   * Resolve token references to their actual raw value
+   */
+  resolveReference(value) {
+    return expandReferences(value, (key) => this.getByName(key)?.value);
+  }
 };
 export {
   Token,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.0.0-dev-20240124004908",
+  "version": "0.0.0-dev-20240126170252",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -33,8 +33,9 @@
   ],
   "dependencies": {
     "ts-pattern": "5.0.5",
-    "@pandacss/shared": "0.0.0-dev-20240124004908",
-    "@pandacss/types": "0.0.0-dev-20240124004908"
+    "@pandacss/logger": "^0.0.0-dev-20240126170252",
+    "@pandacss/shared": "0.0.0-dev-20240126170252",
+    "@pandacss/types": "0.0.0-dev-20240126170252"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",