Dependency Pre-Bundling does not bundle styles

[ascott18]

Describe the bug

Dependency pre-bundling does not bundle CSS (or other css langs; in this case, SASS) imports within dependencies.

The result of this is that in serve mode when using component frameworks like Vuetify with per-component imports, each individual CSS file for each individual component is loaded with an independent HTTP request, even though all the scripts for these components are bundled into a single file.

This results in 100+ extra HTTP requests in serve mode.

Reproduction

https://github.com/ascott18/repro-vite-css-prebundling

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz   
    Memory: 12.01 GB / 31.94 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD  
    npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.75
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.36)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vite: 2.9.3 => 2.9.3

Used Package Manager

npm

Logs

(including image because I can't capture Chrome network tools output in a reasonable text format)

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 https://github.com/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.

[ascott18]

After some tinkering, I was able to achieve the desired outcome here using the following configuration. Took a while to figure out since extensions is undocumented. (Other experimental features are documented, like SSR - is this an oversight?):

    optimizeDeps: {
      extensions: [".scss", ".sass"],
      esbuildOptions: {
        plugins: [
          (await import("esbuild-sass-plugin")).sassPlugin({
            type: "style",
            // Setting `logger.warn` to no-op is a workaround for
            // https://github.com/sass/sass/issues/3065#issuecomment-868302160.
            // Since `optimizeDeps` is only processing third party dependencies and only during dev,
            // we don't care about *any* deprecation warnings. The `quietDeps` SASS option doesn't work.
            logger: { warn() {} },
          }),
        ],
      },
    },

Would there ever be consideration to making this functionality baseline? Since build mode supports popular CSS preprocessors, I think it would make sense to also support them here in serve. I realize that different "glue" would have to be built to plug them into esbuild rather than rollup (as to not add third-party dependencies like I did in my config here). Is this something that would be worth my while to start a PR for?

[bluwy]

The extensions option is intentionally undocumented since it's not ready for public use, unlike SSR which is more on the stable side (though still experimental). I think prebundling styles is something worth exploring too, and it's great to see extensions covers this case too. I'm not sure there's any gotchas doing so at the moment, but if we can experiment this in userland as a Vite plugin to gather feedback, that would be helpful to justify bringing into core.

[stratdev3]

@ascott18 thanks for the workaround.

One more precision

vuetify 2 is limited to sass v1.32, see discussion vuetifyjs/vuetify#13694 (comment)

To satisfy this dependencie, need to have { "esbuild-sass-plugin": "^1.7.0" } in package.json

[ricardovanlaarhoven]

Is there any news on this?

@ascott18 When i add your code to my vite.config.ts i'm getting the following error:

X [ERROR] Top-level await is currently not supported with the "cjs" output format

    vite.config.ts:39:9:
      39 │         (await import("esbuild-sass-plugin")).sassPlugin({
         ╵          ~~~~~

What am i doing wrong?
i've installed the esbuild-sass-plugin package

@ricardovanlaarhoven I assume an object is passed to your defineConfig instead of an async function.

export default defineConifg(async () => ({
// now you can do await import
}))

[ricardovanlaarhoven]

Thanks that helped (makes real sense. That i didn't think of that myself). Unfortunately it doesn't result in what i'd hoped for.
Every time a new view is opened. It's loading really slow and eventually it fails and when i reload it works immediately

@ricardovanlaarhoven It's the same for me and on huge projects is very time consuming.