[number];
From 79abdfee15fab92c91f3519fcc13bf89362e825a Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Tue, 7 Oct 2025 14:37:22 +0200
Subject: [PATCH 05/13] fix: linting errors
---
packages/starlight-plugin-demo/index.ts | 2 +-
packages/starlight-plugin-demo/package.json | 2 +-
packages/starlight/integrations/vite-layer-order.ts | 2 +-
pnpm-lock.yaml | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/starlight-plugin-demo/index.ts b/packages/starlight-plugin-demo/index.ts
index 398ee7fd27b..ea726a09ef9 100644
--- a/packages/starlight-plugin-demo/index.ts
+++ b/packages/starlight-plugin-demo/index.ts
@@ -6,7 +6,7 @@ export default function starlightPluginDemo(): StarlightPlugin {
return {
name: 'starlight-plugin-demo',
hooks: {
- 'config:setup': async ({ addIntegration }) => {
+ 'config:setup': ({ addIntegration }) => {
addIntegration({
name: 'starlight-plugin-integration',
hooks: {
diff --git a/packages/starlight-plugin-demo/package.json b/packages/starlight-plugin-demo/package.json
index f7616ad09d0..07419ccf079 100644
--- a/packages/starlight-plugin-demo/package.json
+++ b/packages/starlight-plugin-demo/package.json
@@ -13,6 +13,6 @@
"./package.json": "./package.json"
},
"devDependencies": {
- "@astrojs/starlight": "^0.35.2"
+ "@astrojs/starlight": "workspace:*"
}
}
diff --git a/packages/starlight/integrations/vite-layer-order.ts b/packages/starlight/integrations/vite-layer-order.ts
index 2cf57df39a0..fe2c921b976 100644
--- a/packages/starlight/integrations/vite-layer-order.ts
+++ b/packages/starlight/integrations/vite-layer-order.ts
@@ -29,7 +29,7 @@ export function vitePluginStarlightCssLayerOrder(): VitePlugin {
try {
ast = this.parse(code);
- } catch (error) {
+ } catch {
return;
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27c92baa806..b261ab87f7d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -289,7 +289,7 @@ importers:
packages/starlight-plugin-demo:
devDependencies:
'@astrojs/starlight':
- specifier: ^0.35.2
+ specifier: workspace:*
version: link:../starlight
packages/starlight/__e2e__/fixtures/basics:
From f19abd27c35e2c5a305013b8d6c878637bbca8f7 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 15:15:27 +0200
Subject: [PATCH 06/13] refactor: update variable name
Co-authored-by: delucis <357379+delucis@users.noreply.github.com>
---
packages/starlight/integrations/vite-layer-order.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/starlight/integrations/vite-layer-order.ts b/packages/starlight/integrations/vite-layer-order.ts
index fe2c921b976..41277e49c4f 100644
--- a/packages/starlight/integrations/vite-layer-order.ts
+++ b/packages/starlight/integrations/vite-layer-order.ts
@@ -33,7 +33,7 @@ export function vitePluginStarlightCssLayerOrder(): VitePlugin {
return;
}
- let isStarlightPage = false;
+ let hasStarlightPageImport = false;
for (const node of ast.body) {
if (node.type !== 'ImportDeclaration') continue;
@@ -44,11 +44,11 @@ export function vitePluginStarlightCssLayerOrder(): VitePlugin {
);
if (!importDefaultSpecifier) continue;
- isStarlightPage = true;
+ hasStarlightPageImport = true;
break;
}
- if (!isStarlightPage) return;
+ if (!hasStarlightPageImport) return;
// Format path to unix style path.
const filename = id.replace(/\\/g, '/');
From 7075b0b9ba189e51f3938f1a50f9aff40fc33123 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 15:15:49 +0200
Subject: [PATCH 07/13] test: add vite plugin to unit tests
Co-authored-by: delucis <357379+delucis@users.noreply.github.com>
---
packages/starlight/__tests__/test-config.ts | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/starlight/__tests__/test-config.ts b/packages/starlight/__tests__/test-config.ts
index 73ae958c737..8c04c39499c 100644
--- a/packages/starlight/__tests__/test-config.ts
+++ b/packages/starlight/__tests__/test-config.ts
@@ -5,6 +5,7 @@ import { getViteConfig } from 'astro/config';
import { vitePluginStarlightUserConfig } from '../integrations/virtual-user-config';
import { runPlugins, type StarlightUserConfigWithPlugins } from '../utils/plugins';
import { createTestPluginContext } from './test-plugin-utils';
+import { vitePluginStarlightCssLayerOrder } from '../integrations/vite-layer-order';
const testLegacyCollections = process.env.LEGACY_COLLECTIONS === 'true';
@@ -29,6 +30,7 @@ export async function defineVitestConfig(
);
return getViteConfig({
plugins: [
+ vitePluginStarlightCssLayerOrder(),
vitePluginStarlightUserConfig(
command,
starlightConfig,
From 3a8e228cd88ca20ca22d7cde99ed9fd0e70ef9f1 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 15:22:05 +0200
Subject: [PATCH 08/13] chore: remove demo content
---
.changeset/config.json | 2 +-
docs/__a11y__/test-utils.ts | 13 +-----
docs/astro.config.mjs | 19 +--------
docs/package.json | 3 +-
docs/src/pages/tests/1.astro | 35 ----------------
docs/src/pages/tests/2.astro | 35 ----------------
docs/src/pages/tests/3.astro | 36 -----------------
docs/src/pages/tests/4.astro | 35 ----------------
packages/starlight-plugin-demo/index.ts | 40 -------------------
packages/starlight-plugin-demo/package.json | 18 ---------
packages/starlight-plugin-demo/routes/5.astro | 33 ---------------
packages/starlight-plugin-demo/routes/6.astro | 33 ---------------
packages/starlight-plugin-demo/routes/7.astro | 34 ----------------
packages/starlight-plugin-demo/routes/8.astro | 33 ---------------
pnpm-lock.yaml | 9 -----
15 files changed, 4 insertions(+), 374 deletions(-)
delete mode 100644 docs/src/pages/tests/1.astro
delete mode 100644 docs/src/pages/tests/2.astro
delete mode 100644 docs/src/pages/tests/3.astro
delete mode 100644 docs/src/pages/tests/4.astro
delete mode 100644 packages/starlight-plugin-demo/index.ts
delete mode 100644 packages/starlight-plugin-demo/package.json
delete mode 100644 packages/starlight-plugin-demo/routes/5.astro
delete mode 100644 packages/starlight-plugin-demo/routes/6.astro
delete mode 100644 packages/starlight-plugin-demo/routes/7.astro
delete mode 100644 packages/starlight-plugin-demo/routes/8.astro
diff --git a/.changeset/config.json b/.changeset/config.json
index 4fca4776934..f50e3128e03 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -9,7 +9,7 @@
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
- "ignore": ["starlight-docs", "@example/*", "starlight-file-icons-generator", "@e2e/*", "starlight-plugin-demo"],
+ "ignore": ["starlight-docs", "@example/*", "starlight-file-icons-generator", "@e2e/*"],
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
"onlyUpdatePeerDependentsWhenOutOfRange": true
}
diff --git a/docs/__a11y__/test-utils.ts b/docs/__a11y__/test-utils.ts
index 44bc47915ff..b2a9e9d7caa 100644
--- a/docs/__a11y__/test-utils.ts
+++ b/docs/__a11y__/test-utils.ts
@@ -68,18 +68,7 @@ class DocsSite {
throw new Error('No URLs found in sitemap.');
}
- // TODO(HiDeoo) Revert this change
- // const urls: string[] = [];
- const urls: string[] = [
- 'http://localhost:4321/tests/1/',
- 'http://localhost:4321/tests/2/',
- 'http://localhost:4321/tests/3/',
- 'http://localhost:4321/tests/4/',
- 'http://localhost:4321/tests/5/',
- 'http://localhost:4321/tests/6/',
- 'http://localhost:4321/tests/7/',
- 'http://localhost:4321/tests/8/',
- ];
+ const urls: string[] = [];
for (const site of sites) {
const url = site.replace(config.sitemap.replace.query, config.sitemap.replace.value);
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 5732ade2d84..a059280810c 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -3,8 +3,6 @@ import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightLinksValidator from 'starlight-links-validator';
import markdocGrammar from './grammars/markdoc.tmLanguage.json';
-// TODO(HiDeoo) Delete
-import starlightPluginDemo from 'starlight-plugin-demo';
export const locales = {
root: { label: 'English', lang: 'en' },
@@ -72,20 +70,6 @@ export default defineConfig({
customCss: ['./src/assets/landing.css'],
locales,
sidebar: [
- // TODO(HiDeoo) Delete this group.
- {
- label: 'Tests',
- items: [
- { label: '1', link: 'tests/1' },
- { label: '2', link: 'tests/2' },
- { label: '3', link: 'tests/3' },
- { label: '4', link: 'tests/4' },
- { label: '5 (plugin)', link: 'tests/5' },
- { label: '6 (plugin)', link: 'tests/6' },
- { label: '7 (plugin)', link: 'tests/7' },
- { label: '8 (plugin)', link: 'tests/8' },
- ],
- },
{
label: 'Start Here',
translations: {
@@ -205,8 +189,7 @@ export default defineConfig({
errorOnInconsistentLocale: true,
}),
]
- : // TODO(HiDeoo) Delete
- [starlightPluginDemo()],
+ : [],
}),
],
});
diff --git a/docs/package.json b/docs/package.json
index 365402b44ac..2059be1dc02 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,8 +22,7 @@
"@types/culori": "^2.1.1",
"astro": "^5.6.1",
"culori": "^4.0.1",
- "sharp": "^0.34.2",
- "starlight-plugin-demo": "workspace:*"
+ "sharp": "^0.34.2"
},
"devDependencies": {
"@playwright/test": "^1.45.0",
diff --git a/docs/src/pages/tests/1.astro b/docs/src/pages/tests/1.astro
deleted file mode 100644
index 0954e2a6705..00000000000
--- a/docs/src/pages/tests/1.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-
-// TODO(HiDeoo) delete this page and its parent directory.
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/pages/tests/2.astro b/docs/src/pages/tests/2.astro
deleted file mode 100644
index 749f210b969..00000000000
--- a/docs/src/pages/tests/2.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-
-// TODO(HiDeoo) delete this page and its parent directory.
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/pages/tests/3.astro b/docs/src/pages/tests/3.astro
deleted file mode 100644
index cca356fe61c..00000000000
--- a/docs/src/pages/tests/3.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-
-// TODO(HiDeoo) delete this page and its parent directory.
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/pages/tests/4.astro b/docs/src/pages/tests/4.astro
deleted file mode 100644
index 44f5803808e..00000000000
--- a/docs/src/pages/tests/4.astro
+++ /dev/null
@@ -1,35 +0,0 @@
----
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-
-// TODO(HiDeoo) delete this page and its parent directory.
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/packages/starlight-plugin-demo/index.ts b/packages/starlight-plugin-demo/index.ts
deleted file mode 100644
index ea726a09ef9..00000000000
--- a/packages/starlight-plugin-demo/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { StarlightPlugin } from '@astrojs/starlight/types';
-
-// TODO(HiDeoo) Delete this entire plugin.
-
-export default function starlightPluginDemo(): StarlightPlugin {
- return {
- name: 'starlight-plugin-demo',
- hooks: {
- 'config:setup': ({ addIntegration }) => {
- addIntegration({
- name: 'starlight-plugin-integration',
- hooks: {
- 'astro:config:setup': ({ injectRoute }) => {
- injectRoute({
- entrypoint: 'starlight-plugin-demo/routes/5.astro',
- pattern: '/tests/5',
- prerender: true,
- });
- injectRoute({
- entrypoint: 'starlight-plugin-demo/routes/6.astro',
- pattern: '/tests/6',
- prerender: true,
- });
- injectRoute({
- entrypoint: 'starlight-plugin-demo/routes/7.astro',
- pattern: '/tests/7',
- prerender: true,
- });
- injectRoute({
- entrypoint: 'starlight-plugin-demo/routes/8.astro',
- pattern: '/tests/8',
- prerender: true,
- });
- },
- },
- });
- },
- },
- };
-}
diff --git a/packages/starlight-plugin-demo/package.json b/packages/starlight-plugin-demo/package.json
deleted file mode 100644
index 07419ccf079..00000000000
--- a/packages/starlight-plugin-demo/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "starlight-plugin-demo",
- "version": "0.1.0",
- "private": true,
- "license": "MIT",
- "type": "module",
- "exports": {
- ".": "./index.ts",
- "./routes/5.astro": "./routes/5.astro",
- "./routes/6.astro": "./routes/6.astro",
- "./routes/7.astro": "./routes/7.astro",
- "./routes/8.astro": "./routes/8.astro",
- "./package.json": "./package.json"
- },
- "devDependencies": {
- "@astrojs/starlight": "workspace:*"
- }
-}
diff --git a/packages/starlight-plugin-demo/routes/5.astro b/packages/starlight-plugin-demo/routes/5.astro
deleted file mode 100644
index 72ba39b1b4d..00000000000
--- a/packages/starlight-plugin-demo/routes/5.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/packages/starlight-plugin-demo/routes/6.astro b/packages/starlight-plugin-demo/routes/6.astro
deleted file mode 100644
index 6479d0be250..00000000000
--- a/packages/starlight-plugin-demo/routes/6.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/packages/starlight-plugin-demo/routes/7.astro b/packages/starlight-plugin-demo/routes/7.astro
deleted file mode 100644
index 6d128d723f3..00000000000
--- a/packages/starlight-plugin-demo/routes/7.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/packages/starlight-plugin-demo/routes/8.astro b/packages/starlight-plugin-demo/routes/8.astro
deleted file mode 100644
index 6fb4c72befc..00000000000
--- a/packages/starlight-plugin-demo/routes/8.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-import { Aside, LinkButton } from '@astrojs/starlight/components';
-import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
-import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
----
-
-
- My Sub heading
-
- My custom page content and a link to the home page.
-
-
- Get started
-
- Configuration Reference
-
-
-
-
-
-
-
-
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b261ab87f7d..bd6b1f298c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,9 +74,6 @@ importers:
sharp:
specifier: ^0.34.2
version: 0.34.2
- starlight-plugin-demo:
- specifier: workspace:*
- version: link:../packages/starlight-plugin-demo
devDependencies:
'@playwright/test':
specifier: ^1.45.0
@@ -286,12 +283,6 @@ importers:
specifier: ^3.0.5
version: 3.1.1(@types/debug@4.1.12)(@types/node@18.16.19)(jiti@2.4.2)(lightningcss@1.29.3)(tsx@4.15.2)(yaml@2.6.1)
- packages/starlight-plugin-demo:
- devDependencies:
- '@astrojs/starlight':
- specifier: workspace:*
- version: link:../starlight
-
packages/starlight/__e2e__/fixtures/basics:
dependencies:
'@astrojs/starlight':
From 2919e3a57ef9a481fe513253f4c013e3f8b7613e Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 15:28:12 +0200
Subject: [PATCH 09/13] docs: revert #3199
---
docs/src/content/docs/guides/pages.mdx | 7 -------
1 file changed, 7 deletions(-)
diff --git a/docs/src/content/docs/guides/pages.mdx b/docs/src/content/docs/guides/pages.mdx
index dc7f828e7e7..5d9f8ff95ff 100644
--- a/docs/src/content/docs/guides/pages.mdx
+++ b/docs/src/content/docs/guides/pages.mdx
@@ -77,17 +77,13 @@ Read more in the [“Pages” guide in the Astro docs](https://docs.astro.build/
To use the Starlight layout in custom pages, wrap your page content with the [`` component](#starlightpage-component).
This can be helpful if you are generating content dynamically but still want to use Starlight’s design.
-This component must be the first import in your file to set up [cascade layers](/guides/css-and-tailwind/#cascade-layers) and ensure a predictable CSS order.
To add anchor links to headings that match Starlight’s Markdown anchor link styles, you can use the [`` component](#anchorheading-component) in your custom pages.
```astro
---
// src/pages/custom-page/example.astro
-// Import the `` component first to set up cascade layers.
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-
-// Import any other components you want to use in your custom page.
import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
import CustomComponent from './CustomComponent.astro';
---
@@ -109,7 +105,6 @@ The `` component renders a full page of content using Starlight
```astro
---
-// Import the `` component first to set up cascade layers.
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
---
@@ -118,8 +113,6 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
```
-Due to how [import order](https://docs.astro.build/en/guides/styling/#import-order) works in Astro, the `` component must be the first import in your file to set up [cascade layers](/guides/css-and-tailwind/#cascade-layers) used internally by Starlight to manage the order of its styles.
-
The `` component accepts the following props.
##### `frontmatter`
From 90facca95ee2724e8ae09f4cbc94977cfb487f4e Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 15:37:39 +0200
Subject: [PATCH 10/13] chore: add changeset
---
.changeset/famous-grapes-develop.md | 9 +++++++++
1 file changed, 9 insertions(+)
create mode 100644 .changeset/famous-grapes-develop.md
diff --git a/.changeset/famous-grapes-develop.md b/.changeset/famous-grapes-develop.md
new file mode 100644
index 00000000000..93aaca4443a
--- /dev/null
+++ b/.changeset/famous-grapes-develop.md
@@ -0,0 +1,9 @@
+---
+'@astrojs/starlight': minor
+---
+
+Ensures that Starlight CSS layer order is predictable in custom pages using the `` component.
+
+Previously, due to how [import order](https://docs.astro.build/en/guides/styling/#import-order) works in Astro, the `` component had to be the first import in custom pages to set up [cascade layers](https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers) used internally by Starlight to manage the order of its styles.
+
+With this change, this restriction no longer applies and Starlight’s styles will be applied correctly regardless of the import order of the `` component.
From caf1d83fef9496140d1ad218cea70eb5257b3592 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Wed, 15 Oct 2025 17:13:52 +0200
Subject: [PATCH 11/13] chore: changeset component syntax
Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
---
.changeset/famous-grapes-develop.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.changeset/famous-grapes-develop.md b/.changeset/famous-grapes-develop.md
index 93aaca4443a..6f50d1be0a4 100644
--- a/.changeset/famous-grapes-develop.md
+++ b/.changeset/famous-grapes-develop.md
@@ -4,6 +4,6 @@
Ensures that Starlight CSS layer order is predictable in custom pages using the `` component.
-Previously, due to how [import order](https://docs.astro.build/en/guides/styling/#import-order) works in Astro, the `` component had to be the first import in custom pages to set up [cascade layers](https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers) used internally by Starlight to manage the order of its styles.
+Previously, due to how [import order](https://docs.astro.build/en/guides/styling/#import-order) works in Astro, the `` component had to be the first import in custom pages to set up [cascade layers](https://starlight.astro.build/guides/css-and-tailwind/#cascade-layers) used internally by Starlight to manage the order of its styles.
With this change, this restriction no longer applies and Starlight’s styles will be applied correctly regardless of the import order of the `` component.
From 5853e3304b07a5957533592f44b2f82a5c0b895b Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Mon, 20 Oct 2025 14:59:14 +0200
Subject: [PATCH 12/13] style: separate imports
Co-authored-by: Chris Swithinbank
---
.../basics/src/pages/starlight-page-css-layer-order.astro | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/starlight/__e2e__/fixtures/basics/src/pages/starlight-page-css-layer-order.astro b/packages/starlight/__e2e__/fixtures/basics/src/pages/starlight-page-css-layer-order.astro
index 3884158cde5..b5071965a52 100644
--- a/packages/starlight/__e2e__/fixtures/basics/src/pages/starlight-page-css-layer-order.astro
+++ b/packages/starlight/__e2e__/fixtures/basics/src/pages/starlight-page-css-layer-order.astro
@@ -1,6 +1,8 @@
---
import { LinkButton } from '@astrojs/starlight/components';
+
import AnchorHeading from '@astrojs/starlight/components/AnchorHeading.astro';
+
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
/**
From 2c358beb2b2473051f1d3c6c6f1df02da991fb16 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Mon, 20 Oct 2025 15:49:34 +0200
Subject: [PATCH 13/13] test: refactor layer order test
---
packages/starlight/__e2e__/basics.test.ts | 22 +++++++++++++---------
1 file changed, 13 insertions(+), 9 deletions(-)
diff --git a/packages/starlight/__e2e__/basics.test.ts b/packages/starlight/__e2e__/basics.test.ts
index 44c233dbd3e..00ecef38aa3 100644
--- a/packages/starlight/__e2e__/basics.test.ts
+++ b/packages/starlight/__e2e__/basics.test.ts
@@ -1,3 +1,4 @@
+import fs from 'node:fs/promises';
import { expect, testFactory, type Locator } from './test-utils';
const test = testFactory('./fixtures/basics/');
@@ -475,17 +476,20 @@ test.describe('components', () => {
const starlight = await makeServer('dev', { mode: 'dev' });
await starlight.goto('/starlight-page-css-layer-order');
- const linkButton = page.getByRole('link', { name: 'Tabs link button' });
- await linkButton.highlight();
+ const firstStyleContent = await page.evaluate(
+ () => document.head.querySelector('style')?.textContent ?? ''
+ );
- const [bgColor, textColor] = await linkButton.evaluate((element) => {
- const styles = window.getComputedStyle(element);
- return [styles.getPropertyValue('background-color'), styles.getPropertyValue('color')];
- });
+ const expectedLayersOrder = await fs.readFile(
+ new URL('../style/layers.css', import.meta.url),
+ 'utf-8'
+ );
- // If the background color and text color are the same, the text is not readable and the CSS
- // layer order is incorrect.
- expect(bgColor).not.toBe(textColor);
+ // Ensure that the first style block in the head contains the expected layers order rather
+ // the styles of the link button wrapped in a `@layer` block at-rule automatically declaring
+ // a new layer and thus potentially breaking the intended layers order as the initial order
+ // in which layers are declared indicates which layer has precedence.
+ expect(firstStyleContent).toBe(expectedLayersOrder);
});
});