Skip to content

Commit b270f30

Browse files
philipp-spiessphilipp-spiess
committed
Vite: Fix issues when loading files via static asset queries
1 parent 5c1bfd3 commit b270f30

File tree

14 files changed

+75
-35
lines changed

14 files changed

+75
-35
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- _Upgrade (experimental)_: Migrate `plugins` with options to CSS ([#14700](https://github.com/tailwindlabs/tailwindcss/pull/14700))
1313

14+
### Fixed
15+
16+
- 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))
17+
1418
### Changed
1519

1620
- _Upgrade (experimental)_: Don't create `@source` rules for `content` paths that are already covered by automatic source detection ([#14714](https://github.com/tailwindlabs/tailwindcss/pull/14714))

‎integrations/vite/index.test.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,3 +504,64 @@ test(
504504
})
505505
},
506506
)
507+
508+
test(
509+
`does not interfere with ?raw and ?url static asset handling`,
510+
{
511+
fs: {
512+
'package.json': json`
513+
{
514+
"type": "module",
515+
"dependencies": {
516+
"@tailwindcss/vite": "workspace:^",
517+
"tailwindcss": "workspace:^"
518+
},
519+
"devDependencies": {
520+
"vite": "^5.3.5"
521+
}
522+
}
523+
`,
524+
'vite.config.ts': ts`
525+
import tailwindcss from '@tailwindcss/vite'
526+
import { defineConfig } from 'vite'
527+
528+
export default defineConfig({
529+
build: { cssMinify: false },
530+
plugins: [tailwindcss()],
531+
})
532+
`,
533+
'index.html': html`
534+
<head>
535+
<script type="module" src="./src/index.js"></script>
536+
</head>
537+
`,
538+
'src/index.js': js`
539+
import url from './index.css?url'
540+
import raw from './index.css?raw'
541+
`,
542+
'src/index.css': css`@import 'tailwindcss';`,
543+
},
544+
},
545+
async ({ spawn, getFreePort }) => {
546+
let port = await getFreePort()
547+
await spawn(`pnpm vite dev --port ${port}`)
548+
549+
await retryAssertion(async () => {
550+
// We have to load the .js file first so that the static assets are
551+
// resolved
552+
await fetch(`http://localhost:${port}/src/index.js`).then((r) => r.text())
553+
554+
let [raw, url] = await Promise.all([
555+
fetch(`http://localhost:${port}/src/index.css?raw`).then((r) => r.text()),
556+
fetch(`http://localhost:${port}/src/index.css?url`).then((r) => r.text()),
557+
])
558+
559+
expect(firstLine(raw)).toBe(`export default "@import 'tailwindcss';"`)
560+
expect(firstLine(url)).toBe(`export default "/src/index.css"`)
561+
})
562+
},
563+
)
564+
565+
function firstLine(str: string) {
566+
return str.split('\n')[0]
567+
}

‎packages/@tailwindcss-vite/src/index.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -261,9 +261,13 @@ function getExtension(id: string) {
261261
function isPotentialCssRootFile(id: string) {
262262
let extension = getExtension(id)
263263
let isCssFile =
264-
extension === 'css' ||
265-
(extension === 'vue' && id.includes('&lang.css')) ||
266-
(extension === 'astro' && id.includes('&lang.css'))
264+
(extension === 'css' ||
265+
(extension === 'vue' && id.includes('&lang.css')) ||
266+
(extension === 'astro' && id.includes('&lang.css'))) &&
267+
// Don't intercept ?url and ?raw static asset handling
268+
!id.includes('?url') &&
269+
!id.includes('?raw')
270+
267271
return isCssFile
268272
}
269273

‎playgrounds/vite/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"@types/react": "^18.3.9",
2020
"@types/react-dom": "^18.3.0",
2121
"bun": "^1.1.29",
22-
"vite": "catalog:",
23-
"vite-plugin-handlebars": "^2.0.0"
22+
"vite": "catalog:"
2423
}
2524
}

‎playgrounds/vite/src/animate.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎playgrounds/vite/src/app.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import { Foo } from './foo'
2-
31
export function App() {
42
return (
53
<div className="m-3 p-3 border">
64
<h1 className="text-blue-500">Hello World</h1>
7-
<button className="hocus:underline">Click me</button>
8-
<Foo />
95
</div>
106
)
117
}

‎playgrounds/vite/src/bar.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎playgrounds/vite/src/foo.tsx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎playgrounds/vite/src/forms.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎playgrounds/vite/src/app.css‎ renamed to ‎playgrounds/vite/src/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
@import 'tailwindcss';
2-
@plugin "./plugin.js";

0 commit comments

Comments
 (0)