starlight-theme-celestia 0.2.3 → 0.2.4

package/lib/tailwind.gen.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -244,12 +244,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .start {
-    inset-inline-start: var(--spacing);
-  }
-  .end {
-    inset-inline-end: var(--spacing);
-  }
   .top-\(--sl-nav-height\) {
     top: var(--sl-nav-height);
   }
@@ -365,6 +359,10 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .celestia-scroll-container {
+    scrollbar-width: thin;
+    scrollbar-color: var(--sl-color-gray-5) transparent;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -594,10 +592,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .celestia-scroll-container {
-    scrollbar-width: thin;
-    scrollbar-color: var(--sl-color-gray-5) transparent;
-  }
   .group-hover\:-translate-x-1 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-celestia",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A clean, modern theme for Astro Starlight",
   "license": "MIT",
   "repository": {
@@ -22,7 +22,8 @@
   ],
   "scripts": {
     "build": "bun run build:tailwindcss",
-    "build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css"
+    "build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css",
+    "test": "bun test"
   },
   "dependencies": {
     "@aria-ui/core": "^0.2.0",
@@ -38,7 +39,7 @@
     "rehype": "^13.0.2",
     "remark-custom-header-id": "^1.0.0",
     "shiki-twoslash-renderer": "^0.3.3",
-    "starlight-versions": "^0.8.0"
+    "starlight-versions": "^0.9.0"
   },
   "peerDependencies": {
     "@astrojs/starlight": "*"
@@ -49,7 +50,7 @@
     }
   },
   "devDependencies": {
-    "@astrojs/starlight": "^0.38.3",
+    "@astrojs/starlight": "^0.39.0",
     "@tailwindcss/cli": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^25.0.0",

package/src/index.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "bun:test";
+
+import starlightCelestiaTheme from "./index";
+
+test("default factory returns a valid Starlight plugin", () => {
+  const plugin = starlightCelestiaTheme();
+
+  expect(plugin.name).toBe("starlight-theme-celestia");
+  expect(plugin.hooks).toHaveProperty("config:setup");
+  expect(typeof plugin.hooks["config:setup"]).toBe("function");
+});

package/src/index.ts

@@ -31,7 +31,7 @@ export default function starlightCelestiaTheme(options: ThemeCelestiaOptions = {
   return {
     name: "starlight-theme-celestia",
     hooks: {
-      setup: async ({ config, updateConfig, addIntegration, astroConfig }) => {
+      "config:setup": async ({ config, updateConfig, addIntegration, astroConfig }) => {
         let useTailwind: boolean;
 
         if (options.stylingSystem === "css") {

package/src/shiki-transformer-container.ts

@@ -18,6 +18,31 @@ export function transformerContainer(): ShikiTransformer {
         throw new Error(`[${name}] Expected at least one child`);
       }
 
+      // Mermaid blocks must reach downstream rehype plugins (e.g. rehype-mermaid)
+      // unwrapped. Shiki rewrites the original `<pre><code class="language-mermaid">`
+      // into highlighted tokens with `data-language="mermaid"`, which strips the
+      // class rehype-mermaid keys off. Restore the pre-shiki structure so any
+      // mermaid strategy (pre-mermaid, inline-svg, img-svg, img-png) can pick it
+      // up. If no mermaid plugin is configured the block falls back to plain code.
+      if (this.options.lang === "mermaid") {
+        node.children = [
+          {
+            type: "element",
+            tagName: "pre",
+            properties: {},
+            children: [
+              {
+                type: "element",
+                tagName: "code",
+                properties: { className: ["language-mermaid"] },
+                children: [{ type: "text", value: this.source }],
+              },
+            ],
+          },
+        ];
+        return node;
+      }
+
       const pre = node.children.find((child) => isElement(child, "pre"));
 
       if (!pre) {