@umijs/bundler-esbuild 4.0.0-beta.7 → 4.0.0-rc.2

package/dist/build.d.ts

@@ -13,6 +13,9 @@ interface IOpts {
     beforeBabelPresets?: any[];
     extraBabelPlugins?: IBabelPlugin[];
     extraBabelPresets?: IBabelPlugin[];
+    inlineStyle?: boolean;
 }
-export declare function build(opts: IOpts): Promise<import("@umijs/bundler-utils/compiled/esbuild").BuildResult>;
+export declare function build(opts: IOpts): Promise<import("@umijs/bundler-utils/compiled/esbuild").BuildResult & {
+    metafile: import("@umijs/bundler-utils/compiled/esbuild").Metafile;
+}>;
 export {};

package/dist/build.js

@@ -19,6 +19,7 @@ const path_1 = require("path");
 const alias_1 = __importDefault(require("./plugins/alias"));
 const externals_1 = __importDefault(require("./plugins/externals"));
 const less_1 = __importDefault(require("./plugins/less"));
+const style_1 = require("./plugins/style");
 function build(opts) {
     return __awaiter(this, void 0, void 0, function* () {
         const outputPath = opts.config.outputPath || (0, path_1.join)(opts.cwd, 'dist');
@@ -35,14 +36,22 @@ 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, config: opts.config }, 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),
+                (0, style_1.style)({
+                    inlineStyle: opts.inlineStyle,
+                    config: opts.config,
+                }),
             ].filter(Boolean),
-            define: {
+            define: Object.assign({ 
                 // __dirname sham
-                __dirname: JSON.stringify('__dirname'),
-                'process.env.NODE_ENV': JSON.stringify(opts.mode || 'development'),
+                __dirname: JSON.stringify('__dirname'), 'process.env.NODE_ENV': JSON.stringify(opts.mode || 'development') }, opts.config.define),
+            loader: {
+                '.svg': 'dataurl',
+                '.ttf': 'dataurl',
             },
         });
     });

package/dist/cli.js

@@ -21,7 +21,7 @@ const build_1 = require("./build");
 const args = (0, utils_1.yParser)(process.argv.slice(2), {});
 const command = args._[0];
 const cwd = process.cwd();
