-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(appconfig): Fix the default value for inlining CSS #42
Conversation
Codecov Report
@@ 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
|
76c4ccc
to
4b67e15
Compare
/** | ||
* Inject all styles inside the javascript bundle instead of emitting a .css file | ||
* @default false | ||
*/ | ||
inlineCSS?: boolean | VitePluginInjectCSSOptions, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a case there we would like to inline CSS in an App, not a lib?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That is currently the default for webpack built apps, so probably yes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed 🥲
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How would you do that for libs then?
That means we'd have to import the css manually all the time too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
andsettings.js
, you will also getmain.css
andsettings.css
.
Also works with webpack config with a simple adjustment (adding MiniCssExtractPlugin
)
dbd0ecb
to
e8a80dc
Compare
The docs said `false` but it was `true` Co-authored-by: Grigorii K. Shartsev <me@shgk.me> Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
e8a80dc
to
9bd2641
Compare
The docs said
false
but it wastrue