archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Vite: Support Tailwind in Vue <style> blocks (#14158)

Browse Source 
This PR adds support to transforming `<style>` blocks emitted by Vue
components with tailwindcss when the `@tailwindcss/vite` is used.

Example:

```vue
<style>
  @import 'tailwindcss/utilities';
  @import 'tailwindcss/theme' theme(reference);
  .foo {
    @apply text-red-500;
  }
</style>
<template>
 <div class="underline foo">Hello Vue!</div>
</template>
```

Additionally, this PR also adds an integration test.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Philipp Spiess 2024-08-09 12:41:58 +02:00 committed by GitHub
parent 1fdf67989f
commit b01ff53f2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 80 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add support for `inline` option when defining `@theme` values ([#14095](https://github.com/tailwindlabs/tailwindcss/pull/14095))
- Add `inert` variant ([#14129](https://github.com/tailwindlabs/tailwindcss/pull/14129))
- Add support for explicitly registering content paths using new `@source` at-rule ([#14078](https://github.com/tailwindlabs/tailwindcss/pull/14078))
- Add support for scanning `<style>` tags in Vue files to the Vite plugin ([#14158](https://github.com/tailwindlabs/tailwindcss/pull/14158))
## [4.0.0-alpha.18] - 2024-07-25

8
integrations/utils.ts
View File

@ -286,7 +286,13 @@ export function test(
}
try {
context.exec('pnpm install')
// In debug mode, the directory is going to be inside the pnpm workspace
// of the tailwindcss package. This means that `pnpm install` will run
// pnpm install on the workspace instead (expect if the root dir defines
// a separate workspace). We work around this by using the
// `--ignore-workspace` flag.
let ignoreWorkspace = debug && !config.fs['pnpm-workspace.yaml']
context.exec(`pnpm install${ignoreWorkspace ? ' --ignore-workspace' : ''}`)
} catch (error: any) {
console.error(error)
throw error

69
integrations/vite/vue.test.ts Normal file
View File

@ -0,0 +1,69 @@
import { expect } from 'vitest'
import { candidate, html, json, test, ts } from '../utils'
test(
'production build',
{
fs: {
'package.json': json`
{
"type": "module",
"dependencies": {
"vue": "^3.4.37",
"tailwindcss": "workspace:^"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",
"@tailwindcss/vite": "workspace:^",
"vite": "^5.3.5"
}
}
`,
'vite.config.ts': ts`
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [vue(), tailwindcss()],
})
`,
'index.html': html`
<!doctype html>
<html>
<body>
<div id="app"></div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
`,
'src/main.ts': ts`
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
`,
'src/App.vue': html`
<style>
@import 'tailwindcss/utilities';
@import 'tailwindcss/theme' theme(reference);
.foo {
@apply text-red-500;
}
</style>
<template>
<div class="underline foo">Hello Vue!</div>
</template>
`,
},
},
async ({ fs, exec }) => {
await exec('pnpm vite build')
let files = await fs.glob('dist/**/*.css')
expect(files).toHaveLength(1)
await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`foo`])
},
)

8
packages/@tailwindcss-vite/src/index.ts
View File

@ -1,14 +1,11 @@
import { scanDir } from '@tailwindcss/oxide'
import fixRelativePathsPlugin, { normalizePath } from 'internal-postcss-fix-relative-paths'
import { Features, transform } from 'lightningcss'
import { fileURLToPath } from 'node:url'
import path from 'path'
import postcssrc from 'postcss-load-config'
import { compile } from 'tailwindcss'
import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
export default function tailwindcss(): Plugin[] {
let server: ViteDevServer | null = null
let config: ResolvedConfig | null = null
@ -349,8 +346,9 @@ function getExtension(id: string) {
}
function isTailwindCssFile(id: string, src: string) {
if (id.includes('/.vite/')) return
return getExtension(id) === 'css' && src.includes('@tailwind')
let extension = getExtension(id)
let isCssFile = extension === 'css' || (extension === 'vue' && id.includes('&lang.css'))
return isCssFile && src.includes('@tailwind')
}
function optimizeCss(