-const entry = tryPaths([
+const entry = (0, utils_1.tryPaths)([
     (0, path_1.join)(cwd, 'src/index.tsx'),
     (0, path_1.join)(cwd, 'src/index.ts'),
     (0, path_1.join)(cwd, 'index.tsx'),
@@ -61,12 +61,6 @@ else {
 function error(msg) {
     console.error(utils_1.chalk.red(msg));
 }
-function tryPaths(paths) {
-    for (const path of paths) {
-        if ((0, fs_1.existsSync)(path))
-            return path;
-    }
-}
 function getEntryKey(path) {
     return (0, path_1.basename)(path, (0, path_1.extname)(path));
 }

package/dist/plugins/less.d.ts

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

package/dist/plugins/less.js

@@ -8,26 +8,152 @@ 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 });
+exports.aliasLessImportPath = void 0;
+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 postcssProcess_1 = require("../utils/postcssProcess");
+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 (0, exports.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 pathSegments = aliaPath.split('/');
+        if (pathSegments[0] === key) {
+            pathSegments[0] = alias[key];
+            aliaPath = pathSegments.join('/');
+            aliaPath = path_1.default.extname(aliaPath) ? aliaPath : `${aliaPath}.less`;
+            return yield resolve(importer, aliaPath);
+        }
+    }
+    return null;
+});
+exports.aliasLessImportPath = aliasLessImportPath;
 exports.default = (options = {}) => {
+    const { alias, inlineStyle, config } = options, lessOptions = __rest(options, ["alias", "inlineStyle", "config"]);
     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;
+                let isMatchedAlias = false;
+                // first match alias
+                if (!!alias) {
+                    const aliasMatchPath = yield (0, exports.aliasLessImportPath)(filePath, alias, args.path);
+                    if (aliasMatchPath) {
+                        isMatchedAlias = true;
+                        filePath = aliasMatchPath;
+                    }
+                }
+                // if alias not matched, identify whether import from deps (node_modules)
+                if (!isMatchedAlias) {
+                    const isImportFromDeps = !path_1.default.isAbsolute(filePath) && !filePath.startsWith('.');
+                    if (isImportFromDeps) {
+                        filePath = yield resolve(process.cwd(), filePath);
+                    }
+                    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)
+            export default{}
+          `,
+                    });
+                }));
+            }
+            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] }));
+                    const postcssrResult = yield (0, postcssProcess_1.postcssProcess)(config, result.css, args.path);
                     return {
-                        contents: result.css,
-                        loader: 'css',
+                        contents: postcssrResult.css,
+                        loader: inlineStyle ? 'text' : 'css',
                         resolveDir: dir,
                     };
                 }

package/dist/plugins/style.d.ts

@@ -0,0 +1,17 @@
+import { Charset, Plugin } from '@umijs/bundler-utils/compiled/esbuild';
+import { IConfig } from '../types';
+export interface StylePluginOptions {
+    /**
+     * whether to minify the css code.
+     * @default true
+     */
+    minify?: boolean;
+    /**
+     * css charset.
+     * @default 'utf8'
+     */
+    charset?: Charset;
+    inlineStyle?: boolean;
+    config?: IConfig;
+}
+export declare function style({ minify, charset, inlineStyle, config, }?: StylePluginOptions): Plugin;

package/dist/plugins/style.js

@@ -0,0 +1,127 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+// ref: https://github.com/hyrious/esbuild-plugin-style/blob/main/index.ts
+const esbuild_1 = __importDefault(require("@umijs/bundler-utils/compiled/esbuild"));
+const utils_1 = require("@umijs/utils");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const postcssProcess_1 = require("../utils/postcssProcess");
+// https://github.com/evanw/esbuild/issues/20#issuecomment-802269745
+function style({ minify = true, charset = 'utf8', inlineStyle, config, } = {}) {
+    return {
+        name: 'style',
+        setup({ onResolve, onLoad }) {
+            const cwd = process.cwd();
+            const opt = {
+                logLevel: 'silent',
+                bundle: true,
+                write: false,
+                charset,
+                minify,
+                loader: {
+                    '.svg': 'dataurl',
+                    // file ?
+                    '.ttf': 'dataurl',
+                },
+            };
+            onResolve({ filter: /\.css$/, namespace: 'file' }, (args) => {
+                const absPath = path_1.default.resolve(cwd, path_1.default.relative(cwd, args.resolveDir), args.path);
+                // 通过 resolve 往上找，依赖不一定在 node_modules，可能被提到根目录，并且没有 link
+                const resolved = fs_1.default.existsSync(absPath)
+                    ? absPath
+                    : utils_1.resolve.sync(`${args.path}`, {
+                        basedir: args.resolveDir,
+                    });
+                return { path: resolved, namespace: inlineStyle ? 'style-stub' : '' };
+            });
+            if (inlineStyle) {
+                onResolve({ filter: /\.css$/, namespace: 'style-stub' }, (args) => {
+                    return { path: args.path, namespace: 'style-content' };
+                });
+                onResolve({ filter: /^__style_helper__$/, namespace: 'style-stub' }, (args) => ({
+                    path: args.path,
+                    namespace: 'style-helper',
+                    sideEffects: false,
+                }));
+                onLoad({ filter: /.*/, namespace: 'style-helper' }, () => __awaiter(this, void 0, void 0, function* () {
+                    return ({
+                        contents: `
+            export function injectStyle(text) {
+              if (typeof document !== 'undefined') {
+                var style = document.createElement('style')
+                var node = document.createTextNode(text)
+                style.appendChild(node)
+                document.head.appendChild(style)
+              }
+            }
+          `,
+                    });
+                }));
+                onLoad({ filter: /.*/, namespace: 'style-stub' }, (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: inlineStyle ? /.*/ : /\.css$/,
+                namespace: inlineStyle ? 'style-content' : 'file',
+            }, (args) => __awaiter(this, void 0, void 0, function* () {
+                const options = Object.assign({ entryPoints: [args.path] }, opt);
+                const { errors, warnings, outputFiles } = yield esbuild_1.default.build(options);
+                if (errors.length > 0) {
+                    return {
+                        errors,
+                        warnings,
+                        contents: outputFiles[0].text,
+                        loader: 'text',
+                    };
+                }
+                const dir = path_1.default.dirname(args.path);
+                try {
+                    const result = yield (0, postcssProcess_1.postcssProcess)(config, outputFiles[0].text, args.path);
+                    return {
+                        errors,
+                        warnings,
+                        contents: result.css,
+                        loader: inlineStyle ? 'text' : 'css',
+                    };
+                }
+                catch (error) {
+                    return {
+                        errors: [
+                            {
+                                text: error.message,
+                                location: {
+                                    namespace: 'file',
+                                    file: error.filename,
+                                    line: error.line,
+                                    column: error.column,
+                                },
+                            },
+                        ],
+                        resolveDir: dir,
+                    };
+                }
+            }));
+        },
+    };
+}
+exports.style = style;

package/dist/utils/getBrowserlist.d.ts

@@ -0,0 +1 @@
+export declare function getBrowserlist(targets: Record<string, string | boolean>): string | true | string[];

package/dist/utils/getBrowserlist.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrowserlist = void 0;
+// refer: https://github.com/umijs/umi-next/blob/867e0c196296efbbdb95203cca35db2fa639808b/packages/bundler-webpack/src/utils/browsersList.ts#L5
+function getBrowserlist(targets) {
+    return (targets.browsers ||
+        Object.keys(targets).map((key) => {
+            return `${key} >= ${targets[key] === true ? '0' : targets[key]}`;
+        }));
+}
+exports.getBrowserlist = getBrowserlist;

package/dist/utils/postcssProcess.d.ts

@@ -0,0 +1,2 @@
+import { IConfig } from '../types';
+export declare function postcssProcess(config: IConfig, css: string, path: string): Promise<import("postcss").Result>;

package/dist/utils/postcssProcess.js

@@ -0,0 +1,33 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postcssProcess = void 0;
+const postcss_1 = __importDefault(require("postcss"));
+const getBrowserlist_1 = require("./getBrowserlist");
+function postcssProcess(config, css, path) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return yield (0, postcss_1.default)([
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+                browsers: (0, getBrowserlist_1.getBrowserlist)((config === null || config === void 0 ? void 0 : config.targets) || {}),
+                autoprefixer: Object.assign({ flexbox: 'no-2009' }, config === null || config === void 0 ? void 0 : config.autoprefixer),
+                stage: 3,
+            }),
+        ].concat((config === null || config === void 0 ? void 0 : config.extraPostCSSPlugins) || [])).process(css, {
+            from: path,
+            to: path,
+        });
+    });
+}
+exports.postcssProcess = postcssProcess;

package/package.json

@@ -1,40 +1,45 @@
 {
   "name": "@umijs/bundler-esbuild",
-  "version": "4.0.0-beta.7",
+  "version": "4.0.0-rc.2",
   "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",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umijs/umi-next"
+  },
+  "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "bin": {
     "bundler-esbuild": "bin/bundler-esbuild.js"
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm tsc",
     "build:deps": "pnpm esno ../../scripts/bundleDeps.ts",
     "dev": "pnpm build -- --watch"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/umijs/umi-next"
-  },
-  "authors": [
-    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
-  ],
-  "license": "MIT",
-  "bugs": "https://github.com/umijs/umi-next/issues",
-  "homepage": "https://github.com/umijs/umi-next/tree/master/packages/bundler-esbuild#readme",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
-    "@umijs/bundler-utils": "4.0.0-beta.7",
-    "@umijs/utils": "4.0.0-beta.7",
-    "enhanced-resolve": "5.8.3",
-    "less": "4.1.2"
+    "@umijs/bundler-utils": "4.0.0-rc.2",
+    "@umijs/utils": "4.0.0-rc.2",
+    "enhanced-resolve": "5.9.0",
+    "less": "4.1.2",
+    "less-plugin-aliases": "^1.0.3",
+    "postcss": "^8.4.6",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-preset-env": "7.4.1"
   },
   "devDependencies": {
+    "@alitajs/postcss-plugin-px2rem": "^0.0.1",
     "@types/less": "^3.0.3"
-  }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "chencheng <sorrycc@gmail.com> (https://github.com/sorrycc)"
+  ]
 }