Stuck on how to make PandaCSS component library work with apps

[dugip]

To preface this, I have a monorepo setup with Yarn Workspaces and Turborepo.

What I'm using:

• React
• Vite (both app and component lib)

The folder structure looks something like this:

| - package.json
| - web
| -- package.json
| -- panda.config.ts
| - packages
| -- component-lib
| ---- package.json
| ---- panda.config.ts

I want web to consume component-lib, where component-lib contains shared components, Panda tokens, and global styles.

I have been following the "Include src files" part of this guide. I can't get it to work though and I get a blank white page when running my app.

In component-lib, this is how the panda config looks like:

import { defineConfig } from '@pandacss/dev';
import { tokens, globalCss } from './src/theme/panda';

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}'],

  // Files to exclude
  exclude: [],

  // Lib settings
  emitPackage: true,
  outdir: 'styled-system',
  jsxFramework: 'react',

  staticCss: {
    css: [
      {
        properties: {
          gap: ['*'],
          padding: ['*'],
        },
      },
    ],
  },

  theme: {
    tokens,
  },

  globalCss,
});

And this is what it looks like in web:

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  include: [
    '../node_modules/@myorg/component-lib/src/**/*.tsx',
    './components/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
  ],

  emitPackage: true,
  outdir: 'styled-system',
  jsxFramework: 'react',
});

My exports in package.json file for component lib looks like so:

  "exports": {
    ".": "./src/web/index.ts", // Barrel file with all exported components
    "./styled-system": "./styled-system/css/index.mjs"
  },

---

What I'm trying to achieve is that the component-lib becomes the source of truth for everything styling, and web simply consumes it. This would include global styles which I set up in the component-lib. I don't know what I'm missing to get this to work. The instructions in this guide: https://panda-css.com/docs/guides/component-library#include-the-src-files -- make no mention of CSS files, so I'm unsure how to wire things up exactly.

Any pointers on how to get this to work would be greatly appreciated.

[astahmer]

hey, we plan to revisit this part of the documentation

I wrote a tiny bit on this topic here https://www.astahmer.dev/posts/why-would-i-choose-panda-css#component-library
you can use this example as reference https://github.com/astahmer/panda-monorepo-setup/tree/main/module-resolution/with-import-map-package
you can probably find other examples in the Panda discord if you search for importMap (or maybe on github as well !)

[christofferbergj]

@astahmer

Thanks a ton for providing those examples. It helped a lot!