@pandacss/node 0.0.0-dev-20221125165251 → 0.0.0-dev-20221126091729

package/dist/index.js

@@ -1126,9 +1126,9 @@ var import_core2 = require("@pandacss/core");
 var import_outdent18 = require("outdent");
 var import_ts_pattern5 = require("ts-pattern");
 function generateKeyframes(keyframes) {
-  if (keyframes) {
-    return (0, import_core2.toKeyframeCss)(keyframes);
-  }
+  if (!keyframes)
+    return;
+  return (0, import_core2.toKeyframeCss)(keyframes);
 }
 var getConditionMessage = (value) => import_outdent18.outdent`
 It seems you provided an invalid condition for semantic tokens.
@@ -1150,37 +1150,44 @@ function generateTokenCss(ctx, varRoot) {
       const { css: css3 } = (0, import_core2.toCss)({ [root]: varsObj });
       results.push(css3);
     } else {
-      const cond = conditions.normalize(key);
-      const css3 = (0, import_ts_pattern5.match)(cond).with({ type: "parent-nesting" }, (cond2) => {
-        const selector = cond2.value.replace(/\s&/g, "");
-        const { css: css4 } = (0, import_core2.toCss)(varsObj);
-        return `${selector} {
- ${css4}; 
+      const keys = key.split(":");
+      const { css: css3 } = (0, import_core2.toCss)(varsObj);
+      const sorted = conditions.sort(keys);
+      const allAtRules = sorted.every(({ type }) => type === "at-rule");
+      const result = sorted.reduce(
+        (acc, cond, index, conds) => {
+          let selector;
+          return (0, import_ts_pattern5.match)(cond).with({ type: "parent-nesting" }, (cond2) => {
+            selector = cond2.value.replace(/\s&/g, "");
+            const merge = conds[index - 1]?.type === "parent-nesting";
+            return merge ? `${selector}${acc}` : `${selector} { 
+ ${acc} 
  }`;
-      }).with({ type: "at-rule" }, (cond2) => {
-        const selector = cond2.rawValue ?? cond2.raw;
-        const { css: css4 } = (0, import_core2.toCss)(varsObj);
-        return `${selector} { 
- ${root} { 
- ${css4}; 
- } 
+          }).with({ type: "at-rule" }, (cond2) => {
+            selector = cond2?.rawValue ?? cond2?.raw;
+            return `${selector} { 
+ ${acc} 
  }`;
-      }).with(import_ts_pattern5.P.nullish, () => {
-      }).otherwise((cond2) => {
-        if (cond2) {
-          throw new Error(getConditionMessage(cond2.raw));
-        }
-      });
-      if (css3) {
-        results.push(css3);
+          }).otherwise((cond2) => {
+            if (!cond2)
+              return acc;
+            throw new Error(getConditionMessage(cond2.raw));
+          });
+        },
+        allAtRules ? `${root} { 
+ ${css3}  
+}` : css3
+      );
+      if (result) {
+        results.push(result);
       }
     }
   }
   const css2 = results.join("\n\n") + "\n\n";
-  return `@layer tokens {
+  return (0, import_core2.prettifyCss)(`@layer tokens {
     ${css2}
   }
-  `;
+  `);
 }
 
 // src/generators/token-dts.ts

package/dist/index.mjs

@@ -1077,13 +1077,13 @@ function generateReset() {
 }
 
 // src/generators/token-css.ts
-import { toCss, toKeyframeCss } from "@pandacss/core";
+import { prettifyCss, toCss, toKeyframeCss } from "@pandacss/core";
 import { outdent as outdent18 } from "outdent";
-import { match as match5, P } from "ts-pattern";
+import { match as match5 } from "ts-pattern";
 function generateKeyframes(keyframes) {
-  if (keyframes) {
-    return toKeyframeCss(keyframes);
-  }
+  if (!keyframes)
+    return;
+  return toKeyframeCss(keyframes);
 }
 var getConditionMessage = (value) => outdent18`
 It seems you provided an invalid condition for semantic tokens.
@@ -1105,37 +1105,44 @@ function generateTokenCss(ctx, varRoot) {
       const { css: css3 } = toCss({ [root]: varsObj });
       results.push(css3);
     } else {
-      const cond = conditions.normalize(key);
-      const css3 = match5(cond).with({ type: "parent-nesting" }, (cond2) => {
-        const selector = cond2.value.replace(/\s&/g, "");
-        const { css: css4 } = toCss(varsObj);
-        return `${selector} {
- ${css4}; 
+      const keys = key.split(":");
+      const { css: css3 } = toCss(varsObj);
+      const sorted = conditions.sort(keys);
+      const allAtRules = sorted.every(({ type }) => type === "at-rule");
+      const result = sorted.reduce(
+        (acc, cond, index, conds) => {
+          let selector;
+          return match5(cond).with({ type: "parent-nesting" }, (cond2) => {
+            selector = cond2.value.replace(/\s&/g, "");
+            const merge = conds[index - 1]?.type === "parent-nesting";
+            return merge ? `${selector}${acc}` : `${selector} { 
+ ${acc} 
  }`;
-      }).with({ type: "at-rule" }, (cond2) => {
-        const selector = cond2.rawValue ?? cond2.raw;
-        const { css: css4 } = toCss(varsObj);
-        return `${selector} { 
- ${root} { 
- ${css4}; 
- } 
+          }).with({ type: "at-rule" }, (cond2) => {
+            selector = cond2?.rawValue ?? cond2?.raw;
+            return `${selector} { 
+ ${acc} 
  }`;
-      }).with(P.nullish, () => {
-      }).otherwise((cond2) => {
-        if (cond2) {
-          throw new Error(getConditionMessage(cond2.raw));
-        }
-      });
-      if (css3) {
-        results.push(css3);
+          }).otherwise((cond2) => {
+            if (!cond2)
+              return acc;
+            throw new Error(getConditionMessage(cond2.raw));
+          });
+        },
+        allAtRules ? `${root} { 
+ ${css3}  
+}` : css3
+      );
+      if (result) {
+        results.push(result);
       }
     }
   }
   const css2 = results.join("\n\n") + "\n\n";
-  return `@layer tokens {
+  return prettifyCss(`@layer tokens {
     ${css2}
   }
-  `;
+  `);
 }
 
 // src/generators/token-dts.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20221125165251",
+  "version": "0.0.0-dev-20221126091729",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,15 +30,15 @@
     "telejson": "6.0.8",
     "ts-pattern": "4.0.6",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20221125165251",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20221125165251",
-    "@pandacss/error": "0.0.0-dev-20221125165251",
-    "@pandacss/parser": "0.0.0-dev-20221125165251",
-    "@pandacss/shared": "0.0.0-dev-20221125165251",
-    "@pandacss/token-dictionary": "0.0.0-dev-20221125165251",
-    "@pandacss/logger": "0.0.0-dev-20221125165251",
-    "@pandacss/core": "0.0.0-dev-20221125165251",
-    "@pandacss/config": "0.0.0-dev-20221125165251"
+    "@pandacss/types": "0.0.0-dev-20221126091729",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20221126091729",
+    "@pandacss/error": "0.0.0-dev-20221126091729",
+    "@pandacss/parser": "0.0.0-dev-20221126091729",
+    "@pandacss/shared": "0.0.0-dev-20221126091729",
+    "@pandacss/token-dictionary": "0.0.0-dev-20221126091729",
+    "@pandacss/logger": "0.0.0-dev-20221126091729",
+    "@pandacss/core": "0.0.0-dev-20221126091729",
+    "@pandacss/config": "0.0.0-dev-20221126091729"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.13",
@@ -46,7 +46,7 @@
     "@types/glob-parent": "^5.1.1",
     "@types/pluralize": "0.0.29",
     "@types/lodash.merge": "4.6.7",
-    "@pandacss/fixture": "0.0.0-dev-20221125165251"
+    "@pandacss/fixture": "0.0.0-dev-20221126091729"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",