Badge styles break when refreshing with sidebar entry active

[kevin8181]

What version of starlight are you using?

0.21.5

What version of astro are you using?

4.3.5

What package manager are you using?

npm

What operating system are you using?

Linux

What browser are you using?

Firefox and chromium

Describe the Bug

• using tailwind set up according to the docs
• Create a page that displays a badge in the sidebar
• Go to the page
• Refresh
• The badge style is broken
• Navigate to a different page without a badge
• Refresh
• The badge styling is fixed

live demo https://starlight-lovat.vercel.app/

Link to Minimal Reproducible Example

https://github.com/tgoHQ/knowledgebase

Participation

• I am willing to submit a pull request for this issue.

[HiDeoo]

Thanks for your report. I think in this case there are multiple issues.

First, in your steps, you mention styles being broken in step 5 after a refresh. I think the style are actually broken after the step 3:

The badge style is not updated and it should be to match Starlight default behavior when navigating to a page with a badge and get an outlined style:

This first issue seems to be related to view transitions and the usage of astro-vtbot as commenting out the component override using astro-vtbot in the Astro configuration seems to fix this issue and navigation to a page with a badge will correctly display the outlined style.

I opened an issue for this first issue in the astro-vtbot repository.

However, I think there is a second issue with the outlined badge style with Tailwind as we can see in the 2 previous screenshots. The badge outline with Tailwind is way thicker than the default Starlight one.

The issue in this case seems to be that we internally use the .outline CSS class to apply the outline style to the badge. However, this class is also used in Tailwind to apply outline-style: solid;.

Without this extra style, the style looks closer to the default Starlight one:

[martrapp]

Hi @kevin8181, I'm sorry that astro-vtbot is the source of trouble here!
Thank you very much, @HiDeoo, for the initial analyzes and opening an issue.
I will look into that now!

[HiDeoo]

I'm sorry that astro-vtbot is the source of trouble here!

To clarify, I think this issue also spotted a Starlight issue too so definitely not just a potential astro-vtbot issue. Thanks a lot for jumping in to help! 🙌

[martrapp]

Haha, I didn't take it that way either! I'm happy when we can help fix bugs. And it's even more motivating when you know that people are using the things you make, so I don't want to keep you waiting too long ;-)

[martrapp]

Here is my preliminary analysis:

I assumed that Starlight made the styling of active sidebar entries solely dependent on aria-current="page".
But this is not the case. As HiDeoo already wrote, the badges on the current page get an outline class instead of the variant class (.note, .danger, ...).

The Starlight support of astro-vtbot currently only handles aria-current="page", but it a) does not replace the variant class with the outline class when navigating to a page with a badge. And when navigating away from the page, it
b) does not replace .outline with the variant that was lost when .outline was set ;-) .

The solution for the bag would be to do a) and b). But if Starlight changes the content class due to the overlap with Tailwind, it would be good to know what the future Starlight solution looks like.

[martrapp]

Of course, I would also be happy if Starlight would not set the .outline class at all, keep the variant class on all entries and overrides the current page badge like this:

<style is:global>
  [aria-current="page"] .sl-badge {
    --sl-color-bg-badge: transparent;
    --sl-color-border-badge: currentColor;
    color: inherit;
  }
</style>

But I understand if there are concerns, as <Badge> as the inner component now makes assumptions about its use in the sidebar.

[martrapp]

@hippotastic can't someone ;-) add Expressive Code to GitHub, PLEASE!

[martrapp]

Of course, I would also be happy if Starlight would not set the .outline class at all, keep the variant class on all entries and overrides the current page badge styling

If you want to go that route, I offer to do a PR for it.

Edited: After having a second look I would say it would fit very well to the other aria-current='page' styling in SidebarSublist.astro, there even without is:global

[HiDeoo]

Edited: After having a second look I would say it would fit very well to the other aria-current='page' styling in SidebarSublist.astro, there even without is:global

This could indeed be a solution to use a selector like [aria-current='page'] :global(.sl-badge) but we would first need to confirm that #1530 does not expose the outline variant. I edited the description of #1765 to mention your idea as an alternative solution until we decide which one to go with. 👍

[martrapp]

Saw that, thank you! Love #1530, @kevinzunigacuellar already did all the work. That PR would reestablish my earlier assumption that sidebar current entry styling only depends on aria-current='page' 😀

[HiDeoo]

I found a thread mentioning that the outline variant is meant to be internal and not exposed even with the <Badges> component so I closed #1765 and #1530 will indeed be the proper fix to both issues 🎉