Improvements to Style Negotiation in SPA Mode

Created on 30 September 2023, over 1 year ago

Problem/Motivation

Making SPA mode work seamlessly with Drupal's aggregated and sometimes page specific css was difficult. We're using the htmx head-support extension to negotiate this, which merges the head adding and removing things as necessary during client side routing events. With aggregated CSS I found the removal to be too aggressive which resulted in a flash of unstyled content. To fix this we're not removing link elements with rel=stylesheet, along with any style tags. This seems to work well in practice, even though it feels pretty gross to just keep adding stylesheets. I think this grossness might just be the reality of client side navigation in an SPA.

Steps to reproduce

Proposed resolution

If we find that SPA mode is useful for people (and MPA mode continues to have limited browser support) I wonder if we can be smarter about any of this.
* Could we essentially retain styles for 'this page and the previous page'. This should prevent major layout shift, but also prevent an ever increasing list of styles.
* Are we covering all the stylesheets we need. Preload feels like something we might be missing based on the way we're checking elements in the head.
* Should we actually be retaining style elements? This does feel much more page specific, and also seems less likely to contribute to major layout shift.

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Postponed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States brianperry

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

Comments & Activities

Production build 0.71.5 2024