Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to insert styles at a specific position in <head>

See original GitHub issue

The problem

I see that @emotion/cache provides a container option, which seems like it’s useful for having some control over the DOM element that emotion inserts its <style> nodes into. Unfortunately, I can’t find a way to use this for my purpose, which is to control the position of the inserted nodes in the document head.

The reason I need this is to have more fine-grained control over rule ordering in a page that has existing styles (which are sadly often composed with the newer Emotion-generated classnames). I’d like Emotion (both on the server and client) to insert all of its <styles> (both those initially on the page as well as those dynamically inserted later on) at a specific position in the <head>.

Initially I thought I could use the container option, but that seems to have two problems here:

it deals only with nesting inside a container, not adjacent to, and…
it doesn’t seem like there are any compatible container elements that accept <style> children in the <head>

Together, these two issues make it hard to find a way to do what I want here with any existing Emotion apis.

Proposed solution

Webpack’s style-loader provides an insert option which can be given a function to be run in order to determine the position of any inserted styles. Something like this might work here too.

Alternative solutions

Another option might be to introduce a more flexible version of container - not a full function like style-loader, but an insertAdjacentTo, replaceCommentWith or something similar to allow for more control over the placement?

Additional context

Also, based on my problem statement - if there’s any existing way to do what I want in Emotion 10, it goes without saying that I’d be very grateful to hear so 😃

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:18 (8 by maintainers)

Top GitHub Comments

1reaction

Andaristcommented, Dec 2, 2021

However, during CSR there’s no way to control where the styles are inserted inside the <head> (other than prepend option, which doesn’t help here).

Since this got merged in and shipped this statement is no longer true. I’m not sure if this option has been exposed in MUI though - you’d have to look there for an answer to that.

1reaction

gregjacobscommented, Nov 10, 2020

@Andarist Did some testing and didn’t find any difference in re-render performance in Chrome with prepending, at least in the case that styles are prepended after initial page load. Still need to do a test for initial page load with regular stylesheets + prepending, and in other browsers.