Vite: Transform <style> blocks in html files (#16069)

Fixes #16036 This adds a new rule to treat `<style>` blocks found within `.html` file as Tailwind CSS targets. ## Test plan - Tested using the Vite extension (dev) and a new integration test (prod) Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
tailwindlabs · Jan 31, 2025 · 9572202 · 9572202
1 parent deb33a9
commit 9572202
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
 - Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
 - Vite: Don't rebase urls that appear to be aliases ([#16078](https://github.com/tailwindlabs/tailwindcss/pull/16078))
+- Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
 - Prevent camelCasing CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103))
 - Do not emit `@keyframes` in `@theme reference` ([#16120](https://github.com/tailwindlabs/tailwindcss/pull/16120))
 

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']
 
@@ -312,7 +313,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)