@pandacss/generator 1.9.1 → 1.11.0

package/dist/index.d.mts

@@ -49,7 +49,7 @@ declare class Generator extends Context {
      */
     getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
     getSpec: () => SpecFile[];
-    getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
+    getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" | "themes" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
 }
 
 /**

package/dist/index.d.ts

@@ -49,7 +49,7 @@ declare class Generator extends Context {
      */
     getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
     getSpec: () => SpecFile[];
-    getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
+    getSpecOfType: <T extends SpecType>(type: T) => T extends "color-palette" | "themes" ? SpecTypeMap[T] | undefined : SpecTypeMap[T];
 }
 
 /**

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/generator.ts
 var import_core5 = require("@pandacss/core");
-var import_shared17 = require("@pandacss/shared");
+var import_shared18 = require("@pandacss/shared");
 var import_ts_pattern14 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
@@ -45,6 +45,15 @@ var import_outdent48 = __toESM(require("outdent"));
 
 // src/artifacts/js/conditions.ts
 var import_outdent = __toESM(require("outdent"));
+function formatConditionJsDoc(raw) {
+  if (!raw) return "";
+  if (typeof raw === "string") return `/** \`${raw}\` */
+`;
+  if (Array.isArray(raw)) return `/** \`${raw.join(" ")}\` */
+`;
+  return `/** Multi-block condition */
+`;
+}
 function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
@@ -92,8 +101,7 @@ function generateConditions(ctx) {
     export interface Conditions {
     ${keys.map(
       (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */
-` : ctx.conditions.get(key) ? `/** \`${[].concat(ctx.conditions.get(key) ?? "").join(" ")}\` */
-` : ""}	${JSON.stringify(key)}: string`
+` : formatConditionJsDoc(ctx.conditions.get(key))}	${JSON.stringify(key)}: string`
     ).join("\n")}
     }
 
@@ -5043,16 +5051,51 @@ function stringifyVars(options) {
   const keys = conditionKey.split(":");
   if (keys.some((key) => !conditions.get(key))) return;
   const css = (0, import_core2.stringify)(varsObj);
-  const mapped = keys.map((key) => conditions.get(key)).map((condition) => {
-    const lastSegment = Array.isArray(condition) ? condition.at(-1) : condition;
-    if (!lastSegment) return;
-    const parent = (0, import_core2.extractParentSelectors)(lastSegment);
-    return parent ? `&${parent}` : lastSegment;
+  const altsPerKey = keys.map((key) => getSelectorPaths(conditions.get(key)));
+  if (altsPerKey.some((alts) => alts.length === 0)) return;
+  let combos = [[]];
+  for (const alts of altsPerKey) {
+    const next = [];
+    for (const partial of combos) {
+      for (const alt of alts) {
+        next.push([...partial, ...alt]);
+      }
+    }
+    combos = next;
+  }
+  const rules = combos.map((segments) => {
+    const transformed = segments.map(transformSegment).filter(Boolean);
+    const rule = getDeepestRule(root, transformed);
+    if (!rule) return;
+    getDeepestNode(rule)?.append(css);
+    return (0, import_core2.expandNestedCss)(rule.toString());
   }).filter(Boolean);
-  const rule = getDeepestRule(root, mapped);
-  if (!rule) return;
-  getDeepestNode(rule)?.append(css);
-  return (0, import_core2.expandNestedCss)(rule.toString());
+  return rules.length ? rules.join("\n\n") : void 0;
+}
+function getSelectorPaths(condition) {
+  if (condition == null) return [];
+  if (typeof condition === "string") return [[condition]];
+  if (Array.isArray(condition)) {
+    const last = condition.at(-1);
+    return last ? [[last]] : [];
+  }
+  const paths = [];
+  const walk = (node, path) => {
+    for (const [key, value] of Object.entries(node)) {
+      if (value === "@slot") {
+        paths.push([...path, key]);
+      } else if (typeof value === "object" && value !== null) {
+        walk(value, [...path, key]);
+      }
+    }
+  };
+  walk(condition, []);
+  return paths;
+}
+function transformSegment(seg) {
+  if (seg.startsWith("@")) return seg;
+  const parent = (0, import_core2.extractParentSelectors)(seg);
+  return parent ? `&${parent}` : seg;
 }
 function getDeepestRule(root, selectors) {
   const rule = import_postcss.default.rule({ selector: "" });
@@ -5080,6 +5123,8 @@ var parse = (str) => {
   } catch (error) {
     if (error instanceof import_postcss.CssSyntaxError) {
       import_logger.logger.error("tokens:process", error.showSourceCode(true));
+    } else {
+      import_logger.logger.caughtError("tokens:process", "Failed to parse token CSS", error);
     }
   }
 };
@@ -5664,8 +5709,8 @@ var generateParserCss = (ctx, decoder) => {
   try {
     const css = sheet.toCss({ minify });
     return css;
-  } catch (err) {
-    import_logger2.logger.error("serializer:css", "Failed to serialize CSS: " + err);
+  } catch (error) {
+    import_logger2.logger.caughtError("serializer:css", "Failed to serialize CSS", error);
     return "";
   }
 };
@@ -5928,11 +5973,25 @@ var generateConditionJsxExamples = (conditionName, jsxStyleProps2 = "all") => {
   }
   return [];
 };
+var formatObjectCondition = (raw) => {
+  const blocks = [];
+  const walk = (node, path) => {
+    for (const [key, value] of Object.entries(node)) {
+      if (value === "@slot") {
+        blocks.push([...path, key].join(" "));
+      } else if (typeof value === "object" && value !== null) {
+        walk(value, [...path, key]);
+      }
+    }
+  };
+  walk(raw, []);
+  return blocks.join("; ");
+};
 var generateConditionsSpec = (ctx) => {
   const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const breakpointKeys = new Set(Object.keys(ctx.conditions.breakpoints.conditions));
   const conditions = Object.entries(ctx.conditions.values).map(([name, detail]) => {
-    const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : detail.raw;
+    const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : typeof detail.raw === "string" ? detail.raw : formatObjectCondition(detail.raw);
     const nameWithoutUnderscore = name.startsWith("_") ? name.slice(1) : name;
     const isBreakpoint = breakpointKeys.has(name) || breakpointKeys.has(nameWithoutUnderscore);
     const conditionName = isBreakpoint ? nameWithoutUnderscore : name;
@@ -6101,8 +6160,10 @@ var generateTextStylesSpec = (ctx) => {
   return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
-// src/spec/tokens.ts
-var import_shared15 = require("@pandacss/shared");
+// src/spec/themes.ts
+var import_shared16 = require("@pandacss/shared");
+
+// src/spec/token-examples.ts
 var CATEGORY_PROPERTY_MAP = {
   colors: "color",
   spacing: "padding",
@@ -6144,6 +6205,66 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   }
   return { functionExamples, tokenFunctionExamples, jsxExamples };
 };
+
+// src/spec/themes.ts
+var generateThemeTokenGroups = (ctx, themeName, filterFn) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
+  const condName = "_theme" + (0, import_shared16.capitalize)(themeName);
+  const themeTokens = ctx.tokens.allTokens.filter(
+    (token) => token.extensions.isVirtual && token.extensions.theme === themeName && filterFn(token)
+  );
+  const byCategory = /* @__PURE__ */ new Map();
+  for (const token of themeTokens) {
+    const category = token.extensions.category;
+    if (!category) continue;
+    if (!byCategory.has(category)) byCategory.set(category, []);
+    byCategory.get(category).push(token);
+  }
+  return Array.from(byCategory.entries()).map(([category, typeTokens]) => {
+    if (!typeTokens.length) return null;
+    const firstToken = typeTokens[0];
+    const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
+    const values = typeTokens.map((token) => {
+      const conditions = [];
+      (0, import_shared16.walkObject)(token.extensions.rawValue, (value, path) => {
+        conditions.push({
+          value,
+          condition: path.map((p) => p === condName ? themeName : p.replace(/^_/, "")).join(".")
+        });
+      });
+      return {
+        name: token.extensions.prop || token.name,
+        values: conditions,
+        description: token.description,
+        deprecated: token.deprecated,
+        cssVar: token.extensions.varRef
+      };
+    });
+    return {
+      type: category,
+      values,
+      tokenFunctionExamples,
+      functionExamples,
+      jsxExamples
+    };
+  }).filter(Boolean);
+};
+var generateThemesSpec = (ctx) => {
+  const themes = ctx.config.themes;
+  if (!themes || Object.keys(themes).length === 0) return void 0;
+  const data = Object.keys(themes).map((themeName) => {
+    const tokens = generateThemeTokenGroups(ctx, themeName, (token) => !token.extensions.isSemantic);
+    const semanticTokens = generateThemeTokenGroups(ctx, themeName, (token) => token.extensions.isSemantic);
+    return { name: themeName, tokens, semanticTokens };
+  });
+  return {
+    type: "themes",
+    data
+  };
+};
+
+// src/spec/tokens.ts
+var import_shared17 = require("@pandacss/shared");
 var generateTokensSpec = (ctx) => {
   const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
@@ -6184,7 +6305,7 @@ var generateSemanticTokensSpec = (ctx) => {
     const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
     const values = typeTokens.map((token) => {
       const conditions = [];
-      (0, import_shared15.walkObject)(token.extensions.rawValue, (value, path) => {
+      (0, import_shared17.walkObject)(token.extensions.rawValue, (value, path) => {
         conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
       });
       return {
@@ -6219,7 +6340,7 @@ var Generator = class extends import_core5.Context {
   };
   appendCssOfType = (type, sheet) => {
     (0, import_ts_pattern14.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
-      throw new import_shared17.PandaError(
+      throw new import_shared18.PandaError(
         "UNKNOWN_ARTIFACT",
         `Unknown CSS artifact type: "${type}". Expected one of: preflight, tokens, static, global, keyframes`
       );
@@ -6300,7 +6421,7 @@ var Generator = class extends import_core5.Context {
         recipes.push({
           type: "recipe",
           name: recipeName,
-          file: `${(0, import_shared17.dashCase)(recipeName)}.css`,
+          file: `${(0, import_shared18.dashCase)(recipeName)}.css`,
           code,
           dir: "recipes"
         });
@@ -6314,7 +6435,7 @@ var Generator = class extends import_core5.Context {
           themes.push({
             type: "theme",
             name: themeName,
-            file: `${(0, import_shared17.dashCase)(themeName)}.css`,
+            file: `${(0, import_shared18.dashCase)(themeName)}.css`,
             code: `@layer ${layerNames.tokens} {
 ${css}
 }`,
@@ -6356,6 +6477,10 @@ ${css}
     if (colorPaletteSpec) {
       specs.push(colorPaletteSpec);
     }
+    const themesSpec = generateThemesSpec(this);
+    if (themesSpec) {
+      specs.push(themesSpec);
+    }
     return specs;
   };
   getSpecOfType = (type) => {
@@ -6381,6 +6506,8 @@ ${css}
           return generateAnimationStylesSpec(this);
         case "color-palette":
           return generateColorPaletteSpec(this) ?? void 0;
+        case "themes":
+          return generateThemesSpec(this) ?? void 0;
       }
     })();
     return spec;

package/dist/index.mjs

@@ -8,6 +8,15 @@ import outdent48 from "outdent";
 
 // src/artifacts/js/conditions.ts
 import outdent from "outdent";
+function formatConditionJsDoc(raw) {
+  if (!raw) return "";
+  if (typeof raw === "string") return `/** \`${raw}\` */
+`;
+  if (Array.isArray(raw)) return `/** \`${raw.join(" ")}\` */
+`;
+  return `/** Multi-block condition */
+`;
+}
 function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
@@ -55,8 +64,7 @@ function generateConditions(ctx) {
     export interface Conditions {
     ${keys.map(
       (key) => `	${key === "base" ? `/** The base (=no conditions) styles to apply  */
-` : ctx.conditions.get(key) ? `/** \`${[].concat(ctx.conditions.get(key) ?? "").join(" ")}\` */
-` : ""}	${JSON.stringify(key)}: string`
+` : formatConditionJsDoc(ctx.conditions.get(key))}	${JSON.stringify(key)}: string`
     ).join("\n")}
     }
 
@@ -5006,16 +5014,51 @@ function stringifyVars(options) {
   const keys = conditionKey.split(":");
   if (keys.some((key) => !conditions.get(key))) return;
   const css = stringify3(varsObj);
-  const mapped = keys.map((key) => conditions.get(key)).map((condition) => {
-    const lastSegment = Array.isArray(condition) ? condition.at(-1) : condition;
-    if (!lastSegment) return;
-    const parent = extractParentSelectors(lastSegment);
-    return parent ? `&${parent}` : lastSegment;
+  const altsPerKey = keys.map((key) => getSelectorPaths(conditions.get(key)));
+  if (altsPerKey.some((alts) => alts.length === 0)) return;
+  let combos = [[]];
+  for (const alts of altsPerKey) {
+    const next = [];
+    for (const partial of combos) {
+      for (const alt of alts) {
+        next.push([...partial, ...alt]);
+      }
+    }
+    combos = next;
+  }
+  const rules = combos.map((segments) => {
+    const transformed = segments.map(transformSegment).filter(Boolean);
+    const rule = getDeepestRule(root, transformed);
+    if (!rule) return;
+    getDeepestNode(rule)?.append(css);
+    return expandNestedCss(rule.toString());
   }).filter(Boolean);
-  const rule = getDeepestRule(root, mapped);
-  if (!rule) return;
-  getDeepestNode(rule)?.append(css);
-  return expandNestedCss(rule.toString());
+  return rules.length ? rules.join("\n\n") : void 0;
+}
+function getSelectorPaths(condition) {
+  if (condition == null) return [];
+  if (typeof condition === "string") return [[condition]];
+  if (Array.isArray(condition)) {
+    const last = condition.at(-1);
+    return last ? [[last]] : [];
+  }
+  const paths = [];
+  const walk = (node, path) => {
+    for (const [key, value] of Object.entries(node)) {
+      if (value === "@slot") {
+        paths.push([...path, key]);
+      } else if (typeof value === "object" && value !== null) {
+        walk(value, [...path, key]);
+      }
+    }
+  };
+  walk(condition, []);
+  return paths;
+}
+function transformSegment(seg) {
+  if (seg.startsWith("@")) return seg;
+  const parent = extractParentSelectors(seg);
+  return parent ? `&${parent}` : seg;
 }
 function getDeepestRule(root, selectors) {
   const rule = postcss.rule({ selector: "" });
@@ -5043,6 +5086,8 @@ var parse = (str) => {
   } catch (error) {
     if (error instanceof CssSyntaxError) {
       logger.error("tokens:process", error.showSourceCode(true));
+    } else {
+      logger.caughtError("tokens:process", "Failed to parse token CSS", error);
     }
   }
 };
@@ -5627,8 +5672,8 @@ var generateParserCss = (ctx, decoder) => {
   try {
     const css = sheet.toCss({ minify });
     return css;
-  } catch (err) {
-    logger2.error("serializer:css", "Failed to serialize CSS: " + err);
+  } catch (error) {
+    logger2.caughtError("serializer:css", "Failed to serialize CSS", error);
     return "";
   }
 };
@@ -5891,11 +5936,25 @@ var generateConditionJsxExamples = (conditionName, jsxStyleProps2 = "all") => {
   }
   return [];
 };
+var formatObjectCondition = (raw) => {
+  const blocks = [];
+  const walk = (node, path) => {
+    for (const [key, value] of Object.entries(node)) {
+      if (value === "@slot") {
+        blocks.push([...path, key].join(" "));
+      } else if (typeof value === "object" && value !== null) {
+        walk(value, [...path, key]);
+      }
+    }
+  };
+  walk(raw, []);
+  return blocks.join("; ");
+};
 var generateConditionsSpec = (ctx) => {
   const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const breakpointKeys = new Set(Object.keys(ctx.conditions.breakpoints.conditions));
   const conditions = Object.entries(ctx.conditions.values).map(([name, detail]) => {
-    const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : detail.raw;
+    const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : typeof detail.raw === "string" ? detail.raw : formatObjectCondition(detail.raw);
     const nameWithoutUnderscore = name.startsWith("_") ? name.slice(1) : name;
     const isBreakpoint = breakpointKeys.has(name) || breakpointKeys.has(nameWithoutUnderscore);
     const conditionName = isBreakpoint ? nameWithoutUnderscore : name;
@@ -6064,8 +6123,10 @@ var generateTextStylesSpec = (ctx) => {
   return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
-// src/spec/tokens.ts
-import { walkObject as walkObject2 } from "@pandacss/shared";
+// src/spec/themes.ts
+import { capitalize as capitalize2, walkObject as walkObject2 } from "@pandacss/shared";
+
+// src/spec/token-examples.ts
 var CATEGORY_PROPERTY_MAP = {
   colors: "color",
   spacing: "padding",
@@ -6107,6 +6168,66 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   }
   return { functionExamples, tokenFunctionExamples, jsxExamples };
 };
+
+// src/spec/themes.ts
+var generateThemeTokenGroups = (ctx, themeName, filterFn) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
+  const condName = "_theme" + capitalize2(themeName);
+  const themeTokens = ctx.tokens.allTokens.filter(
+    (token) => token.extensions.isVirtual && token.extensions.theme === themeName && filterFn(token)
+  );
+  const byCategory = /* @__PURE__ */ new Map();
+  for (const token of themeTokens) {
+    const category = token.extensions.category;
+    if (!category) continue;
+    if (!byCategory.has(category)) byCategory.set(category, []);
+    byCategory.get(category).push(token);
+  }
+  return Array.from(byCategory.entries()).map(([category, typeTokens]) => {
+    if (!typeTokens.length) return null;
+    const firstToken = typeTokens[0];
+    const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
+    const values = typeTokens.map((token) => {
+      const conditions = [];
+      walkObject2(token.extensions.rawValue, (value, path) => {
+        conditions.push({
+          value,
+          condition: path.map((p) => p === condName ? themeName : p.replace(/^_/, "")).join(".")
+        });
+      });
+      return {
+        name: token.extensions.prop || token.name,
+        values: conditions,
+        description: token.description,
+        deprecated: token.deprecated,
+        cssVar: token.extensions.varRef
+      };
+    });
+    return {
+      type: category,
+      values,
+      tokenFunctionExamples,
+      functionExamples,
+      jsxExamples
+    };
+  }).filter(Boolean);
+};
+var generateThemesSpec = (ctx) => {
+  const themes = ctx.config.themes;
+  if (!themes || Object.keys(themes).length === 0) return void 0;
+  const data = Object.keys(themes).map((themeName) => {
+    const tokens = generateThemeTokenGroups(ctx, themeName, (token) => !token.extensions.isSemantic);
+    const semanticTokens = generateThemeTokenGroups(ctx, themeName, (token) => token.extensions.isSemantic);
+    return { name: themeName, tokens, semanticTokens };
+  });
+  return {
+    type: "themes",
+    data
+  };
+};
+
+// src/spec/tokens.ts
+import { walkObject as walkObject3 } from "@pandacss/shared";
 var generateTokensSpec = (ctx) => {
   const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
@@ -6147,7 +6268,7 @@ var generateSemanticTokensSpec = (ctx) => {
     const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
     const values = typeTokens.map((token) => {
       const conditions = [];
-      walkObject2(token.extensions.rawValue, (value, path) => {
+      walkObject3(token.extensions.rawValue, (value, path) => {
         conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
       });
       return {
@@ -6319,6 +6440,10 @@ ${css}
     if (colorPaletteSpec) {
       specs.push(colorPaletteSpec);
     }
+    const themesSpec = generateThemesSpec(this);
+    if (themesSpec) {
+      specs.push(themesSpec);
+    }
     return specs;
   };
   getSpecOfType = (type) => {
@@ -6344,6 +6469,8 @@ ${css}
           return generateAnimationStylesSpec(this);
         case "color-palette":
           return generateColorPaletteSpec(this) ?? void 0;
+        case "themes":
+          return generateThemesSpec(this) ?? void 0;
       }
     })();
     return spec;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -38,12 +38,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.5.6",
     "ts-pattern": "5.9.0",
-    "@pandacss/core": "1.9.1",
-    "@pandacss/is-valid-prop": "^1.9.1",
-    "@pandacss/logger": "1.9.1",
-    "@pandacss/shared": "1.9.1",
-    "@pandacss/token-dictionary": "1.9.1",
-    "@pandacss/types": "1.9.1"
+    "@pandacss/core": "1.11.0",
+    "@pandacss/is-valid-prop": "^1.11.0",
+    "@pandacss/logger": "1.11.0",
+    "@pandacss/shared": "1.11.0",
+    "@pandacss/token-dictionary": "1.11.0",
+    "@pandacss/types": "1.11.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"