search

ciscoheat / sveltekit-superforms

Making SvelteKit forms a pleasure to use!
https://superforms.rocks
MIT License
2.22k stars 66 forks source link

SuperDebug CSS is included in SSR-only production build #433

Closed verydanny closed 2 months ago

verydanny commented 5 months ago

Description

Super Debug CSS is included in production. My login form is going to be SSR-only, (CSR is false), so there should be no need to load css. I'm also not importing SuperDebug anywhere.

Should there be a superForm for server-only applications? Maybe this is configuration issue I missed?

Example Repo: https://github.com/verydanny/idea-one/tree/main/app

image

verydanny commented 5 months ago

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

Looks like it's imported, then exported as default and Vite doesn't treeshake side-effect free css. Isn't it better to isolate SuperDebug into its own thing in package.json exports?

ciscoheat commented 5 months ago

As mentioned in the other issue, does it work if you import it from there?

import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte'
verydanny commented 5 months ago

That's not the issue, if one does import { superForm } from 'sveltekit-superforms' it automatically imports SuperDebug's CSS because rollup/vite can't treeshake CSS. The library file structure just needs a small edit, pretty simple.

I don't use SuperDebug, yet the CSS code from SuperDebug is being bundled with my client code. This is because of the SuperForm index.ts barrel file.

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.

Honestly I'm more for creating a superFormServer because I try to keep my client code as small as possible. The current superForm is actually a little chunky. Here's my bundle before using superForm on client code vs. after:

Before: IMG_5524

After: IMG_4954

This may not seem like a huge jump, but in some cases my route jumps 30% in size from a single library. When optimizing for really slow devices and networks, this is a bit painful.

ciscoheat commented 5 months ago

superForm isn't used on the server, so what did you have in mind for superFormServer?

I don't want to introduce a breaking change by moving the component, but I think the css can be fixed by inlining it, as most of its css is namespaced with the super-debug class. Feel free to make a PR if you like to contribute.

ciscoheat commented 4 months ago

@verydanny I've inlined the css, check if it's working now with v2.15.0. (No need to change any imports)