@pandacss/token-dictionary 0.39.1 → 0.40.0

package/dist/index.js

@@ -32,7 +32,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/dictionary.ts
-var import_shared5 = require("@pandacss/shared");
+var import_shared6 = require("@pandacss/shared");
 var import_ts_pattern3 = require("ts-pattern");
 
 // src/is-composite.ts
@@ -718,12 +718,144 @@ var transforms = [
   addColorPalette
 ];
 
+// src/expand-token-references.ts
+var import_shared5 = require("@pandacss/shared");
+var expandTokenReferences = (str, resolve) => {
+  let expanded = "";
+  let index = 0;
+  let state = "char";
+  let tokenPath = "";
+  let fallback = "";
+  const currentStates = [];
+  while (index < str.length) {
+    const char = str[index];
+    if (char === "{") {
+      const endIndex = str.indexOf("}", index);
+      if (endIndex === -1) {
+        break;
+      }
+      const path = str.slice(index + 1, endIndex);
+      const resolved = resolve(path);
+      expanded += resolved ?? path;
+      index = endIndex + 1;
+      continue;
+    }
+    if (state === "token") {
+      if (char === ",") {
+        if (str[index] === "") {
+          index++;
+        }
+        state = "fallback";
+        currentStates.push(state);
+        const resolved = resolve(tokenPath);
+        if (resolved?.endsWith(")")) {
+          expanded += resolved.slice(0, -1);
+        }
+        tokenPath = "";
+        fallback = "";
+        continue;
+      }
+    }
+    if (state === "fallback") {
+      const nextFallback = fallback + char;
+      if (nextFallback === ", var(") {
+        const innerEndIndex = cssVarParser(str.slice(index + 1));
+        const endIndex = innerEndIndex + index + 1;
+        const cssVar2 = str.slice(index + 1, endIndex);
+        if (endIndex === -1) {
+          break;
+        }
+        expanded += ", var(" + cssVar2 + ")";
+        index = endIndex + 1;
+        state = currentStates.pop() ?? state;
+        fallback = "";
+        continue;
+      }
+    }
+    if (state === "token" || state === "fallback") {
+      index++;
+      if (char === ")") {
+        state = currentStates.pop() ?? state ?? "char";
+        fallback += char;
+        const resolved = tokenPath ? resolve(tokenPath) ?? (0, import_shared5.esc)(tokenPath) : tokenPath;
+        if (fallback) {
+          fallback = fallback.slice(1).trim();
+          if (!fallback.startsWith("token(") && fallback.endsWith(")")) {
+            fallback = fallback.slice(0, -1);
+          }
+          if (fallback.includes("token(")) {
+            const parsed = expandTokenReferences(fallback, resolve);
+            if (parsed) {
+              fallback = parsed.slice(0, -1);
+            }
+          } else if (fallback) {
+            const resolvedFallback = resolve(fallback);
+            if (resolvedFallback) {
+              fallback = resolvedFallback;
+            }
+          }
+        }
+        const lastChar = expanded.at(-1);
+        if (fallback) {
+          if (lastChar?.trim()) {
+            expanded += resolved.slice(0, -1) + (", " + fallback + ")");
+          } else {
+            expanded += fallback;
+          }
+        } else {
+          expanded += resolved || ")";
+        }
+        tokenPath = "";
+        fallback = "";
+        state = "char";
+        continue;
+      }
+      if (state === "token") {
+        tokenPath += char;
+      }
+      if (state === "fallback") {
+        fallback += char;
+      }
+      continue;
+    }
+    const tokenIndex = str.indexOf("token(", index);
+    if (tokenIndex !== -1) {
+      const innerTokenIndex = tokenIndex + "token(".length;
+      expanded += str.slice(index, tokenIndex);
+      index = innerTokenIndex;
+      state = "token";
+      currentStates.push(state);
+      continue;
+    }
+    expanded += char;
+    index++;
+  }
+  return expanded;
+};
+var cssVarParser = (str) => {
+  let index = 0;
+  const openedParenthesises = ["("];
+  while (index < str.length) {
+    const char = str[index];
+    if (char === "(") {
+      openedParenthesises.push(char);
+    } else if (char === ")") {
+      openedParenthesises.pop();
+      if (openedParenthesises.length === 0) {
+        return index;
+      }
+    }
+    index++;
+  }
+  return index;
+};
+
 // src/dictionary.ts
 function expandBreakpoints(breakpoints) {
   if (!breakpoints)
     return { breakpoints: {}, sizes: {} };
   return {
-    breakpoints: (0, import_shared5.mapObject)(breakpoints, (value) => ({ value })),
+    breakpoints: (0, import_shared6.mapObject)(breakpoints, (value) => ({ value })),
     sizes: Object.fromEntries(Object.entries(breakpoints).map(([key, value]) => [`breakpoint-${key}`, { value }]))
   };
 }
@@ -756,11 +888,11 @@ var TokenDictionary = class {
     return this.byName.get(path);
   };
   formatTokenName = (path) => path.join(".");
