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.

New style blocks should inject after the last one

See original GitHub issue

Currently when rendering in the browser, style blocks are automatically appended to the end of the <head> tag: https://github.com/styled-components/styled-components/blob/master/src/models/BrowserStyleSheet.js#L169

We should revise this behavior to instead grab a reference to the last known styled-components style block and inject after that, wherever it is in the DOM (falling back to document.head if it’s the first one.)

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

chrislaughlincommented, Jan 31, 2018

I would be happy to pick this up as a first contribution, is it still valid?

1reaction

probablyupcommented, Jan 22, 2018

I’m wondering what can go wrong?

Like what happens if we don’t do the above?

The #1 case I can think of is if you are using SSR and extract the critical CSS but place it in <body> instead of <head>. When styled-components takes over upon rehydration, any additional styles are injected to the default location (<head>) and then if any of those styles are building off the critical CSS, they’ll be out of order and manifest all sorts of bugs.

Top Results From Across the Web

after - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content...

Common Patient Questions about Nerve Blocks

This depends on the type of block performed and the type of numbing medication used. For example, nerve blocks for hand surgery usually...

Injection Options | Blockly - Google Developers

Name Type Description sounds boolean If false , disables sounds. Defaults to true . zoom object Configures zooming behaviour. See Zoom.

Occipital nerve block injection - Mayfield Clinic

An occipital nerve block injection can help relieve headache and ... Occipital injections work best when the typical pattern is one-sided head pain ......

Questions About Nerve Blocks | Regional Anesthesia

This depends on the type of block performed and the type of numbing medication used. For example, nerve blocks for hand surgery usually...