Skip to content

rsbuild/rspack tree-shakes reset.css side-effect import out of src/app production CSS bundle #708

@bpowers

Description

@bpowers

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:

import './reset.css';

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

  1. 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.
  2. 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.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ciCI, build pipeline, test hygienefrontendInvolved the React-based Typescript frontend

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions