Contrib.social

Turbo: CSS files merged into the <head> on Turbo navigation always appended instead of preserving full page load order, causing CSS specificity issues

Open on Drupal.org →
Created on 5 November 2023, about 1 year ago

Problem/Motivation

One of the ways CSS determines what property value to use when selectors have the same specificity is their source order, with later instances overriding earlier ones; this also applies to CSS files referenced via <link> elements, where their order in the HTML document/DOM also determines which property value is used when selectors have the same specificity, with later files' values being used over earlier ones. Unfortunately, Turbo breaks this in some edge cases by simply appending the <link> elements like so:

document.head.appendChild(element)

This is present in both the current stable version (7.3.0) and the most recent commit at the time of writing.

Steps to reproduce

This is most easily demonstrated on the Gin admin theme → in dark mode with widgets such as dropbuttons and vertical tabs; doing a full page load on a page that doesn't have them and then navigating to a page that does results in the Claro CSS <link> elements to be appended to the <head> after the Gin CSS that would normally override the Claro colours with dark mode colours, so

Note that this primarily manifests with CSS aggregation off as aggregation preserves the correct order/weights when combining CSS files, and the observed occurrences seem to get aggregated into the same aggregate files, thus fixing this issue in a roundabout way.

Proposed resolution

We should first open an issue on the Turbo GitHub with a really simple reproducible case to get that ball rolling.

If this turns out to be a bigger issue for us, we can try to implement a workaround to re-order the inserted <link> elements via a MutationObserver or (better yet) via one of the Turbo events as CSS files seem to delay triggering of the turbo:render event while they load.

Remaining tasks

See previous heading.

User interface changes

Stuff less borked.

API changes

None?

Data model changes

None.

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024