Vite: Fix issues when loading files via static asset queries

tailwindlabs · Oct 21, 2024 · 1aa561f · 1aa561f
1 parent 5ce37c4
commit 1aa561f
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Allow spaces spaces around operators in attribute selector variants ([#14703](https://github.com/tailwindlabs/tailwindcss/pull/14703))
+- Ensure loading stylesheets via the `?raw` and `?url` static asset query works when using the Vite plugin ([#14716](https://github.com/tailwindlabs/tailwindcss/pull/14716))
 - _Upgrade (experimental)_: Migrate `flex-grow` to `grow` and `flex-shrink` to `shrink` ([#14721](https://github.com/tailwindlabs/tailwindcss/pull/14721))
 - _Upgrade (experimental)_: Minify arbitrary values when printing candidates ([#14720](https://github.com/tailwindlabs/tailwindcss/pull/14720))
 - _Upgrade (experimental)_: Ensure legacy theme values ending in `1` (like `theme(spacing.1)`) are correctly migrated to custom properties ([#14724](https://github.com/tailwindlabs/tailwindcss/pull/14724))

diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
@@ -504,3 +504,64 @@ test(
     })
   },
 )
+
+test(
+  `does not interfere with ?raw and ?url static asset handling`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^5.3.5"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: { cssMinify: false },
+          plugins: [tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <head>
+          <script type="module" src="./src/index.js"></script>
+        </head>
+      `,
+      'src/index.js': js`
+        import url from './index.css?url'
+        import raw from './index.css?raw'
+      `,
+      'src/index.css': css`@import 'tailwindcss';`,
+    },
+  },
+  async ({ spawn, getFreePort }) => {
+    let port = await getFreePort()
+    await spawn(`pnpm vite dev --port ${port}`)
+
+    await retryAssertion(async () => {
+      // We have to load the .js file first so that the static assets are
+      // resolved
+      await fetch(`http://localhost:${port}/src/index.js`).then((r) => r.text())
+
+      let [raw, url] = await Promise.all([
+        fetch(`http://localhost:${port}/src/index.css?raw`).then((r) => r.text()),
+        fetch(`http://localhost:${port}/src/index.css?url`).then((r) => r.text()),
+      ])
+
+      expect(firstLine(raw)).toBe(`export default "@import 'tailwindcss';"`)
+      expect(firstLine(url)).toBe(`export default "/src/index.css"`)
+    })
+  },
+)
+
+function firstLine(str: string) {
+  return str.split('\n')[0]
+}
diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -5,6 +5,8 @@ import { Features, transform } from 'lightningcss'
 import path from 'path'
 import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
 
+const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
+
 export default function tailwindcss(): Plugin[] {
   let servers: ViteDevServer[] = []
   let config: ResolvedConfig | null = null
@@ -261,9 +263,12 @@ function getExtension(id: string) {
 function isPotentialCssRootFile(id: string) {
   let extension = getExtension(id)
   let isCssFile =
-    extension === 'css' ||
-    (extension === 'vue' && id.includes('&lang.css')) ||
-    (extension === 'astro' && id.includes('&lang.css'))
+    (extension === 'css' ||
+      (extension === 'vue' && id.includes('&lang.css')) ||
+      (extension === 'astro' && id.includes('&lang.css'))) &&
+    // Don't intercept special static asset resources
+    !id.match(SPECIAL_QUERY_RE)
+
   return isCssFile
 }
 

diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json
@@ -19,7 +19,6 @@
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.1",
     "bun": "^1.1.29",
-    "vite": "catalog:",
-    "vite-plugin-handlebars": "^2.0.0"
+    "vite": "catalog:"
   }
 }
diff --git a/playgrounds/vite/src/animate.js b/playgrounds/vite/src/animate.js
diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
@@ -1,11 +1,7 @@
-import { Foo } from './foo'
-
 export function App() {
   return (
     <div className="m-3 p-3 border">
       <h1 className="text-blue-500">Hello World</h1>
-      <button className="hocus:underline">Click me</button>
-      <Foo />
     </div>
   )
 }
diff --git a/playgrounds/vite/src/bar.tsx b/playgrounds/vite/src/bar.tsx
diff --git a/playgrounds/vite/src/foo.tsx b/playgrounds/vite/src/foo.tsx
diff --git a/playgrounds/vite/src/forms.js b/playgrounds/vite/src/forms.js
diff --git a/playgrounds/vite/src/app.css → playgrounds/vite/src/index.css b/playgrounds/vite/src/app.css → playgrounds/vite/src/index.css
@@ -1,2 +1 @@
 @import 'tailwindcss';
-@plugin "./plugin.js";
diff --git a/playgrounds/vite/src/index.html b/playgrounds/vite/src/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>≈ Playground</title>
-    <link rel="stylesheet" href="./app.css" />
   </head>
   <body class="h-full">
     <div id="app"></div>

diff --git a/playgrounds/vite/src/main.tsx b/playgrounds/vite/src/main.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './app'
 
+import './index.css'
+
 ReactDOM.createRoot(document.getElementById('app')!).render(
   <React.StrictMode>
     <App />

diff --git a/playgrounds/vite/src/plugin.js b/playgrounds/vite/src/plugin.js
diff --git a/playgrounds/vite/src/typography.js b/playgrounds/vite/src/typography.js