Fix components barrel file import in <Footer> (#4226)

Co-authored-by: delucis <[email protected]>

.changeset/calm-steaks-switch.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fixes an issue where pages not importing components from `@astrojs/starlight/components` included styles of Starlight components used on other pages.

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  // Starlight must import user components directly instead of using the user components barrel
+  // file. To help avoid auto-import mistakes, we hide relative imports of this file from
+  // auto-import suggestions.
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(\\.{1,2}/)+components(\\.ts)?$"]
+}

packages/starlight/__tests__/basics/no-internal-barrel-imports.test.ts

@@ -0,0 +1,29 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { assert, test } from 'vitest';
+
+const srcDir = fileURLToPath(new URL('../../src/', import.meta.url));
+
+const barrelImportRegex = /from\s+['"](\.{1,2}\/)+components(\.ts)?['"]/;
+
+test('internal files do not import the user components barrel file', async () => {
+	const filesImportingBarrel: string[] = [];
+
+	for await (const file of fs.glob('**/*.{astro,ts}', { cwd: srcDir })) {
+		const content = await fs.readFile(path.join(srcDir, file), 'utf8');
+
+		if (barrelImportRegex.test(content)) {
+			filesImportingBarrel.push(file);
+		}
+	}
+
+	if (filesImportingBarrel.length > 0) {
+		assert.fail(
+			'Import user components directly (e.g. `../user-components/Icon.astro`) instead of using ' +
+				'the user components barrel file in the following file(s):\n\n' +
+				`- ${filesImportingBarrel.join('\n- ')}` +
+				'\n'
+		);
+	}
+});

packages/starlight/src/components/Footer.astro

@@ -3,7 +3,7 @@ import EditLink from 'virtual:starlight/components/EditLink';
 import LastUpdated from 'virtual:starlight/components/LastUpdated';
 import Pagination from 'virtual:starlight/components/Pagination';
 import config from 'virtual:starlight/user-config';
-import { Icon } from '../components';
+import Icon from '../user-components/Icon.astro';
 ---
 
 <footer class="sl-flex">