ember-cli / ember-cli/ember-addon-blueprint
Document how to bundle CSS
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 10
- PR merge metrics
- No merged PRs in 30d
Description
requires `rollup-plugin-import-css` (see https://github.com/jleeson/rollup-plugin-import-css/issues/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.:
```js
// 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 }`:
```css
.empty {
background: url("./command-empty.png") no-repeat;
}
```
will be pulled in to `dist/styles.css` as:
```css
.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 '/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: https://github.com/vitejs/vite/issues/17499
- Chrome: https://issues.chromium.org/issues/355006326
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.