Astro 3.0 scoped styles

[oliverlynch]

Astro 3.0 has recently released, changing how it handles scoped styles. The two main issues are support for the new data-attribute scoped styles, and the change to lowercase scoped style hashes.

Bookshop components in the editor seem to use the old scoped style system regardless of the package astro version, meaning Astro 3.x components render without their scoped styles in the editor. This doesn't affect builds - just the editor.

Examples

Astro 2.x output

<section class="astro-VGEL2S7S">...</section>

Output CSS selector section:where(.astro-VGEL2S7S)

New default output scopedStyleStrategy: "attribute"

<section data-astro-cid-vgel2s7s="">...</section>

Output CSS selector section[data-astro-cid-vgel2s7s]

New output scopedStyleStrategy: "where"

<section class="astro-vgel2s7s">...</section>

Output CSS selector section:where(.astro-vgel2s7s)

New output scopedStyleStrategy: "class"

<section class="astro-vgel2s7s">...</section>

Output CSS selector section.astro-vgel2s7s

CloudCannon Editor output

<section class="astro-VGEL2S7S">...</section>

Same as 2.x; Doesn't match with any of the new CSS selectors

[edmeehan]

I can confirm I am seeing the same issue. Currently looking for a work around or solution.

[bglw]

Hi all! Sorry to delay — we have a fix for this in the works. Need to play some CI golf but will get that out this week.

[bglw]

Hey all — Bookshop 3.7.0 has been released with many improvements for Astro 3.0. Let me know if you find any issues!