fix(appconfig): Fix the default value for inlining CSS

[susnux]

The docs said false but it was true

[codecov]

Codecov Report

Merging #42 (9bd2641) into main (b1e4978) will decrease coverage by 0.13%.
Report is 1 commits behind head on main.
The diff coverage is 81.81%.

@@            Coverage Diff             @@
##             main      #42      +/-   ##
==========================================
- Coverage   81.81%   81.69%   -0.13%     
==========================================
  Files           8        8              
  Lines         572      579       +7     
  Branches       46       48       +2     
==========================================
+ Hits          468      473       +5     
  Misses         58       58              
- Partials       46       48       +2     

Files	Coverage Δ
lib/appConfig.ts	79.64% <81.81%> (-0.36%)	⬇️

[ShGKme]

Is there a case there we would like to inline CSS in an App, not a lib?

[susnux]

That is currently the default for webpack built apps, so probably yes?

[ShGKme]

Indeed 🥲

[skjnldsv]

Why the sad face? This is quite ok, no?
Saves us to manually add the stylesheet with addStyle as well as a few bytes of additional requests (and reduce the loading queue)

[ShGKme]

Why the sad face? This is quite ok, no?

It is worse in a page performance. One more request doesn't change loading as much (if it is not HTTP/1, it is likely a parallel request) as loading more JS (not in parallel), parsing JS code and executing it. Which doesn't replace parsing and applying css, it is an additional expensive blocking task. So an app launches later.

CSS stored in JS also has more size. 50kb css ~= 200kb css in a js bundle on a small experiment with Talk.

And adding styles in runtime increases the number of layout operations in the rendering pipeline, making the initial rendering slower (there are no app styles from the initial load), but it is unlikely noticeable on our load with a super large JS.

style-loader is usually used for development because it is faster on bundling and HMR (and on small libs).

[skjnldsv]

How would you do that for libs then?
That means we'd have to import the css manually all the time too?

[ShGKme]

How would you do that for libs then? That means we'd have to import the css manually all the time too?

In general — yes. A common practice for libs is to build and import css completely separately. Because this is both performant and "close to native" approach independent from bundler's config or a test runner.

For example, vue-virtual-scroller or vue-select are imported as

import { VueSelect } from 'vue-select'
import 'vue-select/dist/vue-select.css'

Or our @nextcloud/password-confirmation

import { confirmPassword } from '@nextcloud/password-confirmation'
import '@nextcloud/password-confirmation/style.css' // Required for dialog styles

---

This is not great for libs with a dozen exports like @nextcloud/vue if we want to have a tree-shaking or per-component import. In this case, it can be handled by bundlers.

Currently @nextcloud/vue is already building separated js/css assets. Then it requires/imports .css files from .[mc]js modules. This is not correct for nodejs/browser, but it is handled by bundlers.

// @nextcloud/vue/dist/Components/NcButton.mjs
import "../assets/index-4a775ba1.css";
import { n as f } from "../chunks/_plugin-vue_normalizer-71e2aa87.mjs";

• https://npmfs.com/package/@nextcloud/vue/8.0.0-beta.8/dist/assets/
• https://npmfs.com/package/@nextcloud/vue/8.0.0-beta.8/dist/Components/NcButton.mjs

All CSS assets from @nextcloud/vue:

[susnux]

You could disable injecting the CSS, vite can handle multiple entry points and will produce one CSS file for each entry point.
So if your app provides lets say main.js and settings.js, you will also get main.css and settings.css.

[ShGKme]

You could disable injecting the CSS, vite can handle multiple entry points and will produce one CSS file for each entry point. So if your app provides lets say main.js and settings.js, you will also get main.css and settings.css.

Also works with webpack config with a simple adjustment (adding MiniCssExtractPlugin)