Configuring Packages

GithubNext

This lesson covers how to configure each package in a monorepo to use a shared Panda preset, which serves as the source of truth for design tokens.

Install Panda Into All Packages

The first step is to install Panda css into all the packages using the command pnpm add -w @pandacss/dev.

Create the Preset Package

Setup Preset Folder. This is the package that stores the design system theme - that is all your tokens, text styles, layers styles and more.
Initialize package by running pnpm init to create a package.json file.
Make edits to package.json. Set name to @mono/preset and set main to src/index.ts.
Create the src/index.ts file . Within this file, use definePreset to set up design tokens, text styles, and layer styles.

Create the Styled System Package

Create a new folder within packages called styled-system.
Initialize package by running pnpm init to create a package.json file.
Make edits to package.json. Set name to @mono/styled-system.
Generate Code: Run pnpm panda init --outdir=dist to generate the dist folder and pnpm panda emit-pkg --base=dist to update package.json.
Add a prepare script: "prepare": "panda codegen --clean" and a dev script: "dev": "panda codegen --watch".
Add @mono/preset to dependencies: "@mono/preset": "workspace:\*".
Update Panda Config to include presets and outdir.

Use Styled-System in the App

Setup App Package
- Run pnpm panda init --postcss --no-codegen.
Replace outdir directory in panda.config with importMap

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  importMap: '@mono/styled-system',
})

This tells panda where the styled-system is coming from.

Add @mono/styled-system as a dependency:

 "dependencies": {
    "@mono/styled-system": "workspace:*"
  },

Test Setup