diff --git a/.changeset/devtools-css-in-prod.md b/.changeset/devtools-css-in-prod.md new file mode 100644 index 000000000..35c14e9e2 --- /dev/null +++ b/.changeset/devtools-css-in-prod.md @@ -0,0 +1,5 @@ +--- +"@solidjs/start": patch +--- + +Stop the dev toolbar's CSS from shipping in production builds. The error boundary statically imports the dev toolbar, whose module imports its stylesheet as a side effect. The toolbar is dead code in production, but the stylesheet survived because the package declared no `sideEffects`, so its styles were bundled into the client CSS. The package now marks only CSS files as having side effects, letting the bundler drop the toolbar and its styles from production output. diff --git a/apps/tests/src/routes/treeshaking/devtools-css.server.test.ts b/apps/tests/src/routes/treeshaking/devtools-css.server.test.ts new file mode 100644 index 000000000..08b1c6c30 --- /dev/null +++ b/apps/tests/src/routes/treeshaking/devtools-css.server.test.ts @@ -0,0 +1,23 @@ +import { describe, expect, it } from "vitest"; +import { getBuildOutputDirs, getFiles, readFileContent } from "~/utils/build-output-utils"; + +// Regression test for https://github.com/solidjs/solid-start/issues/2327. +// ErrorBoundary statically imports the dev toolbar, whose module imports its +// CSS as a side effect. The toolbar branch is dead code in production, so the +// "sideEffects" field in @solidjs/start lets the bundler drop the module and +// its CSS. Without it, the toolbar styles leak into the client bundle. +describe("dev toolbar is excluded from the production bundle", () => { + it("does not ship the dev toolbar CSS to the client", async () => { + const { clientOutputRoot } = getBuildOutputDirs(); + const files = await getFiles(clientOutputRoot, /\.css(\.gz|\.br)?$/); + + expect(files.length, "No client CSS files found").toBeGreaterThan(0); + + for (const targetFile of files) { + const css = await readFileContent(targetFile); + expect(css, `Dev toolbar CSS leaked into: ${targetFile}`).not.toContain( + "data-start-dev-toolbar", + ); + } + }); +}); diff --git a/packages/start/package.json b/packages/start/package.json index 679eea156..a6137a0d4 100644 --- a/packages/start/package.json +++ b/packages/start/package.json @@ -12,6 +12,9 @@ "CHANGELOG.md" ], "type": "module", + "sideEffects": [ + "**/*.css" + ], "exports": { ".": "./src/index.tsx", "./config": "./dist/config/index.js",