Theme styles binding

[Mister-Hope]

Now, it's hard dealing with theme styles in vuepress.

Injecting styles in clientEnhance files

Placing all the styles together and import it through client enhance, this is exactly default theme is doing

Why is this Problematic

The styles will injected anyway

• when users are not using some of the components, which will generate unused css
• when users want to overide a component, they probably may not want to import the old files. With the old files imported, either they use new class in components, or they use new value !important to overide exisiting css properties, or unset !important to clear them, and this is annoying

Bind styles in component

This seems to be a good solution, as removing or replacing component will be done with their styles, but as the whole layout is an AsyncComponent, the styles will not be imported untill the component loads, so the css won't be available when the page loads.

While the page has an ssr result, this will result the whole page shrink:

👆 First few frames, then the layout loaded with styles👇

---

So I am wondering if there is ( or we can provide) a way to bind styles to layout and component where they are used, and let them tack effect when loading the first time. @meteorlxy

[meteorlxy]

I don't have a perfect solution so far. IMO, allowing users to override components is also a hack way 🤔

[Mister-Hope]

The first way is really annoying, because unsed styles are injected, and overiding styles is much more harder then writiing one. (Especially when you don't want to simply add !important to make a third edit harder). You have to deal with selector prority and @media selector

While the second one has a huge problem when opening page.

😑 For a blog theme, it's better to let user be able to overide components. They may have their own ideas decorating their blogs.

[Mister-Hope]

Here is a workaround, but it will slow down page load speed:

• Register any component which will perform a large CLS without styles as globalComponent using app.component

This will avoid the component bundled in async layout chunks, so that the style can be outputed in css, but it also means that the component will be bundled into app entrance js anyway, no matter if the current page is using it.