Running CSS on New Pages

Similarly to Reloading JS Taxi can also reload and run CSS present from the next page after navigation.

If enabled, this feature will run just after the NAVIGATE_IN event, after the new content has been appended to the DOM, but before the Renderer.onEnter method is called.

Choosing which stylesheets are reloaded

By default, only stylesheets with the data-taxi-reload attribute are reloaded after a navigation.

<!-- reloaded -->
<link rel="stylesheet" href="/foo.css" data-taxi-reload />

<!-- this is not reloaded -->
<link rel="stylesheet" href="/bar.css" />

If using the super cool astro or some other build tool which outputs per-page/component CSS, reloadCssFilter accepts a callback function to filter styles on the new page and decide which to load.

Your callback is passed the link element, and must return a boolean indicating whether the stylesheet should be reloaded or not (you could check the src or id attributes for example).

Here is the default callback for reloadCssFilter:

 (element) => element.dataset.taxiReload !== undefined

and here is a custom example which loads everything:

import { Core } from '@unseenco/taxi'

const taxi = new Core({
	reloadCssFilter: (element) => true
})

Disabling this feature

Just set reloadCssFilter to false when initing Taxi:

import { Core } from '@unseenco/taxi'

const taxi = new Core({
	reloadCssFilter: false
})