@umijs/bundler-esbuild 4.0.0-beta.12 → 4.0.0-beta.13

package/dist/build.js

@@ -36,7 +36,9 @@ function build(opts) {
             outdir: outputPath,
             metafile: true,
             plugins: [
-                (0, less_1.default)(Object.assign({ modifyVars: opts.config.theme, javascriptEnabled: true }, opts.config.lessLoader)),
+                (0, less_1.default)(Object.assign({ modifyVars: opts.config.theme, javascriptEnabled: true, alias: opts.config.alias, 
+                    // ref: https://github.com/umijs/umi-next/pull/214
+                    inlineStyle: opts.inlineStyle }, opts.config.lessLoader)),
                 opts.config.alias && (0, alias_1.default)(addCwdPrefix(opts.config.alias, opts.cwd)),
                 opts.config.externals && (0, externals_1.default)(opts.config.externals),
                 opts.inlineStyle && (0, style_1.inlineStyle)(),

package/dist/plugins/less.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="less" />
 import { Plugin } from '@umijs/bundler-utils/compiled/esbuild';
-declare const _default: (options?: Less.Options) => Plugin;
+declare const _default: (options?: Less.Options & {
+    alias?: Record<string, string>;
+    inlineStyle?: boolean;
+}) => Plugin;
 export default _default;

package/dist/plugins/less.js

@@ -8,26 +8,137 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const enhanced_resolve_1 = __importDefault(require("enhanced-resolve"));
 const fs_1 = require("fs");
 const less_1 = __importDefault(require("less"));
+const less_plugin_aliases_1 = __importDefault(require("less-plugin-aliases"));
 const path_1 = __importDefault(require("path"));
+const sortByAffix_1 = require("../utils/sortByAffix");
+const resolver = enhanced_resolve_1.default.create({
+    mainFields: ['module', 'browser', 'main'],
+    extensions: [
+        '.json',
+        '.js',
+        '.jsx',
+        '.ts',
+        '.tsx',
+        '.cjs',
+        '.mjs',
+        '.less',
+        '.css',
+    ],
+    // TODO: support exports
+    exportsFields: [],
+});
+function resolve(context, path) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            resolver(context, path, (err, result) => err ? reject(err) : resolve(result));
+        });
+    });
+}
+const aliasLessImports = (ctx, alias, importer) => __awaiter(void 0, void 0, void 0, function* () {
+    const importRegex = /@import(?:\s+\((.*)\))?\s+['"](.*)['"]/;
+    const globalImportRegex = /@import(?:\s+\((.*)\))?\s+['"](.*)['"]/g;
+    const match = ctx.match(globalImportRegex) || [];
+    for (const el of match) {
+        const [imp, _, filePath] = el.match(importRegex) || [];
+        let aliaPath = yield aliasLessImportPath(filePath, alias, importer);
+        if (aliaPath) {
+            ctx = ctx.replace(imp, el.replace(filePath, aliaPath));
+        }
+    }
+    return ctx;
+});
+const aliasLessImportPath = (filePath, alias, importer) => __awaiter(void 0, void 0, void 0, function* () {
+    // ～ 写法在 esbuild 中无实际意义
+    let aliaPath = filePath.startsWith('~')
+        ? filePath.replace('~', '')
+        : filePath;
+    const keys = (0, sortByAffix_1.sortByAffix)({ arr: Object.keys(alias), affix: '$' });
+    for (const key of keys) {
+        const value = alias[key];
+        const filter = new RegExp(`^${key}`);
+        if (filter.test(aliaPath)) {
+            aliaPath = aliaPath.replace(filter, value);
+            aliaPath = path_1.default.extname(aliaPath) ? aliaPath : `${aliaPath}.less`;
+            return yield resolve(importer, aliaPath);
+        }
+    }
+    return null;
+});
 exports.default = (options = {}) => {
+    const { alias, inlineStyle } = options, lessOptions = __rest(options, ["alias", "inlineStyle"]);
     return {
         name: 'less',
-        setup({ onLoad }) {
-            onLoad({ filter: /\.less$/, namespace: 'file' }, (args) => __awaiter(this, void 0, void 0, function* () {
-                const content = yield fs_1.promises.readFile(args.path, 'utf-8');
+        setup({ onResolve, onLoad }) {
+            onResolve({ filter: /\.less$/, namespace: 'file' }, (args) => __awaiter(this, void 0, void 0, function* () {
+                let filePath = args.path;
+                if (!!alias) {
+                    filePath =
+                        (yield aliasLessImportPath(filePath, alias, args.path)) ||
+                            path_1.default.resolve(process.cwd(), path_1.default.relative(process.cwd(), args.resolveDir), args.path);
+                }
+                else {
+                    //没有别名也要对路径进行处理
+                    filePath = path_1.default.resolve(process.cwd(), path_1.default.relative(process.cwd(), args.resolveDir), args.path);
+                }
+                return {
+                    path: filePath,
+                    namespace: inlineStyle ? 'less-file' : 'file',
+                };
+            }));
+            if (inlineStyle) {
+                onResolve({ filter: /\.less$/, namespace: 'less-file' }, (args) => {
+                    return { path: args.path, namespace: 'less-content' };
+                });
+                onResolve({ filter: /^__style_helper__$/, namespace: 'less-file' }, (args) => ({
+                    path: args.path,
+                    namespace: 'style-helper',
+                    sideEffects: false,
+                }));
+                onLoad({ filter: /.*/, namespace: 'less-file' }, (args) => __awaiter(this, void 0, void 0, function* () {
+                    return ({
+                        contents: `
+            import { injectStyle } from "__style_helper__"
+            import css from ${JSON.stringify(args.path)}
+            injectStyle(css)
+          `,
+                    });
+                }));
+            }
+            onLoad({ filter: /\.less$/, namespace: inlineStyle ? 'less-content' : 'file' }, (args) => __awaiter(this, void 0, void 0, function* () {
+                let content = yield fs_1.promises.readFile(args.path, 'utf-8');
+                if (!!alias) {
+                    content = yield aliasLessImports(content, alias, args.path);
+                }
                 const dir = path_1.default.dirname(args.path);
                 const filename = path_1.default.basename(args.path);
                 try {
-                    const result = yield less_1.default.render(content, Object.assign(Object.assign({ filename, rootpath: dir }, options), { paths: [...(options.paths || []), dir] }));
+                    const result = yield less_1.default.render(content, Object.assign(Object.assign({ plugins: [
+                            new less_plugin_aliases_1.default({
+                                prefix: '~',
+                                aliases: alias || {},
+                            }),
+                        ], filename, rootpath: dir }, lessOptions), { paths: [...(lessOptions.paths || []), dir] }));
                     return {
                         contents: result.css,
-                        loader: 'css',
+                        loader: inlineStyle ? 'text' : 'css',
                         resolveDir: dir,
                     };
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/bundler-esbuild",
-  "version": "4.0.0-beta.12",
+  "version": "4.0.0-beta.13",
   "description": "@umijs/bundler-esbuild",
   "homepage": "https://github.com/umijs/umi-next/tree/master/packages/bundler-esbuild#readme",
   "bugs": "https://github.com/umijs/umi-next/issues",
@@ -23,10 +23,11 @@
     "dev": "pnpm build -- --watch"
   },
   "dependencies": {
-    "@umijs/bundler-utils": "4.0.0-beta.12",
-    "@umijs/utils": "4.0.0-beta.12",
+    "@umijs/bundler-utils": "4.0.0-beta.13",
+    "@umijs/utils": "4.0.0-beta.13",
     "enhanced-resolve": "5.8.3",
-    "less": "4.1.2"
+    "less": "4.1.2",
+    "less-plugin-aliases": "^1.0.3"
   },
   "devDependencies": {
     "@types/less": "^3.0.3"