diff --git a/.changeset/clean-jeans-clap.md b/.changeset/clean-jeans-clap.md new file mode 100644 index 0000000000..e082372229 --- /dev/null +++ b/.changeset/clean-jeans-clap.md @@ -0,0 +1,5 @@ +--- +'@ice/app': patch +--- + +fix: resolve aliased css file in server compilation diff --git a/packages/ice/src/esbuild/cssModules.ts b/packages/ice/src/esbuild/cssModules.ts index e3c5af711c..86f648a121 100644 --- a/packages/ice/src/esbuild/cssModules.ts +++ b/packages/ice/src/esbuild/cssModules.ts @@ -4,7 +4,9 @@ import fse from 'fs-extra'; 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'; @@ -12,6 +14,7 @@ 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,25 @@ const cssModulesPlugin = (options: PluginOptions): Plugin => { return { name: 'esbuild-css-modules', setup: async (build: PluginBuild) => { - build.onResolve({ filter: cssModulesStyleFilter }, onResolve); + build.onResolve({ filter: cssModulesStyleFilter }, (args: OnResolveArgs) => { + const { resolveDir } = args; + // Only apply alias resolution to bare imports (not relative or absolute paths) + const isRelative = args.path.startsWith('./') || args.path.startsWith('../'); + const isAbsolute = path.isAbsolute(args.path); + const resolvePath = (!isRelative && !isAbsolute) ? resolveId(args.path, options.alias) : ''; + const absolutePath = path.resolve(resolveDir, 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 { - 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 */ diff --git a/packages/ice/src/service/ServerRunner.ts b/packages/ice/src/service/ServerRunner.ts index 34668aeb6e..c21211bd23 100644 --- a/packages/ice/src/service/ServerRunner.ts +++ b/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({ diff --git a/packages/ice/src/service/analyze.ts b/packages/ice/src/service/analyze.ts index 4e41c7a077..332b4aeaa5 100644 --- a/packages/ice/src/service/analyze.ts +++ b/packages/ice/src/service/analyze.ts @@ -15,7 +15,7 @@ import { createLogger } from '../utils/logger.js'; const logger = createLogger('scan-modules'); type Alias = Record; -type AliasWithEmpty = Record; +export type AliasWithEmpty = Record; interface Options { parallel?: number; diff --git a/packages/ice/src/service/preBundleDeps.ts b/packages/ice/src/service/preBundleDeps.ts index fe1d8c9f21..1838d225d5 100644 --- a/packages/ice/src/service/preBundleDeps.ts +++ b/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({ diff --git a/packages/ice/src/service/serverCompiler.ts b/packages/ice/src/service/serverCompiler.ts index 32665a2505..232d726d80 100644 --- a/packages/ice/src/service/serverCompiler.ts +++ b/packages/ice/src/service/serverCompiler.ts @@ -209,6 +209,7 @@ export function createServerCompiler(options: Options) { }), server?.ignores && ignorePlugin(server.ignores), cssModulesPlugin({ + alias, extract: false, generateLocalIdentName: function (name: string, fileName: string) { // Compatible with webpack css-loader.