@pandacss/token-dictionary 0.18.0 → 0.18.2

package/dist/index.js

@@ -30,7 +30,41 @@ var import_shared7 = require("@pandacss/shared");
 
 // src/dictionary.ts
 var import_shared3 = require("@pandacss/shared");
+var import_ts_pattern2 = require("ts-pattern");
+
+// src/is-composite.ts
 var import_ts_pattern = require("ts-pattern");
+var isCompositeShadow = (0, import_ts_pattern.isMatching)({
+  inset: import_ts_pattern.P.optional(import_ts_pattern.P.boolean),
+  offsetX: import_ts_pattern.P.number,
+  offsetY: import_ts_pattern.P.number,
+  blur: import_ts_pattern.P.number,
+  spread: import_ts_pattern.P.number,
+  color: import_ts_pattern.P.string
+});
+var isCompositeGradient = (0, import_ts_pattern.isMatching)({
+  type: import_ts_pattern.P.string,
+  placement: import_ts_pattern.P.string,
+  stops: import_ts_pattern.P.union(
+    import_ts_pattern.P.array(import_ts_pattern.P.string),
+    import_ts_pattern.P.array({
+      color: import_ts_pattern.P.string,
+      position: import_ts_pattern.P.number
+    })
+  )
+});
+var isCompositeBorder = (0, import_ts_pattern.isMatching)({
+  color: import_ts_pattern.P.string,
+  width: import_ts_pattern.P.union(import_ts_pattern.P.string, import_ts_pattern.P.number),
+  style: import_ts_pattern.P.string
+});
+var isCompositeAsset = (0, import_ts_pattern.isMatching)({
+  type: import_ts_pattern.P.union("url", "svg"),
+  value: import_ts_pattern.P.string
+});
+var isCompositeTokenValue = (value) => {
+  return isCompositeGradient(value) || isCompositeShadow(value) || isCompositeBorder(value) || isCompositeAsset(value) || Array.isArray(value);
+};
 
 // src/token.ts
 var import_shared2 = require("@pandacss/shared");
