feat: write file

withastro · Jan 23, 2025 · 5c9f155 · 5c9f155
1 parent dc7e433
commit 5c9f155
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 41 deletions.
diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json
@@ -38,7 +38,7 @@
     "vite": "^6.0.9"
   },
   "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0",
+    "astro": "^5.0.0",
     "tailwindcss": "^4.0.0"
   },
   "publishConfig": {

diff --git a/packages/integrations/tailwind/src/index.ts b/packages/integrations/tailwind/src/index.ts
@@ -1,7 +1,7 @@
-import { fileURLToPath } from 'node:url';
 import type { AstroIntegration } from 'astro';
-import type { PluginOption } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
+import { fileURLToPath } from 'node:url';
+import { writeFileSync } from 'node:fs';
 
 type TailwindOptions = {
 	/**
@@ -18,30 +18,6 @@ type TailwindOptions = {
 	applyBaseStyles?: boolean;
 };
 
-const VIRTUAL_MODULE_ID = 'virtual:@astrojs/tailwind/base.css';
-const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
-
-function baseStylesPlugin(configFile?: string): PluginOption {
-	let content = '@import "tailwindcss";';
-	if (configFile) {
-		content += `@config ${JSON.stringify(configFile)};`;
-	}
-
-	return {
-		name: '@astrojs/tailwind/virtual-css',
-		resolveId(id) {
-			if (id === VIRTUAL_MODULE_ID) {
-				return RESOLVED_VIRTUAL_MODULE_ID;
-			}
-		},
-		load(id, opts) {
-			if (id === RESOLVED_VIRTUAL_MODULE_ID && opts?.ssr) {
-				return content;
-			}
-		},
-	};
-}
-
 export default function tailwindIntegration({
 	applyBaseStyles = true,
 	configFile,
@@ -53,20 +29,23 @@ export default function tailwindIntegration({
 	return {
 		name: '@astrojs/tailwind',
 		hooks: {
-			'astro:config:setup': async ({ config, updateConfig, injectScript }) => {
-				const plugins: PluginOption[] = [tailwindcss()];
-				if (applyBaseStyles) {
-					plugins.push(
-						baseStylesPlugin(
-							configFile ? fileURLToPath(new URL(configFile, config.root)) : undefined,
-						),
-					);
-					injectScript('page-ssr', `import ${JSON.stringify(VIRTUAL_MODULE_ID)};`);
-				}
-
+			'astro:config:setup': async ({ config, updateConfig, injectScript, createCodegenDir }) => {
 				updateConfig({
-					vite: { plugins },
+					vite: { plugins: [tailwindcss()] },
 				});
+
+				if (applyBaseStyles) {
+					const codegenDir = createCodegenDir();
+					let content = '@import "tailwindcss";';
+					if (configFile) {
+						content += `\n@config ${JSON.stringify(fileURLToPath(new URL(configFile, config.root)))};`;
+					}
+
+					const url = new URL('tailwind.css', codegenDir);
+					writeFileSync(url, content, 'utf-8');
+
+					injectScript('page-ssr', `import ${JSON.stringify(url)};`);
+				}
 			},
 		},
 	};

diff --git a/packages/integrations/tailwind/test/fixtures/basic/astro.config.js b/packages/integrations/tailwind/test/fixtures/basic/astro.config.js
@@ -5,7 +5,7 @@ import { defineConfig } from 'astro/config';
 export default defineConfig({
   integrations: [
     tailwind({
-      applyBaseStyles: false,
+      // applyBaseStyles: false,
       configFile: "./tailwind.config.js"
     }),
   ]

diff --git a/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro b/packages/integrations/tailwind/test/fixtures/basic/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import "../styles.css"
+// import "../styles.css"
 ---
 
 <div class="text-red-500">red</div>