-  formatCssVar = (path, options) => (0, import_shared5.cssVar)(path.join("-"), options);
+  formatCssVar = (path, options) => (0, import_shared6.cssVar)(path.join("-"), options);
   registerTokens() {
     const { tokens = {}, semanticTokens = {}, breakpoints, themes = {} } = this.options;
     const breakpointTokens = expandBreakpoints(breakpoints);
-    const computedTokens = (0, import_shared5.compact)({
+    const computedTokens = (0, import_shared6.compact)({
       ...tokens,
       breakpoints: breakpointTokens.breakpoints,
       sizes: {
@@ -790,7 +922,7 @@ var TokenDictionary = class {
       assertTokenFormat(token);
       const category = path[0];
       const name = this.formatTokenName(path);
-      const normalizedToken = (0, import_shared5.isString)(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
+      const normalizedToken = (0, import_shared6.isString)(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
       const { value, ...restData } = normalizedToken;
       const node = new Token({
         ...restData,
@@ -808,7 +940,7 @@ var TokenDictionary = class {
       }
       return node;
     };
-    (0, import_shared5.walkObject)(
+    (0, import_shared6.walkObject)(
       computedTokens,
       (token, path) => {
         const node = processToken(token, path);
@@ -816,7 +948,7 @@ var TokenDictionary = class {
       },
       { stop: isToken }
     );
-    (0, import_shared5.walkObject)(
+    (0, import_shared6.walkObject)(
       semanticTokens,
       (token, path) => {
         const node = processSemantic(token, path);
@@ -825,8 +957,8 @@ var TokenDictionary = class {
       { stop: isToken }
     );
     Object.entries(themes).forEach(([theme, themeVariant]) => {
-      const condName = "_theme" + (0, import_shared5.capitalize)(theme);
-      (0, import_shared5.walkObject)(
+      const condName = "_theme" + (0, import_shared6.capitalize)(theme);
+      (0, import_shared6.walkObject)(
         themeVariant.tokens ?? {},
         (token, path) => {
           const themeToken = { value: { [condName]: token.value } };
@@ -836,7 +968,7 @@ var TokenDictionary = class {
         },
         { stop: isToken }
       );
-      (0, import_shared5.walkObject)(
+      (0, import_shared6.walkObject)(
         themeVariant.semanticTokens ?? {},
         (token, path) => {
           const themeToken = { value: { [condName]: token.value } };
@@ -896,7 +1028,7 @@ var TokenDictionary = class {
       }
       if (token.extensions.conditions) {
         const conditions = token.extensions.conditions;
-        const transformedConditions = (0, import_shared5.walkObject)(conditions, (value) => exec({ value }), {
+        const transformedConditions = (0, import_shared6.walkObject)(conditions, (value) => exec({ value }), {
           stop: isCompositeTokenValue
         });
         token.setExtensions({
@@ -935,7 +1067,7 @@ var TokenDictionary = class {
     return refs.map((ref) => this.getByName(ref)).filter(Boolean);
   }
   usesReference(value) {
-    if (!(0, import_shared5.isString)(value))
+    if (!(0, import_shared6.isString)(value))
       return false;
     return this.getReferences(value).length > 0;
   }
@@ -1001,7 +1133,9 @@ var TokenDictionary = class {
    * Expand token references to their CSS variable
    */
   expandReferenceInValue(value) {
-    return expandReferences(value, (path) => {
+    return expandTokenReferences(value, (path) => {
+      if (!path)
+        return;
       if (path.includes("/")) {
         const mix = this.colorMix(path, this.view.get.bind(this.view));
         if (mix.invalid) {
@@ -1009,7 +1143,10 @@ var TokenDictionary = class {
         }
         return mix.value;
       }
-      return this.view.get(path);
+      const resolved = this.view.get(path);
+      if (resolved)
+        return resolved;
+      return tokenPathRegex.test(path) ? (0, import_shared6.esc)(path) : path;
     });
   }
   /**
@@ -1092,10 +1229,10 @@ var TokenDictionaryView = class {
       nameByVar,
       json,
       valuesByCategory,
-      get: (0, import_shared5.memo)((path, fallback) => {
+      get: (0, import_shared6.memo)((path, fallback) => {
         return flatValues.get(path) ?? fallback;
       }),
-      getCategoryValues: (0, import_shared5.memo)((category) => {
+      getCategoryValues: (0, import_shared6.memo)((category) => {
         const result = json[category];
         if (result != null) {
           return result;
@@ -1187,6 +1324,7 @@ function replaceRootWithColorPalette(path, colorPaletteRoot) {
   path.splice(startIndex, 0, "colorPalette");
   return path;
 }
+var tokenPathRegex = /\w+\.\w+/;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Token,

package/dist/index.mjs

@@ -3,6 +3,7 @@ import {
   capitalize,
   compact,
   cssVar,
+  esc as esc3,
   isString as isString2,
   mapObject,
   memo,
@@ -693,6 +694,138 @@ var transforms = [
   addColorPalette
 ];
 
+// src/expand-token-references.ts
+import { esc as esc2 } from "@pandacss/shared";
+var expandTokenReferences = (str, resolve) => {
+  let expanded = "";
+  let index = 0;
+  let state = "char";
+  let tokenPath = "";
+  let fallback = "";
+  const currentStates = [];
+  while (index < str.length) {
+    const char = str[index];
+    if (char === "{") {
+      const endIndex = str.indexOf("}", index);
+      if (endIndex === -1) {
+        break;
+      }
+      const path = str.slice(index + 1, endIndex);
+      const resolved = resolve(path);
+      expanded += resolved ?? path;
+      index = endIndex + 1;
+      continue;
+    }
+    if (state === "token") {
+      if (char === ",") {
+        if (str[index] === "") {
+          index++;
+        }
+        state = "fallback";
+        currentStates.push(state);
+        const resolved = resolve(tokenPath);
+        if (resolved?.endsWith(")")) {
+          expanded += resolved.slice(0, -1);
+        }
+        tokenPath = "";
+        fallback = "";
+        continue;
+      }
+    }
+    if (state === "fallback") {
+      const nextFallback = fallback + char;
+      if (nextFallback === ", var(") {
+        const innerEndIndex = cssVarParser(str.slice(index + 1));
+        const endIndex = innerEndIndex + index + 1;
+        const cssVar2 = str.slice(index + 1, endIndex);
+        if (endIndex === -1) {
+          break;
+        }
+        expanded += ", var(" + cssVar2 + ")";
+        index = endIndex + 1;
+        state = currentStates.pop() ?? state;
+        fallback = "";
+        continue;
+      }
+    }
+    if (state === "token" || state === "fallback") {
+      index++;
+      if (char === ")") {
+        state = currentStates.pop() ?? state ?? "char";
+        fallback += char;
+        const resolved = tokenPath ? resolve(tokenPath) ?? esc2(tokenPath) : tokenPath;
+        if (fallback) {
+          fallback = fallback.slice(1).trim();
+          if (!fallback.startsWith("token(") && fallback.endsWith(")")) {
+            fallback = fallback.slice(0, -1);
+          }
+          if (fallback.includes("token(")) {
+            const parsed = expandTokenReferences(fallback, resolve);
+            if (parsed) {
+              fallback = parsed.slice(0, -1);
+            }
+          } else if (fallback) {
+            const resolvedFallback = resolve(fallback);
+            if (resolvedFallback) {
+              fallback = resolvedFallback;
+            }
+          }
+        }
+        const lastChar = expanded.at(-1);
+        if (fallback) {
+          if (lastChar?.trim()) {
+            expanded += resolved.slice(0, -1) + (", " + fallback + ")");
+          } else {
+            expanded += fallback;
+          }
+        } else {
+          expanded += resolved || ")";
+        }
+        tokenPath = "";
+        fallback = "";
+        state = "char";
+        continue;
+      }
+      if (state === "token") {
+        tokenPath += char;
+      }
+      if (state === "fallback") {
+        fallback += char;
+      }
+      continue;
+    }
+    const tokenIndex = str.indexOf("token(", index);
+    if (tokenIndex !== -1) {
+      const innerTokenIndex = tokenIndex + "token(".length;
+      expanded += str.slice(index, tokenIndex);
+      index = innerTokenIndex;
+      state = "token";
+      currentStates.push(state);
+      continue;
+    }
+    expanded += char;
+    index++;
+  }
+  return expanded;
+};
+var cssVarParser = (str) => {
+  let index = 0;
+  const openedParenthesises = ["("];
+  while (index < str.length) {
+    const char = str[index];
+    if (char === "(") {
+      openedParenthesises.push(char);
+    } else if (char === ")") {
+      openedParenthesises.pop();
+      if (openedParenthesises.length === 0) {
+        return index;
+      }
+    }
+    index++;
+  }
+  return index;
+};
+
 // src/dictionary.ts
 function expandBreakpoints(breakpoints) {
   if (!breakpoints)
@@ -976,7 +1109,9 @@ var TokenDictionary = class {
    * Expand token references to their CSS variable
    */
   expandReferenceInValue(value) {
-    return expandReferences(value, (path) => {
+    return expandTokenReferences(value, (path) => {
+      if (!path)
+        return;
       if (path.includes("/")) {
         const mix = this.colorMix(path, this.view.get.bind(this.view));
         if (mix.invalid) {
@@ -984,7 +1119,10 @@ var TokenDictionary = class {
         }
         return mix.value;
       }
-      return this.view.get(path);
+      const resolved = this.view.get(path);
+      if (resolved)
+        return resolved;
+      return tokenPathRegex.test(path) ? esc3(path) : path;
     });
   }
   /**
@@ -1162,6 +1300,7 @@ function replaceRootWithColorPalette(path, colorPaletteRoot) {
   path.splice(startIndex, 0, "colorPalette");
   return path;
 }
+var tokenPathRegex = /\w+\.\w+/;
 export {
   Token,
   TokenDictionary,

package/package.json

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