fix: enhance plugin to support alias resolution for css module plugin

packages/ice/src/esbuild/cssModules.ts

@@ -4,14 +4,17 @@
 import temp from 'temp';
 import cssModules from '@ice/bundles/compiled/postcss-modules/index.js';
 import { less, sass, postcss } from '@ice/bundles';
-import type { Plugin, PluginBuild, OnResolveArgs, OnResolveResult, OnLoadArgs, OnLoadResult } from 'esbuild';
+import type { Plugin, PluginBuild, OnResolveArgs, OnLoadArgs, OnLoadResult } from 'esbuild';
+import { resolveId } from '../service/analyze.js';
+import type { AliasWithEmpty } from '../service/analyze.js';
 
 const cssModulesStyleFilter = /\.module\.(css|sass|scss|less)$/;
 const STYLE_HANDLER_NAMESPACE = 'style-handler-namespace';
 
 type GenerateScopedNameFunction = (name: string, filename: string, css: string) => string;
 
 interface PluginOptions {
+  alias: AliasWithEmpty;
   /** extract css files, default is true */
   extract?: false;
   /** css classname identifier default is `[hash:base64]` */
@@ -24,23 +27,22 @@
   return {
     name: 'esbuild-css-modules',
     setup: async (build: PluginBuild) => {
-      build.onResolve({ filter: cssModulesStyleFilter }, onResolve);
+      build.onResolve({ filter: cssModulesStyleFilter }, (args: OnResolveArgs) => {
+        const { resolveDir } = args;
+        const resolvePath = !args.path.startsWith('.') ? resolveId(args.path, options.alias) : '';
+        const absolutePath = path.resolve(resolveDir, resolvePath && typeof resolvePath === 'string' ? resolvePath : args.path);
+        // Generate css and put it in the `STYLE_HANDLER_NAMESPACE` namespace to handle css file
+        return {
+          path: absolutePath,
+          namespace: STYLE_HANDLER_NAMESPACE,
+        };
+      });
 
       build.onLoad({ filter: /.*/, namespace: STYLE_HANDLER_NAMESPACE }, onStyleLoad(options));
     },
   };
 };
 
-async function onResolve(args: OnResolveArgs): Promise<OnResolveResult> {
-  const { resolveDir } = args;
-  const absolutePath = path.resolve(resolveDir, args.path);
-  // Generate css and put it in the `STYLE_HANDLER_NAMESPACE` namespace to handle css file
-  return {
-    path: absolutePath,
-    namespace: STYLE_HANDLER_NAMESPACE,
-  };
-}
-
 /**
  * parse less/scss/css-modules to css
  */

packages/ice/src/service/ServerRunner.ts

@@ -145,6 +145,7 @@ class ServerRunner extends Runner {
       }),
       server?.ignores && ignorePlugin(server.ignores),
       cssModulesPlugin({
+        alias,
         extract: false,
         generateLocalIdentName: function (name: string, fileName: string) {
           return getCSSModuleIdent({

packages/ice/src/service/analyze.ts

@@ -15,7 +15,7 @@ import { createLogger } from '../utils/logger.js';
 const logger = createLogger('scan-modules');
 
 type Alias = Record<string, string>;
-type AliasWithEmpty = Record<string, string | false>;
+export type AliasWithEmpty = Record<string, string | false>;
 
 interface Options {
   parallel?: number;

packages/ice/src/service/preBundleDeps.ts

@@ -157,6 +157,7 @@ export async function bundleDeps(options:
       emptyCSSPlugin(),
       externalPlugin({ ignores, format: 'esm', externalDependencies: false }),
       cssModulesPlugin({
+        alias,
         extract: false,
         generateLocalIdentName: function (name: string, fileName: string) {
           return getCSSModuleIdent({

packages/ice/src/service/serverCompiler.ts

@@ -209,6 +209,7 @@
         }),
         server?.ignores && ignorePlugin(server.ignores),
         cssModulesPlugin({
+          alias,
           extract: false,
           generateLocalIdentName: function (name: string, fileName: string) {
             // Compatible with webpack css-loader.
@@ -251,7 +252,7 @@
       } else {
         switch (server.bundler) {
           case 'webpack':
             const webpackServerCompiler = new WebpackServerCompiler({
               ...buildOptions,
               externals,
               compileIncludes: task.config.compileIncludes,