@astrojs/tailwind: simplify, upgrade & fix support for ts config file (#6724)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

2 files changed, 13 insertions, 101 deletions

diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json
index 750962842..e1349e010 100644
--- a/packages/integrations/tailwind/package.json
+++ b/packages/integrations/tailwind/package.json
@@ -32,9 +32,8 @@
     "dev": "astro-scripts dev \"src/**/*.ts\""
   },
   "dependencies": {
-    "@proload/core": "^0.3.3",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1"
   },
   "devDependencies": {
diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
index 04be569b9..d489c0196 100644
--- a/packages/integrations/tailwind/src/index.ts
+++ b/packages/integrations/tailwind/src/index.ts
@@ -1,72 +1,9 @@
-import load, { resolve } from '@proload/core';
-import type { AstroConfig, AstroIntegration } from 'astro';
+import type { AstroIntegration } from 'astro';
 import autoprefixerPlugin from 'autoprefixer';
-import fs from 'fs/promises';
-import path from 'path';
-import tailwindPlugin, { type Config as TailwindConfig } from 'tailwindcss';
-import resolveConfig from 'tailwindcss/resolveConfig.js';
-import { fileURLToPath } from 'url';
+import type { ResultPlugin } from 'postcss-load-config';
+import tailwindPlugin from 'tailwindcss';
 import type { CSSOptions, UserConfig } from 'vite';
 
-function getDefaultTailwindConfig(srcUrl: URL): TailwindConfig {
-	return resolveConfig({
-		theme: {
-			extend: {},
-		},
-		plugins: [],
-		content: [path.join(fileURLToPath(srcUrl), `**`, `*.{astro,html,js,jsx,svelte,ts,tsx,vue}`)],
-		presets: undefined, // enable Tailwind's default preset
-	}) as TailwindConfig;
-}
-
-async function getUserConfig(root: URL, configPath?: string, isRestart = false) {
-	const resolvedRoot = fileURLToPath(root);
-	let userConfigPath: string | undefined;
-
-	if (configPath) {
-		const configPathWithLeadingSlash = /^\.*\//.test(configPath) ? configPath : `./${configPath}`;
-		userConfigPath = fileURLToPath(new URL(configPathWithLeadingSlash, root));
-	}
-
-	if (isRestart) {
-		// Hack: Write config to temporary file at project root
-		// This invalidates and reloads file contents when using ESM imports or "resolve"
-		const resolvedConfigPath = (await resolve('tailwind', {
-			mustExist: false,
-			cwd: resolvedRoot,
-			filePath: userConfigPath,
-		})) as string;
-
-		const { dir, base } = path.parse(resolvedConfigPath);
-		const tempConfigPath = path.join(dir, `.temp.${Date.now()}.${base}`);
-		await fs.copyFile(resolvedConfigPath, tempConfigPath);
-
-		let result: load.Config<Record<any, any>> | undefined;
-		try {
-			result = await load('tailwind', {
-				mustExist: false,
-				cwd: resolvedRoot,
-				filePath: tempConfigPath,
-			});
-		} catch (err) {
-			console.error(err);
-		} finally {
-			await fs.unlink(tempConfigPath);
-		}
-
-		return {
-			...result,
-			filePath: resolvedConfigPath,
-		};
-	} else {
-		return await load('tailwind', {
-			mustExist: false,
-			cwd: resolvedRoot,
-			filePath: userConfigPath,
-		});
-	}
-}
-
 async function getPostCssConfig(
 	root: UserConfig['root'],
 	postcssInlineOptions: CSSOptions['postcss']
@@ -86,20 +23,19 @@ async function getPostCssConfig(
 }
 
 async function getViteConfiguration(
-	tailwindConfig: TailwindConfig,
-	viteConfig: AstroConfig['vite']
+	tailwindConfigPath: string | undefined,
+	viteConfig: UserConfig
 ) {
 	// We need to manually load postcss config files because when inlining the tailwind and autoprefixer plugins,
 	// that causes vite to ignore postcss config files
 	const postcssConfigResult = await getPostCssConfig(viteConfig.root, viteConfig.css?.postcss);
 
-	const postcssOptions = (postcssConfigResult && postcssConfigResult.options) || {};
-
-	const postcssPlugins =
-		postcssConfigResult && postcssConfigResult.plugins ? postcssConfigResult.plugins.slice() : [];
-	postcssPlugins.push(tailwindPlugin(tailwindConfig));
+	const postcssOptions = postcssConfigResult?.options ?? {};
+	const postcssPlugins = postcssConfigResult?.plugins?.slice() ?? [];
 
+	postcssPlugins.push(tailwindPlugin(tailwindConfigPath) as ResultPlugin);
 	postcssPlugins.push(autoprefixerPlugin());
+
 	return {
 		css: {
 			postcss: {
@@ -123,7 +59,7 @@ type TailwindOptions =
 				 * Disabling this is useful when further customization of Tailwind styles
 				 * and directives is required. See {@link https://tailwindcss.com/docs/functions-and-directives#tailwind Tailwind's docs}
 				 * for more details on directives and customization.
-				 * @default: true
+				 * @default true
 				 */
 				applyBaseStyles?: boolean;
 			};
@@ -136,33 +72,10 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {
-			'astro:config:setup': async ({
-				config,
-				updateConfig,
-				injectScript,
-				addWatchFile,
-				isRestart,
-			}) => {
+			'astro:config:setup': async ({ config, updateConfig, injectScript }) => {
 				// Inject the Tailwind postcss plugin
-				const userConfig = await getUserConfig(config.root, customConfigPath, isRestart);
-
-				if (customConfigPath && !userConfig?.value) {
-					throw new Error(
-						`Could not find a Tailwind config at ${JSON.stringify(
-							customConfigPath
-						)}. Does the file exist?`
-					);
-				}
-
-				if (addWatchFile && userConfig?.filePath) {
-					addWatchFile(userConfig.filePath);
-				}
-
-				const tailwindConfig =
-					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
-
 				updateConfig({
-					vite: await getViteConfiguration(tailwindConfig, config.vite),
+					vite: await getViteConfiguration(customConfigPath, config.vite),
 				});
 
 				if (applyBaseStyles) {