fix: re-export semantic-ui components through CSS wrapper modules#608
Open
LautaroPetaccio wants to merge 1 commit into
Open
fix: re-export semantic-ui components through CSS wrapper modules#608LautaroPetaccio wants to merge 1 commit into
LautaroPetaccio wants to merge 1 commit into
Conversation
Components like Card, Button, Modal, etc. have wrapper modules in `src/components/` that re-export the semantic-ui-react component AND import a companion CSS file with dark theme overrides. Previously, `index.ts` re-exported these components directly from semantic-ui-react via `export * from 'semantic-ui-react'`, bypassing the wrapper modules entirely. The CSS side-effect imports in the wrappers were never reached through the export chain. This worked historically because bundlers like webpack and esbuild included all transitive modules regardless of whether they were reachable through exports. However, tree-shaking bundlers like Rolldown (used in Vite 8) only follow the actual import/export graph. Since nothing imported the wrapper modules, the CSS was dropped from production builds, resulting in missing dark theme styles (white card backgrounds, wrong border-radius, etc.). The fix replaces the wildcard `export * from 'semantic-ui-react'` with: - Explicit `export *` through each component wrapper that has CSS (Button, Card, Checkbox, Container, Dimmer, Dropdown, Header, Loader, Modal, Pagination, Popup, Radio, Segment, Table) - Explicit named exports for the remaining semantic-ui-react components that have no CSS overrides This ensures the CSS side-effect imports are part of the export chain and will be included by any bundler that follows it. The public API surface is unchanged — consumers still import the same components from the same paths.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
src/components/instead of directly fromsemantic-ui-reactLoaderexport from its wrapper moduleexport * from 'semantic-ui-react'with explicit named exports for components without CSS overridesProblem
Components like
Card,Button,Modal, etc. have wrapper modules (e.g.src/components/Card/Card.ts) that:Card.css)Previously,
index.tsre-exported everything viaexport * from 'semantic-ui-react', bypassing these wrappers entirely. The CSS side-effect imports in the wrappers were never reached through the export chain.This worked historically because bundlers like webpack and esbuild included all transitive modules regardless of reachability. However, tree-shaking bundlers like Rolldown (Vite 8) only follow the actual import/export graph. Since nothing imported the wrapper modules through the export chain, the CSS files were dropped from production builds — resulting in missing dark theme styles (white card backgrounds, wrong border-radius, missing shadows, etc.).
How it works
By routing exports through the wrapper modules, the CSS imports become part of the export chain:
Tree-shaking still works correctly — if a consumer doesn't import
Card, neitherCard.tsnorCard.csswill be bundled.Components re-routed through wrappers
Button, Card, Checkbox, Container, Dimmer, Dropdown, Header, Loader, Modal, Pagination, Popup, Radio, Segment, Table
Test plan