While working on the Alexandria skin, I found myself needing to render styles from vue components as critical path styles, since I was making use of server side rendering.
I wanted to include the styles inside Vue components in https://github.com/jdlrobson/Alexandria/blob/master/skin.json#L84 inside the skins.alexandria.styles module like so:
"styles": [ "resources/App.vue", "resources/AppArticle.vue", "resources/AppBanner.vue", "resources/AppHeader.vue", "resources/AppFooter.vue", "resources/Portlet.vue", "resources/FooterMenu.vue", "resources/DropdownMenu.vue" ]
but that wasn't supported.
I explored creating a build step that pulled out the style tags and created a style bundle, but this led to the styles double loading.
In the end, I pulled the styles out of the Vue components https://github.com/jdlrobson/Alexandria/commit/6d0fc680a02fc8e3be06d2486f2a9b674684a5fd
To avoid double loading I ended up commenting out the import:
What's the recommended way to use Vue components / styles when server side rendering?
There was also the challenge of the fact I was loading styles twice - in JS and CSS.
I could obviously pull out the styles from each of the Vue files into their own stylesheet, but that took away the pleasantness of