Page MenuHomePhabricator

How will we use packageStyles when server rendering?
Open, Needs TriagePublic

Description

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:
https://github.com/jdlrobson/Alexandria/commit/528fe138567e8b2a554e6a13faf93930f399362e

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