Remove unused stylesheets when navigating #1128
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kevinmcconnell
force-pushed
the
remove-unused-styles
branch
from
b0334a5
to
341579b
Compare
kevinmcconnell
commented
Jan 14, 2024
| await mergedHeadElements | ||
| await newStylesheetElements | ||
|
|
||
| if (this.willRender) { |
There was a problem hiding this comment.
@afcapel this condition is needed because of the way frame navigations reuse the page renderer to make snapshots. We should refactor the frame head handling to make this sort of thing unnecessary. But let's do that separately, as it has wider implications.
Also, given our recent discussions about potential impact of instaclick, we should see where that's heading before pulling on the snapshotting thread.
afcapel
approved these changes
Jan 15, 2024
kevinmcconnell
force-pushed
the
remove-unused-styles
branch
from
341579b
to
b0a83c9
Compare
When navigating to another page, Turbo merges the `<head>` contents from the current and new pages, which results in a `<head>` containing the superset of both. For certain items, like scripts, this makes sense. We have no way to remove a running script. But that's not the case for styles: styles can be unloaded easily, and for the page to display properly, we need to do so. Otherwise styles kept in scope from a previous page could cause a page to render incorrectly. The common way to avoid this has been to use `data-turbo-track="reload"` to force a reload if styles change. This works, but it's a bit heavy-handed, causing full page reloads that could have been avoided. There are a couple of common cases where updating styles on the fly would be useful: - Deploying a CSS change. Clients should be able to pick up the change without having to reload. - Allowing pages to include their own specific styles, rather than bundle them all together for the whole site. This can reduce the size of the loaded CSS, and make it easier to avoid style conflicts.
kevinmcconnell
force-pushed
the
remove-unused-styles
branch
from
b0a83c9
to
cafbd50
Compare
afcapel
added a commit
that referenced
this pull request
Jan 25, 2024
To track stylesheets and styles that we can dynamically remove when navigating. We introduced this behaviour in #1128 and thought it would be a good default to avoid full page reloads when styles change. However, it seems it's quite common for libraries to add stylesheets and styles to the head that they want to keep around. For example, see - #1133 - #1139 So let's make this behaviour opt-in by adding a `data-turbo-track="dynamic"` attribute to stylesheets and styles that we want to dynamically remove when they are no longer in a new page navigation. This avoids any breaking changes for existing apps.
afcapel
added a commit
that referenced
this pull request
Jan 25, 2024
To track stylesheets and styles that we can dynamically remove when navigating. We introduced this behaviour in #1128 and thought it would be a good default to avoid full page reloads when styles change. However, it seems it's quite common for libraries to add stylesheets and styles to the head that they want to keep around. For example, see - #1133 - #1139 So let's make this behaviour opt-in by adding a `data-turbo-track="dynamic"` attribute to stylesheets and styles that we want to dynamically remove when they are no longer in a new page navigation. This avoids any breaking changes for existing apps.
afcapel
added a commit
to pfeiffer/turbo
that referenced
this pull request
Jan 29, 2024
* origin/main:
Introduce `turbo:{before-,}morph-{element,attribute}` events
Turbo 8.0.0-beta.4
Introduce data-turbo-track="dynamic" (hotwired#1140)
Ensure that the turbo-frame header is not sent when the turbo-frame has a target of _top (hotwired#1138)
Turbo 8.0.0-beta.3
Fix attribute name (hotwired#1134)
Add InstantClick behavior (hotwired#1101)
Revert hotwired#926. (hotwired#1126)
Keep Trix dynamic styles in the head (hotwired#1133)
Remove unused stylesheets when navigating (hotwired#1128)
Upgrade idiomorph to 0.3.0 (hotwired#1122)
Debounce page refreshes triggered via Turbo streams
Update copyright year to 2024 (hotwired#1118)
Turbo 8.0.0-beta.2
Set aria-busy on the form element during a form submission (hotwired#1110)
Dispatch `turbo:before-fetch-{request,response}` during preloading (hotwired#1034)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When navigating to another page, Turbo merges the
<head>contents from the current and new pages, which results in a<head>containing the superset of both.For certain items, like scripts, this makes sense. We have no way to remove a running script. But that's not the case for styles: styles can be unloaded easily, and for the page to display properly, we need to do so. Otherwise styles kept in scope from a previous page could cause a page to render incorrectly.
The common way to avoid this has been to use
data-turbo-track="reload"to force a reload if styles change. This works, but it's a bit heavy-handed, causing full page reloads that could have been avoided.There are a couple of common cases where updating styles on the fly would be useful:
Deploying a CSS change. Clients should be able to pick up the change without having to reload.
Allowing pages to include their own specific styles, rather than bundle them all together for the whole site. This can reduce the size of the loaded CSS, and make it easier to avoid style conflicts.