Document how to bundle CSS

[NullVoxPopuli]

requires rollup-plugin-import-css (see jleeson/rollup-plugin-import-css#42 for what enabled this! 🎉 (thanks, @jleeson!!))

Since our config already enables bundling JS if we specify only one entrypoint, we should document how to do the same with CSS

tl;dr:

In the rollup config, instead of addon.keepAssets:
e.g.:

// this automatically slurps up imported CSS like addon.keepAssets would
css({ output: 'styles.css', copyRelativeAssets: true }),
//    |                     ^ this option is important
//    ^ this is where we want the file to appear in `dist`, i.e.: dist/styles.css, in this case

Example:
./src/components/setup/command-bar/{ empty-state.css, command-empty.png }:

.empty {
	background: url("./command-empty.png") no-repeat;
}

will be pulled in to dist/styles.css as:

.empty_e9122e056 {
	background: url("./assets/command-empty-DlVeym01.png") no-repeat;
}

and command-empty-DlVeym01.png is the new hashed name to prevent naming conflicts, since we're bundling, and the file lives at dist/assets/command-empty-DlVeym01.png, which is a correct relative path from dist/styles.css, and will be correctly handling by this hypothetical library's consumers.

Of note: this removes the imports from the js (in the output dist)

So I have in the root entrypoint (index.js), import '<package-name>/styles.css' -- it is neededly a self-import so that rollup doesn't try to process it.

ofc, folks could omit that in their JS and have their consumers import the css as well.

---

Reason I think this should be documented (and not a default), is because it's sort of a specific situation that necessitates the need for CSS bundling.

In particular, say you have a very large library, with 1000 entrypoints. If your app uses all of those, you have 1000 network requests from just that library in vite -- this is the same impact if your had a barrel file in the library.

To mitigate, and get around barrel file problems, you'd want to bundle your entrypoints into as few files as possible.

At the extreme end, you could get down to 1 JS file and 1 CSS file, and having 2 network requests saves you from running in to this problem:

https://gist.github.com/NullVoxPopuli/65d8fad8c736e66f58cdd4c5baedb0cb

• Vite: Vite fails to load modules in Chrome with net:ERR_FAILED error vitejs/vite#17499
• Chrome: https://issues.chromium.org/issues/355006326