Problem
reset.css is tree-shaken out of the src/app production CSS bundle despite being a legitimate side-effect import, and the root cause is unexplained.
src/diagram/index.ts does:
and src/diagram/package.json correctly declares CSS as side-effectful:
"sideEffects": [
"*.css",
"**/*.css"
]
Yet the universal box-sizing: border-box rule (and all of reset.css's body/typography defaults) was absent from src/app/build/static/css/index.*.css until an explicit import was added to src/app/index.tsx:
import '@simlin/diagram/reset.css';
(added on branch frontend-react-audit, June 2026).
Why it matters
The explicit import is a workaround, not a fix. The bundler is dropping a declared CSS side-effect import that is reached through the aliased package index (src/app/config/rsbuild/shared.config.js aliases @simlin/diagram to the ../diagram source). Because the mechanism is unexplained, the same tree-shaking behavior could silently drop other side-effect imports reached the same way (theme.css, third-party CSS, future side-effectful modules), with no build-time error -- only a visual regression in production. This is a correctness/maintainability hazard in the build pipeline.
Components affected
src/app (production CSS bundle, src/app/index.tsx workaround, src/app/config/rsbuild/shared.config.js alias config)
src/diagram (index.ts side-effect import, package.json sideEffects)
Investigation / possible approaches
- Reproduce: remove the explicit
import '@simlin/diagram/reset.css' from src/app/index.tsx, run the production build, and confirm reset.css rules are absent from src/app/build/static/css/index.*.css.
- Determine why rspack's tree-shaking honors the
sideEffects glob for the in-package import './reset.css' but drops it when @simlin/diagram is consumed via the source alias (resolveApp('../diagram')) rather than via the built package exports. Likely candidates: the alias bypassing the package's sideEffects metadata, or the index re-export chain marking the CSS import as unused.
- Either fix the bundler config so declared CSS side-effects are honored through the alias, or -- if explicit entry-point CSS imports are genuinely required by this setup -- document that requirement (in
src/app/config/rsbuild/shared.config.js and/or the diagram package README) so future side-effect CSS isn't silently dropped.
Discovery context
Identified during the frontend-react-audit branch work (June 2026) when box-sizing: border-box and other reset defaults were missing from the production app; the explicit src/app/index.tsx import resolved the symptom but left the root cause unexplained.
Problem
reset.cssis tree-shaken out of thesrc/appproduction CSS bundle despite being a legitimate side-effect import, and the root cause is unexplained.src/diagram/index.tsdoes:and
src/diagram/package.jsoncorrectly declares CSS as side-effectful:Yet the universal
box-sizing: border-boxrule (and all ofreset.css's body/typography defaults) was absent fromsrc/app/build/static/css/index.*.cssuntil an explicit import was added tosrc/app/index.tsx:(added on branch
frontend-react-audit, June 2026).Why it matters
The explicit import is a workaround, not a fix. The bundler is dropping a declared CSS side-effect import that is reached through the aliased package index (
src/app/config/rsbuild/shared.config.jsaliases@simlin/diagramto the../diagramsource). Because the mechanism is unexplained, the same tree-shaking behavior could silently drop other side-effect imports reached the same way (theme.css, third-party CSS, future side-effectful modules), with no build-time error -- only a visual regression in production. This is a correctness/maintainability hazard in the build pipeline.Components affected
src/app(production CSS bundle,src/app/index.tsxworkaround,src/app/config/rsbuild/shared.config.jsalias config)src/diagram(index.tsside-effect import,package.jsonsideEffects)Investigation / possible approaches
import '@simlin/diagram/reset.css'fromsrc/app/index.tsx, run the production build, and confirmreset.cssrules are absent fromsrc/app/build/static/css/index.*.css.sideEffectsglob for the in-packageimport './reset.css'but drops it when@simlin/diagramis consumed via the source alias (resolveApp('../diagram')) rather than via the built packageexports. Likely candidates: the alias bypassing the package'ssideEffectsmetadata, or the index re-export chain marking the CSS import as unused.src/app/config/rsbuild/shared.config.jsand/or the diagram package README) so future side-effect CSS isn't silently dropped.Discovery context
Identified during the
frontend-react-auditbranch work (June 2026) whenbox-sizing: border-boxand other reset defaults were missing from the production app; the explicitsrc/app/index.tsximport resolved the symptom but left the root cause unexplained.