Next.js: `Head` overwrites injected head tag content in v9

[malimccalla]

Bug report

Description

Since v9 (worked as expected v8.1.0) a weird issues started happening in which certain parts of my project were not behaving as expected. I have isolated it to the Head element. My simplified reproduction repo uses @tippy.js/react to display a tooltip which is getting affected by the issue. The tooltip library injects styles into the head that are getting removed by next/head

Steps to reproduce

1. Clone this repo https://github.com/malimccalla/external-link-issue/
2. yarn install
3. yarn run dev
4. Hover over the button.

Expected

Tool tip should correctly animate in and display the text "Hello"

Actually happens

The words "Hello" just appears in the dom

Additional info

• If you remove the <link> tag from pages/index.js and refresh the page everything works as expected
• The link tag can be to any external resource and doesn't necessarily need to link to css (the tag simply being <link /> will also cause this issue)
• If you downgrade to next.js v8.1.0 everything works as expected

System information

• OS: macOS
• Browser (if applies): Latest chrome
• Version of Next.js: 9.0.5

[malimccalla]

Additional info:

It seems what is happening is that the style tag that was previously being injected into the head is now getting removed.

[ijjk]

Hi, this is due to the way next/head keeps track of the head elements. tippy.js appears to insert it's styles before any link or style tags which creates a conflict with the tracking of head elements since we no longer use a class on the elements added by next/head

Relevant code snippet here

[malimccalla]

I see thank for the insight @ijjk. Is this unexpected behaviour of the Head element as it has previously worked or should tippy.js be handling the insertion of styles differently. Also I wonder if the removal a class on the head elements should be considered a breaking change when upgrading from v8 to v9?

cc: @atomiks

[timneutkens]

It's not unexpected behavior and it wasn't a breaking change. Styles definitely shouldn't be injected using JavaScript in that way 👍

[atomiks]

@timneutkens other libraries do it that way as well, e.g. sweetalert and sweetalert2. Shouldn't this style of CSS injection be accounted for?

[KB1RMA]

I believe I'm running into the same (or very similar) issue using @zeit/next-css and an external analytics script. When the analytics script loads and injects additional script tags into the head of the document, styles contained in the css bundle have a momentary flash of unstyled content.

I'm going to try to figure out a good way to create a reproduction as I won't be able to share our domains publicly running the script currently.

Edit: This also appears to be affecting other external scripts in a similar way such as when we inject https://www.qualtrics.com for feedback

[malimccalla]

Styles definitely shouldn't be injected using JavaScript in that way

@timneutkens I don't think this is a case of should or shouldn't, what seems apparent is that they _are_. If thats good or not is subjective and it seems like a library (or individual developer) that wants to be able to do so should be able to. I think accounting for this would be great 🙏

[timneutkens]

I think accounting for this would be great 🙏

Feel free to open a PR and we'll review it.

Closing this as it's been open for a while and a PR wasn't opened.