Fallback to config.createResolver for client and ssr environments in @tailwindcss/vite (#19679)

<!--

👋 Hey, thanks for your interest in contributing to Tailwind!

**Please ask first before starting work on any significant new
features.**

It's never a fun experience to have your pull request declined after
investing a lot of time and effort into a new feature. To avoid this
from happening, we request that contributors create a discussion to
first discuss any significant new features.

For more info, check out the contributing guide:


https://github.com/tailwindcss/tailwindcss/blob/main/.github/CONTRIBUTING.md

-->

## Summary

Sometimes even if Vite Envrionment API is available, some plugins are
still override `config.createResolver` function to inject own aliases

Since technically `config.createResolver` was only [properly
deprecated](https://github.com/vitejs/vite/pull/20031) in Vite 7.0.0,
it's still a valid(-ish) to do so, even if it wasn't ever officially
supported

Vite already handles this in its internal css resolvers, but not exposes
the code to do so as part of public API, so I've copied and adapted it

Fixes #19677

## Test plan

Tested by copying built package into my repro from the issue, also ran
vite integration tests

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow multiples of `.25` in `aspect-*` fractions ([#19688](https://github.com/tailwindlabs/tailwindcss/pull/19688))
 - Ensure changes to external files listed via `@source` trigger a full page reload when using `@tailwindcss/vite` ([#19670](https://github.com/tailwindlabs/tailwindcss/pull/19670))
 - Improve performance Oxide scanner in bigger projects ([#19632](https://github.com/tailwindlabs/tailwindcss/pull/19632))
+- Ensure import aliases in Astro v5 work without crashing ([#19677](https://github.com/tailwindlabs/tailwindcss/issues/19677))
 
 ### Deprecated
 

integrations/vite/astro.test.ts

@@ -1,4 +1,4 @@
-import { candidate, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
+import { candidate, css, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
 
 test(
   'dev mode',
@@ -129,3 +129,73 @@ test(
     await fs.expectFileToContain(files[0][0], [candidate`underline`, candidate`overline`])
   },
 )
+
+// https://github.com/tailwindlabs/tailwindcss/issues/19677
+test(
+  'import aliases should work in <style> blocks',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "astro": "^5",
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          }
+        }
+      `,
+      'astro.config.mjs': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'astro/config'
+
+        // https://astro.build/config
+        export default defineConfig({
+          vite: { plugins: [tailwindcss()] },
+        })
+      `,
+      'tsconfig.json': json`
+        {
+          "extends": "astro/tsconfigs/strict",
+          "include": [".astro/types.d.ts", "**/*"],
+          "exclude": ["dist"],
+          "compilerOptions": {
+            "paths": {
+              "@styles/*": ["./src/styles/*"]
+            }
+          }
+        }
+      `,
+      // prettier-ignore
+      'src/pages/index.astro': html`
+        ---
+        import '@styles/global.css'
+        ---
+
+        <html lang="en">
+          <head>
+            <meta charset="utf-8" />
+            <meta name="viewport" content="width=device-width" />
+            <meta name="generator" content={Astro.generator} />
+            <title>Astro</title>
+            <style>
+              @reference "@styles/global.css";
+            </style>
+          </head>
+          <body>
+            <h1 class="underline">Astro</h1>
+          </body>
+        </html>
+      `,
+      'src/styles/global.css': css`@import 'tailwindcss';`,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm astro build')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+
+    await fs.expectFileToContain(files[0][0], [candidate`underline`])
+  },
+)

packages/@tailwindcss-vite/src/index.ts

@@ -12,7 +12,13 @@ import { Scanner } from '@tailwindcss/oxide'
 import { realpathSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import path from 'node:path'
-import type { Environment, Plugin, ResolvedConfig, ViteDevServer } from 'vite'
+import type {
+  Environment,
+  InternalResolveOptions,
+  Plugin,
+  ResolvedConfig,
+  ViteDevServer,
+} from 'vite'
 import * as vite from 'vite'
 
 const DEBUG = env.DEBUG
@@ -59,8 +65,36 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
       customCssResolver = (id: string, base: string) => cssResolver(id, base, true, isSSR)
       customJsResolver = (id: string, base: string) => jsResolver(id, base, true, isSSR)
     } else {
+      type ResolveIdFn = (
+        environment: Environment,
+        id: string,
+        importer?: string,
+        aliasOnly?: boolean,
+      ) => Promise<string | undefined>
+
+      // There are cases where Environment API is available,
+      // but `createResolver` is still overriden (for example astro v5)
+      //
+      // Copied as-is from vite, because this function is not a part of public API
+      //
+      // TODO: Remove this function and pre-environment code when Vite < 7 is no longer supported
+      function createBackCompatIdResolver(
+        config: ResolvedConfig,
+        options?: Partial<InternalResolveOptions>,
+      ): ResolveIdFn {
+        const compatResolve = config.createResolver(options)
+        let resolve: ResolveIdFn
+        return async (environment, id, importer, aliasOnly) => {
+          if (environment.name === 'client' || environment.name === 'ssr') {
+            return compatResolve(id, importer, aliasOnly, environment.name === 'ssr')
+          }
+          resolve ??= vite.createIdResolver(config, options)
+          return resolve(environment, id, importer, aliasOnly)
+        }
+      }
+
       // Newer Vite versions
-      let cssResolver = vite.createIdResolver(env.config, {
+      let cssResolver = createBackCompatIdResolver(env.config, {
         ...env.config.resolve,
         extensions: ['.css'],
         mainFields: ['style'],
@@ -69,7 +103,7 @@ export default function tailwindcss(opts: PluginOptions = {}): Plugin[] {
         preferRelative: true,
       })
 
-      let jsResolver = vite.createIdResolver(env.config, env.config.resolve)
+      let jsResolver = createBackCompatIdResolver(env.config, env.config.resolve)
 
       customCssResolver = (id: string, base: string) => cssResolver(env, id, base, true)
       customJsResolver = (id: string, base: string) => jsResolver(env, id, base, true)