Use data-turbo-permanent to keep styles around

And use it to keep the progress bar styles around, instead of relying
on an id.

src/core/drive/page_renderer.js

@@ -1,6 +1,5 @@
 import { activateScriptElement, waitForLoad } from "../../util"
 import { Renderer } from "../renderer"
-import { ProgressBarID } from "./progress_bar"
 
 export class PageRenderer extends Renderer {
   static renderElement(currentElement, newElement) {
@@ -114,12 +113,7 @@ export class PageRenderer extends Renderer {
 
   removeUnusedHeadStylesheetElements() {
     for (const element of this.unusedHeadStylesheetElements) {
-      // Trix dynamically adds styles to the head that we want to keep around
-      // Long term we should moves those styles to Trix's CSS file
-      // but for now we'll just skip removing them
-      if (!element.dataset.tagName) {
-        document.head.removeChild(element)
-      }
+      document.head.removeChild(element)
     }
   }
 
@@ -189,7 +183,13 @@ export class PageRenderer extends Renderer {
   }
 
   get unusedHeadStylesheetElements() {
-    return this.oldHeadStylesheetElements.filter((element) => element.id !== ProgressBarID)
+    return this.oldHeadStylesheetElements.filter((element) => {
+      return !(element.hasAttribute("data-turbo-permanent") ||
+        // Trix dynamically adds styles to the head that we want to keep around which have a
+        // `data-page-name` attribute. Long term we should moves those styles to Trix's CSS file
+        // but for now we'll just skip removing them
+        element.hasAttribute("data-page-name"))
+    })
   }
 
   get oldHeadStylesheetElements() {

src/core/drive/progress_bar.js

@@ -107,6 +107,7 @@ export class ProgressBar {
   createStylesheetElement() {
     const element = document.createElement("style")
     element.id = ProgressBarID
+    element.setAttribute("data-turbo-permanent", "")
     element.type = "text/css"
     element.textContent = ProgressBar.defaultCSS
     if (this.cspNonce) {

src/tests/functional/drive_stylesheet_merging_tests.js

@@ -7,9 +7,12 @@ test.beforeEach(async ({ page }) => {
 })
 
 test("navigating removes unused style elements", async ({ page }) => {
+  assert.ok(await hasSelector(page, 'style[id="turbo-progress-bar"]'))
+
   await page.locator("#go-right").click()
   await nextBody(page)
 
+  assert.ok(await hasSelector(page, 'style[id="turbo-progress-bar"]'))
   assert.ok(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/common.css"]'))
   assert.ok(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/right.css"]'))
   assert.notOk(await hasSelector(page, 'link[rel=stylesheet][href="/src/tests/fixtures/stylesheets/left.css"]'))