I'm creating a plugin that uses Astro integration's injectRoute, in which I'm trying to render the StarlightPage but no CSS is being added to my custom page.
#StarlightPage being rendered without CSS
rotund lichen
stiff geyserBOT
Hi @rotund lichen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
This is a known challenge when using injectRoute with StarlightPage. The issue is that CSS injected via Starlight's customCss config or Starlight's own styles may not automatically be included in routes injected via Astro's injectRoute.
Here are a few approaches to consider:
1. Use injectScript with page-ssr to inject CSS
From within your integration's astro:config:setup hook, you can use injectScript with the page-ssr stage to inject a CSS import into every page, which Vite will then optimize and resolve:
injectScript('page-ssr', 'import "your-styles.css";');
2. Import CSS directly in your injected route's .astro file
If your injected route uses an .astro file, you can import CSS directly in the frontmatter:
---
import '../styles/your-styles.css';
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
---
<StarlightPage frontmatter={{ title: 'My custom page' }}>
<!-- content -->
</StarlightPage>
3. Use Starlight's customCss config option
If the styles you need are Starlight's own styles, make sure your plugin is correctly configuring Starlight's customCss option in astro.config.mjs:
starlight({
customCss: ['./src/custom-styles.css'],
});
Important caveat: The knowledge sources do not explicitly document why StarlightPage rendered via injectRoute would be missing CSS, nor do they provide a definitive fix specific to this scenario. The StarlightPage component is designed to render Starlight's layout and styles [StarlightPage component], so if CSS is missing, it's likely that the styles aren't being bundled with the injected route. I'd recommend checking the Astro Discord #starlight channel for more targeted help on this plugin-specific issue.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
rotund lichen
.
rotund lichen
----------------------
This is a known challenge when using `injectRoute` with `...
@stiff geyser I'm not trying to add custom CSS, Starlight's own CSS is not being added
stiff geyserBOT
Let me check the knowledge base for you again. One moment! :books:
The knowledge sources do not contain enough information to definitively explain why Starlight's own built-in CSS would be missing when rendering StarlightPage via injectRoute in a plugin.
What the knowledge sources do confirm is that StarlightPage is designed to render "a full page of content using Starlight's layout and styles" [StarlightPage component], so Starlight's styles should be included when using it. However, the sources don't document the specific behavior of StarlightPage when used inside a route injected via injectRoute.
One thing worth trying based on the available information: you can use injectScript with the page-ssr stage in your integration to force a CSS import into every page, including injected routes:
injectScript('page-ssr', 'import "@astrojs/starlight/style/...";');
The page-ssr stage is specifically noted as useful for injecting CSS imports that Vite will then optimize and resolve. [injectScript option]