Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

8.0.0-beta.3 - Issue with stylesheets #1139

Closed
meneerprins opened this issue Jan 24, 2024 · 2 comments
Closed

8.0.0-beta.3 - Issue with stylesheets #1139

meneerprins opened this issue Jan 24, 2024 · 2 comments

Comments

@meneerprins
Copy link

For some context, I am using a Ruby on Rails app with Vite Ruby. Now with the latest beta version this PR is included: Remove unused stylesheets when navigating. That solves the issue of overlapping styles when switching between layouts (when you remove the data-turbo-track="reload" attribute) but it also causes some issues:

  • When the Vite dev server is on, during a Turbo navigation, all the styles disappear (probably because the stylesheets gets injected)
  • In my case, many stimulus controllers are lazy loaded and when you import the styles of a library inside the stimulus controller for example import '@splidejs/splide/dist/css/splide-core.min.css';, the styles also get removed.

Anyone has an idea for a solution for this? (I saw there is some patch for Trix here https://github.com/hotwired/turbo/pull/1133/files to add data-turbo-permanent but in many cases you have no control over the tags when they are injected by either tools or 3rd party libraries).
afcapel added a commit that referenced this issue Jan 25, 2024
@afcapel
Introduce data-turbo-track="dynamic"
2bf0d33 
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 afcapel mentioned this issue Jan 25, 2024
Merged
@afcapel
Copy link
Collaborator

afcapel commented Jan 25, 2024

We've thought about this and, to avoid breaking changes, we're are going to make the behavior to remove unused stylesheets opt-in, instead of the new default. See #1140

afcapel added a commit that referenced this issue Jan 25, 2024
@afcapel
Introduce data-turbo-track="dynamic" (#1140)
814099c 
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
Copy link
Collaborator

afcapel commented Jan 25, 2024 •
edited

@meneerprins thanks for reporting. This was fixed in #1140

We'll release a new beta version soon.

@afcapel afcapel closed this as completed Jan 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@afcapel @meneerprins