Merge remote-tracking branch 'origin/main' into davidramos-add-instan…

…tclick-behavior * origin/main: Keep Trix dynamic styles in the head (hotwired#1133)
davidalejandroaguilar · Jan 22, 2024 · ac310e2 · ac310e2
2 parents 1c9b41c + 32b8c30
commit ac310e2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/core/drive/page_renderer.js b/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) {
@@ -184,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() {

diff --git a/src/core/drive/progress_bar.js b/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) {

diff --git a/src/tests/functional/drive_stylesheet_merging_tests.js b/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"]'))