Styles not hoisted to `<head>` on one docs page | Astro Lounge | Page 1

grizzled forum Mar 10, 2023, 2:22 PM

#

We’re seeing some odd behaviour on the docs site and could do with a hand debugging!

A user reported that there was layout shift/FOUC when loading https://docs.astro.build/en/recipes/, which I can confirm. This only happens on that page and no other that I’ve tested.

I dug into why, and discovered that for some reason the HTML for that page has its stylesheets injected in the middle of the <body> content, instead of at the end of <head> like all other pages (see screenshot).

The .fluid-grid node where the hoisted styles are injected is coming from our <RecipesNav /> component and if I remove that component from recipes.mdx (https://github.com/withastro/docs/blob/main/src/content/docs/en/recipes.mdx) styles load as expected (i.e. injected into <head>).

I’m scratching my head to understand why this is happening. We use <RecipesNav /> in a .astro layout without seeing the same issue and follow the same nav-component-in-MDX pattern in our CMS, integrations, deploy, and migration guides without problems.

Anyone seen similar behaviour and been able to track down what’s happening?

valid gust Mar 10, 2023, 2:24 PM

#

cc @sacred basin. This feels like a head injection issue

grizzled forum Mar 10, 2023, 2:24 PM

#

(I’ll also note that this is only in a build scenario, which makes for fun debugging 😅)

valid gust Mar 10, 2023, 2:24 PM

#

Need to ask ofc, you try bumping to Astro 2.1?

grizzled forum Mar 10, 2023, 2:25 PM

#

Yes, but didn’t help unfortunately.

#

Going to start deleting and adding stuff back, step by step. But it’s slow going because I need to wait for the site to build between steps, so if people have an inkling of likely culprits to start with, that would be super helpful.

valid gust Mar 10, 2023, 2:30 PM

#

Curious if adding <RecipesNav /> to any MDX page triggers the issue?

#

Astro layouts use a standard bundling process for head updates. MDX uses a different mechanism

#

And pro tip: delete some translation directories to build faster locally houston_upsidedown

grizzled forum Mar 10, 2023, 2:31 PM

#

Hah, I might just try that 😁

alpine thistle Mar 10, 2023, 2:31 PM

#

Pro tip: delete docs for Ben's features to build faster locally...

#

Astro Docs: now, ALL recipes!

valid gust Mar 10, 2023, 2:33 PM

#

alpine thistle Astro Docs: now, ALL recipes!

"Oops, all recipes!"

valid gust Mar 10, 2023, 2:34 PM

#

alpine thistle Pro tip: delete docs for Ben's features to build faster locally...

Sarah why you gotta come with the snark 😅

valid gust Mar 10, 2023, 2:34 PM

#

valid gust And pro tip: delete some translation directories to build faster locally <:houst...

Can also use an _ in content collections!

alpine thistle Mar 10, 2023, 2:35 PM

#

(I was on stage for soooo long, having to behave myself and be soooo good in public yesterday. I'm still not recovered.)

grizzled forum Mar 10, 2023, 2:37 PM

#

Er… so disabling all languages except for English makes the bug go away 👍

#

Let me add one back

alpine thistle Mar 10, 2023, 2:39 PM

#

Interesting! I'm assuming no one has translated recipes.mdx yet.

jovial shuttle Mar 10, 2023, 2:40 PM

#

I think I might've translated the "More recipes" key thinkdrops

grizzled forum Mar 10, 2023, 2:46 PM

#

Ugh. With English & German pages the bug is also not there…

#

wut

alpine thistle Mar 10, 2023, 2:47 PM

#

Now playing: "Whose language is it anyway?"

grizzled forum Mar 10, 2023, 2:47 PM

#

Think I’ll just embrace the long build times because now I feel like I’m just adding another confusing variable.

low jasper Mar 10, 2023, 3:29 PM

#

It has to be Spanish, we break stuff all the time 😆

coral aurora Mar 10, 2023, 3:44 PM

#

Is anything the <RecipesNav> async?

I could see that stopping head propagation and forcing styles into the <body> once the component has finished rendering

valid gust Mar 10, 2023, 11:38 PM

#

coral aurora Is anything the `<RecipesNav>` async? I could see that stopping head propagatio...

Good question. Could be a race condition getting translations somehow

sacred basin Mar 13, 2023, 12:14 PM

#

ugh

#

if you have a branch i can check it out

grizzled forum Mar 13, 2023, 3:38 PM

#

withastro/docs#main 😅

#

And the offending page is https://docs.astro.build/en/recipes/

#

Page content: src/content/docs/en/recipes.mdx
Route: src/pages/[lang]/[...slug].astro

#

That MDX file contains a RecipesNav component. Removing it fixes the issue. Removing CardsNav inside that also fixes it.

vital geyser Mar 13, 2023, 3:46 PM

#

I have had stuff like that when a <head> inside a component wasn't top level, but I don't see anything like that from a quick glance
Best of lucks!

sacred basin Mar 13, 2023, 4:51 PM

#

grizzled forum And the offending page is <https://docs.astro.build/en/recipes/>

cool, i'll take a look today

#

we could fix this very easily with a flag :/

#

Unfortunately head injection is dependent on a top-down flow and CC and its head propagation made it so that things get rendered not top-down. So we have to check in the code where code is running. And it's hard to get that all of the way right.

#

But if we knew for sure that you have your own <head> element somewhere in a component then we could skip all of those checks.

#

hence the #1 goal of https://github.com/withastro/roadmap/discussions/481

grizzled forum Mar 13, 2023, 6:17 PM

#

We don’t have any extra <head> elements anywhere, I don’t think?

#

This one is super weird because <RecipesNav /> is equivalent to <CMSGuidesNav /> or <DeployGuidesNav /> but those don’t cause the same issue. Also only causes an issue from MDX, not when used in a page layout.

sacred basin Mar 13, 2023, 6:32 PM

#

It's not about having an extra head

#

It's about supporting pages that have no <head> at all

#

which makes me think, maybe we can use the compiler to notify that there is a head in the tree some where

#

and that will fix 99% of the false positives

grizzled forum Mar 13, 2023, 7:16 PM

#

Oh right, sounds doable!

#

(said with the confidence of someone who has never looked at the compiler)

sacred basin Mar 13, 2023, 7:20 PM

#

haha, no im pretty sure that this will solve this entire category of bugs

sacred basin Mar 15, 2023, 8:11 PM

#

I did not forget about this! I'm working on this tomorrow.

#Styles not hoisted to `<head>` on one docs page