Control style tag position

[bkniffler]

Hey, is there any way to control at what position the css should be put in the ? The order plays an important role and I need it to be top and not bottom-most.

[faceyspacey]

Not currently. But just grab the stylesheets instead and you can re-arrange the order.

[bkniffler]

What do you mean? The stylesheets from flushChunks? I'm doing this in my server (extract from the template, styles is the styles array from flushChunks, cssMarkup is the anchor for a css-in-js solution that I'm using)

    ${styles.map(style => `<link rel="stylesheet" type="text/css" href="${style}">`)}
    <style id="css-markup">${cssMarkup || ''}</style>

But in my client (browser), the order changes and the universal styles will be below the css-markup styles and I have no clue how to change that.

[faceyspacey]

HMR will put them in different orders during development and code splitting will likely put them at the bottom or end. Check the importCss.js file in the babel plugin to see where it a injected. Then do a PR to configure the order as an option in your babel plugin. U shouldn't need to know much babel plugin code to pass that option along to the basic js that does the importing of CSS.

[bkniffler]

Thanks, I'll play around with this. I copied the whole babel plugin into my app and I can now control the link anchor point on my own. Still thinking about the best solution, but maybe I'll try to just append it below the last <link /> tag in the head.

As a side effect of copying the universal babel plugin, my problems with faceyspacey/webpack-flush-chunks#20 went away and server rendering works fine, no more getting stuck at loading.

Thanks for your wonderful work, this is indeed the best solution for code splitting and lazy style/script loading to date!

[faceyspacey]

Thanks brother. Glad it worked out for u.