emitPackage supports monorepo package

[grapgrap]

ref: #791

Currently, emitPackage creates a file in the node_modules folder.

I can't use the node_modules folder because I have a monorepo and I'm using yarn berry.

If you can make it an internal package of the monorepo when i use panda with emitPackage.

I think that generally codebases using emitPackage are located in a monorepo.

If this assumption is correct, it seems that using Panda would provide consistency in terms of packaging.

[andrewdoro]

I am using yarn with Turborepo, and using the official approach has some drawbacks:

• emitPackage will create a module in each packages node_modules, not doing any symlink or hoist (this duplicates the runtime)
• lifecycle scripts like prepare don't run if you run yarn add -pkg in your packages

I've found a weird method of hacking this using Panda CLI. I'm pretty sure this approach is not really great but I'm not sure of alternatives. All the examples I've seen are using pnpm workspaces and the method described there doesn't work with TS auto-import because the generated package is not added to package.json.
@astahmer @segunadebayo

1. create /packages/panda-system
2. yarn add "@pandacss/dev"
3. create a panda.config.ts where you include the relative path of all your packages or apps that use panda

import { defineConfig } from '@pandacss/dev'
import preset from '@pandacss/preset-panda'
import presetPanda from 'panda-preset'

export default defineConfig({
  presets: [presetPanda, preset],

  // Whether to use css reset
  // preflight: true,

  // Where to look for your css declarations
  include: [
    '../../apps/frontend/pages/**/*.{js,jsx,ts,tsx}',
    '../../apps/frontend/containers/**/*.{js,jsx,ts,tsx}',
    '../../apps/frontend/components/**/*.{js,jsx,ts,tsx}',
    '../../apps/frontend/layouts/**/*.{js,jsx,ts,tsx}',

    '../../packages/panda-preset/src/**/*.tsx',
    '../../packages/plaace-storybook/src/**/*.{js,jsx,ts,tsx}',
    '../../packages/panda-preset/src/**/*.ts*',
  ],

  // Files to exclude
  exclude: [],

  // The output directory for your css system
  outdir: '.',
  jsxFramework: 'react',
})

4. change the package.json to include the generated files

  "exports": {
    "./css": {
      "types": "./css/index.d.ts",
      "require": "./css/index.mjs",
      "import": "./css/index.mjs"
    },
    "./jsx": {
      "types": "./jsx/index.d.ts",
      "require": "./jsx/index.mjs",
      "import": "./jsx/index.mjs"
    },
    "./patterns": {
      "types": "./patterns/index.d.ts",
      "require": "./patterns/index.mjs",
      "import": "./patterns/index.mjs"
    },
    "./recipes": {
      "types": "./recipes/index.d.ts",
      "require": "./recipes/index.mjs",
      "import": "./recipes/index.mjs"
    },
    "./tokens": {
      "types": "./tokens/index.d.ts",
      "require": "./tokens/index.mjs",
      "import": "./tokens/index.mjs"
    },
    "./types": {
      "types": "./types/index.d.ts"
    },
    "./styles.css": "./styles.css"
  },
  "license": "MIT",
  "scripts": {
    "codegen": "panda codegen",
    "build": "panda",
    "dev": "panda --watch"
  },

5. add your panda-system to each package.json that uses panda
   "panda-system": "*",
6. (optional) Add styles.css to the output of turbo.json

 "build": {
      "outputs": [".next/**", "!.next/cache/**", "styles.css"],
      "dependsOn": ["^build"]
    },