@master/internal-site 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {

package/src/astro/propagated-assets.ts

@@ -11,19 +11,29 @@ export interface PropagatedModule<T> {
   collectedStyles: (string | { id: string, content: string })[]
 }
 
+export interface PageStyle {
+  /** The dev-time Vite module id. Hydrated islands that import the same CSS update this element in place. */
+  id?: string
+  content: string
+}
+
 export interface PageAssets {
   links: string[]
-  styles: string[]
+  styles: PageStyle[]
 }
 
 export const propagatedAssetsQuery = '?astroPropagatedAssets'
 
 export function mergeAssets(...modules: PropagatedModule<unknown>[]): PageAssets {
   const links = new Set<string>()
-  const styles = new Set<string>()
+  const styles = new Map<string, PageStyle>()
   for (const module of modules) {
     module.collectedLinks.forEach((link) => links.add(link))
-    module.collectedStyles.forEach((style) => styles.add(typeof style === 'string' ? style : style.content))
+    for (const style of module.collectedStyles) {
+      const record: PageStyle = typeof style === 'string' ? { content: style } : style
+      const key = record.id ?? record.content
+      if (!styles.has(key)) styles.set(key, record)
+    }
   }
-  return { links: [...links], styles: [...styles] }
+  return { links: [...links], styles: [...styles.values()] }
 }

package/src/layouts/Document.astro

@@ -56,7 +56,8 @@ if (['dark', 'light'].includes(value)) document.documentElement.style.colorSchem
         Their request-local context must already exist, even with cached CSS/JS. */}
     <script is:inline type="application/json" id={siteContextElementId} set:html={siteContextJSON}></script>
     {assets.links.map((href) => <link rel="stylesheet" href={href} />)}
-    {assets.styles.map((css) => <style is:inline set:html={css}></style>)}
+    {/* Without the dev id, Vite appends a second copy when an island imports the same CSS, reordering the cascade. */}
+    {assets.styles.map(({ id, content }) => <style is:inline data-vite-dev-id={id} set:html={content}></style>)}
     <title>{head.title}</title>
     {config.feeds?.map(feed => <link rel="alternate" type={feed.type} title={feed.title} href={new URL(feed.href, config.origin).href} />)}
     {head.tags.map(({ tag: Tag, attributes }) => <Tag {...attributes} />)}

package/src/styles/docs-shell/prose.css

@@ -40,7 +40,7 @@
 
   /* Media: whole pictures on the code panels' corner, with the quiet perimeter every image keeps — except an
      illustration, which is a tray's stage and is told apart by its tone alone. */
-  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *)) { height: auto; }
+  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *, .ui-tree *)) { height: auto; }
   .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *, .document-illustration *, :focus-visible)) { outline: 1px solid var(--color-line-media); outline-offset: -1px; }
   :is(figure, p, a, picture):is(.ui-prose > *) :is(img, video):not(:where(.site-demo *, [data-demo-container] *)), :is(img, video):is(.ui-prose > *) { display: block; width: 100%; max-width: none; border-radius: var(--ui-radius-xl); }
   :is(a, picture):is(.ui-prose > *) { display: block; }