Allow additional CSS class to be added

[dallyh]

Currently when i build a project with this integration, custom styles which I define do get overwritten after a page navigation, because after navigation, the styles which are added to head for this component by Astro do take precedence over custom styles.

Both are set globally, and I'm not sure what is causing this atm. To me it seems like when the page first loads, browser finds the style in the head, and then applies the style in a CSS file, thus it has precedence. After a navigation occurs, the head is replaced and the browser changes the specificity of those selectors, because the head is new?

EDIT:

Yeah, it is simply because of navigation, the order of head is changed, and the CSS file is before the components style.
This cannot be altered as I see it, so could there be a workaround of allowing a custom class to also be added to the element? Currently only the class name can be altered, but this is not enough.

First load:

Subsequent navigation:

The code which I use (then is is just added to the head):

---
import Indicator from "astro-loading-indicator/component";
---

<Indicator color="rgba(var(--accent), 1)" />

<style is:global>
	.astro-loading-indicator {
		top: var(--header-height);
		z-index: 9999;
		left: 0;
	}
</style>

This behavior can be observed after a project is built. In development everything is fine.

First load:

After navigation to a different page:

[florian-lefebvre]

Interesting, I'm not sure how that works. @martrapp would you mind helping me on this one? What's the preferred approach here?

[martrapp]

Hi @dallyh, without looking further into the how's and why's of re-orders, could you try whether increasing the specificity helps:

<style is:global>
	:root .astro-loading-indicator {
		top: var(--header-height);
		z-index: 9999;
		left: 0;
	}
</style>

[dallyh]

@martrapp Yes, that did the trick! I forgot that I could increase the specificity like this. Thanks!

[florian-lefebvre]

@dallyh do you want to make a PR to the package README that shows this? Would love such contribution!

[dallyh]

@florian-lefebvre Sure! Is this enough? #8

[florian-lefebvre]

Perfect thank you!