fix(build): re-link component stylesheets so consumers can load them - #1
Merged
Conversation
0.1.0-alpha.0 shipped every component unstyled. In library mode Rollup strips `import "./Button.css"` out of the chunk and leaves an "empty css" marker, because an application build would have injected a link tag instead. Nothing put the import back, so all 20 component stylesheets were packed under `dist/assets/` with no chunk importing them and no exports entry naming them. A consumer had no supported way to load them at all: `assets/*` is not in the exports map, so a deep import fails with ERR_PACKAGE_PATH_NOT_EXPORTED, and `styles/base.css` carries only the 113 tokens. Measured against the install fixture: the published tarball produces a 4.52 kB consumer bundle (tokens only) where this build produces 21.06 kB. `linkComponentStyles` re-attaches each emitted stylesheet to the chunk whose module imported it, which is what makes README's "component CSS travels with the component" true and leaves every call site unchanged. It reads the module graph rather than pairing `Button.css` with `Button.tsx` by filename, since that convention holds for every component today and would break silently on the first one that departs from it. Imports are appended, not prepended: ES modules hoist them, so execution order is unchanged while existing lines keep their positions and the sourcemap stays accurate. Both existing checks were green throughout the defect, because each asked only whether advertised paths resolve, never whether a shipped file was reachable. Two guards close that: - `check:pack` now fails on a packed stylesheet that no module imports and no exports entry names. Against the alpha.0 build it reports all 20. - CI asserts the fixture's own bundle carries the rules, using markers read out of the packed stylesheet so a class rename is not a false failure. Against the published tarball it fails on Button and Drawer, one per import shape.
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
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.
What
@lablup/ui-common@0.1.0-alpha.0ships every component unstyled, and a consumer has no supported way to fix it. This re-links the stylesheets and adds the two guards that would have caught it.The defect
In library mode Rollup strips
import "./Button.css"out of the chunk and leaves an "empty css" marker, because an application build would have injected a link tag instead. Nothing puts the import back, so the published tarball carries:dist/assets/.cssreferences in any emitted.jsexportsentry namingassets/*, soimport "@lablup/ui-common/assets/components/Button/Button.css"fails withERR_PACKAGE_PATH_NOT_EXPORTEDstyles/base.cssis only the 113 tokens, so importing it does not compensate. Measured against the install fixture, the published tarball produces a 4.52 kB consumer CSS bundle where this build produces 21.06 kB.This blocks Backend.AI GO's migration onto the packages (backend.ai-go#4033 Phase 4): moving a call site to the package would silently drop that component's styling, and neither
pnpm buildnor CI would notice.The fix
linkComponentStylesinvite.config.tsre-attaches each emitted stylesheet to the chunk whose module imported it. Call sites are unchanged, and README's "component CSS travels with the component" becomes true.Two details worth review:
getModuleInfo().importedIds), not filenames. PairingButton.csswithButton.tsxby name agrees on every component today and would break silently on the first one that departs from the convention. The stripped import is gone fromchunk.moduleIds, but the edge survives in the graph.The guards
Both existing checks were green across the whole defect, because each asked only whether advertised paths resolve, never whether a shipped file is reachable.
check:packreachabilitycheck-fixture-styles.mjsin CIThe fixture markers are read out of the packed stylesheet rather than hardcoded, so renaming a class is not a false failure.
Verification
pnpm run verifygreenConsumer stylesheets present: Button, Drawer.check:packfails on all 20; with the published alpha.0 tarball installed the fixture check fails on both componentsRelease
Version bumped to
0.1.0-alpha.1. Publishing needs av0.1.0-alpha.1release, sincepublish.ymlasserts the tag matchespackage.json.lablup/ui-aihas the identical build configuration and the same defect (7 stylesheet imports insrc, no CSS export path). It needs the same change before Phase 4 reachesChatMessage.