@@ -118,7 +152,7 @@ var Token = class _Token {
    * Whether the token is a complex or composite token.
    */
   get isComposite() {
-    return (0, import_shared2.isObject)(this.originalValue) || Array.isArray(this.originalValue);
+    return isCompositeTokenValue(this.originalValue);
   }
   /**
    * Returns the token value with the references expanded.
@@ -287,7 +321,7 @@ var TokenDictionary = class {
         assertTokenFormat(token);
         const category = path[0];
         const name = path.join(".");
-        const normalizedToken = (0, import_shared3.isString)(token.value) ? { value: { base: token.value } } : token;
+        const normalizedToken = (0, import_shared3.isString)(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
         const { value, ...restData } = normalizedToken;
         const node = new Token({
           ...restData,
@@ -329,17 +363,24 @@ var TokenDictionary = class {
         return;
       if (typeof transform.match === "function" && !transform.match(token))
         return;
-      const transformed = transform.transform(token, {
-        prefix: this.prefix,
-        hash: this.hash
-      });
-      (0, import_ts_pattern.match)(transform).with({ type: "extensions" }, () => {
+      const exec = (v) => transform.transform(v, { prefix: this.prefix, hash: this.hash });
+      const transformed = exec(token);
+      (0, import_ts_pattern2.match)(transform).with({ type: "extensions" }, () => {
         token.setExtensions(transformed);
       }).with({ type: "value" }, () => {
         token.value = transformed;
         if (token.isComposite) {
           token.originalValue = transformed;
         }
+        if (token.extensions.conditions) {
+          const conditions = token.extensions.conditions;
+          const transformedConditions = (0, import_shared3.walkObject)(conditions, (value) => exec({ value }), {
+            stop: isCompositeTokenValue
+          });
+          token.setExtensions({
+            conditions: transformedConditions
+          });
+        }
       }).otherwise(() => {
         token[transform.type] = transformed;
       });
@@ -392,7 +433,7 @@ var TokenDictionary = class {
     return this;
   }
   filter(pattern) {
-    const predicate = typeof pattern === "function" ? pattern : (0, import_ts_pattern.isMatching)(pattern);
+    const predicate = typeof pattern === "function" ? pattern : (0, import_ts_pattern2.isMatching)(pattern);
     return this.allTokens.filter(predicate);
   }
   addConditionalTokens() {
@@ -581,13 +622,13 @@ var addVirtualPalette = {
     });
     keys.forEach((key) => {
       const node = new Token({
-        name: `colors.colorPalette.${key}`,
-        value: `{colors.colorPalette.${key}}`,
+        name: ["colors.colorPalette", key].filter(Boolean).join("."),
+        value: ["colors.colorPalette", key].filter(Boolean).join("."),
         path: ["colors", "colorPalette", ...key.split(".")]
       });
       node.setExtensions({
         category: "colors",
-        prop: `colorPalette.${key}`,
+        prop: ["colorPalette", key].filter(Boolean).join("."),
         isVirtual: true
       });
       dictionary.allTokens.push(node);
@@ -605,7 +646,7 @@ var middlewares = [addNegativeTokens, addVirtualPalette, removeEmptyTokens, addP
 
 // src/transform.ts
 var import_shared6 = require("@pandacss/shared");
-var import_ts_pattern2 = require("ts-pattern");
+var import_ts_pattern3 = require("ts-pattern");
 
 // src/mini-svg-uri.ts
 var shorterNames = {
@@ -710,34 +751,15 @@ function svgToDataUri(svgString) {
 var objectKeys = (obj) => Object.keys(obj);
 
 // src/transform.ts
-var isCompositeShadow = (0, import_ts_pattern2.isMatching)({
-  inset: import_ts_pattern2.P.optional(import_ts_pattern2.P.boolean),
-  offsetX: import_ts_pattern2.P.number,
-  offsetY: import_ts_pattern2.P.number,
-  blur: import_ts_pattern2.P.number,
-  spread: import_ts_pattern2.P.number,
-  color: import_ts_pattern2.P.string
-});
 var transformShadow = {
   name: "tokens/shadow",
   match: (token) => token.extensions.category === "shadows",
-  transform(token, { prefix }) {
+  transform(token, opts) {
     if ((0, import_shared6.isString)(token.value)) {
       return token.value;
     }
     if (Array.isArray(token.value)) {
-      if (token.extensions.conditions) {
-        const conditions = token.extensions.conditions;
-        for (const [prop, value] of Object.entries(conditions)) {
-          if (Array.isArray(value)) {
-            conditions[prop] = value.map((value2) => this.transform({ value: value2 }, { prefix })).join(", ");
-          }
-        }
-        if (token.extensions.conditions?.base && Array.isArray(token.originalValue)) {
-          return token.extensions.conditions.base;
-        }
-      }
-      return token.value.map((value) => this.transform({ value }, { prefix })).join(", ");
+      return token.value.map((value) => this.transform({ value }, opts)).join(", ");
     }
     if (isCompositeShadow(token.value)) {
       const { offsetX, offsetY, blur, spread, color, inset } = token.value;
@@ -746,17 +768,6 @@ var transformShadow = {
     return token.value;
   }
 };
-var isCompositeGradient = (0, import_ts_pattern2.isMatching)({
-  type: import_ts_pattern2.P.string,
-  placement: import_ts_pattern2.P.string,
-  stops: import_ts_pattern2.P.union(
-    import_ts_pattern2.P.array(import_ts_pattern2.P.string),
-    import_ts_pattern2.P.array({
-      color: import_ts_pattern2.P.string,
-      position: import_ts_pattern2.P.number
-    })
-  )
-});
 var transformGradient = {
   name: "tokens/gradient",
   match: (token) => token.extensions.category === "gradients",
@@ -794,7 +805,10 @@ var transformEasings = {
     if ((0, import_shared6.isString)(token.value)) {
       return token.value;
     }
-    return `cubic-bezier(${token.value.join(", ")})`;
+    if (Array.isArray(token.value)) {
+      return `cubic-bezier(${token.value.join(", ")})`;
+    }
+    return token.value;
   }
 };
 var transformBorders = {
@@ -804,8 +818,11 @@ var transformBorders = {
     if ((0, import_shared6.isString)(token.value)) {
       return token.value;
     }
-    const { width, style, color } = token.value;
-    return `${width}px ${style} ${color}`;
+    if (isCompositeBorder(token.value)) {
+      const { width, style, color } = token.value;
+      return `${width}px ${style} ${color}`;
+    }
+    return token.value;
   }
 };
 var transformAssets = {
@@ -813,7 +830,7 @@ var transformAssets = {
   match: (token) => token.extensions.category === "assets",
   transform(token) {
     const raw = token.value;
-    return (0, import_ts_pattern2.match)(raw).with(import_ts_pattern2.P.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
+    return (0, import_ts_pattern3.match)(raw).with(import_ts_pattern3.P.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
   }
 };
 var addCssVariables = {
@@ -822,7 +839,7 @@ var addCssVariables = {
   transform(token, { prefix, hash }) {
     const { isNegative, originalPath } = token.extensions;
     const pathValue = isNegative ? originalPath : token.path;
-    const variable = (0, import_shared6.cssVar)(pathValue.join("-"), { prefix, hash });
+    const variable = (0, import_shared6.cssVar)(pathValue.filter(Boolean).join("-"), { prefix, hash });
     return {
       var: variable.var,
       varRef: variable.ref
@@ -850,22 +867,31 @@ var addColorPalette = {
     return token.extensions.category === "colors" && !token.extensions.isVirtual;
   },
   transform(token) {
-    const tokenPathClone = [...token.path];
+    let tokenPathClone = [...token.path];
     tokenPathClone.pop();
     tokenPathClone.shift();
+    if (tokenPathClone.length === 0) {
+      const newPath = [...token.path];
+      newPath.shift();
+      tokenPathClone = newPath;
+    }
     if (tokenPathClone.length === 0) {
       return {};
     }
     const colorPaletteRoots = tokenPathClone.reduce((acc, _, i, arr) => {
-      acc.push(arr.slice(0, i + 1).join("."));
+      const next = arr.slice(0, i + 1).join(".");
+      acc.push(next);
       return acc;
     }, []);
-    const colorPaletteRoot = tokenPathClone.at(0);
+    const colorPaletteRoot = tokenPathClone[0];
     const colorPalette = tokenPathClone.join(".");
     const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce((acc, _, i, arr) => {
       acc.push(arr.slice(i).join("."));
       return acc;
     }, []);
+    if (colorPaletteTokenKeys.length === 0) {
+      colorPaletteTokenKeys.push("");
+    }
     return {
       colorPalette,
       colorPaletteRoots,

package/dist/index.mjs

@@ -3,10 +3,44 @@ import { getDotPath as getDotPath2, mapToJson as mapToJson2 } from "@pandacss/sh
 
 // src/dictionary.ts
 import { compact, isString, mapObject, memo, walkObject as walkObject2 } from "@pandacss/shared";
-import { isMatching, match } from "ts-pattern";
+import { isMatching as isMatching2, match } from "ts-pattern";
+
+// src/is-composite.ts
+import { P, isMatching } from "ts-pattern";
+var isCompositeShadow = isMatching({
+  inset: P.optional(P.boolean),
+  offsetX: P.number,
+  offsetY: P.number,
+  blur: P.number,
+  spread: P.number,
+  color: P.string
+});
+var isCompositeGradient = isMatching({
+  type: P.string,
+  placement: P.string,
+  stops: P.union(
+    P.array(P.string),
+    P.array({
+      color: P.string,
+      position: P.number
+    })
+  )
+});
+var isCompositeBorder = isMatching({
+  color: P.string,
+  width: P.union(P.string, P.number),
+  style: P.string
+});
+var isCompositeAsset = isMatching({
+  type: P.union("url", "svg"),
+  value: P.string
+});
+var isCompositeTokenValue = (value) => {
+  return isCompositeGradient(value) || isCompositeShadow(value) || isCompositeBorder(value) || isCompositeAsset(value) || Array.isArray(value);
+};
 
 // src/token.ts
-import { isBaseCondition, isObject as isObject2, toHash, walkObject } from "@pandacss/shared";
+import { isBaseCondition, toHash, walkObject } from "@pandacss/shared";
 
 // src/utils.ts
 import { isObject } from "@pandacss/shared";
@@ -91,7 +125,7 @@ var Token = class _Token {
    * Whether the token is a complex or composite token.
    */
   get isComposite() {
-    return isObject2(this.originalValue) || Array.isArray(this.originalValue);
+    return isCompositeTokenValue(this.originalValue);
   }
   /**
    * Returns the token value with the references expanded.
@@ -260,7 +294,7 @@ var TokenDictionary = class {
         assertTokenFormat(token);
         const category = path[0];
         const name = path.join(".");
-        const normalizedToken = isString(token.value) ? { value: { base: token.value } } : token;
+        const normalizedToken = isString(token.value) || isCompositeTokenValue(token.value) ? { value: { base: token.value } } : token;
         const { value, ...restData } = normalizedToken;
         const node = new Token({
           ...restData,
@@ -302,10 +336,8 @@ var TokenDictionary = class {
         return;
       if (typeof transform.match === "function" && !transform.match(token))
         return;
-      const transformed = transform.transform(token, {
-        prefix: this.prefix,
-        hash: this.hash
-      });
+      const exec = (v) => transform.transform(v, { prefix: this.prefix, hash: this.hash });
+      const transformed = exec(token);
       match(transform).with({ type: "extensions" }, () => {
         token.setExtensions(transformed);
       }).with({ type: "value" }, () => {
@@ -313,6 +345,15 @@ var TokenDictionary = class {
         if (token.isComposite) {
           token.originalValue = transformed;
         }
+        if (token.extensions.conditions) {
+          const conditions = token.extensions.conditions;
+          const transformedConditions = walkObject2(conditions, (value) => exec({ value }), {
+            stop: isCompositeTokenValue
+          });
+          token.setExtensions({
+            conditions: transformedConditions
+          });
+        }
       }).otherwise(() => {
         token[transform.type] = transformed;
       });
@@ -365,7 +406,7 @@ var TokenDictionary = class {
     return this;
   }
   filter(pattern) {
-    const predicate = typeof pattern === "function" ? pattern : isMatching(pattern);
+    const predicate = typeof pattern === "function" ? pattern : isMatching2(pattern);
     return this.allTokens.filter(predicate);
   }
   addConditionalTokens() {
@@ -554,13 +595,13 @@ var addVirtualPalette = {
     });
     keys.forEach((key) => {
       const node = new Token({
-        name: `colors.colorPalette.${key}`,
-        value: `{colors.colorPalette.${key}}`,
+        name: ["colors.colorPalette", key].filter(Boolean).join("."),
+        value: ["colors.colorPalette", key].filter(Boolean).join("."),
         path: ["colors", "colorPalette", ...key.split(".")]
       });
       node.setExtensions({
         category: "colors",
-        prop: `colorPalette.${key}`,
+        prop: ["colorPalette", key].filter(Boolean).join("."),
         isVirtual: true
       });
       dictionary.allTokens.push(node);
@@ -578,7 +619,7 @@ var middlewares = [addNegativeTokens, addVirtualPalette, removeEmptyTokens, addP
 
 // src/transform.ts
 import { cssVar as cssVar2, isString as isString2 } from "@pandacss/shared";
-import { isMatching as isMatching2, match as match2, P } from "ts-pattern";
+import { P as P2, match as match2 } from "ts-pattern";
 
 // src/mini-svg-uri.ts
 var shorterNames = {
@@ -683,34 +724,15 @@ function svgToDataUri(svgString) {
 var objectKeys = (obj) => Object.keys(obj);
 
 // src/transform.ts
-var isCompositeShadow = isMatching2({
-  inset: P.optional(P.boolean),
-  offsetX: P.number,
-  offsetY: P.number,
-  blur: P.number,
-  spread: P.number,
-  color: P.string
-});
 var transformShadow = {
   name: "tokens/shadow",
   match: (token) => token.extensions.category === "shadows",
-  transform(token, { prefix }) {
+  transform(token, opts) {
     if (isString2(token.value)) {
       return token.value;
     }
     if (Array.isArray(token.value)) {
-      if (token.extensions.conditions) {
-        const conditions = token.extensions.conditions;
-        for (const [prop, value] of Object.entries(conditions)) {
-          if (Array.isArray(value)) {
-            conditions[prop] = value.map((value2) => this.transform({ value: value2 }, { prefix })).join(", ");
-          }
-        }
-        if (token.extensions.conditions?.base && Array.isArray(token.originalValue)) {
-          return token.extensions.conditions.base;
-        }
-      }
-      return token.value.map((value) => this.transform({ value }, { prefix })).join(", ");
+      return token.value.map((value) => this.transform({ value }, opts)).join(", ");
     }
     if (isCompositeShadow(token.value)) {
       const { offsetX, offsetY, blur, spread, color, inset } = token.value;
@@ -719,17 +741,6 @@ var transformShadow = {
     return token.value;
   }
 };
-var isCompositeGradient = isMatching2({
-  type: P.string,
-  placement: P.string,
-  stops: P.union(
-    P.array(P.string),
-    P.array({
-      color: P.string,
-      position: P.number
-    })
-  )
-});
 var transformGradient = {
   name: "tokens/gradient",
   match: (token) => token.extensions.category === "gradients",
@@ -767,7 +778,10 @@ var transformEasings = {
     if (isString2(token.value)) {
       return token.value;
     }
-    return `cubic-bezier(${token.value.join(", ")})`;
+    if (Array.isArray(token.value)) {
+      return `cubic-bezier(${token.value.join(", ")})`;
+    }
+    return token.value;
   }
 };
 var transformBorders = {
@@ -777,8 +791,11 @@ var transformBorders = {
     if (isString2(token.value)) {
       return token.value;
     }
-    const { width, style, color } = token.value;
-    return `${width}px ${style} ${color}`;
+    if (isCompositeBorder(token.value)) {
+      const { width, style, color } = token.value;
+      return `${width}px ${style} ${color}`;
+    }
+    return token.value;
   }
 };
 var transformAssets = {
@@ -786,7 +803,7 @@ var transformAssets = {
   match: (token) => token.extensions.category === "assets",
   transform(token) {
     const raw = token.value;
-    return match2(raw).with(P.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
+    return match2(raw).with(P2.string, (value) => value).with({ type: "url" }, ({ value }) => `url('${value}')`).with({ type: "svg" }, ({ value }) => `url('${svgToDataUri(value)})'`).exhaustive();
   }
 };
 var addCssVariables = {
@@ -795,7 +812,7 @@ var addCssVariables = {
   transform(token, { prefix, hash }) {
     const { isNegative, originalPath } = token.extensions;
     const pathValue = isNegative ? originalPath : token.path;
-    const variable = cssVar2(pathValue.join("-"), { prefix, hash });
+    const variable = cssVar2(pathValue.filter(Boolean).join("-"), { prefix, hash });
     return {
       var: variable.var,
       varRef: variable.ref
@@ -823,22 +840,31 @@ var addColorPalette = {
     return token.extensions.category === "colors" && !token.extensions.isVirtual;
   },
   transform(token) {
-    const tokenPathClone = [...token.path];
+    let tokenPathClone = [...token.path];
     tokenPathClone.pop();
     tokenPathClone.shift();
+    if (tokenPathClone.length === 0) {
+      const newPath = [...token.path];
+      newPath.shift();
+      tokenPathClone = newPath;
+    }
     if (tokenPathClone.length === 0) {
       return {};
     }
     const colorPaletteRoots = tokenPathClone.reduce((acc, _, i, arr) => {
-      acc.push(arr.slice(0, i + 1).join("."));
+      const next = arr.slice(0, i + 1).join(".");
+      acc.push(next);
       return acc;
     }, []);
-    const colorPaletteRoot = tokenPathClone.at(0);
+    const colorPaletteRoot = tokenPathClone[0];
     const colorPalette = tokenPathClone.join(".");
     const colorPaletteTokenKeys = token.path.slice(token.path.indexOf(colorPaletteRoot) + 1).reduce((acc, _, i, arr) => {
       acc.push(arr.slice(i).join("."));
       return acc;
     }, []);
+    if (colorPaletteTokenKeys.length === 0) {
+      colorPaletteTokenKeys.push("");
+    }
     return {
       colorPalette,
       colorPaletteRoots,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/token-dictionary",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Common error messages for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,11 +27,11 @@
   ],
   "dependencies": {
     "ts-pattern": "5.0.5",
-    "@pandacss/shared": "0.18.0",
-    "@pandacss/types": "0.18.0"
+    "@pandacss/shared": "0.18.2",
+    "@pandacss/types": "0.18.2"
   },
   "devDependencies": {
-    "@pandacss/fixture": "0.18.0"
+    "@pandacss/fixture": "0.18.2"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",