Page MenuHomePhabricator

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


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 inside the skins.alexandria.styles module like so:

	"styles": [

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

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