youtube / spfjs

A lightweight JS framework for fast navigation and page updates from YouTube
https://youtube.github.io/spfjs/
MIT License
2.24k stars 147 forks source link

Updating a CSS file to a new version via managed style loading fails if original `<link>` is not in the `<head>` #278

Closed nicksay closed 9 years ago

nicksay commented 9 years ago

For an existing page with the following DOM structure:

<head>
  <!-- some styles -->
</head>
<body>
  <link rel="stylesheet" href="rogue-1.css" name="rogue">
</body>

Then, attempting to load a fragment with

<link rel="stylesheet" href="rogue-2.css" name="rogue">

or attempting to call

spf.style.load('rogue-2.css', 'rogue')

will fail with the following error:

Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
nicksay commented 9 years ago

This is because the current code that manages in-place style replacement always attempts to insert the new style before the existing one in the <head>, even if the existing one is not located in the <head>: https://github.com/youtube/spfjs/blob/v2.1.2/src/client/net/resource.js#L305