Repository navigation
fix(config): keep the dev toolbar's CSS out of production builds - #2339
Merged
Merged
Conversation
The error boundary statically imports the dev toolbar, whose module imports its stylesheet as a side effect. The toolbar branch is dead code in production, but the stylesheet survived tree-shaking because the package declared no `sideEffects`, so the toolbar styles were bundled into the client CSS. Mark only CSS files as having side effects, so the bundler can drop the unused toolbar module and its stylesheet from production output while keeping the CSS that live modules import. Fixes #2327. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 4b81529 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
✅ Deploy Preview for solid-start-landing-page ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
commit: |
brenelz
approved these changes
Oct 13, 2026
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
2 participants
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.
Fixes #2327.
Problem
The dev toolbar's CSS is bundled into the production client output.
ErrorBoundary.tsxstatically importsDevToolbar:The toolbar is only used behind
import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY, which folds to dead code in production. Butdev-toolbar/index.tsxdoesimport "./index.css"as a side effect, and@solidjs/startdeclared nosideEffectsfield, so the bundler kept the module for its CSS side effect even though its only binding was unused. The toolbar styles ended up in the client CSS.Fix
Add
"sideEffects": ["**/*.css"]to the package. This tells the bundler that the package's JS modules are side-effect free (so an imported-but-unused module can be dropped) while CSS imports still count as side effects (so CSS a live module imports is kept). With it, the unused toolbar module and its stylesheet are dropped from production, and live CSS is unaffected.There are a few bare side-effect JS imports in the package (
server-only, the server-fn manifest), but they live in modules kept for their exports, so marking JS side-effect free does not drop them.Impact
Measured on the
apps/testsproduction build:entry-clientCSS: 17546 bytes to 691 bytes.data-start-dev-toolbar,start-dt-*,tc-toolbar) in client CSS: 99 hits to 0.body) are still present.Dev is unaffected: Vite does not tree-shake the dev module graph, and the toolbar branch is live there, so its CSS loads as before.
Testing
apps/tests/src/routes/treeshaking/devtools-css.server.test.tsasserts no client CSS file containsdata-start-dev-toolbar. It fails onmainand passes with this change.@solidjs/start: 213 unit tests pass,typecheckandvalidate-importsclean.apps/tests: full Playwright e2e suite passes (42 tests, dev mode, which renders the toolbar), and all 4 treeshaking build-output tests pass.🤖 Generated with Claude Code