Move css to bottom of head instead of top

help
1

I’d like to be able to move my meteor generated CSS file from the top of the area to the bottom. During development this actually happens after every edit, as hot CSS loading adds the new CSS file to the bottom. So most of the time during testing the styles are declared last, after other things are inserted above them, or whatever. But during production, it’s always the first tag in the area. How can I make sure it’s always the last?

2

I think you can use the <meteor-bundled-css /> tag. Place it in the head of your main html in the desired position where you want your generated css to be.

I’m not sure if this got documented but you can take a look here and here and let us know!

3

That does work to move it down relative to other static content, which is neat, but how can I make that work with SSR using sink?

Neither appendToElementById nor renderIntoElementById will render into a tag in the head area.

4

Ah, not sure really how this would work with in SSR, have not tested this part. Frankly, I’m not even clear what are you trying to accomplish here :sweat_smile:.

You’ve the sink.appendToHead but I guess you know about it and it doesn’t serve your case.

5

I have a project which uses Material-UI, and it uses a lot of JSS throughout. All of the CSS that JSS outputs gets added to head after the Meteor CSS file. This means I can’t override things in the main (must faster to edit/refresh/render) CSS file, because in production (but not always in development) that CSS will be output before the JSS output.

For Material-UI/JSS there is actually a setting to prepend to the head, instead of append. But that doesn’t work in SSR, where the CSS is captured during renderToString, then output manually. SSR only has appendToHead.

Thanks for the tip on <meteor-bundled-css /> though, I didn’t know about that.

1 Like
6

I wonder if there is a way to grab the css file name, and just output a second link where I want it in server-render. That’s not optimal, but it would at least be a workaround.

7

I ended up using a hack for now. It’s not optimal - it’d be nice to be able to just output the css file in the place I want in some easy way, but this should at least solve issues of unstyled (or incorrectly styled) content before hydration for now.

// :HACK: The meteor css bundle should come after the JSS output, so just move it manually
sink.appendToHead('<script id="css-fixer">
elm = document.getElementsByClassName("__meteor-css__")[0];
elm.parentNode.appendChild(elm);
elm = document.getElementById("css-fixer");
elm.parentNode.removeChild(elm);
delete elm;
</script>')
1 Like