fix(@astrojs/tailwind): manually load postcss config file (#5908)

.changeset/ten-paws-obey.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/tailwind': patch
+---
+
+Fix vite not picking up Postcss config files because of the tailwind integration

packages/integrations/tailwind/package.json

@@ -30,12 +30,14 @@
   "dependencies": {
     "@proload/core": "^0.3.2",
     "autoprefixer": "^10.4.7",
-    "postcss": "^8.4.14"
+    "postcss": "^8.4.14",
+    "postcss-load-config": "^4.0.1"
   },
   "devDependencies": {
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.0.24",
+    "vite": "^4.0.3"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.24",

packages/integrations/tailwind/src/index.ts

@@ -1,5 +1,6 @@
 import load, { resolve } from '@proload/core';
 import type { AstroIntegration } from 'astro';
+import type { CSSOptions, UserConfig } from 'vite';
 import autoprefixerPlugin from 'autoprefixer';
 import fs from 'fs/promises';
 import path from 'path';
@@ -66,14 +67,46 @@ async function getUserConfig(root: URL, configPath?: string, isRestart = false)
 	}
 }
 
-function getViteConfiguration(isBuild: boolean, tailwindConfig: TailwindConfig) {
+async function getPostCssConfig(
-	const postcssPlugins = [tailwindPlugin(tailwindConfig)];
+	root: UserConfig['root'],
+	postcssInlineOptions: CSSOptions['postcss']
+) {
+	let postcssConfigResult;
+	// Check if postcss config is not inlined
+	if (!(typeof postcssInlineOptions === 'object' && postcssInlineOptions !== null)) {
+		let { default: postcssrc } = await import('postcss-load-config');
+		const searchPath = typeof postcssInlineOptions === 'string' ? postcssInlineOptions : root!;
+		try {
+			postcssConfigResult = await postcssrc({}, searchPath);
+		} catch (e) {
+			postcssConfigResult = null;
+		}
+	}
+	return postcssConfigResult;
+}
+
+async function getViteConfiguration(
+	isBuild: boolean,
+	tailwindConfig: TailwindConfig,
+	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));
+
 	if (isBuild) {
 		postcssPlugins.push(autoprefixerPlugin());
 	}
 	return {
 		css: {
 			postcss: {
+				options: postcssOptions,
 				plugins: postcssPlugins,
 			},
 		},
@@ -131,7 +164,10 @@ export default function tailwindIntegration(options?: TailwindOptions): AstroInt
 
 				const tailwindConfig =
 					(userConfig?.value as TailwindConfig) ?? getDefaultTailwindConfig(config.srcDir);
-				updateConfig({ vite: getViteConfiguration(command === 'build', tailwindConfig) });
+
+				updateConfig({
+					vite: await getViteConfiguration(command === 'build', tailwindConfig, config.vite),
+				});
 
 				if (applyBaseStyles) {
 					// Inject the Tailwind base import

pnpm-lock.yaml

@@ -3269,15 +3269,19 @@ importers:
       astro-scripts: workspace:*
       autoprefixer: ^10.4.7
       postcss: ^8.4.14
+      postcss-load-config: ^4.0.1
       tailwindcss: ^3.0.24
+      vite: ^4.0.3
     dependencies:
       '@proload/core': 0.3.3
       autoprefixer: 10.4.13_postcss@8.4.21
       postcss: 8.4.21
+      postcss-load-config: 4.0.1_postcss@8.4.21
     devDependencies:
       astro: link:../../astro
       astro-scripts: link:../../../scripts
       tailwindcss: 3.2.4_postcss@8.4.21
+      vite: 4.0.4
 
   packages/integrations/turbolinks:
     specifiers:
@@ -12810,6 +12814,23 @@ packages:
       postcss: 8.4.21
       yaml: 1.10.2
 
+  /postcss-load-config/4.0.1_postcss@8.4.21:
+    resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.6
+      postcss: 8.4.21
+      yaml: 2.2.1
+    dev: false
+
   /postcss-logical/5.0.4_postcss@8.4.21:
     resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==}
     engines: {node: ^12 || ^14 || >=16}
@@ -15701,6 +15722,11 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
+  /yaml/2.2.1:
+    resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==}
+    engines: {node: '>= 14'}
+    dev: false
+
   /yargs-parser/18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}