feat: first-class design system support#3536
Closed
Adebesin-Cell wants to merge 63 commits into
Closed
Conversation
🦋 Changeset detectedLatest commit: 2f45540 The changes in this PR will be included in the next version bump. This PR includes changesets to release 24 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Adebesin-Cell is attempting to deploy a commit to the Chakra UI Team on Vercel. A member of the Team first needs to authorize it. |
11 tasks
Implements `readLibManifest` in `@pandacss/node` with full TDD coverage. Resolves `<pkg>/panda.lib.json` via Node module resolution, parses JSON, and validates the LibManifest shape — throwing descriptive errors for unresolvable packages, missing exports, malformed JSON, missing fields, and wrong field types.
Relocate `readLibManifest` (and its tests + fixtures) from `@pandacss/node` to `@pandacss/config` so that the upcoming `getResolvedConfig` in config can call the reader without inverting the package dependency direction. `@pandacss/node` re-exports the symbol from `@pandacss/config` to keep the existing public surface intact.
Read the manifest via readLibManifest, resolve and bundle the preset, prepend it to the consumer's preset stack, and concatenate the manifest's importMap into the consumer's importMap.
When `config.designSystem` is set, PandaContext now reads the lib manifest, resolves the buildinfo path, and calls `encoder.fromJSON()` to pre-populate the encoder with the library's extracted hashes. Failures (missing file, malformed JSON) warn and return without throwing.
Wrap readLibManifest in try/catch so an uninstalled or misconfigured designSystem package warns gracefully instead of escaping the constructor. Also replace `cwd as string` cast with nullish coalesce and `parsed as any` with the precise `EncoderJson` type.
…nSystem path
When the manifest's preset file only has named exports (no default),
bundleNRequire returns the whole module object (e.g. { leafPreset: ... }).
Add extractPresetFromModule() to detect this and pick the first value
that looks like a Preset, so the full depth-3 preset chain resolves.
Replace the four manual knobs (presets import, importMap, buildinfo in include) with a single designSystem: '@v2-ds-fixture/lib-leaf' field, validating the new API produces identical CSS output.
adds sandbox/v2-ds-example with three packages (styled-system, lib, app) demonstrating the designSystem config key, token override semantics, manifest format, and buildinfo travel.
When config.libraryMode === true, skip hydrateDesignSystemEncoder so the lib's buildinfo only contains its own hashes, not upstream's.
….json export is gated
Adds optional `presetExport?: string` to the `LibManifest` interface, validates its type in the manifest reader, and covers the new field with 3 tests (reads when present, undefined when omitted, throws on wrong type).
…e 3c - Export `bundle` from `@pandacss/config` index - Add `presetExport?` field to `WriteLibManifestOptions`; thread it into the manifest JSON with conditional spread (omitted when undefined) - Add `findLibPresetName` helper to filter out panda built-ins from `ctx.config.presets` - Add `detectPresetExport` helper that bundles the preset file and matches exports by `name` - `buildLib` calls both helpers and passes `presetExport` to `writeLibManifest` - 2 new manifest-writer tests (writes/omits `presetExport`) + 1 new lib-build test
- Add logger.warn in detectPresetExport catch block so misconfigured preset paths surface a diagnostic instead of silently omitting presetExport - Expand findLibPresetName comment to explain the reverse-walk convention and its edge case - Add test covering module.exports (default-export) preset detection path
…port The preset path (default '../preset.ts') is manifest-relative, meaning it should be resolved from <cwd>/<outdir>/ where panda.lib.json lives. The previous code resolved it from cwd directly, so '../preset.ts' with cwd='lib/' would incorrectly resolve to 'packages/preset.ts' instead of 'lib/preset.ts'. Now resolves manifest-relative first, falling back to cwd-relative for backwards compatibility.
Source files for the depth-3 chain regression test (lib → lib-mid → lib-leaf → app). Each lib has its own preset, panda.config.ts, and src/. App consumes leaf via designSystem. Pairs with already-committed dist artifacts (panda.lib.json, panda.buildinfo.json) to make the fixture self-contained for fresh checkouts.
smart-include fixture's no-manifest-pkg/package.json was extended. Lockfile reflects sandbox/v2-ds-example/charts.
Trimmed verbose JSDoc and inline comments that described WHAT the code does (the code already says it). Kept short comments only where the WHY is non-obvious (bundle-n-require quirks, exports-field workarounds, manifest relativity). Public LibManifest type keeps one-line JSDoc per field for IDE hover usefulness.
panda lib output (dist/panda.{buildinfo,lib}.json) and codegen output
under packages/styled-system are reproducible from source. removing
them from git keeps PR review focused on the actual changes.
reviewers can regenerate locally:
- pnpm install
- pnpm panda lib in each lib package
- pnpm panda in the consumer app
the sandbox/v2-ds-example/packages/charts/dist/index.js stays — it
simulates a non-panda external lib for the smart-include glob demo.
Adebesin-Cell
force-pushed
the
v2-first-class-design-system
branch
from
25a60cb to
a960601
Compare
Manifest's preset field used to point at the source TypeScript (../preset.ts). That worked in workspace setups where source ships alongside dist, but for a real npm-published lib that only includes dist/ in its files array, the consumer's bundle() couldn't resolve the preset. panda lib now compiles preset.ts to dist/preset.mjs via esbuild (packages: 'external', so npm imports stay external and only relative paths get inlined). The manifest references ./preset.mjs and the generated package.json exports map ./preset → ./dist/preset.mjs. If preset.ts isn't present, the manifest falls back to the user- supplied preset path with a warning — keeps existing tests that don't ship a preset source happy.
Adebesin-Cell
force-pushed
the
v2-first-class-design-system
branch
2 times, most recently
from
d558892 to
2f45540
Compare
Author
Adebesin-Cell
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
superseded by #3537. closing in favor of the unified PR.
#3537 contains all of this branch's commits plus follow-ups:
designSystemworking at every level of a chain (not just terminal consumers), and a code audit pass. closing here so reviewers don't double-comment on overlapping content.