From b01ff53f2ae8bc70d0c93cdfd375d106b07ef080 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 9 Aug 2024 12:41:58 +0200 Subject: [PATCH] Vite: Support Tailwind in Vue ``` Additionally, this PR also adds an integration test. --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + integrations/utils.ts | 8 ++- integrations/vite/vue.test.ts | 69 +++++++++++++++++++++++++ packages/@tailwindcss-vite/src/index.ts | 8 ++- 4 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 integrations/vite/vue.test.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 652178934..775dd3341 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 ` + + + `, + }, + }, + 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`]) + }, +) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 660662e24..18467af3c 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -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(