feat: improve monorepo setup dx

.changeset/mighty-bears-do.md

@@ -0,0 +1,17 @@
+---
+'@pandacss/core': minor
+'@pandacss/node': minor
+'@pandacss/dev': minor
+---
+
+Improve monorepo setup DX by exposing some cli flags
+
+### `panda init`
+
+- Added new flag `--no-codegen` to skip codegen during initialization
+- Added new flag `--outdir` to specify the output directory for generated files
+
+### `panda emit-pkg`
+
+- Added new `--base` flag to specify the base directory for the entrypoints in the generated `package.json#exports`
+  field

packages/cli/src/cli-main.ts

@@ -49,7 +49,9 @@ export async function main() {
     .option('--cwd <cwd>', 'Current working directory', { default: cwd })
     .option('--silent', 'Suppress all messages except errors')
     .option('--no-gitignore', "Don't update the .gitignore")
+    .option('--no-codegen', "Don't run the codegen logic")
     .option('--out-extension <ext>', "The extension of the generated js files (default: 'mjs')")
+    .option('--outdir <dir>', 'The output directory for the generated files')
     .option('--jsx-framework <framework>', 'The jsx framework to use')
     .option('--syntax <syntax>', 'The css syntax preference')
     .option('--strict-tokens', 'Using strictTokens: true')
@@ -62,6 +64,7 @@ export async function main() {
       }
 
       const flags = { ...initFlags, ...options }
+
       const { force, postcss, silent, gitignore, outExtension, jsxFramework, config: configPath, syntax } = flags
 
       const cwd = resolve(flags.cwd ?? '')
@@ -82,14 +85,22 @@ export async function main() {
 
       await setupConfig(cwd, { force, outExtension, jsxFramework, syntax })
 
-      const ctx = await loadConfigAndCreateContext({ cwd, configPath, config: { gitignore } })
-      const { msg, box } = await codegen(ctx)
+      const ctx = await loadConfigAndCreateContext({
+        cwd,
+        configPath,
+        config: compact({ gitignore, outdir: flags.outdir }),
+      })
 
       if (gitignore) {
         setupGitIgnore(ctx)
       }
 
-      logger.log(msg + box)
+      if (flags.codegen) {
+        const { msg, box } = await codegen(ctx)
+        logger.log(msg + box)
+      } else {
+        logger.log(ctx.initMessage())
+      }
 
       done()
 
@@ -479,10 +490,11 @@ export async function main() {
   cli
     .command('emit-pkg', 'Emit package.json with entrypoints')
     .option('--outdir <dir>', 'Output directory', { default: '.' })
+    .option('--base <source>', 'The base directory of the package.json entrypoints')
     .option('--silent', "Don't print any logs")
     .option('--cwd <cwd>', 'Current working directory', { default: cwd })
     .action(async (flags: EmitPackageCommandFlags) => {
-      const { outdir, silent } = flags
+      const { outdir, silent, base } = flags
 
       if (silent) {
         logger.level = 'silent'
@@ -500,10 +512,14 @@ export async function main() {
 
       const exports = [] as any[]
 
+      const createDir = (...dir: string[]) => {
+        return ['.', base, ...dir].filter(Boolean).join('/')
+      }
+
       const createEntry = (dir: string) => ({
-        types: ctx.file.extDts(`./${dir}/index`),
-        require: ctx.file.ext(`./${dir}/index`),
-        import: ctx.file.ext(`./${dir}/index`),
+        types: ctx.file.extDts(createDir(dir, 'index')),
+        require: ctx.file.ext(createDir(dir, 'index')),
+        import: ctx.file.ext(createDir(dir, 'index')),
       })
 
       exports.push(
@@ -528,6 +544,8 @@ export async function main() {
         exports.push(['./themes', createEntry('themes')])
       }
 
+      const stylesDir = createDir('styles.css')
+
       if (!exists) {
         //
         const content = {
@@ -539,7 +557,7 @@ export async function main() {
           license: 'ISC',
           exports: {
             ...Object.fromEntries(exports),
-            './styles.css': './styles.css',
+            './styles.css': stylesDir,
           },
           scripts: {
             prepare: 'panda codegen --clean',
@@ -554,7 +572,7 @@ export async function main() {
         content.exports = {
           ...content.exports,
           ...Object.fromEntries(exports),
-          './styles.css': './styles.css',
+          './styles.css': stylesDir,
         }
 
         await ctx.runtime.fs.writeFile(pkgPath, JSON.stringify(content, null, 2))

packages/cli/src/types.ts

@@ -1,13 +1,14 @@
 import type { Config } from '@pandacss/types'
 
 export interface InitCommandFlags
-  extends Pick<Config, 'jsxFramework' | 'syntax' | 'cwd' | 'poll' | 'watch' | 'gitignore' | 'outExtension'> {
+  extends Pick<Config, 'jsxFramework' | 'syntax' | 'cwd' | 'poll' | 'watch' | 'gitignore' | 'outExtension' | 'outdir'> {
   force?: boolean
   postcss?: boolean
   silent?: boolean
   interactive?: boolean
   config?: string
   logfile?: string
+  codegen?: boolean
 }
 
 export interface CssGenCommandFlags {
@@ -92,4 +93,5 @@ export interface EmitPackageCommandFlags {
   outdir: string
   silent?: boolean
   cwd: string
+  base?: string
 }

packages/core/src/messages.ts

@@ -98,6 +98,11 @@ export const buildComplete = (count: number) =>
   Successfully extracted css from ${count} file(s) ✨
   `
 
+const randomWords = ['Sweet', 'Divine', 'Pandalicious', 'Super']
+const pickRandom = (arr: string[]) => arr[Math.floor(Math.random() * arr.length)]
+
+export const exclamation = () => `🐼 ${pickRandom(randomWords)}! ✨`
+
 export const cssArtifactComplete = (type: string) => `Successfully generated ${type} css artifact ✨`
 
 export const getMessages = (
@@ -112,6 +117,7 @@ export const getMessages = (
   buildComplete,
   configWatch,
   cssArtifactComplete,
+  exclamation,
 })
 
 export type Messages = ReturnType<typeof getMessages>

packages/node/src/codegen.ts

@@ -1,11 +1,7 @@
 import type { ArtifactId } from '@pandacss/types'
 import pLimit from 'p-limit'
-import { createBox } from './cli-box'
 import type { PandaContext } from './create-context'
 
-const randomWords = ['Sweet', 'Divine', 'Pandalicious', 'Super']
-const pickRandom = (arr: string[]) => arr[Math.floor(Math.random() * arr.length)]
-
 const limit = pLimit(20)
 
 export async function codegen(ctx: PandaContext, ids?: ArtifactId[]) {
@@ -24,10 +20,7 @@ export async function codegen(ctx: PandaContext, ids?: ArtifactId[]) {
   await ctx.hooks['codegen:done']?.({ changed: ids })
 
   return {
-    box: createBox({
-      content: ctx.messages.codegenComplete(),
-      title: `🐼 ${pickRandom(randomWords)}! ✨`,
-    }),
+    box: ctx.initMessage(),
     msg: ctx.messages.artifactsGenerated(),
   }
 }

packages/node/src/create-context.ts

@@ -5,6 +5,7 @@ import { ParserResult, Project } from '@pandacss/parser'
 import { uniq } from '@pandacss/shared'
 import type { LoadConfigResult, Runtime, WatchOptions, WatcherEventType } from '@pandacss/types'
 import { debounce } from 'perfect-debounce'
+import { createBox } from './cli-box'
 import { DiffEngine } from './diff-engine'
 import { nodeRuntime } from './node-runtime'
 import { OutputEngine } from './output-engine'
@@ -50,6 +51,13 @@ export class PandaContext extends Generator {
     return this.runtime.fs.glob({ include: dependencies, cwd })
   }
 
+  initMessage = () => {
+    return createBox({
+      content: this.messages.codegenComplete(),
+      title: this.messages.exclamation(),
+    })
+  }
+
   getFiles = () => {
     const { include, exclude, cwd } = this.config
     return this.runtime.fs.glob({ include, exclude, cwd })