CSS Variables Defined in Components Disappear After Navigating to a New Page Using Taxi

[DjidjaleskaSandra]

Describe the bug
I'm using Taxi in my project to enhance navigation with smooth page transitions. However, I've encountered an issue where CSS variables defined within my components are not persisting across page navigations. Initially, on the home page, the CSS variables are applied correctly. But when I navigate to another page and then return, the CSS variables disappear, affecting the styling of my components.

To Reproduce
Steps to reproduce the behavior:

1. Start on the home page where CSS variables are defined and applied correctly to components.
2. Use Taxi navigation to move to another page in the application.
3. Return to the home page, either by back navigation or by clicking a link back to home.
4. Observe that CSS variables are no longer applied to the components.

Expected:
CSS variables defined in components persist across all pages and are reapplied correctly when navigating back to a page where they were initially loaded.

Info

missingCssVariables.mov

• Device: [Macbook]
• OS: [MacOS Ventura 13.4.1 (22F82)]
• Browser [Chrome]
• Version [123.0.6312.87 (Official Build) (arm64)]

[jakewhiteley]

@DjidjaleskaSandra How are your CSS variables defined?

Are they in a style tag on the page, or are they in an external stylesheet which is being loaded only on the second page?