diff --git a/src/core/drive/page_renderer.js b/src/core/drive/page_renderer.js
index 7e6df4c4c..c2789639b 100644
--- a/src/core/drive/page_renderer.js
+++ b/src/core/drive/page_renderer.js
@@ -78,7 +78,7 @@ export class PageRenderer extends Renderer {
await newStylesheetElements
if (this.willRender) {
- this.removeUnusedHeadStylesheetElements()
+ this.removeUnusedDynamicStylesheetElements()
}
}
@@ -111,8 +111,8 @@ export class PageRenderer extends Renderer {
}
}
- removeUnusedHeadStylesheetElements() {
- for (const element of this.unusedHeadStylesheetElements) {
+ removeUnusedDynamicStylesheetElements() {
+ for (const element of this.unusedDynamicStylesheetElements) {
document.head.removeChild(element)
}
}
@@ -182,13 +182,9 @@ export class PageRenderer extends Renderer {
await this.renderElement(this.currentElement, this.newElement)
}
- get unusedHeadStylesheetElements() {
+ get unusedDynamicStylesheetElements() {
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-tag-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-tag-name"))
+ return element.getAttribute("data-turbo-track") === "dynamic"
})
}
diff --git a/src/core/drive/progress_bar.js b/src/core/drive/progress_bar.js
index 8ce398ca4..76e8e55a7 100644
--- a/src/core/drive/progress_bar.js
+++ b/src/core/drive/progress_bar.js
@@ -106,8 +106,6 @@ 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/fixtures/stylesheets/left.html b/src/tests/fixtures/stylesheets/left.html
index 7da4b67f9..4931d33ec 100644
--- a/src/tests/fixtures/stylesheets/left.html
+++ b/src/tests/fixtures/stylesheets/left.html
@@ -4,13 +4,18 @@
Left
-
-
+
+
-
+
+
diff --git a/src/tests/fixtures/stylesheets/right.html b/src/tests/fixtures/stylesheets/right.html
index 13001bbf5..2805568e1 100644
--- a/src/tests/fixtures/stylesheets/right.html
+++ b/src/tests/fixtures/stylesheets/right.html
@@ -4,10 +4,10 @@
Right
-
-
+
+
-
diff --git a/src/tests/functional/drive_stylesheet_merging_tests.js b/src/tests/functional/drive_stylesheet_merging_tests.js
index 6e38c2d82..d914a146e 100644
--- a/src/tests/functional/drive_stylesheet_merging_tests.js
+++ b/src/tests/functional/drive_stylesheet_merging_tests.js
@@ -6,19 +6,22 @@ test.beforeEach(async ({ page }) => {
await page.goto("/src/tests/fixtures/stylesheets/left.html")
})
-test("navigating removes unused style elements", async ({ page }) => {
- assert.ok(await hasSelector(page, 'style[id="turbo-progress-bar"]'))
+test("navigating removes unused dynamically tracked style elements", async ({ page }) => {
+ assert.ok(await hasSelector(page, 'style[id="added-style"]'))
+ assert.ok(await hasSelector(page, 'link[id="added-link"]'))
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"]'))
assert.equal(await getComputedStyle(page, "body", "backgroundColor"), "rgb(0, 128, 0)")
assert.equal(await getComputedStyle(page, "body", "color"), "rgb(0, 128, 0)")
+ assert.ok(await hasSelector(page, 'style[id="added-style"]'))
+ assert.ok(await hasSelector(page, 'link[id="added-link"]'))
+
assert.ok(await cssClassIsDefined(page, "right"))
assert.notOk(await cssClassIsDefined(page, "left"))
assert.equal(await getComputedStyle(page, "body", "marginLeft"), "0px")