CSS always bundled, even if component isn't referenced

[ciscoheat]

Describe the bug

When using Superforms, the CSS of the SuperDebug component is always added to the project when building, even if it's not referenced. It's not a lot, but is there any way to avoid this being imported? Does it happen because SuperDebug is the default export of the library?

To reproduce, build the project and check the .svelte-kit\output\client\_app\immutable\assets folder.

(Original issue: https://github.com/ciscoheat/sveltekit-superforms/issues/433)

Reproduction

https://github.com/ciscoheat/superforms-examples/tree/superdebug-css

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 44.89 GB / 63.93 GB
  Binaries:
    Node: 21.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.1 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.0.32 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @sveltejs/adapter-auto: ^3.2.1 => 3.2.1
    @sveltejs/kit: ^2.5.10 => 2.5.10
    @sveltejs/vite-plugin-svelte: ^3.1.0 => 3.1.0
    svelte: 5.0.0-next.138 => 5.0.0-next.138
    vite: ^5.2.11 => 5.2.11

Severity

annoyance

Additional Information

No response

[dominikg]

see https://github.com/sveltejs/kit/issues/10633 and https://github.com/vitejs/vite/issues/4389

There are limitations of what can be done about removing unused css that got added through barrel files. If superforms has a barrel that includes superdebug, that could trigger the described behavior.

You could check if it helps to mark things as side effect free or switch to using deep imports to not include these in the first place. If superdebug is only for dev, you could also use esm-env and dynamic imports to make sure it's not included in prod.

[dominikg]

There isn't much sveltekit itself could do here apart from adding documentation on how to deal with this on the users side. The vite issue had semi recent activity by @bluwy, so maybe it'll work better after that has been fixed.

[verydanny]

The CSS that's being added is the SuperDebug CSS, so it could be fixed with an exports field.

{
  "exports": {
    ".": {
      "import": "./dist/main.js",
      "require": "./dist/main.cjs",
      "types": "./dist/main.d.ts"
    },
    "./superdebug": {
      "import": "./dist/superdebug/main.js",
      "require": "./dist/superdebug/main.cjs",
      "types": "./dist/superdebug/main.d.ts"
    }
  }
}

I believe exports even support style, so only particular imports paths would import styles.

Then

import { SuperDebug } from 'sveltekit-superforms/superdebug'

[ciscoheat]

@verydanny there is an export for that already:

import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte'

Does it work when you use that?

[verydanny]

@ciscoheat No, because I don't use SuperDebug.

How your exports are structured, you by default export SuperDebug when one does:

import { superForms } from 'sveltekit-superforms'

export let data

const { constraints, form, capture, restore, errors } = superForm(data.form)

Because of:

https://github.com/ciscoheat/sveltekit-superforms/blob/d0b6fe45df43e2d6575535725666a38cf1c2312b/src/lib/index.ts#L1-L3

Yes, there's tree-shaking because technically SuperDebug isn't used, but in SuperDebug you have CSS which can't be tree-shaken (rollup and Vite can't do CSS treeshaking). A way to fix this is create a new export just for SuperDebug, and remove the export default SuperDebug from the index file.