Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philipp-spiess merged 4 commits into from
Jan 31, 2025
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9405d42
Vite: Transform `<style>` blocks in html files
philipp-spiess Jan 30, 2025
317115b
Merge branch 'main' into fix/vite-html-style-blocks
RobinMalfait Jan 30, 2025
0aca2ce
Merge branch 'main' into fix/vite-html-style-blocks
philipp-spiess Jan 31, 2025
d3427d7
Merge branch 'main' into fix/vite-html-style-blocks
RobinMalfait Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Vite: Transform <style> blocks in html files
  • Loading branch information
@philipp-spiess
philipp-spiess committed Jan 30, 2025
commit 9405d428cf1aa0e7f614ccb877854d272d939409
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
58 changes: 58 additions & 0 deletions integrations/vite/html-style-blocks.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
"
`)
},
)
3 changes: 2 additions & 1 deletion packages/@tailwindcss-vite/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']

Expand Down Expand Up @@ -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)

Expand Down