Turbo-rails keeps CSS loaded from the previous page

1

I’m using turbo-rails 1.1.1 with Rails 7. I have two pages: first includes Tailwind css, second uses Bootstrap:

<head>
   <link rel="stylesheet" href="tailwind.css">
</head>

<head>
   <link rel="stylesheet" href="bootstrap.css">
</head>

When the user navigates from Tailwind page to the Bootstrap, the page now includes both styles, which breaks the styling:

<head>
   <link rel="stylesheet" href="tailwind.css">
   <link rel="stylesheet" href="bootstrap.css">
</head>

It looks like turbo-rails keeps all the CSS links from the previous page.

Question 1: Is it expected behaviour?

Question 2: Is there a way to prevent turbo-rails from keeping CSS links from previous pages?

2

Just wanted to say that I ran into this issue as well, not with different frameworks, but with different layouts. I was navigating from one layout to another layout, and each layout has its own CSS file. The problem is, there are some naming collisions in my CSS classes and one layout’s CSS started overwriting the CSS classes from the previous layout.

I believe this is the expected behaviors since Turbo Drive merges the contents of the <head> tag on navigation. From the documentation:

During rendering, Turbo Drive replaces the current <body> element outright and merges the contents of the <head> element. The JavaScript window and document objects, and the <html> element, persist from one rendering to the next.

The way I’m coping with this is that I’m going to unify my CSS and make sure that there are no conflicting names.

For you, dealing with two different frameworks sounds extra challenging. I don’t have any good advice there, sorry. Maybe the best thing to do would be turn off Turbo Drive [data-turbo="false"] on links where you’re about to navigate away from one framework and into another. This will cause a full-page refresh, which will give you a blank slate, so to speak.

3

Use data-turbo-track="reload"

<head>
   <link rel="stylesheet" href="tailwind.css" data-turbo-track="reload">
</head>

<head>
   <link rel="stylesheet" href="tailwind.css" data-turbo-track="reload">
</head>

From Turbo Handbook > Attributes:

FYI, I include data-turbo-track="reload" on all my css or javascript assets that I anticipate may change over time anyway. It also works in the above scenario, where an asset is no longer loaded (e.g. in a new layout), it will force a reload. A more dynamic version of data-turbo="false"] in that it clears cache as needed, not on every request.

4

Doesn’t the “when changed” require some sort of a unique filename? I thought that is why they suggest using a content-hash in the filename.

5

Correct. However, for the original posted scenario where the a CSS link is added to one HTML Head, but removed at some point in a request. If the link includes data-turbo-track="reload", it will force a turbo reload and prevent the issue of having both assets in the head at the same time.

6

Ah, ok. I haven’t played with that feature yet so I wasn’t sure.