From 0b9972acee1dba3a5866aff0235c512ea6921a7f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 8 Aug 2024 18:17:08 +0200 Subject: [PATCH] Vite: Support Tailwind in Svelte + `, + }, + }, + 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/package.json b/packages/@tailwindcss-vite/package.json index 422127595860..5b1441771e08 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -31,12 +31,13 @@ "@tailwindcss/oxide": "workspace:^", "lightningcss": "catalog:", "postcss-load-config": "^6.0.1", + "svelte-preprocess": "^6.0.2", "tailwindcss": "workspace:^" }, "devDependencies": { "@types/node": "catalog:", - "vite": "catalog:", - "internal-postcss-fix-relative-paths": "workspace:^" + "internal-postcss-fix-relative-paths": "workspace:^", + "vite": "catalog:" }, "peerDependencies": { "vite": "^5.2.0" diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 18467af3c14f..bf1bc75a4b80 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -3,6 +3,7 @@ import fixRelativePathsPlugin, { normalizePath } from 'internal-postcss-fix-rela import { Features, transform } from 'lightningcss' import path from 'path' import postcssrc from 'postcss-load-config' +import { sveltePreprocess } from 'svelte-preprocess' import { compile } from 'tailwindcss' import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite' @@ -173,6 +174,7 @@ export default function tailwindcss(): Plugin[] { } return [ + svelteProcessor(), { // Step 1: Scan source files for candidates name: '@tailwindcss/vite:scan', @@ -346,8 +348,12 @@ function getExtension(id: string) { } function isTailwindCssFile(id: string, src: string) { + if (id.includes('/.vite/')) return let extension = getExtension(id) - let isCssFile = extension === 'css' || (extension === 'vue' && id.includes('&lang.css')) + let isCssFile = + extension === 'css' || + (extension === 'vue' && id.includes('&lang.css')) || + (extension === 'svelte' && id.includes('&lang.css')) return isCssFile && src.includes('@tailwind') } @@ -374,3 +380,43 @@ function optimizeCss( errorRecovery: true, }).code.toString() } + +// Register a plugin that can hook into the Svelte preprocessor if svelte is +// enabled. This allows us to transform CSS in `