Revert tsconfig-alias plugin changes (#6633)

* Revert "Fix tsconfig alias regression (#6617)"

This reverts commit 38e6ec2.

* chore: changeset

* fix: add back fs

* chore: remove stray console log

* Revert "Support tsconfig aliases in styles (#6566)"

This reverts commit ea9b3dd.

* chore: add note on css style aliases

.changeset/sharp-timers-lick.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix failed `astro sync` call when running `astro check`. This change also reverts alias support in CSS styles.

packages/astro/src/vite-plugin-config-alias/index.ts

@@ -1,19 +1,47 @@
-import path from 'path';
+import * as path from 'path';
 import type { AstroSettings } from '../@types/astro';
 
-import slash from 'slash';
-import type { TsConfigJson } from 'tsconfig-resolver';
-import type { Alias, Plugin as VitePlugin } from 'vite';
+import type * as vite from 'vite';
+
+/** Result of successfully parsed tsconfig.json or jsconfig.json. */
+export declare interface Alias {
+	find: RegExp;
+	replacement: string;
+}
+
+/** Returns a path with its slashes replaced with posix slashes. */
+const normalize = (pathname: string) => String(pathname).split(path.sep).join(path.posix.sep);
 
 /** Returns a list of compiled aliases. */
-const getConfigAlias = (
-	paths: NonNullable<TsConfigJson.CompilerOptions['paths']>,
-	baseUrl: NonNullable<TsConfigJson.CompilerOptions['baseUrl']>
-): Alias[] => {
+const getConfigAlias = (settings: AstroSettings): Alias[] | null => {
+	/** Closest tsconfig.json or jsconfig.json */
+	const config = settings.tsConfig;
+	const configPath = settings.tsConfigPath;
+
+	// if no config was found, return null
+	if (!config || !configPath) return null;
+
+	/** Compiler options from tsconfig.json or jsconfig.json. */
+	const compilerOptions = Object(config.compilerOptions);
+
+	// if no compilerOptions.baseUrl was defined, return null
+	if (!compilerOptions.baseUrl) return null;
+
+	// resolve the base url from the configuration file directory
+	const baseUrl = path.posix.resolve(
+		path.posix.dirname(normalize(configPath).replace(/^\/?/, '/')),
+		normalize(compilerOptions.baseUrl)
+	);
+
+	/** List of compiled alias expressions. */
 	const aliases: Alias[] = [];
 
 	// compile any alias expressions and push them to the list
-	for (const [alias, values] of Object.entries(paths)) {
+	for (let [alias, values] of Object.entries(
+		Object(compilerOptions.paths) as { [key: string]: string[] }
+	)) {
+		values = [].concat(values as never);
+
 		/** Regular Expression used to match a given path. */
 		const find = new RegExp(
 			`^${[...alias]
@@ -26,7 +54,7 @@ const getConfigAlias = (
 		/** Internal index used to calculate the matching id in a replacement. */
 		let matchId = 0;
 
-		for (const value of values) {
+		for (let value of values) {
 			/** String used to replace a matched path. */
 			const replacement = [...path.posix.resolve(baseUrl, value)]
 				.map((segment) => (segment === '*' ? `$${++matchId}` : segment === '$' ? '$$' : segment))
@@ -36,6 +64,14 @@ const getConfigAlias = (
 		}
 	}
 
+	// compile the baseUrl expression and push it to the list
+	// - `baseUrl` changes the way non-relative specifiers are resolved
+	// - if `baseUrl` exists then all non-relative specifiers are resolved relative to it
+	aliases.push({
+		find: /^(?!\.*\/)(.+)$/,
+		replacement: `${[...baseUrl].map((segment) => (segment === '$' ? '$$' : segment)).join('')}/$1`,
+	});
+
 	return aliases;
 };
 
@@ -44,45 +80,40 @@ export default function configAliasVitePlugin({
 	settings,
 }: {
 	settings: AstroSettings;
-}): VitePlugin | null {
-	const { tsConfig, tsConfigPath } = settings;
-	if (!tsConfig || !tsConfigPath || !tsConfig.compilerOptions) return null;
-
-	const { baseUrl, paths } = tsConfig.compilerOptions;
-	if (!baseUrl || !paths) return null;
-
-	// resolve the base url from the configuration file directory
-	const resolvedBaseUrl = path.posix.resolve(
-		path.posix.dirname(slash(tsConfigPath).replace(/^\/?/, '/')),
-		slash(baseUrl)
-	);
+}): vite.PluginOption {
+	const { config } = settings;
+	/** Aliases from the tsconfig.json or jsconfig.json configuration. */
+	const configAlias = getConfigAlias(settings);
 
-	const configAlias = getConfigAlias(paths, resolvedBaseUrl);
+	// if no config alias was found, bypass this plugin
+	if (!configAlias) return {} as vite.PluginOption;
 
 	return {
 		name: 'astro:tsconfig-alias',
 		enforce: 'pre',
-		config() {
-			if (configAlias.length) {
-				return {
-					resolve: {
-						alias: configAlias,
-					},
-				};
+		async resolveId(sourceId: string, importer, options) {
+			/** Resolved ID conditionally handled by any other resolver. (this gives priority to all other resolvers) */
+			const resolvedId = await this.resolve(sourceId, importer, { skipSelf: true, ...options });
+
+			// if any other resolver handles the file, return that resolution
+			if (resolvedId) return resolvedId;
+
+			// conditionally resolve the source ID from any matching alias or baseUrl
+			for (const alias of configAlias) {
+				if (alias.find.test(sourceId)) {
+					/** Processed Source ID with our alias applied. */
+					const aliasedSourceId = sourceId.replace(alias.find, alias.replacement);
+
+					/** Resolved ID conditionally handled by any other resolver. (this also gives priority to all other resolvers) */
+					const resolvedAliasedId = await this.resolve(aliasedSourceId, importer, {
+						skipSelf: true,
+						...options,
+					});
+
+					// if the existing resolvers find the file, return that resolution
+					if (resolvedAliasedId) return resolvedAliasedId;
+				}
 			}
 		},
-		async resolveId(id, importer, options) {
-			if (id.startsWith('.') || path.isAbsolute(id)) return;
-
-			// Handle baseUrl mapping for non-relative and non-root imports.
-			// Since TypeScript only applies `baseUrl` autocompletions for files that exist
-			// in the filesystem only, we can use this heuristic to skip resolve if needed.
-			const resolved = path.posix.join(resolvedBaseUrl, id);
-
-			return await this.resolve(resolved, importer, {
-				skipSelf: true,
-				...options,
-			});
-		},
 	};
 }

packages/astro/test/alias-tsconfig.test.js

@@ -34,26 +34,5 @@ describe('Aliases with tsconfig.json', () => {
 			const scripts = $('script').toArray();
 			expect(scripts.length).to.be.greaterThan(0);
 		});
-
-		it('can load via baseUrl', async () => {
-			const html = await fixture.fetch('/').then((res) => res.text());
-			const $ = cheerio.load(html);
-
-			expect($('#foo').text()).to.equal('foo');
-		});
-
-		it('works in css @import', async () => {
-			const html = await fixture.fetch('/').then((res) => res.text());
-			// imported css should be bundled
-			expect(html).to.include('#style-red');
-			expect(html).to.include('#style-blue');
-		});
-
-		it('can load load typescript files without .ts or .d.ts extensions', async () => {
-			const html = await fixture.fetch('/').then((res) => res.text());
-			const $ = cheerio.load(html);
-
-			expect($('#mistery').text()).to.equal("I'm a TypeScript file!");
-		});
 	});
 });

packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro

@@ -1,24 +1,15 @@
 ---
-import Client from '@components/Client.svelte';
-import Foo from 'src/components/Foo.astro';
-import StyleComp from 'src/components/Style.astro';
-import '@styles/main.css';
-import { whoImI } from 'src/ts-file';
-const mistery = whoImI();
+import Client from '@components/Client.svelte'
 ---
-
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>Aliases using tsconfig</title>
-	</head>
-	<body>
-		<main>
-			<Client client:load />
-			<Foo />
-			<StyleComp />
-			<div id="mistery">{mistery}</div>
-		</main>
-	</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Aliases using tsconfig</title>
+  </head>
+  <body>
+    <main>
+      <Client client:load />
+    </main>
+  </body>
 </html>

packages/astro/test/fixtures/alias-tsconfig/tsconfig.json

@@ -5,9 +5,12 @@
       "@components/*": [
         "src/components/*"
       ],
-      "@styles/*": [
-        "src/styles/*"
-      ]
+      "@layouts/*": [
+        "src/layouts/*"
+      ],
+      "@assets/*": [
+        "src/assets/*"
+      ],
     }
   }
 }