From 2dd52f5a0f46db6981567d2f7bdaedf6d8c5b050 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 4 Sep 2024 19:14:05 +0200
Subject: [PATCH] Vite: Add support for `<style>` tags in Astro files (#14340)

This works similar to the Vue setup. The styles that Astro will receive
might still contain Tailwind CSS APIs but since it's not picky, we can
pass that through to the regular Vite `transform` handlers for now.

This, however, will have issues like
https://github.com/tailwindlabs/tailwindcss/issues/14205. We have to fix
this together with Vue and other similar extensions later. For now, it
will break when syntax is used that lightningcss rewrites (like `@apply
text-3xl/tight;`)

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
---
 CHANGELOG.md                            |  1 +
 integrations/utils.ts                   | 34 ++++++++-----
 integrations/vite/astro.test.ts         | 63 +++++++++++++++++++++++++
 packages/@tailwindcss-vite/src/index.ts |  5 +-
 4 files changed, 89 insertions(+), 14 deletions(-)
 create mode 100644 integrations/vite/astro.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1b147fae..d8d05d228 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Support TypeScript for `@plugin` and `@config` files ([#14317](https://github.com/tailwindlabs/tailwindcss/pull/14317))
 - Add `default` option to `@theme` to support overriding default theme values from plugins/JS config files ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
+- Add support for `<style>` tags in Astro files to the Vite plugin ([#14340](https://github.com/tailwindlabs/tailwindcss/pull/14340))
 
 ### Fixed
 
diff --git a/integrations/utils.ts b/integrations/utils.ts
index 246f49375..ca8f3c3e0 100644
--- a/integrations/utils.ts
+++ b/integrations/utils.ts
@@ -536,32 +536,40 @@ export async function fetchStyles(port: number, path = '/'): Promise<string> {
   let index = await fetch(`http://localhost:${port}${path}`)
   let html = await index.text()
 
-  let regex = /<link rel="stylesheet" href="([a-zA-Z0-9\/_\.\?=%-]+)"/g
+  let linkRegex = /<link rel="stylesheet" href="([a-zA-Z0-9\/_\.\?=%-]+)"/gi
+  let styleRegex = /<style\b[^>]*>([\s\S]*?)<\/style>/gi
+
+  let stylesheets: string[] = []
 
   let paths: string[] = []
   let match
-  while ((match = regex.exec(html)) !== null) {
+  for (let match of html.matchAll(linkRegex)) {
     let path: string = match[1]
     if (path.startsWith('./')) {
       path = path.slice(1)
     }
     paths.push(path)
   }
-
-  let stylesheets = await Promise.all(
-    paths.map(async (path) => {
-      let css = await fetch(`http://localhost:${port}${path}`, {
-        headers: {
-          Accept: 'text/css',
-        },
-      })
-      return await css.text()
-    }),
+  stylesheets.push(
+    ...(await Promise.all(
+      paths.map(async (path) => {
+        let css = await fetch(`http://localhost:${port}${path}`, {
+          headers: {
+            Accept: 'text/css',
+          },
+        })
+        return await css.text()
+      }),
+    )),
   )
 
+  for (let match of html.matchAll(styleRegex)) {
+    stylesheets.push(match[1])
+  }
+
   return stylesheets.reduce((acc, css) => {
     return acc + '\n' + css
-  })
+  }, '')
 }
 
 async function gracefullyRemove(dir: string) {
diff --git a/integrations/vite/astro.test.ts b/integrations/vite/astro.test.ts
new file mode 100644
index 000000000..dba507176
--- /dev/null
+++ b/integrations/vite/astro.test.ts
@@ -0,0 +1,63 @@
+import { expect } from 'vitest'
+import { candidate, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
+
+test.debug(
+  'dev mode',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "astro": "^4.15.2",
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          }
+        }
+      `,
+      'astro.config.mjs': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'astro/config'
+
+        // https://astro.build/config
+        export default defineConfig({
+          vite: {
+            plugins: [tailwindcss()],
+          },
+        })
+      `,
+      'src/pages/index.astro': html`
+       <div class="underline">Hello, world!</div>
+
+        <style is:global>
+          @import 'tailwindcss';
+        </style>
+      `,
+    },
+  },
+  async ({ fs, spawn, getFreePort }) => {
+    let port = await getFreePort()
+    await spawn(`pnpm astro dev --port ${port}`)
+
+    await retryAssertion(async () => {
+      let css = await fetchStyles(port)
+      expect(css).toContain(candidate`underline`)
+    })
+
+    await fs.write(
+      'src/pages/index.astro',
+      html`
+        <div class="underline font-bold">Hello, world!</div>
+
+        <style is:global>
+          @import 'tailwindcss';
+        </style>
+      `,
+    )
+    await retryAssertion(async () => {
+      let css = await fetchStyles(port)
+      expect(css).toContain(candidate`underline`)
+      expect(css).toContain(candidate`font-bold`)
+    })
+  },
+)
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
index 65d863548..8a1c60932 100644
--- a/packages/@tailwindcss-vite/src/index.ts
+++ b/packages/@tailwindcss-vite/src/index.ts
@@ -262,7 +262,10 @@ function getExtension(id: string) {
 
 function isPotentialCssRootFile(id: string) {
   let extension = getExtension(id)
-  let isCssFile = extension === 'css' || (extension === 'vue' && id.includes('&lang.css'))
+  let isCssFile =
+    extension === 'css' ||
+    (extension === 'vue' && id.includes('&lang.css')) ||
+    (extension === 'astro' && id.includes('&lang.css'))
   return isCssFile
 }