@pandacss/generator 0.0.0-dev-20240315222821 → 0.0.0-dev-20240319203029

package/dist/index.js

@@ -3676,7 +3676,7 @@ function generateStyleProps(ctx) {
     ${ctx.file.importType("Token", "../tokens/index")}
 
     type AnyString = (string & {})
-    ${cssVars ? `type CssVars = ${cssVars}` : ""}
+    type CssVars = ${[cssVars || "`var(--${string})`"].filter(Boolean).join(" | ")}
     type CssVarValue = ConditionalValue<Token${ctx.globalVars.isEmpty() ? "" : " | CssVars"} | AnyString | (number & {})>
 
     type CssVarName = ${(0, import_shared3.unionType)(ctx.globalVars.names)} | AnyString
@@ -3691,19 +3691,22 @@ function generateStyleProps(ctx) {
     const prop = ctx.utility.shorthands.get(key) ?? key;
     const union = [];
     const cssFallback = import_is_valid_prop.allCssProperties.includes(prop) ? `CssProperties["${prop}"]` : "";
-    if (!propTypes.has(prop))
-      union.push(cssFallback);
-    else {
-      union.push(
-        strictPropertyValue(prop, `UtilityValues["${prop}"]`, ctx.config.strictTokens ? "" : cssFallback)
-      );
+    if (propTypes.has(prop)) {
+      const utilityValue = `UtilityValues["${prop}"]`;
+      if (strictPropertyList.has(key)) {
+        union.push([utilityValue, "CssVars"].join(" | "));
+      } else {
+        union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
+      }
+    } else {
+      union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
     }
     const filtered = union.filter(Boolean);
     if (!filtered.length) {
       filtered.push("string | number");
     }
     const comment = csstype_d_ts_default.comments?.[prop] || "";
-    const value = filtered.concat(ctx.globalVars.isEmpty() ? "" : "CssVars").filter(Boolean).join(" | ");
+    const value = filtered.filter(Boolean).join(" | ");
     const line = `${key}?: ${restrict(prop, value, ctx.config)}`;
     return " " + [comment, line].filter(Boolean).join("\n");
   }).join("\n")}
@@ -3774,7 +3777,6 @@ var strictPropertyList = /* @__PURE__ */ new Set([
   "wordBreak",
   "writingMode"
 ]);
-var strictPropertyValue = (key, value, fallback) => strictPropertyList.has(key) ? value : [value, fallback].filter(Boolean).join(" | ");
 var restrict = (key, value, config) => {
   if (config.strictPropertyValues && strictPropertyList.has(key)) {
     return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${value}>>>`;

package/dist/index.mjs

@@ -3640,7 +3640,7 @@ function generateStyleProps(ctx) {
     ${ctx.file.importType("Token", "../tokens/index")}
 
     type AnyString = (string & {})
-    ${cssVars ? `type CssVars = ${cssVars}` : ""}
+    type CssVars = ${[cssVars || "`var(--${string})`"].filter(Boolean).join(" | ")}
     type CssVarValue = ConditionalValue<Token${ctx.globalVars.isEmpty() ? "" : " | CssVars"} | AnyString | (number & {})>
 
     type CssVarName = ${unionType3(ctx.globalVars.names)} | AnyString
@@ -3655,19 +3655,22 @@ function generateStyleProps(ctx) {
     const prop = ctx.utility.shorthands.get(key) ?? key;
     const union = [];
     const cssFallback = allCssProperties.includes(prop) ? `CssProperties["${prop}"]` : "";
-    if (!propTypes.has(prop))
-      union.push(cssFallback);
-    else {
-      union.push(
-        strictPropertyValue(prop, `UtilityValues["${prop}"]`, ctx.config.strictTokens ? "" : cssFallback)
-      );
+    if (propTypes.has(prop)) {
+      const utilityValue = `UtilityValues["${prop}"]`;
+      if (strictPropertyList.has(key)) {
+        union.push([utilityValue, "CssVars"].join(" | "));
+      } else {
+        union.push([utilityValue, ctx.config.strictTokens ? "" : cssFallback].filter(Boolean).join(" | "));
+      }
+    } else {
+      union.push([strictPropertyList.has(key) ? "CssVars" : "", cssFallback].filter(Boolean).join(" | "));
     }
     const filtered = union.filter(Boolean);
     if (!filtered.length) {
       filtered.push("string | number");
     }
     const comment = csstype_d_ts_default.comments?.[prop] || "";
-    const value = filtered.concat(ctx.globalVars.isEmpty() ? "" : "CssVars").filter(Boolean).join(" | ");
+    const value = filtered.filter(Boolean).join(" | ");
     const line = `${key}?: ${restrict(prop, value, ctx.config)}`;
     return " " + [comment, line].filter(Boolean).join("\n");
   }).join("\n")}
@@ -3738,7 +3741,6 @@ var strictPropertyList = /* @__PURE__ */ new Set([
   "wordBreak",
   "writingMode"
 ]);
-var strictPropertyValue = (key, value, fallback) => strictPropertyList.has(key) ? value : [value, fallback].filter(Boolean).join(" | ");
 var restrict = (key, value, config) => {
   if (config.strictPropertyValues && strictPropertyList.has(key)) {
     return `ConditionalValue<WithEscapeHatch<OnlyKnown<"${key}", ${value}>>>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20240315222821",
+  "version": "0.0.0-dev-20240319203029",
   "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-20240315222821",
-    "@pandacss/is-valid-prop": "^0.0.0-dev-20240315222821",
-    "@pandacss/logger": "0.0.0-dev-20240315222821",
-    "@pandacss/shared": "0.0.0-dev-20240315222821",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240315222821",
-    "@pandacss/types": "0.0.0-dev-20240315222821"
+    "@pandacss/core": "0.0.0-dev-20240319203029",
+    "@pandacss/is-valid-prop": "^0.0.0-dev-20240319203029",
+    "@pandacss/logger": "0.0.0-dev-20240319203029",
+    "@pandacss/shared": "0.0.0-dev-20240319203029",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240319203029",
+    "@pandacss/types": "0.0.0-dev-20240319203029"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"