Publish UI Component on npm

[vitran12]

Hi everyone.

I'm using package.json + build tsc (include esm and cjs file ) + pandacss.

for the build panda css

    "build:esm": "tsc -b tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
    "build:cjs": "tsc -b tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
    "build:panda": "mkdir -p dist/styles && panda cssgen --outfile dist/styles/globals.css",
    "copy:styled-system": "copyfiles ./styled-system/**/*.{d.ts,js} ./styled-system/*.{d.ts,js} dist/",

Files globals.css just render a few config utilities when used to write build UI Component and write for example Storybook.
The example:

• Before building and using it in storybook:
  The neutral.light.2 and py="8" is working.

<Box bg="neutral.light.2" py="8"> Hello</Box>

• After building and applying the Package UI Component to another project.

The neutral.light.3 and py="9" not working because dist/styles/globals.css don't have class .py_9{ padding: var("--spacing-9") }.

<Box bg="neutral.light.3" py="9"> Hello</Box>

[astahmer]

can you make a minimal repro ?

[vitran12]

Hi @astahmer
You can check it on link respo
Or npm i yorkie-ui

[astahmer]

I see, thanks.
Panda works by generating a CSS file at build-time, if you expect <Box bg="neutral.light.3" py="9"> Hello</Box> to have the matching styles in your application, then you need Panda to in the application package as well so that it can extract the style usage with static analysis

your dist/styles/globals.css is generated from your component library at build-time, without any way to know that your consuming application (the one that installs yorkie-ui) will use bg="neutral.light.3" and py="9"

a few links that should help
https://panda-css.com/docs/guides/component-library#use-panda-as-external-package
https://github.com/astahmer/panda-monorepo-setup/tree/main/module-resolution/with-import-map-package
https://www.astahmer.dev/posts/why-would-i-choose-panda-css#component-library

---

btw I tried installing yorkie-ui and couldnt run it, you should probably use a bundler (like tsup) instead of tsc so that @pandacss/dev (and any other package in devDependencies) will be excluded from the JS in dist

[vitran12]

Thank you for your support quickly.