@pandacss/node 0.0.0-dev-20221129125035 → 0.0.0-dev-20221130100047

package/dist/index.d.ts

@@ -141,8 +141,14 @@ declare function emitArtifacts(ctx: PandaContext): Promise<string>;
 declare function emitAndExtract(ctx: PandaContext): Promise<void>;
 
 declare class Builder {
+    /**
+     * Map of file path to modified time
+     */
     fileModifiedMap: Map<string, number>;
-    fileMap: Map<string, string>;
+    /**
+     * Map of file path to css
+     */
+    fileCssMap: Map<string, string>;
     context: PandaContext | undefined;
     configChanged: boolean;
     updateFile(file: string, css: string): void;

package/dist/index.js

@@ -454,6 +454,7 @@ var import_outdent8 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 function generate(name, pattern, jsxFactory) {
   const upperName = (0, import_shared3.capitalize)(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -461,18 +462,18 @@ function generate(name, pattern, jsxFactory) {
     js: import_outdent8.outdent`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${(0, import_shared3.dashCase)(name)}'
+    import { ${upperFn} } from '../patterns/${(0, import_shared3.dashCase)(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${(0, import_ts_pattern.match)(keys.length).with(
       0,
-      () => `
+      () => import_outdent8.outdent`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => `
+      () => import_outdent8.outdent`
         const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = config.transform({${keys.join(", ")}})
+        const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
@@ -640,6 +641,7 @@ var import_outdent11 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generate2(name, pattern, jsxFactory) {
   const upperName = (0, import_shared5.capitalize)(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -647,18 +649,18 @@ function generate2(name, pattern, jsxFactory) {
     js: import_outdent11.outdent`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${(0, import_shared5.dashCase)(name)}'
+    import { ${upperFn} } from '../patterns/${(0, import_shared5.dashCase)(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${(0, import_ts_pattern2.match)(keys.length).with(
       0,
-      () => `
+      () => import_outdent11.outdent`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => `
+      () => import_outdent11.outdent`
         const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = config.transform({${keys.join(", ")}})
+        const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
@@ -666,7 +668,7 @@ function generate2(name, pattern, jsxFactory) {
     })    
     `,
     dts: import_outdent11.outdent`
-    import { ComponentProps, ElementType, PropsWithChildren } from 'react'
+    import { ComponentProps, ElementType } from 'react'
     import { ${upperName}Properties } from '../patterns/${(0, import_shared5.dashCase)(name)}'
     import { JSXStyleProperties, Assign } from '../types'
     
@@ -811,6 +813,7 @@ var import_outdent14 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generate3(name, pattern, jsxFactory) {
   const upperName = (0, import_shared7.capitalize)(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -818,18 +821,18 @@ function generate3(name, pattern, jsxFactory) {
     js: import_outdent14.outdent`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${(0, import_shared7.dashCase)(name)}'
+    import { ${upperFn} } from '../patterns/${(0, import_shared7.dashCase)(name)}'
 
     export function ${jsxName}(props) {
       ${(0, import_ts_pattern3.match)(keys.length).with(
       0,
-      () => `
+      () => import_outdent14.outdent`
           return <${jsxFactory}.div {...props} />
         `
     ).otherwise(
-      () => `
+      () => import_outdent14.outdent`
           const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
-          const styleProps = config.transform(patternProps)
+          const styleProps = ${upperFn}(patternProps)
           return <${jsxFactory}.div {...styleProps} {...restProps} />
         `
     )}
@@ -891,6 +894,8 @@ var import_telejson = require("telejson");
 var import_ts_pattern4 = require("ts-pattern");
 function generate4(name, pattern) {
   const { properties, transform, strict, description } = pattern;
+  const upperName = (0, import_shared8.capitalize)(name);
+  const upperFn = `get${upperName}Style`;
   return {
     name: (0, import_shared8.dashCase)(name),
     dts: import_outdent15.outdent`
@@ -916,11 +921,11 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? import_outdent15.outdent`export declare function ${name}(options: ${(0, import_shared8.capitalize)(name)}Properties): string` : import_outdent15.outdent`
+    ${strict ? import_outdent15.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent15.outdent`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
 
         ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(options: Merge<${(0, import_shared8.capitalize)(name)}Properties>): string
+        export declare function ${name}(options: Merge<${upperName}Properties>): string
         `}
 
    `,
@@ -928,9 +933,11 @@ function generate4(name, pattern) {
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
-  export const config = ${(0, import_telejson.stringify)({ transform })}
+  const config = ${(0, import_telejson.stringify)({ transform })}
 
-  export const ${name} = (styles) => css(config.transform(styles, { map: mapObject }))
+  export const ${upperFn} = (styles) => config.transform(styles, { map: mapObject })
+
+  export const ${name} = (styles) => css(${upperFn}(styles))
   `.replace(/"_function_([^|]*)\|(.*)"/, "$2").replace(/\\"/g, '"').replace("return", "; return").replace(";;", ";")
   };
 }
@@ -1922,7 +1929,7 @@ function createContext(conf, io = fileSystem) {
     };
   }
   function extract(fn) {
-    return Promise.all(files.map(fn));
+    return Promise.all(getFiles().map(fn));
   }
   return {
     ...config,
@@ -2036,15 +2043,16 @@ function getConfigHash() {
   }
   return (0, import_shared12.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
 }
+var setupCount = 0;
 var Builder = class {
   fileModifiedMap = /* @__PURE__ */ new Map();
-  fileMap = /* @__PURE__ */ new Map();
+  fileCssMap = /* @__PURE__ */ new Map();
   context;
   configChanged = true;
   updateFile(file, css2) {
-    const oldCss = this.fileMap?.get(file) ?? "";
+    const oldCss = this.fileCssMap?.get(file) ?? "";
     const newCss = (0, import_core4.discardDuplicate)(oldCss + css2);
-    this.fileMap?.set(file, newCss);
+    this.fileCssMap?.set(file, newCss);
   }
   async setup() {
     const configHash = getConfigHash();
@@ -2052,16 +2060,19 @@ var Builder = class {
     if (cachedContext) {
       cachedContext.reloadSourceFiles();
       this.context = cachedContext;
-      this.fileMap = builderCache.get(cachedContext).fileMap;
+      this.fileCssMap = builderCache.get(cachedContext).fileCssMap;
       this.fileModifiedMap = builderCache.get(cachedContext).fileModifiedMap;
     } else {
       this.context = await loadConfigAndCreateContext();
-      emitArtifacts(this.context);
-      this.fileMap = /* @__PURE__ */ new Map([["base.css", getBaseCss(this.context)]]);
+      if (setupCount > 0) {
+        emitArtifacts(this.context);
+      }
+      this.fileCssMap = /* @__PURE__ */ new Map([["base.css", getBaseCss(this.context)]]);
       this.fileModifiedMap = /* @__PURE__ */ new Map();
       contextCache.set(configHash, this.context);
-      builderCache.set(this.context, { fileMap: this.fileMap, fileModifiedMap: this.fileModifiedMap });
+      builderCache.set(this.context, { fileCssMap: this.fileCssMap, fileModifiedMap: this.fileModifiedMap });
     }
+    setupCount++;
   }
   ensure() {
     if (!this.context)
@@ -2086,12 +2097,15 @@ var Builder = class {
     done();
   }
   toString() {
-    return Array.from(this.fileMap.values()).join("");
+    return Array.from(this.fileCssMap.values()).join("");
   }
   write(root) {
-    const prev = root.toString();
+    const rootCssContent = root.toString();
     root.removeAll();
-    const css2 = (0, import_core4.discardDuplicate)(prev + this.toString());
+    const css2 = (0, import_core4.discardDuplicate)(`
+    ${rootCssContent}
+    ${this.toString()}
+    `);
     root.append(css2);
   }
   registerDependency(fn) {

package/dist/index.mjs

@@ -409,6 +409,7 @@ import { outdent as outdent8 } from "outdent";
 import { match } from "ts-pattern";
 function generate(name, pattern, jsxFactory) {
   const upperName = capitalize2(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -416,18 +417,18 @@ function generate(name, pattern, jsxFactory) {
     js: outdent8`
     import { forwardRef } from 'preact/compat'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${dashCase(name)}'
+    import { ${upperFn} } from '../patterns/${dashCase(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${match(keys.length).with(
       0,
-      () => `
+      () => outdent8`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => `
+      () => outdent8`
         const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = config.transform({${keys.join(", ")}})
+        const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
@@ -595,6 +596,7 @@ import { outdent as outdent11 } from "outdent";
 import { match as match2 } from "ts-pattern";
 function generate2(name, pattern, jsxFactory) {
   const upperName = capitalize4(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -602,18 +604,18 @@ function generate2(name, pattern, jsxFactory) {
     js: outdent11`
     import { forwardRef } from 'react'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${dashCase2(name)}'
+    import { ${upperFn} } from '../patterns/${dashCase2(name)}'
 
     export const ${jsxName} = forwardRef(function ${jsxName}(props, ref) {
       ${match2(keys.length).with(
       0,
-      () => `
+      () => outdent11`
           return <${jsxFactory}.div ref={ref} {...props} />
         `
     ).otherwise(
-      () => `
+      () => outdent11`
         const { ${keys.join(", ")}, ...restProps } = props
-        const styleProps = config.transform({${keys.join(", ")}})
+        const styleProps = ${upperFn}({${keys.join(", ")}})
         return <${jsxFactory}.div ref={ref} {...styleProps} {...restProps} />
         `
     )}
@@ -621,7 +623,7 @@ function generate2(name, pattern, jsxFactory) {
     })    
     `,
     dts: outdent11`
-    import { ComponentProps, ElementType, PropsWithChildren } from 'react'
+    import { ComponentProps, ElementType } from 'react'
     import { ${upperName}Properties } from '../patterns/${dashCase2(name)}'
     import { JSXStyleProperties, Assign } from '../types'
     
@@ -766,6 +768,7 @@ import { outdent as outdent14 } from "outdent";
 import { match as match3 } from "ts-pattern";
 function generate3(name, pattern, jsxFactory) {
   const upperName = capitalize6(name);
+  const upperFn = `get${upperName}Style`;
   const jsxName = pattern.jsx ?? upperName;
   const keys = Object.keys(pattern.properties ?? {});
   return {
@@ -773,18 +776,18 @@ function generate3(name, pattern, jsxFactory) {
     js: outdent14`
     import { splitProps } from 'solid-js'
     import { ${jsxFactory} } from './factory'
-    import { config } from '../patterns/${dashCase3(name)}'
+    import { ${upperFn} } from '../patterns/${dashCase3(name)}'
 
     export function ${jsxName}(props) {
       ${match3(keys.length).with(
       0,
-      () => `
+      () => outdent14`
           return <${jsxFactory}.div {...props} />
         `
     ).otherwise(
-      () => `
+      () => outdent14`
           const [patternProps, restProps] = splitProps(props, [${keys.map((v) => JSON.stringify(v)).join(", ")}]);
-          const styleProps = config.transform(patternProps)
+          const styleProps = ${upperFn}(patternProps)
           return <${jsxFactory}.div {...styleProps} {...restProps} />
         `
     )}
@@ -846,6 +849,8 @@ import { stringify as stringify2 } from "telejson";
 import { match as match4 } from "ts-pattern";
 function generate4(name, pattern) {
   const { properties, transform, strict, description } = pattern;
+  const upperName = capitalize7(name);
+  const upperFn = `get${upperName}Style`;
   return {
     name: dashCase4(name),
     dts: outdent15`
@@ -871,11 +876,11 @@ function generate4(name, pattern) {
     }).join("\n	")}
     }
 
-    ${strict ? outdent15`export declare function ${name}(options: ${capitalize7(name)}Properties): string` : outdent15`
+    ${strict ? outdent15`export declare function ${name}(options: ${upperName}Properties): string` : outdent15`
         type Merge<T> = Omit<SystemStyleObject, keyof T> & T
 
         ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(options: Merge<${capitalize7(name)}Properties>): string
+        export declare function ${name}(options: Merge<${upperName}Properties>): string
         `}
 
    `,
@@ -883,9 +888,11 @@ function generate4(name, pattern) {
   import { mapObject } from "../helpers"
   import { css } from "../css"
 
-  export const config = ${stringify2({ transform })}
+  const config = ${stringify2({ transform })}
 
-  export const ${name} = (styles) => css(config.transform(styles, { map: mapObject }))
+  export const ${upperFn} = (styles) => config.transform(styles, { map: mapObject })
+
+  export const ${name} = (styles) => css(${upperFn}(styles))
   `.replace(/"_function_([^|]*)\|(.*)"/, "$2").replace(/\\"/g, '"').replace("return", "; return").replace(";;", ";")
   };
 }
@@ -1883,7 +1890,7 @@ function createContext(conf, io = fileSystem) {
     };
   }
   function extract(fn) {
-    return Promise.all(files.map(fn));
+    return Promise.all(getFiles().map(fn));
   }
   return {
     ...config,
@@ -1997,15 +2004,16 @@ function getConfigHash() {
   }
   return toHash(readFileSync5(file, "utf-8"));
 }
+var setupCount = 0;
 var Builder = class {
   fileModifiedMap = /* @__PURE__ */ new Map();
-  fileMap = /* @__PURE__ */ new Map();
+  fileCssMap = /* @__PURE__ */ new Map();
   context;
   configChanged = true;
   updateFile(file, css2) {
-    const oldCss = this.fileMap?.get(file) ?? "";
+    const oldCss = this.fileCssMap?.get(file) ?? "";
     const newCss = discardDuplicate2(oldCss + css2);
-    this.fileMap?.set(file, newCss);
+    this.fileCssMap?.set(file, newCss);
   }
   async setup() {
     const configHash = getConfigHash();
@@ -2013,16 +2021,19 @@ var Builder = class {
     if (cachedContext) {
       cachedContext.reloadSourceFiles();
       this.context = cachedContext;
-      this.fileMap = builderCache.get(cachedContext).fileMap;
+      this.fileCssMap = builderCache.get(cachedContext).fileCssMap;
       this.fileModifiedMap = builderCache.get(cachedContext).fileModifiedMap;
     } else {
       this.context = await loadConfigAndCreateContext();
-      emitArtifacts(this.context);
-      this.fileMap = /* @__PURE__ */ new Map([["base.css", getBaseCss(this.context)]]);
+      if (setupCount > 0) {
+        emitArtifacts(this.context);
+      }
+      this.fileCssMap = /* @__PURE__ */ new Map([["base.css", getBaseCss(this.context)]]);
       this.fileModifiedMap = /* @__PURE__ */ new Map();
       contextCache.set(configHash, this.context);
-      builderCache.set(this.context, { fileMap: this.fileMap, fileModifiedMap: this.fileModifiedMap });
+      builderCache.set(this.context, { fileCssMap: this.fileCssMap, fileModifiedMap: this.fileModifiedMap });
     }
+    setupCount++;
   }
   ensure() {
     if (!this.context)
@@ -2047,12 +2058,15 @@ var Builder = class {
     done();
   }
   toString() {
-    return Array.from(this.fileMap.values()).join("");
+    return Array.from(this.fileCssMap.values()).join("");
   }
   write(root) {
-    const prev = root.toString();
+    const rootCssContent = root.toString();
     root.removeAll();
-    const css2 = discardDuplicate2(prev + this.toString());
+    const css2 = discardDuplicate2(`
+    ${rootCssContent}
+    ${this.toString()}
+    `);
     root.append(css2);
   }
   registerDependency(fn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/node",
-  "version": "0.0.0-dev-20221129125035",
+  "version": "0.0.0-dev-20221130100047",
   "description": "The core css panda library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,7 +16,7 @@
   "dependencies": {
     "chokidar": "^3.5.3",
     "fast-glob": "^3.2.11",
-    "fs-extra": "10.1.0",
+    "fs-extra": "11.0.0",
     "is-glob": "^4.0.3",
     "glob-parent": "^6.0.2",
     "hookable": "5.4.2",
@@ -30,15 +30,15 @@
     "telejson": "7.0.3",
     "ts-pattern": "4.0.6",
     "ts-morph": "17.0.1",
-    "@pandacss/types": "0.0.0-dev-20221129125035",
-    "@pandacss/is-valid-prop": "0.0.0-dev-20221129125035",
-    "@pandacss/error": "0.0.0-dev-20221129125035",
-    "@pandacss/parser": "0.0.0-dev-20221129125035",
-    "@pandacss/shared": "0.0.0-dev-20221129125035",
-    "@pandacss/token-dictionary": "0.0.0-dev-20221129125035",
-    "@pandacss/logger": "0.0.0-dev-20221129125035",
-    "@pandacss/core": "0.0.0-dev-20221129125035",
-    "@pandacss/config": "0.0.0-dev-20221129125035"
+    "@pandacss/types": "0.0.0-dev-20221130100047",
+    "@pandacss/is-valid-prop": "0.0.0-dev-20221130100047",
+    "@pandacss/error": "0.0.0-dev-20221130100047",
+    "@pandacss/parser": "0.0.0-dev-20221130100047",
+    "@pandacss/shared": "0.0.0-dev-20221130100047",
+    "@pandacss/token-dictionary": "0.0.0-dev-20221130100047",
+    "@pandacss/logger": "0.0.0-dev-20221130100047",
+    "@pandacss/core": "0.0.0-dev-20221130100047",
+    "@pandacss/config": "0.0.0-dev-20221130100047"
   },
   "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-20221129125035"
+    "@pandacss/fixture": "0.0.0-dev-20221130100047"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=cjs,esm --shims --dts",