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

package/dist/index.js

@@ -160,7 +160,7 @@ function generateConditions(ctx) {
 var import_outdent2 = require("outdent");
 var stringify = (v) => JSON.stringify(Object.fromEntries(v), null, 2);
 function generateCssFn(ctx) {
-  const { utility, hash } = ctx;
+  const { utility, hash, conditions } = ctx;
   const { separator } = utility;
   return {
     dts: import_outdent2.outdent`
@@ -172,7 +172,10 @@ function generateCssFn(ctx) {
     import { sortConditions, finalizeConditions } from "./conditions"
 
     const classNameMap = ${stringify(utility.entries())}
+    
     const shorthands = ${stringify(utility.shorthands)}
+    
+    const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
 
@@ -186,11 +189,17 @@ function generateCssFn(ctx) {
     }
 
     const context = {
-      transform,
-      conditions: { shift: sortConditions, finalize: finalizeConditions },
       hash: ${hash ? "true" : "false"},
-      hasShorthand,
-      resolveShorthand,
+      conditions: {
+        shift: sortConditions,
+        finalize: finalizeConditions,
+        breakpoints: { keys: breakpointKeys }
+      },
+      utility: {
+        transform,
+        hasShorthand,
+        resolveShorthand,
+      }
     }
 
     export const css = createCss(context)
@@ -987,7 +996,13 @@ function generateRecipes(ctx) {
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
       
-      const context = ${hash ? "{ transform, hash: true }" : "{ transform }"}
+      const context = {
+        hash: ${hash ? "true" : "false"},
+        utility: {
+          transform,
+        }
+      }
+      
       const css = createCss(context)
       
       return css({ [name]: '__ignore__' , ...styles })
@@ -1126,9 +1141,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 +1165,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
@@ -1638,18 +1660,10 @@ function createContext(conf, io = fileSystem) {
   );
   const context = () => ({
     root: import_postcss.default.root(),
-    breakpoints,
     conditions,
     hash,
     helpers,
-    utility,
-    hasShorthand: utility.hasShorthand,
-    resolveShorthand(prop) {
-      return utility.resolveShorthand(prop);
-    },
-    transform(prop, value) {
-      return utility.resolve(prop, value);
-    }
+    utility
   });
   const patternExclude = ["layoutGrid"];
   function getPattern(name) {

package/dist/index.mjs

@@ -115,7 +115,7 @@ function generateConditions(ctx) {
 import { outdent as outdent2 } from "outdent";
 var stringify = (v) => JSON.stringify(Object.fromEntries(v), null, 2);
 function generateCssFn(ctx) {
-  const { utility, hash } = ctx;
+  const { utility, hash, conditions } = ctx;
   const { separator } = utility;
   return {
     dts: outdent2`
@@ -127,7 +127,10 @@ function generateCssFn(ctx) {
     import { sortConditions, finalizeConditions } from "./conditions"
 
     const classNameMap = ${stringify(utility.entries())}
+    
     const shorthands = ${stringify(utility.shorthands)}
+    
+    const breakpointKeys = ${JSON.stringify(conditions.breakpoints.keys)}
 
     const hasShorthand = ${utility.hasShorthand ? "true" : "false"}
 
@@ -141,11 +144,17 @@ function generateCssFn(ctx) {
     }
 
     const context = {
-      transform,
-      conditions: { shift: sortConditions, finalize: finalizeConditions },
       hash: ${hash ? "true" : "false"},
-      hasShorthand,
-      resolveShorthand,
+      conditions: {
+        shift: sortConditions,
+        finalize: finalizeConditions,
+        breakpoints: { keys: breakpointKeys }
+      },
+      utility: {
+        transform,
+        hasShorthand,
+        resolveShorthand,
+      }
     }
 
     export const css = createCss(context)
@@ -942,7 +951,13 @@ function generateRecipes(ctx) {
          return { className: \`\${name}--\${prop}${separator}\${value}\` }
       }
       
-      const context = ${hash ? "{ transform, hash: true }" : "{ transform }"}
+      const context = {
+        hash: ${hash ? "true" : "false"},
+        utility: {
+          transform,
+        }
+      }
+      
       const css = createCss(context)
       
       return css({ [name]: '__ignore__' , ...styles })
@@ -1077,13 +1092,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 +1120,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
@@ -1599,18 +1621,10 @@ function createContext(conf, io = fileSystem) {
   );
   const context = () => ({
     root: postcss.root(),
-    breakpoints,
     conditions,
     hash,
     helpers,
-    utility,
-    hasShorthand: utility.hasShorthand,
-    resolveShorthand(prop) {
-      return utility.resolveShorthand(prop);
-    },
-    transform(prop, value) {
-      return utility.resolve(prop, value);
-    }
+    utility
   });
   const patternExclude = ["layoutGrid"];
   function getPattern(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20221125165251",
+  "version": "0.0.0-dev-20221126121755",
   "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-20221126121755",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20221126121755",
+    "@pandacss/error": "0.0.0-dev-20221126121755",
+    "@pandacss/parser": "0.0.0-dev-20221126121755",
+    "@pandacss/shared": "0.0.0-dev-20221126121755",
+    "@pandacss/token-dictionary": "0.0.0-dev-20221126121755",
+    "@pandacss/logger": "0.0.0-dev-20221126121755",
+    "@pandacss/core": "0.0.0-dev-20221126121755",
+    "@pandacss/config": "0.0.0-dev-20221126121755"
   },
   "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-20221126121755"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",