Vite: Use Vite resolvers for CSS and JS files (#15173)

Closes #15159 This PR extends the `@tailwindcss/node` packages to be able to overwrite the CSS and JS resolvers. This is necessary as some bundlers, in particular Vite, have a custom module resolution system that can be individually configured. E.g. in Vite it is possible to add custom [resolver configs](https://vite.dev/config/shared-options.html#resolve-conditions) that is expected to be taken into account. With the new `customCssResolver` and `customJsResolver` option, we're able to use the Vite resolvers which take these configs into account. ## Test Plan Tested in the playground by configuring [resolver conditions](https://vite.dev/config/shared-options.html#resolve-conditions) (with Vite 5.4 and Vite 6 beta). An integration test was added for both the JS and CSS resolvers to ensure it keeps working as expected. --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Nov 27, 2024 · 7347a2f · 7347a2f
1 parent a1f78a2
commit 7347a2f
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Ensure the Vite plugin resolves CSS and JS files according to the configured resolver conditions ([#15173])(https://github.com/tailwindlabs/tailwindcss/pull/15173)
 - _Upgrade (experimental)_: Migrate prefixes for `.group` and `.peer` classes ([#15208](https://github.com/tailwindlabs/tailwindcss/pull/15208))
 
 ### Fixed

diff --git a/integrations/vite/resolvers.test.ts b/integrations/vite/resolvers.test.ts
@@ -0,0 +1,143 @@
+import { describe, expect } from 'vitest'
+import { candidate, css, fetchStyles, html, js, retryAssertion, test, ts, txt } from '../utils'
+
+for (let transformer of ['postcss', 'lightningcss']) {
+  describe(transformer, () => {
+    test(
+      `resolves aliases in production build`,
+      {
+        fs: {
+          'package.json': txt`
+            {
+              "type": "module",
+              "dependencies": {
+                "@tailwindcss/vite": "workspace:^",
+                "tailwindcss": "workspace:^"
+              },
+              "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
+                "vite": "^5.3.5"
+              }
+            }
+          `,
+          'vite.config.ts': ts`
+            import tailwindcss from '@tailwindcss/vite'
+            import { defineConfig } from 'vite'
+            import { fileURLToPath } from 'node:url'
+
+            export default defineConfig({
+              css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+              build: { cssMinify: false },
+              plugins: [tailwindcss()],
+              resolve: {
+                alias: {
+                  '#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
+                  '#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
+                },
+              },
+            })
+          `,
+          'index.html': html`
+            <head>
+              <link rel="stylesheet" href="./src/index.css" />
+            </head>
+            <body>
+              <div class="underline custom-underline">Hello, world!</div>
+            </body>
+          `,
+          'src/index.css': css`
+            @import '#css-alias';
+            @plugin '#js-alias';
+          `,
+          'src/alias.css': css`
+            @import 'tailwindcss/theme' theme(reference);
+            @import 'tailwindcss/utilities';
+          `,
+          'src/plugin.js': js`
+            export default function ({ addUtilities }) {
+              addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
+            }
+          `,
+        },
+      },
+      async ({ fs, exec }) => {
+        await exec('pnpm vite build')
+
+        let files = await fs.glob('dist/**/*.css')
+        expect(files).toHaveLength(1)
+        let [filename] = files[0]
+
+        await fs.expectFileToContain(filename, [candidate`underline`, candidate`custom-underline`])
+      },
+    )
+
+    test(
+      `resolves aliases in dev mode`,
+      {
+        fs: {
+          'package.json': txt`
+            {
+              "type": "module",
+              "dependencies": {
+                "@tailwindcss/vite": "workspace:^",
+                "tailwindcss": "workspace:^"
+              },
+              "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
+                "vite": "^5.3.5"
+              }
+            }
+          `,
+          'vite.config.ts': ts`
+            import tailwindcss from '@tailwindcss/vite'
+            import { defineConfig } from 'vite'
+            import { fileURLToPath } from 'node:url'
+
+            export default defineConfig({
+              css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+              build: { cssMinify: false },
+              plugins: [tailwindcss()],
+              resolve: {
+                alias: {
+                  '#css-alias': fileURLToPath(new URL('./src/alias.css', import.meta.url)),
+                  '#js-alias': fileURLToPath(new URL('./src/plugin.js', import.meta.url)),
+                },
+              },
+            })
+          `,
+          'index.html': html`
+            <head>
+              <link rel="stylesheet" href="./src/index.css" />
+            </head>
+            <body>
+              <div class="underline custom-underline">Hello, world!</div>
+            </body>
+          `,
+          'src/index.css': css`
+            @import '#css-alias';
+            @plugin '#js-alias';
+          `,
+          'src/alias.css': css`
+            @import 'tailwindcss/theme' theme(reference);
+            @import 'tailwindcss/utilities';
+          `,
+          'src/plugin.js': js`
+            export default function ({ addUtilities }) {
+              addUtilities({ '.custom-underline': { 'border-bottom': '1px solid green' } })
+            }
+          `,
+        },
+      },
+      async ({ root, spawn, getFreePort, fs }) => {
+        let port = await getFreePort()
+        await spawn(`pnpm vite dev --port ${port}`)
+
+        await retryAssertion(async () => {
+          let styles = await fetchStyles(port, '/index.html')
+          expect(styles).toContain(candidate`underline`)
+          expect(styles).toContain(candidate`custom-underline`)
+        })
+      },
+    )
+  })
+}
diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts
@@ -11,25 +11,33 @@ import {
 import { getModuleDependencies } from './get-module-dependencies'
 import { rewriteUrls } from './urls'
 
+export type Resolver = (id: string, base: string) => Promise<string | false | undefined>
+
 export async function compile(
   css: string,
   {
     base,
     onDependency,
     shouldRewriteUrls,
+
+    customCssResolver,
+    customJsResolver,
   }: {
     base: string
     onDependency: (path: string) => void
     shouldRewriteUrls?: boolean
+
+    customCssResolver?: Resolver
+    customJsResolver?: Resolver
   },
 ) {
   let compiler = await _compile(css, {
     base,
     async loadModule(id, base) {
-      return loadModule(id, base, onDependency)
+      return loadModule(id, base, onDependency, customJsResolver)
     },
     async loadStylesheet(id, base) {
-      let sheet = await loadStylesheet(id, base, onDependency)
+      let sheet = await loadStylesheet(id, base, onDependency, customCssResolver)
 
       if (shouldRewriteUrls) {
         sheet.content = await rewriteUrls({
@@ -80,9 +88,14 @@ export async function __unstable__loadDesignSystem(css: string, { base }: { base
   })
 }
 
-export async function loadModule(id: string, base: string, onDependency: (path: string) => void) {
+export async function loadModule(
+  id: string,
+  base: string,
+  onDependency: (path: string) => void,
+  customJsResolver?: Resolver,
+) {
   if (id[0] !== '.') {
-    let resolvedPath = await resolveJsId(id, base)
+    let resolvedPath = await resolveJsId(id, base, customJsResolver)
     if (!resolvedPath) {
       throw new Error(`Could not resolve '${id}' from '${base}'`)
     }
@@ -94,7 +107,7 @@ export async function loadModule(id: string, base: string, onDependency: (path:
     }
   }
 
-  let resolvedPath = await resolveJsId(id, base)
+  let resolvedPath = await resolveJsId(id, base, customJsResolver)
   if (!resolvedPath) {
     throw new Error(`Could not resolve '${id}' from '${base}'`)
   }
@@ -113,8 +126,13 @@ export async function loadModule(id: string, base: string, onDependency: (path:
   }
 }
 
-async function loadStylesheet(id: string, base: string, onDependency: (path: string) => void) {
-  let resolvedPath = await resolveCssId(id, base)
+async function loadStylesheet(
+  id: string,
+  base: string,
+  onDependency: (path: string) => void,
+  cssResolver?: Resolver,
+) {
+  let resolvedPath = await resolveCssId(id, base, cssResolver)
   if (!resolvedPath) throw new Error(`Could not resolve '${id}' from '${base}'`)
 
   onDependency(resolvedPath)
@@ -163,14 +181,25 @@ const cssResolver = EnhancedResolve.ResolverFactory.createResolver({
   mainFields: ['style'],
   conditionNames: ['style'],
 })
-async function resolveCssId(id: string, base: string): Promise<string | false | undefined> {
+async function resolveCssId(
+  id: string,
+  base: string,
+  customCssResolver?: Resolver,
+): Promise<string | false | undefined> {
   if (typeof globalThis.__tw_resolve === 'function') {
     let resolved = globalThis.__tw_resolve(id, base)
     if (resolved) {
       return Promise.resolve(resolved)
     }
   }
 
+  if (customCssResolver) {
+    let customResolution = await customCssResolver(id, base)
+    if (customResolution) {
+      return customResolution
+    }
+  }
+
   return runResolver(cssResolver, id, base)
 }
 
@@ -188,13 +217,25 @@ const cjsResolver = EnhancedResolve.ResolverFactory.createResolver({
   conditionNames: ['node', 'require'],
 })
 
-function resolveJsId(id: string, base: string): Promise<string | false | undefined> {
+async function resolveJsId(
+  id: string,
+  base: string,
+  customJsResolver?: Resolver,
+): Promise<string | false | undefined> {
   if (typeof globalThis.__tw_resolve === 'function') {
     let resolved = globalThis.__tw_resolve(id, base)
     if (resolved) {
       return Promise.resolve(resolved)
     }
   }
+
+  if (customJsResolver) {
+    let customResolution = await customJsResolver(id, base)
+    if (customResolution) {
+      return customResolution
+    }
+  }
+
   return runResolver(esmResolver, id, base).catch(() => runResolver(cjsResolver, id, base))
 }
 

diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts
@@ -35,9 +35,31 @@ export default function tailwindcss(): Plugin[] {
   let moduleGraphCandidates = new DefaultMap<string, Set<string>>(() => new Set<string>())
   let moduleGraphScanner = new Scanner({})
 
-  let roots: DefaultMap<string, Root> = new DefaultMap(
-    (id) => new Root(id, () => moduleGraphCandidates, config!.base),
-  )
+  let roots: DefaultMap<string, Root> = new DefaultMap((id) => {
+    let cssResolver = config!.createResolver({
+      ...config!.resolve,
+      extensions: ['.css'],
+      mainFields: ['style'],
+      conditions: ['style', 'development|production'],
+      tryIndex: false,
+      preferRelative: true,
+    })
+    function customCssResolver(id: string, base: string) {
+      return cssResolver(id, base, false, isSSR)
+    }
+
+    let jsResolver = config!.createResolver(config!.resolve)
+    function customJsResolver(id: string, base: string) {
+      return jsResolver(id, base, true, isSSR)
+    }
+    return new Root(
+      id,
+      () => moduleGraphCandidates,
+      config!.base,
+      customCssResolver,
+      customJsResolver,
+    )
+  })
 
   function scanFile(id: string, content: string, extension: string, isSSR: boolean) {
     let updated = false
@@ -423,6 +445,9 @@ class Root {
     private id: string,
     private getSharedCandidates: () => Map<string, Set<string>>,
     private base: string,
+
+    private customCssResolver: (id: string, base: string) => Promise<string | false | undefined>,
+    private customJsResolver: (id: string, base: string) => Promise<string | false | undefined>,
   ) {}
 
   // Generate the CSS for the root file. This can return false if the file is
@@ -448,6 +473,9 @@ class Root {
           addWatchFile(path)
           this.dependencies.add(path)
         },
+
+        customCssResolver: this.customCssResolver,
+        customJsResolver: this.customJsResolver,
       })
       env.DEBUG && console.timeEnd('[@tailwindcss/vite] Setup compiler')
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml