CSS is included in SSR builds

[brillout]

Describe the bug

CSS is included in SSR builds, which is unexpected: CSS is useless on the server-side. (You can actually see that the CSS included in the SSR build is unused.)

Reproduction

https://github.com/brillout/vite-bug-css-included-in-ssr-build

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
    Memory: 413.73 MB / 2.71 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 18.0.0 - ~/.config/nvm/versions/node/v18.0.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - ~/.config/nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Firefox: 97.0.1

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[brillout]

Note that it doesn't break anything, so it's low priority.

But, in order to reduce confusion and build time, we should remove the unnecessary CSS living in SSR builds.

[brillout]

This is more important than I initially thought.

Because it considerably increases the bundle size of server-side builds, which is critical for edge platforms such as Cloudflare Workers.

A workaround would be to use a code pruning tool that removes unused variables: AFAICT that should do the trick to remove the CSS form the server build.

@benmccann I think SvelteKit may want to know about this.

[sapphi-red]

This is affected by #8278. This implementation depends on minifier to remove these unused code. But minifying is not enabled for SSR build by default (I didn't know this).

For a workaround, setting build.minify = 'esbuild' would work.

I think changing this line to disable minify only for ssr.target = 'node' would be good for v3. What do you think?

vite/packages/vite/src/node/build.ts

Line 247 in d93ac8e

minify: raw?.ssr ? false : 'esbuild',

---

About v2, I think I need to revert #8278 (#8471). There is another issue (#8819) related to #8278. @patak-dev

[patak-dev]

@sapphi-red I tagged you in a thread in discord started by @bluwy, that also found memory issues possibly related to #8278. I think we should revert v2, yes, PR welcome if you can.

And for v3, I don't know about the implications of forcing minification. Maybe we should revert it too and then test with more time for v3.1

Also, I wonder if we could bail out of CSS a lot sooner in SSR so we don't need to process them (in the same lines of #8454)

[brillout]

memory issues

That may explain #8715.

(My guess was that there was a problem with too much memory consumption. Note that it happened with the Vite 3 alphas but not with the Vite 3 betas, I don't know why.)

Also, I wonder if we could bail out of CSS a lot sooner in SSR so we don't need to process them (in the same lines of #8454)

👍

[sapphi-red]

Closing as it is fixed by #8874 (v2) and #8896 (v3).