diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts index fc9aca5c700e..d12815d86e49 100644 --- a/integrations/vite/resolvers.test.ts +++ b/integrations/vite/resolvers.test.ts @@ -802,3 +802,104 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { }, ) }) + +describe.each([ + // Exercises the newer Environment API resolver branch. + ['^8', 'environment API'], + // Exercises the older, pre-Environment API resolver branch. + ['^5.3.5', 'legacy'], +])('%s (%s)', (viteVersion) => { + test( + 'merges user-provided `resolve.conditions` with the built-in CSS resolver conditions', + { + fs: { + 'package.json': json` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "conditional-export-pkg": "workspace:*", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + "vite": "${viteVersion}" + } + } + `, + 'pnpm-workspace.yaml': yaml` + # + packages: + - packages/* + `, + 'packages/conditional-export-pkg/package.json': json` + { + "name": "conditional-export-pkg", + "version": "1.0.0", + "type": "module", + "exports": { + ".": { + "my-custom-condition": "./custom.css", + "style": "./default.css", + "default": "./default.css" + } + } + } + `, + // Only picked up if `my-custom-condition` survives being merged into + // the resolver's built-in conditions (`style`, `development|production`). + 'packages/conditional-export-pkg/custom.css': css` + .custom-condition-applied { + color: green; + } + `, + // Picked up if the user's `resolve.conditions` gets silently discarded. + 'packages/conditional-export-pkg/default.css': css` + .custom-condition-applied { + color: red; + } + `, + 'vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + build: { cssMinify: false }, + plugins: [tailwindcss()], + resolve: { + conditions: ['my-custom-condition'], + }, + }) + `, + 'index.html': html` + + + + + `, + // `@import "tailwindcss"` makes this a Tailwind root file, so the + // plugin (and its fixed CSS resolver) handles the second import. + // Without it the plugin bails out and Vite resolves the `@import` + // itself with its default conditions. + 'src/index.css': css` + @import 'tailwindcss'; + @import 'conditional-export-pkg'; + `, + }, + }, + async ({ fs, exec, expect }) => { + await exec('pnpm vite build') + + let files = await fs.glob('dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] + + await fs.expectFileToContain(filename, [ + css` + .custom-condition-applied { + color: green; + } + `, + ]) + }, + ) +}) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 8fc660eaac18..6a095a77cae2 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -85,7 +85,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { ...config!.resolve, extensions: ['.css'], mainFields: ['style'], - conditions: ['style', 'development|production'], + conditions: ['style', 'development|production', ...(config!.resolve.conditions ?? [])], tryIndex: false, preferRelative: true, }) @@ -140,7 +140,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] { ...env.config.resolve, extensions: ['.css'], mainFields: ['style'], - conditions: ['style', 'development|production'], + conditions: ['style', 'development|production', ...(env.config.resolve.conditions ?? [])], tryIndex: false, preferRelative: true, })