@pandacss/generator 1.10.0 → 1.11.1

package/dist/index.js

@@ -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")}
     }
 
@@ -253,7 +261,26 @@ function generateStringLiteralCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: import_outdent4.outdent`
-    export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
+    ${ctx.file.importType("SystemStyleObject", "../types/index")}
+
+    type Styles =
+      | { raw: readonly string[] | ArrayLike<string> }
+      | SystemStyleObject
+      | boolean
+      | null
+      | undefined
+
+    interface CssRawFunction {
+      (...styles: Styles[]): SystemStyleObject
+    }
+
+    interface CssFunction {
+      (...styles: Styles[]): string
+
+      raw: CssRawFunction
+    }
+
+    export declare const css: CssFunction;
     `,
     js: import_outdent4.outdent`
     ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
@@ -5043,16 +5070,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: "" });
@@ -5930,11 +5992,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;

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")}
     }
 
@@ -216,7 +224,26 @@ function generateStringLiteralCssFn(ctx) {
   const { separator } = utility;
   return {
     dts: outdent4`
-    export declare function css(template: { raw: readonly string[] | ArrayLike<string> }): string
+    ${ctx.file.importType("SystemStyleObject", "../types/index")}
+
+    type Styles =
+      | { raw: readonly string[] | ArrayLike<string> }
+      | SystemStyleObject
+      | boolean
+      | null
+      | undefined
+
+    interface CssRawFunction {
+      (...styles: Styles[]): SystemStyleObject
+    }
+
+    interface CssFunction {
+      (...styles: Styles[]): string
+
+      raw: CssRawFunction
+    }
+
+    export declare const css: CssFunction;
     `,
     js: outdent4`
     ${ctx.file.import("astish, createCss, isObject, mergeProps, withoutSpace", "../helpers")}
@@ -5006,16 +5033,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: "" });
@@ -5893,11 +5955,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -36,14 +36,14 @@
     "javascript-stringify": "2.1.0",
     "outdent": " ^0.8.0",
     "pluralize": "8.0.0",
-    "postcss": "8.5.6",
+    "postcss": "8.5.14",
     "ts-pattern": "5.9.0",
-    "@pandacss/core": "1.10.0",
-    "@pandacss/is-valid-prop": "^1.10.0",
-    "@pandacss/logger": "1.10.0",
-    "@pandacss/shared": "1.10.0",
-    "@pandacss/token-dictionary": "1.10.0",
-    "@pandacss/types": "1.10.0"
+    "@pandacss/core": "1.11.1",
+    "@pandacss/is-valid-prop": "^1.11.1",
+    "@pandacss/logger": "1.11.1",
+    "@pandacss/shared": "1.11.1",
+    "@pandacss/token-dictionary": "1.11.1",
+    "@pandacss/types": "1.11.1"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"