@pandacss/generator 0.0.0-dev-20240315122725 → 0.0.0-dev-20240315210222

package/dist/index.js

@@ -39,7 +39,7 @@ var import_core5 = require("@pandacss/core");
 var import_ts_pattern11 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
-var import_outdent43 = __toESM(require("outdent"));
+var import_outdent44 = __toESM(require("outdent"));
 
 // src/artifacts/js/conditions.ts
 var import_outdent = __toESM(require("outdent"));
@@ -2776,6 +2776,11 @@ function generatePackageJson(ctx) {
         require: ctx.file.ext(`./recipes/index`),
         import: ctx.file.ext(`./recipes/index`)
       },
+      "./themes": {
+        types: ctx.file.extDts("./themes/index"),
+        require: ctx.file.ext(`./themes/index`),
+        import: ctx.file.ext(`./themes/index`)
+      },
       "./tokens": {
         types: ctx.file.extDts("./tokens/index"),
         require: ctx.file.ext(`./tokens/index`),
@@ -3515,7 +3520,7 @@ var selectors_d_ts_default = {
 
 // src/artifacts/generated/static-css.d.ts.json
 var static_css_d_ts_default = {
-  content: "interface WithConditions {\n  /**\n   * The css conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  responsive?: boolean\n}\n\nexport interface CssRule extends WithConditions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?:\n    | '*'\n    | {\n        [recipe: string]: RecipeRule[]\n      }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n}\n"
+  content: "interface WithConditions {\n  /**\n   * The css conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  responsive?: boolean\n}\n\nexport interface CssRule extends WithConditions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?:\n    | '*'\n    | {\n        [recipe: string]: RecipeRule[]\n      }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n  /**\n   * The CSS themes to generate\n   */\n  themes?: string[]\n}\n"
 };
 
 // src/artifacts/generated/system-types.d.ts.json
@@ -3839,6 +3844,228 @@ function generateTokenTypes(ctx) {
   return import_outdent42.outdent.string(Array.from(set).join("\n\n"));
 }
 
+// src/artifacts/js/themes.ts
+var import_shared5 = require("@pandacss/shared");
+var import_outdent43 = __toESM(require("outdent"));
+
+// src/artifacts/css/token-css.ts
+var import_core2 = require("@pandacss/core");
+var import_logger = require("@pandacss/logger");
+var import_postcss = __toESM(require("postcss"));
+function generateTokenCss(ctx, sheet) {
+  const { config, conditions, tokens } = ctx;
+  const { cssVarRoot, staticCss } = config;
+  const root = cssVarRoot;
+  const results = [];
+  const allowed = staticCss?.themes;
+  let themeVariants = [];
+  if (allowed) {
+    const keys = Object.keys(config.themes ?? {});
+    themeVariants = allowed.includes("*") ? keys : keys.filter((key) => allowed.includes(key));
+  }
+  const themeConds = themeVariants.map((key) => conditions.getThemeName(key));
+  const themePrefix = ctx.conditions.getThemeName("");
+  for (const [key, values] of tokens.view.vars.entries()) {
+    const isThemeSkipped = key.startsWith(themePrefix) && !themeConds.some((condName) => key.startsWith(condName));
+    if (isThemeSkipped) {
+      continue;
+    }
+    const css2 = stringifyVars({ values, conditionKey: key, root, conditions });
+    if (css2) {
+      results.push(css2);
+    }
+  }
+  let css = results.join("\n\n");
+  css = "\n\n" + cleanupSelectors(css, root);
+  if (ctx.hooks["cssgen:done"]) {
+    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
+  }
+  sheet.layers.tokens.append(css);
+}
+function stringifyVars(options) {
+  const { conditionKey, values, root, conditions } = options;
+  const varsObj = Object.fromEntries(values);
+  if (Object.keys(varsObj).length === 0)
+    return;
+  if (conditionKey === "base") {
+    return (0, import_core2.stringify)({ [root]: varsObj });
+  }
+  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;
+  }).filter(Boolean);
+  const rule = getDeepestRule(root, mapped);
+  if (!rule)
+    return;
+  getDeepestNode(rule)?.append(css);
+  return (0, import_core2.expandNestedCss)(rule.toString());
+}
+function getDeepestRule(root, selectors) {
+  const rule = import_postcss.default.rule({ selector: "" });
+  for (const selector of selectors) {
+    const last = getDeepestNode(rule);
+    const node = last ?? rule;
+    if (selector.startsWith("@")) {
+      const atRule = import_postcss.default.rule({ selector, nodes: [import_postcss.default.rule({ selector: `${root}&` })] });
+      node.append(atRule);
+    } else {
+      node.append(import_postcss.default.rule({ selector }));
+    }
+  }
+  return rule;
+}
+function getDeepestNode(node) {
+  if (node.nodes && node.nodes.length) {
+    return getDeepestNode(node.nodes[node.nodes.length - 1]);
+  }
+  return node;
+}
+var parse = (str) => {
+  try {
+    return import_postcss.default.parse(str);
+  } catch (error) {
+    if (error instanceof import_postcss.CssSyntaxError) {
+      import_logger.logger.error("tokens:process", error.showSourceCode(true));
+    }
+  }
+};
+function cleanupSelectors(css, varSelector) {
+  const root = parse(css) ?? import_postcss.default.root();
+  root.walkRules((rule) => {
+    const selectors = [];
+    rule.selectors.forEach((selector) => {
+      selectors.push(selector.trim());
+    });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
+  });
+  return root.toString();
+}
+
+// src/artifacts/js/themes.ts
+var getThemeId = (themeName) => "panda-theme-" + themeName;
+function generateThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  const { tokens, conditions } = ctx;
+  return Object.entries(themes).map(([name, themeVariant]) => {
+    const results = [];
+    const condName = ctx.conditions.getThemeName(name);
+    for (const [key, values] of tokens.view.vars.entries()) {
+      if (key.startsWith(condName)) {
+        const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
+        if (css) {
+          results.push(css);
+        }
+      }
+    }
+    return {
+      name,
+      json: JSON.stringify(
+        (0, import_shared5.compact)({
+          name,
+          id: getThemeId(name),
+          dataAttr: themeVariant.attribute || name,
+          css: results.join("\n\n")
+        }),
+        null,
+        2
+      )
+    };
+  });
+}
+function generateThemesIndex(ctx, files) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  if (!files)
+    return;
+  const themeName = Object.keys(themes);
+  return [
+    {
+      file: ctx.file.ext("index"),
+      code: import_outdent43.default`
+  export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
+
+  export function injectTheme(el, theme) {
+    const doc = el.ownerDocument || document
+    let sheet = doc.getElementById(theme.id)
+
+    if (!sheet) {
+      sheet = doc.createElement('style')
+      sheet.setAttribute('type', 'text/css')
+      sheet.setAttribute('id', theme.id)
+    }
+
+    const head = doc.head || doc.getElementsByTagName('head')[0]
+    if (!head) {
+      throw new Error('No head found in doc')
+    }
+
+    el.dataset.pandaTheme = theme.dataAttr
+
+    head.appendChild(sheet)
+    sheet.innerHTML = theme.css
+
+    return sheet
+  }
+  `
+    },
+    {
+      file: ctx.file.extDts("index"),
+      code: import_outdent43.default`
+  export type ThemeName = ${themeName.map((name) => `'${name}'`).join(" | ")}
+  export type ThemeByName = {
+    ${files.map((f) => {
+        const theme = JSON.parse(f.json);
+        if (!theme.css)
+          return "";
+        return `'${f.name}': {
+          id: string,
+          name: '${f.name}',
+          dataAttr: '${theme.attribute || f.name}',
+          css: string
+        }`;
+      }).join("\n")}
+  }
+
+  export type Theme<T extends ThemeName> = ThemeByName[T]
+
+  /**
+   * Dynamically import a theme by name
+   */
+  export declare function getTheme<T extends ThemeName>(themeName: T): Promise<ThemeByName[T]>
+
+  /**
+   * Inject a theme stylesheet into the document
+   */
+  export declare function injectTheme(el: HTMLElement, theme: Theme<any>): HTMLStyleElement
+  `
+    }
+  ];
+}
+
 // src/artifacts/setup-artifacts.ts
 function setupHelpers(ctx) {
   const code = generateHelpers(ctx);
@@ -3994,8 +4221,8 @@ function setupRecipesIndex(ctx) {
     return;
   const fileNames = ctx.recipes.details.map((recipe) => recipe.dashName);
   const index = {
-    js: import_outdent43.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
-    dts: import_outdent43.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
+    js: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
     id: "recipes-index",
@@ -4026,8 +4253,8 @@ function setupPatternsIndex(ctx) {
     return;
   const fileNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
-    js: import_outdent43.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
-    dts: import_outdent43.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
+    js: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: import_outdent44.default.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
     id: "patterns-index",
@@ -4117,15 +4344,15 @@ function setupJsxPatternsIndex(ctx) {
   const isStyleProp = !ctx.isTemplateLiteralSyntax;
   const patternNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
-    js: import_outdent43.default`
+    js: import_outdent44.default`
   ${ctx.file.exportStar("./factory")}
   ${isStyleProp ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${isStyleProp ? import_outdent43.default.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")) : ""}
+  ${isStyleProp ? import_outdent44.default.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")) : ""}
   `,
-    dts: import_outdent43.default`
+    dts: import_outdent44.default`
   ${ctx.file.exportTypeStar("./factory")}
   ${isStyleProp ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
-  ${isStyleProp ? import_outdent43.default.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n")) : ""}
+  ${isStyleProp ? import_outdent44.default.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n")) : ""}
   ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
   };
@@ -4140,13 +4367,13 @@ function setupJsxPatternsIndex(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: import_outdent43.default`
+    js: import_outdent44.default`
   ${ctx.file.exportStar("./css")}
   ${ctx.file.exportStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
  `,
-    dts: import_outdent43.default`
+    dts: import_outdent44.default`
   ${ctx.file.exportTypeStar("./css")}
   ${ctx.file.exportTypeStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
@@ -4170,6 +4397,19 @@ function setupPackageJson(ctx) {
     files: [{ file: "package.json", code: generatePackageJson(ctx) }]
   };
 }
+function setupThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  const files = generateThemes(ctx);
+  if (!files)
+    return;
+  return {
+    id: "themes",
+    dir: ctx.paths.themes,
+    files: files.flatMap((file) => [{ file: [file.name, "json"].join("."), code: file.json }]).concat(generateThemesIndex(ctx, files) ?? [])
+  };
+}
 var getAffectedArtifacts = (ids) => {
   if (!ids)
     return;
@@ -4238,7 +4478,8 @@ var entries = [
   ["jsx-patterns", setupJsxPatterns],
   ["jsx-patterns-index", setupJsxPatternsIndex],
   ["css-index", setupCssIndex],
-  ["package.json", setupPackageJson]
+  ["package.json", setupPackageJson],
+  ["themes", setupThemes]
 ];
 var getMatchingArtifacts = (ctx, filters) => {
   const ids = filters?.ids;
@@ -4313,14 +4554,14 @@ var generateGlobalCss = (ctx, sheet) => {
 };
 
 // src/artifacts/css/keyframe-css.ts
-var import_core2 = require("@pandacss/core");
+var import_core3 = require("@pandacss/core");
 function generateKeyframeCss(ctx, sheet) {
   const { keyframes = {} } = ctx.config.theme ?? {};
   const result = {};
   for (const [name, definition] of Object.entries(keyframes)) {
     result[`@keyframes ${name}`] = definition;
   }
-  let css = (0, import_core2.stringify)(sheet.serialize(result));
+  let css = (0, import_core3.stringify)(sheet.serialize(result));
   if (ctx.hooks["cssgen:done"]) {
     css = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css }) ?? css;
   }
@@ -4328,7 +4569,7 @@ function generateKeyframeCss(ctx, sheet) {
 }
 
 // src/artifacts/css/parser-css.ts
-var import_logger = require("@pandacss/logger");
+var import_logger2 = require("@pandacss/logger");
 var generateParserCss = (ctx, decoder) => {
   if (!decoder)
     return "";
@@ -4339,17 +4580,17 @@ var generateParserCss = (ctx, decoder) => {
     const css = sheet.toCss({ minify, optimize });
     return css;
   } catch (err) {
-    import_logger.logger.error("serializer:css", "Failed to serialize CSS: " + err);
+    import_logger2.logger.error("serializer:css", "Failed to serialize CSS: " + err);
     return "";
   }
 };
 
 // src/artifacts/css/reset-css.ts
-var import_core3 = require("@pandacss/core");
-var import_shared5 = require("@pandacss/shared");
+var import_core4 = require("@pandacss/core");
+var import_shared6 = require("@pandacss/shared");
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
-  const { scope = "", level = "parent" } = (0, import_shared5.isObject)(preflight) ? preflight : {};
+  const { scope = "", level = "parent" } = (0, import_shared6.isObject)(preflight) ? preflight : {};
   let selector = "";
   if (scope && level === "parent") {
     selector = `${scope} `;
@@ -4447,7 +4688,7 @@ function generateResetCss(ctx, sheet) {
     }
   };
   if (level === "element") {
-    const modified = (0, import_shared5.mapEntries)(scoped, (k, v) => [k, { [selector]: v }]);
+    const modified = (0, import_shared6.mapEntries)(scoped, (k, v) => [k, { [selector]: v }]);
     Object.assign(reset, modified);
   } else if (selector) {
     reset[selector] = scoped;
@@ -4471,106 +4712,6 @@ var generateStaticCss = (ctx, sheet) => {
   }
 };
 
-// src/artifacts/css/token-css.ts
-var import_core4 = require("@pandacss/core");
-var import_postcss = __toESM(require("postcss"));
-var import_logger2 = require("@pandacss/logger");
-function generateTokenCss(ctx, sheet) {
-  const {
-    config: { cssVarRoot },
-    conditions,
-    tokens
-  } = ctx;
-  const root = cssVarRoot;
-  const results = [];
-  for (const [key, values] of tokens.view.vars.entries()) {
-    const varsObj = Object.fromEntries(values);
-    if (Object.keys(varsObj).length === 0)
-      continue;
-    if (key === "base") {
-      const css2 = (0, import_core4.stringify)({ [root]: varsObj });
-      results.push(css2);
-    } else {
-      const keys = key.split(":");
-      const css2 = (0, import_core4.stringify)(varsObj);
-      const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
-        const lastSegment = Array.isArray(condition) ? condition.at(-1) : condition;
-        if (!lastSegment)
-          return;
-        const parent = (0, import_core4.extractParentSelectors)(lastSegment);
-        return parent ? `&${parent}` : lastSegment;
-      }).filter(Boolean);
-      if (!mapped.length)
-        return;
-      const rule = getDeepestRule(root, mapped);
-      if (!rule)
-        continue;
-      getDeepestNode(rule)?.append(css2);
-      results.push((0, import_core4.expandNestedCss)(rule.toString()));
-    }
-  }
-  let css = results.join("\n\n");
-  css = "\n\n" + cleanupSelectors(css, root);
-  if (ctx.hooks["cssgen:done"]) {
-    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
-  }
-  sheet.layers.tokens.append(css);
-}
-function getDeepestRule(root, selectors) {
-  const rule = import_postcss.default.rule({ selector: "" });
-  for (const selector of selectors) {
-    const last = getDeepestNode(rule);
-    const node = last ?? rule;
-    if (selector.startsWith("@")) {
-      const atRule = import_postcss.default.rule({ selector, nodes: [import_postcss.default.rule({ selector: `${root}&` })] });
-      node.append(atRule);
-    } else {
-      node.append(import_postcss.default.rule({ selector }));
-    }
-  }
-  return rule;
-}
-function getDeepestNode(node) {
-  if (node.nodes && node.nodes.length) {
-    return getDeepestNode(node.nodes[node.nodes.length - 1]);
-  }
-  return node;
-}
-var parse = (str) => {
-  try {
-    return import_postcss.default.parse(str);
-  } catch (error) {
-    if (error instanceof import_postcss.CssSyntaxError) {
-      import_logger2.logger.error("tokens:process", error.showSourceCode(true));
-    }
-  }
-};
-function cleanupSelectors(css, varSelector) {
-  const root = parse(css) ?? import_postcss.default.root();
-  root.walkRules((rule) => {
-    const selectors = [];
-    rule.selectors.forEach((selector) => {
-      selectors.push(selector.trim());
-    });
-    const ruleSelector = selectors.join(", ");
-    if (ruleSelector === varSelector) {
-      return;
-    }
-    const trimmedSelector = selectors.join(",");
-    if (trimmedSelector === varSelector) {
-      return;
-    }
-    const selectorsWithoutVarRoot = selectors.map((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      return res.join("");
-    }).filter(Boolean);
-    if (selectorsWithoutVarRoot.length === 0)
-      return;
-    rule.selector = selectorsWithoutVarRoot.join(", ");
-  });
-  return root.toString();
-}
-
 // src/generator.ts
 var Generator = class extends import_core5.Context {
   constructor(conf) {

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { Context as Context2 } from "@pandacss/core";
 import { match as match11 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
-import outdent43 from "outdent";
+import outdent44 from "outdent";
 
 // src/artifacts/js/conditions.ts
 import outdent from "outdent";
@@ -2740,6 +2740,11 @@ function generatePackageJson(ctx) {
         require: ctx.file.ext(`./recipes/index`),
         import: ctx.file.ext(`./recipes/index`)
       },
+      "./themes": {
+        types: ctx.file.extDts("./themes/index"),
+        require: ctx.file.ext(`./themes/index`),
+        import: ctx.file.ext(`./themes/index`)
+      },
       "./tokens": {
         types: ctx.file.extDts("./tokens/index"),
         require: ctx.file.ext(`./tokens/index`),
@@ -3479,7 +3484,7 @@ var selectors_d_ts_default = {
 
 // src/artifacts/generated/static-css.d.ts.json
 var static_css_d_ts_default = {
-  content: "interface WithConditions {\n  /**\n   * The css conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  responsive?: boolean\n}\n\nexport interface CssRule extends WithConditions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?:\n    | '*'\n    | {\n        [recipe: string]: RecipeRule[]\n      }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n}\n"
+  content: "interface WithConditions {\n  /**\n   * The css conditions to generate for the rule.\n   * @example ['hover', 'focus']\n   */\n  conditions?: string[]\n  responsive?: boolean\n}\n\nexport interface CssRule extends WithConditions {\n  /**\n   * The css properties to generate utilities for.\n   * @example ['margin', 'padding']\n   */\n  properties: {\n    [property: string]: Array<string | number>\n  }\n}\n\ninterface RecipeRuleVariants {\n  [variant: string]: boolean | string[]\n}\n\nexport type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)\nexport type PatternRule = '*' | CssRule\n\nexport interface StaticCssOptions {\n  /**\n   * The css utility classes to generate.\n   */\n  css?: CssRule[]\n  /**\n   * The css recipes to generate.\n   */\n  recipes?:\n    | '*'\n    | {\n        [recipe: string]: RecipeRule[]\n      }\n  /**\n   * The css patterns to generate.\n   */\n  patterns?: {\n    [pattern: string]: PatternRule[]\n  }\n  /**\n   * The CSS themes to generate\n   */\n  themes?: string[]\n}\n"
 };
 
 // src/artifacts/generated/system-types.d.ts.json
@@ -3803,6 +3808,228 @@ function generateTokenTypes(ctx) {
   return outdent42.string(Array.from(set).join("\n\n"));
 }
 
+// src/artifacts/js/themes.ts
+import { compact as compact2 } from "@pandacss/shared";
+import outdent43 from "outdent";
+
+// src/artifacts/css/token-css.ts
+import { expandNestedCss, extractParentSelectors, stringify as stringify3 } from "@pandacss/core";
+import { logger } from "@pandacss/logger";
+import postcss, { CssSyntaxError } from "postcss";
+function generateTokenCss(ctx, sheet) {
+  const { config, conditions, tokens } = ctx;
+  const { cssVarRoot, staticCss } = config;
+  const root = cssVarRoot;
+  const results = [];
+  const allowed = staticCss?.themes;
+  let themeVariants = [];
+  if (allowed) {
+    const keys = Object.keys(config.themes ?? {});
+    themeVariants = allowed.includes("*") ? keys : keys.filter((key) => allowed.includes(key));
+  }
+  const themeConds = themeVariants.map((key) => conditions.getThemeName(key));
+  const themePrefix = ctx.conditions.getThemeName("");
+  for (const [key, values] of tokens.view.vars.entries()) {
+    const isThemeSkipped = key.startsWith(themePrefix) && !themeConds.some((condName) => key.startsWith(condName));
+    if (isThemeSkipped) {
+      continue;
+    }
+    const css2 = stringifyVars({ values, conditionKey: key, root, conditions });
+    if (css2) {
+      results.push(css2);
+    }
+  }
+  let css = results.join("\n\n");
+  css = "\n\n" + cleanupSelectors(css, root);
+  if (ctx.hooks["cssgen:done"]) {
+    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
+  }
+  sheet.layers.tokens.append(css);
+}
+function stringifyVars(options) {
+  const { conditionKey, values, root, conditions } = options;
+  const varsObj = Object.fromEntries(values);
+  if (Object.keys(varsObj).length === 0)
+    return;
+  if (conditionKey === "base") {
+    return stringify3({ [root]: varsObj });
+  }
+  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;
+  }).filter(Boolean);
+  const rule = getDeepestRule(root, mapped);
+  if (!rule)
+    return;
+  getDeepestNode(rule)?.append(css);
+  return expandNestedCss(rule.toString());
+}
+function getDeepestRule(root, selectors) {
+  const rule = postcss.rule({ selector: "" });
+  for (const selector of selectors) {
+    const last = getDeepestNode(rule);
+    const node = last ?? rule;
+    if (selector.startsWith("@")) {
+      const atRule = postcss.rule({ selector, nodes: [postcss.rule({ selector: `${root}&` })] });
+      node.append(atRule);
+    } else {
+      node.append(postcss.rule({ selector }));
+    }
+  }
+  return rule;
+}
+function getDeepestNode(node) {
+  if (node.nodes && node.nodes.length) {
+    return getDeepestNode(node.nodes[node.nodes.length - 1]);
+  }
+  return node;
+}
+var parse = (str) => {
+  try {
+    return postcss.parse(str);
+  } catch (error) {
+    if (error instanceof CssSyntaxError) {
+      logger.error("tokens:process", error.showSourceCode(true));
+    }
+  }
+};
+function cleanupSelectors(css, varSelector) {
+  const root = parse(css) ?? postcss.root();
+  root.walkRules((rule) => {
+    const selectors = [];
+    rule.selectors.forEach((selector) => {
+      selectors.push(selector.trim());
+    });
+    const ruleSelector = selectors.join(", ");
+    if (ruleSelector === varSelector) {
+      return;
+    }
+    const trimmedSelector = selectors.join(",");
+    if (trimmedSelector === varSelector) {
+      return;
+    }
+    const selectorsWithoutVarRoot = selectors.map((selector) => {
+      const res = selector.split(varSelector).filter(Boolean);
+      return res.join("");
+    }).filter(Boolean);
+    if (selectorsWithoutVarRoot.length === 0)
+      return;
+    rule.selector = selectorsWithoutVarRoot.join(", ");
+  });
+  return root.toString();
+}
+
+// src/artifacts/js/themes.ts
+var getThemeId = (themeName) => "panda-theme-" + themeName;
+function generateThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  const { tokens, conditions } = ctx;
+  return Object.entries(themes).map(([name, themeVariant]) => {
+    const results = [];
+    const condName = ctx.conditions.getThemeName(name);
+    for (const [key, values] of tokens.view.vars.entries()) {
+      if (key.startsWith(condName)) {
+        const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
+        if (css) {
+          results.push(css);
+        }
+      }
+    }
+    return {
+      name,
+      json: JSON.stringify(
+        compact2({
+          name,
+          id: getThemeId(name),
+          dataAttr: themeVariant.attribute || name,
+          css: results.join("\n\n")
+        }),
+        null,
+        2
+      )
+    };
+  });
+}
+function generateThemesIndex(ctx, files) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  if (!files)
+    return;
+  const themeName = Object.keys(themes);
+  return [
+    {
+      file: ctx.file.ext("index"),
+      code: outdent43`
+  export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
+
+  export function injectTheme(el, theme) {
+    const doc = el.ownerDocument || document
+    let sheet = doc.getElementById(theme.id)
+
+    if (!sheet) {
+      sheet = doc.createElement('style')
+      sheet.setAttribute('type', 'text/css')
+      sheet.setAttribute('id', theme.id)
+    }
+
+    const head = doc.head || doc.getElementsByTagName('head')[0]
+    if (!head) {
+      throw new Error('No head found in doc')
+    }
+
+    el.dataset.pandaTheme = theme.dataAttr
+
+    head.appendChild(sheet)
+    sheet.innerHTML = theme.css
+
+    return sheet
+  }
+  `
+    },
+    {
+      file: ctx.file.extDts("index"),
+      code: outdent43`
+  export type ThemeName = ${themeName.map((name) => `'${name}'`).join(" | ")}
+  export type ThemeByName = {
+    ${files.map((f) => {
+        const theme = JSON.parse(f.json);
+        if (!theme.css)
+          return "";
+        return `'${f.name}': {
+          id: string,
+          name: '${f.name}',
+          dataAttr: '${theme.attribute || f.name}',
+          css: string
+        }`;
+      }).join("\n")}
+  }
+
+  export type Theme<T extends ThemeName> = ThemeByName[T]
+
+  /**
+   * Dynamically import a theme by name
+   */
+  export declare function getTheme<T extends ThemeName>(themeName: T): Promise<ThemeByName[T]>
+
+  /**
+   * Inject a theme stylesheet into the document
+   */
+  export declare function injectTheme(el: HTMLElement, theme: Theme<any>): HTMLStyleElement
+  `
+    }
+  ];
+}
+
 // src/artifacts/setup-artifacts.ts
 function setupHelpers(ctx) {
   const code = generateHelpers(ctx);
@@ -3958,8 +4185,8 @@ function setupRecipesIndex(ctx) {
     return;
   const fileNames = ctx.recipes.details.map((recipe) => recipe.dashName);
   const index = {
-    js: outdent43.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
-    dts: outdent43.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
+    js: outdent44.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: outdent44.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
     id: "recipes-index",
@@ -3990,8 +4217,8 @@ function setupPatternsIndex(ctx) {
     return;
   const fileNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
-    js: outdent43.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
-    dts: outdent43.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
+    js: outdent44.string(fileNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")),
+    dts: outdent44.string(fileNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n"))
   };
   return {
     id: "patterns-index",
@@ -4081,15 +4308,15 @@ function setupJsxPatternsIndex(ctx) {
   const isStyleProp = !ctx.isTemplateLiteralSyntax;
   const patternNames = ctx.patterns.details.map((pattern) => pattern.dashName);
   const index = {
-    js: outdent43`
+    js: outdent44`
   ${ctx.file.exportStar("./factory")}
   ${isStyleProp ? ctx.file.exportStar("./is-valid-prop") : ""}
-  ${isStyleProp ? outdent43.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")) : ""}
+  ${isStyleProp ? outdent44.string(patternNames.map((file) => ctx.file.exportStar(`./${file}`)).join("\n")) : ""}
   `,
-    dts: outdent43`
+    dts: outdent44`
   ${ctx.file.exportTypeStar("./factory")}
   ${isStyleProp ? ctx.file.exportTypeStar("./is-valid-prop") : ""}
-  ${isStyleProp ? outdent43.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n")) : ""}
+  ${isStyleProp ? outdent44.string(patternNames.map((file) => ctx.file.exportTypeStar(`./${file}`)).join("\n")) : ""}
   ${ctx.file.exportType([ctx.jsx.typeName, ctx.jsx.componentName].join(", "), "../types/jsx")}
     `
   };
@@ -4104,13 +4331,13 @@ function setupJsxPatternsIndex(ctx) {
 }
 function setupCssIndex(ctx) {
   const index = {
-    js: outdent43`
+    js: outdent44`
   ${ctx.file.exportStar("./css")}
   ${ctx.file.exportStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./cva")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportStar("./sva")}
  `,
-    dts: outdent43`
+    dts: outdent44`
   ${ctx.file.exportTypeStar("./css")}
   ${ctx.file.exportTypeStar("./cx")}
   ${ctx.isTemplateLiteralSyntax ? "" : ctx.file.exportTypeStar("./cva")}
@@ -4134,6 +4361,19 @@ function setupPackageJson(ctx) {
     files: [{ file: "package.json", code: generatePackageJson(ctx) }]
   };
 }
+function setupThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes)
+    return;
+  const files = generateThemes(ctx);
+  if (!files)
+    return;
+  return {
+    id: "themes",
+    dir: ctx.paths.themes,
+    files: files.flatMap((file) => [{ file: [file.name, "json"].join("."), code: file.json }]).concat(generateThemesIndex(ctx, files) ?? [])
+  };
+}
 var getAffectedArtifacts = (ids) => {
   if (!ids)
     return;
@@ -4202,7 +4442,8 @@ var entries = [
   ["jsx-patterns", setupJsxPatterns],
   ["jsx-patterns-index", setupJsxPatternsIndex],
   ["css-index", setupCssIndex],
-  ["package.json", setupPackageJson]
+  ["package.json", setupPackageJson],
+  ["themes", setupThemes]
 ];
 var getMatchingArtifacts = (ctx, filters) => {
   const ids = filters?.ids;
@@ -4277,14 +4518,14 @@ var generateGlobalCss = (ctx, sheet) => {
 };
 
 // src/artifacts/css/keyframe-css.ts
-import { stringify as stringify3 } from "@pandacss/core";
+import { stringify as stringify4 } from "@pandacss/core";
 function generateKeyframeCss(ctx, sheet) {
   const { keyframes = {} } = ctx.config.theme ?? {};
   const result = {};
   for (const [name, definition] of Object.entries(keyframes)) {
     result[`@keyframes ${name}`] = definition;
   }
-  let css = stringify3(sheet.serialize(result));
+  let css = stringify4(sheet.serialize(result));
   if (ctx.hooks["cssgen:done"]) {
     css = ctx.hooks["cssgen:done"]({ artifact: "keyframes", content: css }) ?? css;
   }
@@ -4292,7 +4533,7 @@ function generateKeyframeCss(ctx, sheet) {
 }
 
 // src/artifacts/css/parser-css.ts
-import { logger } from "@pandacss/logger";
+import { logger as logger2 } from "@pandacss/logger";
 var generateParserCss = (ctx, decoder) => {
   if (!decoder)
     return "";
@@ -4303,7 +4544,7 @@ var generateParserCss = (ctx, decoder) => {
     const css = sheet.toCss({ minify, optimize });
     return css;
   } catch (err) {
-    logger.error("serializer:css", "Failed to serialize CSS: " + err);
+    logger2.error("serializer:css", "Failed to serialize CSS: " + err);
     return "";
   }
 };
@@ -4435,106 +4676,6 @@ var generateStaticCss = (ctx, sheet) => {
   }
 };
 
-// src/artifacts/css/token-css.ts
-import { expandNestedCss, extractParentSelectors, stringify as stringify4 } from "@pandacss/core";
-import postcss, { CssSyntaxError } from "postcss";
-import { logger as logger2 } from "@pandacss/logger";
-function generateTokenCss(ctx, sheet) {
-  const {
-    config: { cssVarRoot },
-    conditions,
-    tokens
-  } = ctx;
-  const root = cssVarRoot;
-  const results = [];
-  for (const [key, values] of tokens.view.vars.entries()) {
-    const varsObj = Object.fromEntries(values);
-    if (Object.keys(varsObj).length === 0)
-      continue;
-    if (key === "base") {
-      const css2 = stringify4({ [root]: varsObj });
-      results.push(css2);
-    } else {
-      const keys = key.split(":");
-      const css2 = stringify4(varsObj);
-      const mapped = keys.map((key2) => conditions.get(key2)).filter(Boolean).map((condition) => {
-        const lastSegment = Array.isArray(condition) ? condition.at(-1) : condition;
-        if (!lastSegment)
-          return;
-        const parent = extractParentSelectors(lastSegment);
-        return parent ? `&${parent}` : lastSegment;
-      }).filter(Boolean);
-      if (!mapped.length)
-        return;
-      const rule = getDeepestRule(root, mapped);
-      if (!rule)
-        continue;
-      getDeepestNode(rule)?.append(css2);
-      results.push(expandNestedCss(rule.toString()));
-    }
-  }
-  let css = results.join("\n\n");
-  css = "\n\n" + cleanupSelectors(css, root);
-  if (ctx.hooks["cssgen:done"]) {
-    css = ctx.hooks["cssgen:done"]({ artifact: "tokens", content: css }) ?? css;
-  }
-  sheet.layers.tokens.append(css);
-}
-function getDeepestRule(root, selectors) {
-  const rule = postcss.rule({ selector: "" });
-  for (const selector of selectors) {
-    const last = getDeepestNode(rule);
-    const node = last ?? rule;
-    if (selector.startsWith("@")) {
-      const atRule = postcss.rule({ selector, nodes: [postcss.rule({ selector: `${root}&` })] });
-      node.append(atRule);
-    } else {
-      node.append(postcss.rule({ selector }));
-    }
-  }
-  return rule;
-}
-function getDeepestNode(node) {
-  if (node.nodes && node.nodes.length) {
-    return getDeepestNode(node.nodes[node.nodes.length - 1]);
-  }
-  return node;
-}
-var parse = (str) => {
-  try {
-    return postcss.parse(str);
-  } catch (error) {
-    if (error instanceof CssSyntaxError) {
-      logger2.error("tokens:process", error.showSourceCode(true));
-    }
-  }
-};
-function cleanupSelectors(css, varSelector) {
-  const root = parse(css) ?? postcss.root();
-  root.walkRules((rule) => {
-    const selectors = [];
-    rule.selectors.forEach((selector) => {
-      selectors.push(selector.trim());
-    });
-    const ruleSelector = selectors.join(", ");
-    if (ruleSelector === varSelector) {
-      return;
-    }
-    const trimmedSelector = selectors.join(",");
-    if (trimmedSelector === varSelector) {
-      return;
-    }
-    const selectorsWithoutVarRoot = selectors.map((selector) => {
-      const res = selector.split(varSelector).filter(Boolean);
-      return res.join("");
-    }).filter(Boolean);
-    if (selectorsWithoutVarRoot.length === 0)
-      return;
-    rule.selector = selectorsWithoutVarRoot.join(", ");
-  });
-  return root.toString();
-}
-
 // src/generator.ts
 var Generator = class extends Context2 {
   constructor(conf) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20240315122725",
+  "version": "0.0.0-dev-20240315210222",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.35",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.0.0-dev-20240315122725",
-    "@pandacss/is-valid-prop": "^0.0.0-dev-20240315122725",
-    "@pandacss/logger": "0.0.0-dev-20240315122725",
-    "@pandacss/shared": "0.0.0-dev-20240315122725",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240315122725",
-    "@pandacss/types": "0.0.0-dev-20240315122725"
+    "@pandacss/core": "0.0.0-dev-20240315210222",
+    "@pandacss/is-valid-prop": "^0.0.0-dev-20240315210222",
+    "@pandacss/logger": "0.0.0-dev-20240315210222",
+    "@pandacss/shared": "0.0.0-dev-20240315210222",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240315210222",
+    "@pandacss/types": "0.0.0-dev-20240315210222"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"