Vite: Transform <style> blocks in html files

tailwindlabs · Jan 30, 2025 · 76903fd · 76903fd
1 parent ea24995
commit 76903fd
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020))
+- Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
 
 ## [4.0.1] - 2025-01-29
 

diff --git a/integrations/vite/html-style-blocks.test.ts b/integrations/vite/html-style-blocks.test.ts
@@ -0,0 +1,58 @@
+import { html, json, test, ts } from '../utils'
+
+test(
+  'transforms html style blocks',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^6"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <!doctype html>
+        <html>
+          <body>
+            <div class="foo"></div>
+            <style>
+              .foo {
+                @apply underline;
+              }
+            </style>
+          </body>
+        </html>
+      `,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build')
+
+    expect(await fs.dumpFiles('dist/*.html')).toMatchInlineSnapshot(`
+      "
+      --- dist/index.html ---
+      <!doctype html>
+      <html>
+        <body>
+          <div class="foo"></div>
+          <style>.foo{text-decoration-line:underline}</style>
+        </body>
+      </html>
+      "
+    `)
+  },
+)
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -8,6 +8,7 @@ import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite
 
 const DEBUG = env.DEBUG
 const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
+const INLINE_STYLE_ID_RE = /index\=\d+\.css$/
 
 const IGNORED_DEPENDENCIES = ['tailwind-merge']
 
@@ -320,7 +321,7 @@ function isPotentialCssRootFile(id: string) {
   if (id.includes('/.vite/')) return
   let extension = getExtension(id)
   let isCssFile =
-    (extension === 'css' || id.includes('&lang.css')) &&
+    (extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)) &&
     // Don't intercept special static asset resources
     !SPECIAL_QUERY_RE.test(id)