xhs-mp-compiler-cli 2.0.3 → 2.0.4-beta.1

package/dist/config/constant.config.d.ts

@@ -35,7 +35,6 @@ export declare const PROD_TARGETS: {
     ios: string;
 };
 export declare const ENTRY_CSS_NAME = "app";
-export declare const FULL_PKG = "xhs-full";
 export declare const MAIN_PKG = "xhs-main";
 export declare const SUB_PKG = "xhs-sub";
 export declare const BUILD_REASON: {
@@ -49,3 +48,7 @@ export declare const PACK_MODE: {
     MPPACK: string;
     WEBPACK: string;
 };
+export declare const CSS_REG: RegExp;
+export declare const SKETCH_CSS_REG: RegExp;
+export declare const ML_REG: RegExp;
+export declare const SKETCH_ML_REG: RegExp;

package/dist/config/constant.config.js

@@ -9,7 +9,7 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.PACK_MODE = exports.ASSETS_EXTS = exports.BUILD_REASON = exports.SUB_PKG = exports.MAIN_PKG = exports.FULL_PKG = exports.ENTRY_CSS_NAME = exports.PROD_TARGETS = exports.DEV_TARGETS = exports.DEV_BROWSERSLIST = exports.PROD_BROWSERSLIST = exports.COMPILE_SUB_PKG = exports.COMPILE_MAIN_PKG = exports.COMPILE_FULL_PKG = exports.PKG_ROOT_SEP = exports.MiniMode = exports.COMPILE_ENTRY = exports.COMPILE_TYPE = exports.COMPILER_TYPE = exports.MAIN_PKG_ROOT = void 0;
+    exports.SKETCH_ML_REG = exports.ML_REG = exports.SKETCH_CSS_REG = exports.CSS_REG = exports.PACK_MODE = exports.ASSETS_EXTS = exports.BUILD_REASON = exports.SUB_PKG = exports.MAIN_PKG = exports.ENTRY_CSS_NAME = exports.PROD_TARGETS = exports.DEV_TARGETS = exports.DEV_BROWSERSLIST = exports.PROD_BROWSERSLIST = exports.COMPILE_SUB_PKG = exports.COMPILE_MAIN_PKG = exports.COMPILE_FULL_PKG = exports.PKG_ROOT_SEP = exports.MiniMode = exports.COMPILE_ENTRY = exports.COMPILE_TYPE = exports.COMPILER_TYPE = exports.MAIN_PKG_ROOT = void 0;
     exports.MAIN_PKG_ROOT = 'xhs-main';
     exports.COMPILER_TYPE = {
         dev: 'dev',
@@ -47,7 +47,6 @@
         ios: '10'
     };
     exports.ENTRY_CSS_NAME = 'app';
-    exports.FULL_PKG = 'xhs-full';
     exports.MAIN_PKG = 'xhs-main';
     exports.SUB_PKG = 'xhs-sub';
     exports.BUILD_REASON = {
@@ -79,4 +78,9 @@
         MPPACK: 'mp-pack',
         WEBPACK: 'webpack'
     };
+    // loader 规则使用下面变量
+    exports.CSS_REG = /(?<!\.skeleton)\.(wxss|css)$/;
+    exports.SKETCH_CSS_REG = /\.skeleton\.(wxss|css)$/;
+    exports.ML_REG = /(?<!\.skeleton)\.(wx|xhs)ml$/;
+    exports.SKETCH_ML_REG = /\.skeleton\.(wx|xhs)ml$/;
 });

package/dist/packs/webpack/index.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "path", "fs-extra", "../../utils/projectConfig", "../../utils/common", "../../presets", "xhs-mp-project", "xhs-mp-pack", "./webpack", "../../utils/apm", "../../config/constant.config"], factory);
+        define(["require", "exports", "path", "fs-extra", "../../utils/projectConfig", "../../utils/common", "../../presets", "xhs-mp-project", "xhs-mp-pack", "./webpack", "../../utils/apm", "../../config/constant.config", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -23,6 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const webpack_1 = require("./webpack");
     const apm_1 = require("../../utils/apm");
     const constant_config_1 = require("../../config/constant.config");
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     // 防御编程
     const handleVersion = (startConfig) => {
         let { action, enableV1 = true, enableV2 = false, enableVDom = false } = startConfig;
@@ -58,8 +59,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         let miniprogramDir = path_1.default.join(projectPath, projectJson.miniprogramRoot || '');
         miniprogramDir = miniprogramDir.endsWith('/') ? miniprogramDir.slice(0, -1) : miniprogramDir;
         const config = {
-            projectPath: (0, common_1.toUnixPath)(projectPath),
-            miniprogramDir: (0, common_1.toUnixPath)(miniprogramDir).replace(/\/+$/, ''),
+            projectPath: (0, xhs_mp_compiler_utils_1.toUnixPath)(projectPath),
+            miniprogramDir: (0, xhs_mp_compiler_utils_1.toUnixPath)(miniprogramDir).replace(/\/+$/, ''),
             distDir,
             action,
             tsConfigPath: tsConfigPath || (0, common_1.getTsConfigPath)(projectPath),

package/dist/presets/configs/minigame/assets/assetsEntryPlugin.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../packs", "lodash", "../../../../utils/common", "xhs-mp-project"], factory);
+        define(["require", "exports", "../../../../packs", "lodash", "xhs-mp-project", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const packs_1 = require("../../../../packs");
     const lodash_1 = require("lodash");
-    const common_1 = require("../../../../utils/common");
     const xhs_mp_project_1 = require("xhs-mp-project");
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     class MpEntryPlugin {
         constructor(options) {
             this.options = options;
@@ -41,7 +41,7 @@
             assets['v1/app.json'] = appJsonSource;
             for (const subpackage of appJSON.subPackages) {
                 if (subpackage.independent) {
-                    assets[(0, common_1.unixJoin)("v1", subpackage.dirname, "app.json")] = appJsonSource;
+                    assets[(0, xhs_mp_compiler_utils_1.unixJoin)("v1", subpackage.dirname, "app.json")] = appJsonSource;
                 }
             }
             return assets;

package/dist/presets/configs/minigame/service/serviceChunkPlugin.js

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../packs", "../../../../packs", "../../../../utils/common"], factory);
+        define(["require", "exports", "xhs-mp-compiler-utils", "../../../../packs", "../../../../packs"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     const packs_1 = require("../../../../packs");
     const packs_2 = require("../../../../packs");
-    const common_1 = require("../../../../utils/common");
     class ServiceChunkPlugin {
         constructor(options) {
             this.options = options;
@@ -45,7 +45,7 @@
                     const services = [
                         "v1/service.js",
                         // @ts-ignore
-                        ...(_a = project.appJSON.subPackages) === null || _a === void 0 ? void 0 : _a.map(i => (0, common_1.unixJoin)('v1', `${i.entry}.js`))
+                        ...(_a = project.appJSON.subPackages) === null || _a === void 0 ? void 0 : _a.map(i => (0, xhs_mp_compiler_utils_1.unixJoin)('v1', `${i.entry}.js`))
                     ];
                     services.forEach(servicePath => {
                         if (servicePath in assets) {
@@ -63,7 +63,7 @@
             const independent = (_a = project.appJSON.subPackages) === null || _a === void 0 ? void 0 : _a.filter(sub => sub.independent);
             const services = [
                 "v1/service.js",
-                ...independent === null || independent === void 0 ? void 0 : independent.map(i => (0, common_1.unixJoin)('v1', `${i.entry}.js`))
+                ...independent === null || independent === void 0 ? void 0 : independent.map(i => (0, xhs_mp_compiler_utils_1.unixJoin)('v1', `${i.entry}.js`))
             ];
             services.forEach(servicePath => {
                 var _a;

package/dist/presets/configs/minigame/service/serviceEntryPlugin.js

@@ -4,13 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../packs", "../../../../utils/common"], factory);
+        define(["require", "exports", "../../../../packs", "../../../../utils/common", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const packs_1 = require("../../../../packs");
     const common_1 = require("../../../../utils/common");
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     class ServiceEntryPlugin {
         constructor(options) {
             this.options = options;
@@ -23,7 +24,7 @@
             const subPackages = appJSON.subPackages || [];
             this.makeUmdEntry(compiler, 'v1/service.js', `mg-entry-loader?entry=${common_1.DEFAULT_ENTRY}!`, `XHS_SERVICE_${common_1.DEFAULT_ENTRY}`);
             for (const { entry } of subPackages) {
-                this.makeUmdEntry(compiler, (0, common_1.unixJoin)('v1', `${entry}.js`), `mg-entry-loader?entry=${entry}!`, `XHS_SERVICE_${entry}`);
+                this.makeUmdEntry(compiler, (0, xhs_mp_compiler_utils_1.unixJoin)('v1', `${entry}.js`), `mg-entry-loader?entry=${entry}!`, `XHS_SERVICE_${entry}`);
             }
         }
         makeUmdEntry(compiler, filename, url, libraryName) {

package/dist/presets/configs/miniprogram/assets/index.js

@@ -7,13 +7,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../utils/css", "xhs-mp-compiler-utils", "./assetsEntryPlugin", "../../../../config/constant.config", "../../../plugins/InjectorPlugin", "path", "../../../../utils/cache"], factory);
+        define(["require", "exports", "xhs-mp-compiler-utils", "./assetsEntryPlugin", "../../../../config/constant.config", "../../../plugins/InjectorPlugin", "path", "../../../../utils/cache"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.presetAssets = exports.getAssetsEntry = void 0;
-    const css_1 = __importDefault(require("../../../../utils/css"));
     const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     const assetsEntryPlugin_1 = __importDefault(require("./assetsEntryPlugin"));
     const constant_config_1 = require("../../../../config/constant.config");
@@ -28,17 +27,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     };
     exports.getAssetsEntry = getAssetsEntry;
     const presetAssets = (chain, options) => {
-        const { packSetting, project } = options;
+        const { packSetting } = options;
         const { distDir, cacheDirectory } = packSetting;
         const absCacheDirectory = path_1.default.join(cacheDirectory, 'assets');
-        const cssReg = new RegExp(`.${(0, xhs_mp_compiler_utils_1.getCssSuffixName)()}$`);
         chain.merge(Object.assign(Object.assign({ output: {
                 path: distDir
             } }, (0, cache_1.getCacheConfig)(absCacheDirectory, options)), { module: {
                 rule: {
-                    [(0, xhs_mp_compiler_utils_1.getCssSuffixName)()]: {
-                        test: cssReg,
-                        use: (0, css_1.default)(packSetting, options, ['mini-style-loader', 'postcss-loader', 'wxss-loader'], true)
+                    style: {
+                        test: constant_config_1.CSS_REG,
+                        use: {
+                            "mini-style-loader": {
+                                loader: "mini-style-loader",
+                                options: {
+                                    // app.css 独立加载
+                                    independentFile: true,
+                                    emitDirs: [
+                                        packSetting.enableV1 && 'v1',
+                                        packSetting.enableV2 && 'v2',
+                                    ].filter(Boolean),
+                                }
+                            },
+                            "wxss-loader": {
+                                loader: "wxss-loader",
+                            }
+                        }
                     }
                 }
             } }));

package/dist/presets/configs/miniprogram/render/index.js

@@ -7,35 +7,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../utils/css", "xhs-mp-compiler-utils", "./sjsEntryPlugin", "./render", "./component", "./renderChunkPlugin", "../../../../types", "../../../plugins/InjectorPlugin", "../../../plugins/SourceMapDevToolPlugin", "../../../../utils/cache", "path"], factory);
+        define(["require", "exports", "path", "./sjsEntryPlugin", "./render", "./component", "./sketch", "./renderChunkPlugin", "../../../../types", "../../../plugins/InjectorPlugin", "../../../plugins/SourceMapDevToolPlugin", "../../../../utils/cache", "../../../../config/constant.config"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.presetRender = exports.getRenderEntry = void 0;
-    const css_1 = __importDefault(require("../../../../utils/css"));
-    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
+    const path_1 = __importDefault(require("path"));
     const sjsEntryPlugin_1 = __importDefault(require("./sjsEntryPlugin"));
     const render_1 = require("./render");
     const component_1 = require("./component");
+    const sketch_1 = require("./sketch");
     const renderChunkPlugin_1 = __importDefault(require("./renderChunkPlugin"));
     const types_1 = require("../../../../types");
     const InjectorPlugin_1 = require("../../../plugins/InjectorPlugin");
     const SourceMapDevToolPlugin_1 = require("../../../plugins/SourceMapDevToolPlugin");
     const cache_1 = require("../../../../utils/cache");
-    const path_1 = __importDefault(require("path"));
+    const constant_config_1 = require("../../../../config/constant.config");
     const getRenderEntry = (options) => () => {
-        const entries = Object.assign(Object.assign({}, (0, render_1.getRenderEntry)(options)), (0, component_1.getComponentEntry)(options));
+        const entries = Object.assign(Object.assign(Object.assign({}, (0, render_1.getRenderEntry)(options)), (0, component_1.getComponentEntry)(options)), (0, sketch_1.getSketchEntry)(options));
         return entries;
     };
     exports.getRenderEntry = getRenderEntry;
     const presetRender = (chain, options) => {
         const { packSetting } = options;
         const { enableVDom, env, distDir, cacheDirectory, enableSourcemap, appendSourcemapComment } = packSetting;
-        const mlReg = new RegExp(`.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}$`);
-        const cssReg = new RegExp(`.${(0, xhs_mp_compiler_utils_1.getCssSuffixName)()}$`);
         const isProd = env === types_1.ENV.production;
         const absCacheDirectory = path_1.default.join(cacheDirectory, 'render');
+        const transfomLoader = isProd ?
+            {
+                'swc-loader': {
+                    loader: require.resolve('swc-loader'),
+                    options: {
+                        jsc: {
+                            // ?. ?? 运算符号从  es2020支持
+                            target: 'es2019',
+                            externalHelpers: false
+                        },
+                    }
+                }
+            } : {};
         chain.merge(Object.assign(Object.assign({ externals: { vue: 'vue' }, output: {
                 path: distDir,
                 globalObject: 'globalThis',
@@ -44,34 +55,52 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
             } }, (0, cache_1.getCacheConfig)(absCacheDirectory, options)), { module: {
                 rule: {
                     ml: {
-                        test: mlReg,
-                        use: Object.assign(Object.assign({}, (isProd ?
-                            {
-                                'swc-loader': {
-                                    loader: require.resolve('swc-loader'),
-                                    options: {
-                                        jsc: {
-                                            // ?. ?? 运算符号从  es2020支持
-                                            target: 'es2019',
-                                            externalHelpers: false
-                                        },
-                                    }
-                                }
-                            } : {})), { 'ml-loader': {
+                        test: constant_config_1.ML_REG,
+                        use: Object.assign(Object.assign({}, transfomLoader), { 'ml-loader': {
                                 loader: require.resolve('xhs-mp-ml-loader'),
                                 options: {
                                     removeComentNode: isProd,
-                                    vdom: enableVDom,
                                 },
                             } }),
                     },
-                    [(0, xhs_mp_compiler_utils_1.getCssSuffixName)()]: {
-                        test: cssReg,
-                        use: (0, css_1.default)(packSetting, options, [
-                            "mini-style-loader",
-                            'postcss-loader',
-                            'wxss-loader',
-                        ]),
+                    sketchMl: {
+                        test: constant_config_1.SKETCH_ML_REG,
+                        use: Object.assign(Object.assign({}, transfomLoader), { 'sketch-loader': {
+                                loader: require.resolve('xhs-mp-sketch-loader'),
+                                options: {
+                                    removeComentNode: isProd,
+                                },
+                            } }),
+                    },
+                    style: {
+                        test: constant_config_1.CSS_REG,
+                        use: {
+                            "mini-style-loader": {
+                                loader: "mini-style-loader",
+                                options: {
+                                    // vdom 模式下 页面或者组件 css 独立加载
+                                    independentFile: enableVDom,
+                                    emitDirs: [
+                                        packSetting.enableV1 && 'v1',
+                                        packSetting.enableV2 && 'v2',
+                                    ].filter(Boolean),
+                                }
+                            },
+                            "wxss-loader": {
+                                loader: "wxss-loader",
+                            }
+                        }
+                    },
+                    sketchStyle: {
+                        test: constant_config_1.SKETCH_CSS_REG,
+                        use: {
+                            "string-loader": {
+                                loader: "string-loader"
+                            },
+                            "wxss-loader": {
+                                loader: "wxss-loader",
+                            }
+                        }
                     },
                 },
             } }));

package/dist/presets/configs/miniprogram/render/sjsEntryPlugin.js

@@ -30,7 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "fs-extra", "glob", "path", "../../../../packs", "xhs-mp-sjs-loader", "../../../../utils/common"], factory);
+        define(["require", "exports", "fs-extra", "glob", "path", "../../../../packs", "xhs-mp-sjs-loader", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -40,7 +40,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const path_1 = __importDefault(require("path"));
     const packs_1 = require("../../../../packs");
     const xhs_mp_sjs_loader_1 = __importStar(require("xhs-mp-sjs-loader"));
-    const common_1 = require("../../../../utils/common");
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     /**
      * @NOTE 分包中使用 SJS 的规则
      *
@@ -102,7 +102,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                     .concat(glob_1.default.sync('**/*.wxs', { cwd: miniprogramDir }));
                 relativePaths.forEach(relativePath => {
                     var _a;
-                    const sjsAbsPath = (0, common_1.unixJoin)(miniprogramDir, relativePath);
+                    const sjsAbsPath = (0, xhs_mp_compiler_utils_1.unixJoin)(miniprogramDir, relativePath);
                     // 如果是主包内的文件
                     if (this.isFileInMainPkg(relativePath)) {
                         this.mainpkgPaths.push(sjsAbsPath);
@@ -142,7 +142,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 }
                 let sjsAbsPath = '';
                 if (/\.(sjs|wxs)$/.test(sjsPath)) {
-                    sjsAbsPath = (0, common_1.toUnixPath)(sjsPath);
+                    sjsAbsPath = (0, xhs_mp_compiler_utils_1.toUnixPath)(sjsPath);
                 }
                 else {
                     this.emitError(this.generateMessage(`文件后缀不正确 ${sjsPath}`));
@@ -150,8 +150,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 const content = fs_extra_1.default.readFileSync(sjsAbsPath, 'utf8');
                 try {
                     const result = xhs_mp_sjs_loader_1.default.call(compilation, content, requirePath => {
-                        const realPath = (0, common_1.unixResolve)(path_1.default.dirname(sjsAbsPath), requirePath);
-                        const relativePath = (0, common_1.getShortPath)(project.miniprogramDir, realPath);
+                        const realPath = (0, xhs_mp_compiler_utils_1.unixResolve)(path_1.default.dirname(sjsAbsPath), requirePath);
+                        const relativePath = (0, xhs_mp_compiler_utils_1.getShortPath)(project.miniprogramDir, realPath);
                         /**
                          * 不是当前分包的 sjs 文件不处理
                          */
@@ -172,7 +172,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                     if ((_a = result.errors) === null || _a === void 0 ? void 0 : _a.length) {
                         this.emitError(this.generateMessage(result.errors.map(i => i.message).join("\n"), sjsAbsPath));
                     }
-                    const moduleName = (0, common_1.getShortPath)(project.miniprogramDir, sjsAbsPath);
+                    const moduleName = (0, xhs_mp_compiler_utils_1.getShortPath)(project.miniprogramDir, sjsAbsPath);
                     // 老版本兼容代码
                     sjsModules.push(`"${moduleName}": ${JSON.stringify(result.legacyCode)}`);
                     // 模块化代码

package/dist/presets/configs/miniprogram/render/sketch.d.ts

@@ -0,0 +1,3 @@
+import { IPresetOptions } from '../../../../types';
+declare const getSketchEntry: (options: IPresetOptions) => {};
+export { getSketchEntry };

package/dist/presets/configs/miniprogram/render/sketch.js

@@ -0,0 +1,45 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "xhs-mp-pack"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getSketchEntry = void 0;
+    const xhs_mp_pack_1 = require("xhs-mp-pack");
+    const getSketchEntry = (options) => {
+        const entries = {};
+        const { packSetting } = options;
+        if (packSetting.enableV2) {
+            appendSketchEntry(options, entries, 'v2');
+        }
+        if (packSetting.enableV1) {
+            appendSketchEntry(options, entries, 'v1');
+        }
+        return entries;
+    };
+    exports.getSketchEntry = getSketchEntry;
+    const appendSketchEntry = (options, entries, mode) => {
+        const { project, packSetting } = options;
+        const { mainPkg, subPkgs } = packSetting.getCompilePkgsForEntries();
+        if (mainPkg) {
+            const pages = project.getPages();
+            for (const { skeleton } of pages) {
+                if (skeleton === null || skeleton === void 0 ? void 0 : skeleton.path) {
+                    entries[`${mode}/${skeleton === null || skeleton === void 0 ? void 0 : skeleton.path}`] = `mp-entry-loader?type=sketch&mode=${mode}&pkg=${xhs_mp_pack_1.CONSTANTS.MAIN_PKG}&path=${skeleton === null || skeleton === void 0 ? void 0 : skeleton.path}!`;
+                }
+            }
+        }
+        for (const { pages, root } of subPkgs) {
+            for (const { skeleton } of pages) {
+                if (skeleton === null || skeleton === void 0 ? void 0 : skeleton.path) {
+                    entries[`${mode}/${skeleton === null || skeleton === void 0 ? void 0 : skeleton.path}`] = `mp-entry-loader?type=sketch&mode=${mode}&pkg=${xhs_mp_pack_1.CONSTANTS.SUB_PKG}&root=${root}&path=${skeleton === null || skeleton === void 0 ? void 0 : skeleton.path}!`;
+                }
+            }
+        }
+    };
+});

package/dist/presets/loaders/mg-entry-loader.js

@@ -7,20 +7,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "fs-extra", "../../utils/common", "xhs-mp-project"], factory);
+        define(["require", "exports", "fs-extra", "xhs-mp-project", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const fs_extra_1 = __importDefault(require("fs-extra"));
-    const common_1 = require("../../utils/common");
     const xhs_mp_project_1 = require("xhs-mp-project");
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     function entryLoader() {
         // @ts-ignore
         const { appJSON, projectPath } = this._compiler.project;
         const { entry } = this.getOptions();
         const addAppJs = () => {
-            const absolutePath = (0, common_1.unixJoin)(projectPath, entry);
+            const absolutePath = (0, xhs_mp_compiler_utils_1.unixJoin)(projectPath, entry);
             if (fs_extra_1.default.existsSync(`${absolutePath}.js`)) {
                 return `require('${absolutePath}.js')`;
             }

package/dist/presets/loaders/mini-style-loader.js

@@ -1,65 +1,32 @@
-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 };
-};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../packs", "cssnano", "../../utils/common"], factory);
+        define(["require", "exports", "xhs-mp-compiler-utils", "../../packs", "../../config/constant.config"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     const packs_1 = require("../../packs");
-    const cssnano_1 = __importDefault(require("cssnano"));
-    const common_1 = require("../../utils/common");
-    const CSS_MINIMIZER_OPTIONS = {
-        preset: ['default', { normalizeUrl: false, calc: false }]
-    };
-    const minify = (source, name) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        const postcssOptions = {
-            to: name,
-            from: name
-        };
-        try {
-            const result = yield cssnano_1.default.process(source, postcssOptions, CSS_MINIMIZER_OPTIONS);
-            return {
-                code: result.css,
-                warnings: (_b = (_a = result.warnings()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, i => i.toString())
-            };
-        }
-        catch (error) {
-            return {
-                code: source
-            };
-        }
-    });
+    const constant_config_1 = require("../../config/constant.config");
     function miniStyleLoader(source) {
         var _a;
         const callback = this.async();
         const { resourcePath } = this;
-        const { project, packSetting, independentFile } = this.getOptions();
+        // @ts-ignore
+        const { project } = this._compiler;
+        const { independentFile, emitDirs = [] } = this.getOptions();
         const { miniprogramDir } = project;
-        const { enableVDom, enableV1, enableV2 } = packSetting;
-        const shortPath = (0, common_1.getShortPath)(miniprogramDir, resourcePath).replace(/\.wxss$/, '.css');
+        const shortPath = (0, xhs_mp_compiler_utils_1.getShortPath)(miniprogramDir, resourcePath).replace(constant_config_1.CSS_REG, '.css');
         source = (_a = source === null || source === void 0 ? void 0 : source.trim) === null || _a === void 0 ? void 0 : _a.call(source);
         const emitFiles = (code) => {
-            // vdom架构下emit出一份css文件
-            if ((independentFile || enableVDom) && code) {
-                enableV1 && this.emitFile(`v1/${shortPath}`, code);
-                enableV2 && this.emitFile(`v2/${shortPath}`, code);
+            if ((independentFile) && code) {
+                emitDirs.forEach((dir) => {
+                    this.emitFile(`${dir}/${shortPath}`, code);
+                });
             }
         };
         const result = (code) => {
@@ -67,7 +34,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                 return `export default void 0;`;
             }
             // 判断浏览器环境，注入css添加逻辑
-            if (enableVDom) {
+            if (independentFile) {
                 return new packs_1.RawSource(`globalThis.__XHS_ADD_LINK(${JSON.stringify(shortPath)});` +
                     `export default ${JSON.stringify(shortPath)};`).source();
             }
@@ -76,21 +43,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
                     `export default ${JSON.stringify(shortPath)};`).source();
             }
         };
-        if (packSetting.compressCss) {
-            // 压缩css
-            minify(source, shortPath)
-                .then(({ code, warnings }) => {
-                emitFiles(code);
-                callback(null, result(code));
-            })
-                .catch(error => {
-                callback(error);
-            });
-        }
-        else {
-            emitFiles(source);
-            callback(null, result(source));
-        }
+        emitFiles(source);
+        callback(null, result(source));
     }
     module.exports = miniStyleLoader;
 });

package/dist/presets/loaders/mp-entry-loader.js

@@ -27,13 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "fs-extra", "path", "xhs-mp-pack", "../../utils/loader-utils", "xhs-mp-compiler-utils"], factory);
+        define(["require", "exports", "fs-extra", "xhs-mp-pack", "../../utils/loader-utils", "xhs-mp-compiler-utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     const fs_extra_1 = __importStar(require("fs-extra"));
-    const path_1 = __importStar(require("path"));
     const xhs_mp_pack_1 = require("xhs-mp-pack");
     const loader_utils_1 = require("../../utils/loader-utils");
     const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
@@ -53,15 +52,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
         if (mode === 'v2') {
             return `
       ;(globalThis['${name}'] || (globalThis['${name}'] = { default: {} }))
-      ;globalThis['${name}'].default['${compPath}'] = () => require('${(0, loader_utils_1.formatPath)(path_1.default.join(projectMiniprogramPath, `${compPath}.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`))}')
+      ;globalThis['${name}'].default['${compPath}'] = () => require('${(0, xhs_mp_compiler_utils_1.unixJoin)(projectMiniprogramPath, `${compPath}.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`)}')
       `;
         }
-        // v1和v0
+        // v1
         Object.keys(componentsMap).forEach(compPath => {
-            const push = () => entries.push(`;globalThis['${name}'].default['${compPath}'] = () => require('${(0, loader_utils_1.formatPath)(path_1.default.join(projectMiniprogramPath, `${compPath}.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`))}')`);
-            if (pkg === xhs_mp_pack_1.CONSTANTS.FULL_PKG) {
-                push();
-            }
+            const push = () => entries.push(`;globalThis['${name}'].default['${compPath}'] = () => require('${(0, xhs_mp_compiler_utils_1.unixJoin)(projectMiniprogramPath, `${compPath}.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`)}')`);
             if (pkg === xhs_mp_pack_1.CONSTANTS.MAIN_PKG && project.isFileInMainPkg(compPath)) {
                 push();
             }
@@ -76,16 +72,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     }
     const genRenderLoaderScript = (project, context, opts) => {
         const { projectMiniprogramPath, appJSON, jsonDependencies } = project;
-        const { pkg, mode } = opts;
-        const isFull = pkg === 'full';
+        const { mode } = opts;
         for (const file of jsonDependencies) {
             context.addDependency(file);
         }
-        const appCssPath = (0, path_1.resolve)(projectMiniprogramPath, 'app.css');
+        const appCssPath = (0, xhs_mp_compiler_utils_1.unixResolve)(projectMiniprogramPath, 'app.css');
         const appCssExist = (0, fs_extra_1.existsSync)(appCssPath);
-        const resourcePath = (0, loader_utils_1.formatPath)(context.resourcePath);
-        const path = (0, loader_utils_1.formatPath)(resourcePath.replace(`${projectMiniprogramPath}/`, '').replace(`.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`, ''));
-        const subPackage = (appJSON.subPackages || []).find(subPack => !!subPack.pages.find(page => page.path === path));
+        const resourcePath = (0, xhs_mp_compiler_utils_1.toUnixPath)(context.resourcePath);
+        const pagePath = (0, xhs_mp_compiler_utils_1.getShortPath)(projectMiniprogramPath, resourcePath);
+        const subPackage = (appJSON.subPackages || []).find(subPack => !!subPack.pages.find(page => page.path === pagePath));
         const enableLazyCodeLoading = mode === 'v2';
         // 资源文件
         const resources = (0, loader_utils_1.getResourceUris)({
@@ -96,7 +91,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
         // 开启了按需注入，注入依赖组件
         if (enableLazyCodeLoading) {
             const isIndependent = (subPackage === null || subPackage === void 0 ? void 0 : subPackage.independent) || false;
-            const dependsTree = project.getPageDependComponentPaths(path, isIndependent);
+            const dependsTree = project.getPageDependComponentPaths(pagePath, isIndependent);
             const subPackagesPrefix = (appJSON.subPackages || []).map(sub => sub.root);
             const depends = [];
             for (let i = 0; i < dependsTree.length; i++) {
@@ -109,16 +104,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
             }
             return `
       import Component from '${resourcePath}';
-      globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)}, ${JSON.stringify(depends)})
+      globalThis.__render.mount(Component, '${pagePath}', ${JSON.stringify(resources)}, ${JSON.stringify(depends)})
     `;
         }
         return `
     import Component from '${resourcePath}';
-    globalThis.__render.mount(Component, '${path}', ${JSON.stringify(resources)})
+    globalThis.__render.mount(Component, '${pagePath}', ${JSON.stringify(resources)})
   `;
     };
     function genServiceLoderScript(project, context, opts) {
-        const { appJSON, legacyAppJSON, projectMiniprogramPath, jsonDependencies } = project;
+        const { appJSON, projectMiniprogramPath, jsonDependencies } = project;
         const { pkg, root } = opts;
         const modules = [];
         let name = 'XHS_SERVICE';
@@ -131,43 +126,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
         const addAppJs = () => {
             if (fs_extra_1.default.existsSync(`${projectMiniprogramPath}/app.js`) ||
                 fs_extra_1.default.existsSync(`${projectMiniprogramPath}/app.ts`)) {
-                modules.unshift(`const loadAppJs = () => require('${(0, loader_utils_1.formatPath)(`${projectMiniprogramPath}/app`)}');` +
+                modules.unshift(`const loadAppJs = () => require('${(0, xhs_mp_compiler_utils_1.toUnixPath)(`${projectMiniprogramPath}/app`)}');` +
                     `globalThis['${name}'].default['app'] = globalThis.xhsLazyAppJs ? loadAppJs : loadAppJs()`);
             }
         };
-        if (pkg === xhs_mp_pack_1.CONSTANTS.FULL_PKG) {
+        const addPage = (page) => {
+            const resourcePath = (0, xhs_mp_compiler_utils_1.toUnixPath)(`${projectMiniprogramPath}/${page.path}`);
+            const content = `;globalThis['${name}'].default['${page.path}'] = () => require('${resourcePath}')`;
+            modules.push(content);
+        };
+        // 主包
+        if (pkg === xhs_mp_pack_1.CONSTANTS.MAIN_PKG) {
             addAppJs();
-            for (const page of legacyAppJSON.pages) {
-                const resourcePath = (0, loader_utils_1.formatPath)(`${projectMiniprogramPath}/${page.path}`);
-                modules.push(`;globalThis['${name}'].default['${page.path}'] =  () => require('${resourcePath}')`);
+            for (const page of appJSON.pages) {
+                addPage(page);
             }
         }
-        else {
-            if (pkg === xhs_mp_pack_1.CONSTANTS.MAIN_PKG) {
-                addAppJs();
-            }
-            for (const page of legacyAppJSON.pages) {
-                const resourcePath = (0, loader_utils_1.formatPath)(`${projectMiniprogramPath}/${page.path}`);
-                const content = `;globalThis['${name}'].default['${page.path}'] = () => require('${resourcePath}')`;
-                if (pkg === xhs_mp_pack_1.CONSTANTS.MAIN_PKG) {
-                    const subPackageRoots = appJSON.subPackages.map(pkg => pkg.root);
-                    if (subPackageRoots.every(root => !page.path.startsWith(`${root}/`))) {
-                        modules.push(content);
-                    }
-                }
-                if (pkg === xhs_mp_pack_1.CONSTANTS.SUB_PKG) {
-                    if (page.path.startsWith(`${root}/`)) {
-                        modules.push(content);
+        // 分包
+        if (pkg === xhs_mp_pack_1.CONSTANTS.SUB_PKG) {
+            for (const subPackage of appJSON.subPackages) {
+                if (subPackage.root === root) {
+                    for (const page of subPackage.pages) {
+                        addPage(page);
                     }
                 }
             }
         }
         Object.keys(appJSON.componentsMap).forEach(compPath => {
-            const resourcePath = (0, loader_utils_1.formatPath)(`${projectMiniprogramPath}/${compPath}`);
+            const resourcePath = (0, xhs_mp_compiler_utils_1.toUnixPath)(`${projectMiniprogramPath}/${compPath}`);
             const content = `;globalThis['${name}'].default['${compPath}'] = () => require('${resourcePath}')`;
-            if (pkg === xhs_mp_pack_1.CONSTANTS.FULL_PKG) {
-                modules.push(content);
-            }
             if (pkg === xhs_mp_pack_1.CONSTANTS.MAIN_PKG) {
                 const subPackageRoots = appJSON.subPackages.map(pkg => pkg.root);
                 if (subPackageRoots.every(root => !compPath.startsWith(`${root}/`))) {
@@ -180,12 +167,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
                 }
             }
         });
-        const runtimeJSON = pkg === xhs_mp_pack_1.CONSTANTS.FULL_PKG ? legacyAppJSON : appJSON;
-        return `;globalThis['__MP_APP_JSON__'] = ${JSON.stringify(runtimeJSON)};
+        return `;globalThis['__MP_APP_JSON__'] = ${JSON.stringify(appJSON)};
   ;(globalThis['${name}'] || (globalThis['${name}'] = { default: {} }))
   ${modules.join('\n  ')}
 `;
     }
+    function genSketchLoaderScript(project, context, opts) {
+        const { projectMiniprogramPath } = project;
+        const { pkg, root, path } = opts;
+        const resourcePath = (0, xhs_mp_compiler_utils_1.unixJoin)(projectMiniprogramPath, path);
+        const cssPath = `${resourcePath}.${(0, xhs_mp_compiler_utils_1.getCssSuffixName)()}`;
+        const mlPath = `${resourcePath}.${(0, xhs_mp_compiler_utils_1.getMlSuffixName)()}`;
+        // console.log(pkg, root, mlPath, cssPath)
+        if ((0, fs_extra_1.existsSync)(cssPath)) {
+            context.addDependency(cssPath);
+            return `import skeleton from '${mlPath}';` +
+                `import style from '${cssPath}';` +
+                `globalThis.XHS_SKETCH = ({ skeleton, style });`;
+        }
+        return `import skeleton from '${mlPath}';` +
+            `globalThis.XHS_SKETCH = ({ skeleton });`;
+    }
     function entryLoader() {
         // @ts-ignore
         const options = this.getOptions();
@@ -193,7 +195,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
         const handelrs = {
             render: genRenderLoaderScript,
             component: genComponentLoaderScript,
-            service: genServiceLoderScript
+            service: genServiceLoderScript,
+            sketch: genSketchLoaderScript,
         };
         const handler = handelrs[type];
         if (!handler) {

package/dist/presets/loaders/string-loader.js

@@ -0,0 +1,6 @@
+"use strict";
+module.exports = function (source) {
+    // 确保返回的是字符串格式
+    const result = JSON.stringify(source.trim());
+    return `export default ${result};`;
+};

package/dist/presets/loaders/wxss-loader.js

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "postcss", "postcss-import", "postcss-prefix-selector", "css-loader/dist/CssSyntaxError", "xhs-mp-ml-parser", "xhs-mp-compiler-utils", "../../utils/common"], factory);
+        define(["require", "exports", "postcss", "postcss-import", "postcss-prefix-selector", "postcss-preset-env", "cssnano", "css-loader/dist/CssSyntaxError", "xhs-mp-ml-parser", "xhs-mp-compiler-utils", "../../utils/postcssRpx2Vw", "../../types", "../../config/constant.config"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -24,63 +24,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const postcss_1 = __importDefault(require("postcss"));
     const postcss_import_1 = __importDefault(require("postcss-import"));
     const postcss_prefix_selector_1 = __importDefault(require("postcss-prefix-selector"));
+    const postcss_preset_env_1 = __importDefault(require("postcss-preset-env"));
+    const cssnano_1 = __importDefault(require("cssnano"));
     const CssSyntaxError_1 = __importDefault(require("css-loader/dist/CssSyntaxError"));
     const xhs_mp_ml_parser_1 = require("xhs-mp-ml-parser");
     const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
-    const common_1 = require("../../utils/common");
-    const tags = Object.keys(xhs_mp_ml_parser_1.tagTransformMap).join('|');
-    const labelStr = `(^|\\s)(${tags}|audio|live-player|cover-view|cover-image)`;
-    const labelReg = new RegExp(labelStr, 'g');
+    const postcssRpx2Vw_1 = __importDefault(require("../../utils/postcssRpx2Vw"));
+    const types_1 = require("../../types");
+    const constant_config_1 = require("../../config/constant.config");
+    const LABEL_REG = new RegExp(`(^|\\s)(${Object.keys(xhs_mp_ml_parser_1.tagTransformMap).join('|')})`, 'g');
+    const CSS_MINIMIZER_OPTIONS = {
+        preset: ['default', { normalizeUrl: false, calc: false }]
+    };
     function wxssLoader(source) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e;
             const done = this.async();
-            const { project } = this._compiler;
+            const { project, packSetting } = this._compiler;
+            const isDev = packSetting.env === types_1.ENV.development;
+            const isProd = packSetting.env === types_1.ENV.production;
+            const browsers = isDev ? constant_config_1.DEV_BROWSERSLIST : constant_config_1.PROD_BROWSERSLIST;
             const { appJSON = {}, miniprogramDir = '' } = project || {};
-            const shortPath = (0, common_1.getShortPath)(miniprogramDir, this.resourcePath).replace(new RegExp(`\\.${(0, xhs_mp_compiler_utils_1.getCssSuffixName)()}$`), '');
+            const shortPath = (0, xhs_mp_compiler_utils_1.getShortPath)(miniprogramDir, this.resourcePath).replace(constant_config_1.CSS_REG, '');
             const index = (_c = (_b = (_a = appJSON === null || appJSON === void 0 ? void 0 : appJSON.componentsMap) === null || _a === void 0 ? void 0 : _a[shortPath]) === null || _b === void 0 ? void 0 : _b.index) !== null && _c !== void 0 ? _c : null;
             const styleIsolation = (_e = (_d = appJSON === null || appJSON === void 0 ? void 0 : appJSON.componentsMap) === null || _d === void 0 ? void 0 : _d[shortPath]) === null || _e === void 0 ? void 0 : _e.styleIsolation;
             const selectorIndex = styleIsolation === 'shared' ? 0 : index || 0;
-            // js / json 的配置会影响样式
-            const extReg = new RegExp(`${(0, xhs_mp_compiler_utils_1.getCssSuffixName)()}$`);
-            this.addDependency(this.resourcePath.replace(extReg, 'js'));
-            this.addDependency(this.resourcePath.replace(extReg, 'json'));
-            (0, postcss_1.default)()
-                // @ts-ignore
-                .use((0, postcss_import_1.default)({ root: miniprogramDir }))
-                .use((0, postcss_prefix_selector_1.default)({
-                prefix: 'xhs',
-                transform(prefix, selector) {
-                    // 支持 host 选择器 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
-                    if (selector === ':host') {
-                        return `[is="${shortPath}"]`;
-                    }
-                    /**
-                     * 替换所有类选择器，用于做样式隔离 wiki: https://wiki.xiaohongshu.com/pages/viewpage.action?pageId=181017177
-                     * .app -> .xhs_0_app
-                     */
-                    selector = selector.replace(/\.(\w)/g, `.xhs_${selectorIndex}_$1`);
-                    // 为内置组件加上 xhs 前缀
-                    if (selector.match(labelReg)) {
-                        selector = selector.replace(labelReg, `$1${prefix}-$2`);
-                    }
-                    return selector;
-                },
-            }))
-                .process(source, {
-                from: this.resourcePath,
-            })
-                .then(result => {
+            const isSketchCss = this.resourcePath.match(constant_config_1.SKETCH_CSS_REG);
+            if (!isSketchCss) {
+                // js / json 的配置会影响 page 或者 component 样式
+                this.addDependency(this.resourcePath.replace(constant_config_1.CSS_REG, '.js'));
+                this.addDependency(this.resourcePath.replace(constant_config_1.CSS_REG, '.json'));
+            }
+            const plugins = [
+                // 1. 处理 @import
+                (0, postcss_import_1.default)({ root: miniprogramDir }),
+                // 2. 处理组件或者页面选择器前缀
+                (0, postcss_prefix_selector_1.default)({
+                    prefix: 'xhs',
+                    transform(prefix, selector) {
+                        if (!isSketchCss) {
+                            // 支持 host 选择器 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
+                            if (selector === ':host') {
+                                return `[is="${shortPath}"]`;
+                            }
+                            /**
+                             * 替换所有类选择器，用于做样式隔离 wiki: https://wiki.xiaohongshu.com/pages/viewpage.action?pageId=181017177
+                             * .app -> .xhs_0_app
+                             */
+                            selector = selector.replace(/\.(\w)/g, `.xhs_${selectorIndex}_$1`);
+                        }
+                        // 为内置组件加上 xhs 前缀 view -> xhs-view
+                        if (selector.match(LABEL_REG)) {
+                            selector = selector.replace(LABEL_REG, `$1${prefix}-$2`);
+                        }
+                        return selector;
+                    },
+                }),
+                // 3. 处理rpx单位
+                (0, postcssRpx2Vw_1.default)({ baseWidth: 750, isDev, }),
+                // 4. 处理浏览器兼容性
+                isProd ? (0, postcss_preset_env_1.default)({ browsers }) : undefined,
+                // 5. 压缩css
+                packSetting.compressCss ? (0, cssnano_1.default)(CSS_MINIMIZER_OPTIONS) : undefined
+            ].filter(Boolean);
+            try {
+                const result = yield (0, postcss_1.default)(plugins)
+                    .process(source, {
+                    from: this.resourcePath,
+                });
                 result.messages.forEach(({ file, type }) => {
                     if (type === 'dependency') {
                         this.addDependency(file);
                     }
                 });
-                done(null, result.css);
-            })
-                .catch(error => {
-                done(error.name === 'CssSyntaxError' ? new CssSyntaxError_1.default(error) : error);
-            });
+                return done(null, result.css);
+            }
+            catch (error) {
+                return done(error.name === 'CssSyntaxError' ? new CssSyntaxError_1.default(error) : error);
+            }
         });
     }
     module.exports = wxssLoader;

package/dist/utils/common.d.ts

@@ -1,8 +1,4 @@
 export declare const getTsConfigPath: (projectPath: string) => string | undefined;
 export declare const isString: (val: unknown) => val is string;
-export declare const toUnixPath: (pathStr?: string) => string;
-export declare const unixJoin: (...paths: string[]) => string;
-export declare const unixResolve: (...paths: string[]) => string;
-export declare const getShortPath: (miniprogramDir: string, rootContext: string) => string;
 export declare const md5: (str: string) => string;
 export declare const DEFAULT_ENTRY = "game";

package/dist/utils/common.js

@@ -7,16 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "fs-extra", "path", "crypto", "xhs-mp-compiler-utils"], factory);
+        define(["require", "exports", "fs-extra", "crypto"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.DEFAULT_ENTRY = exports.md5 = exports.getShortPath = exports.unixResolve = exports.unixJoin = exports.toUnixPath = exports.isString = exports.getTsConfigPath = void 0;
+    exports.DEFAULT_ENTRY = exports.md5 = exports.isString = exports.getTsConfigPath = void 0;
     const fs_extra_1 = __importDefault(require("fs-extra"));
-    const path_1 = __importDefault(require("path"));
     const crypto_1 = __importDefault(require("crypto"));
-    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
     const getTsConfigPath = (projectPath) => {
         if (fs_extra_1.default.existsSync(`${projectPath}/tsconfig.json`)) {
             return `${projectPath}/tsconfig.json`;
@@ -26,20 +24,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     exports.getTsConfigPath = getTsConfigPath;
     const isString = (val) => typeof val === 'string';
     exports.isString = isString;
-    const toUnixPath = (pathStr = '') => pathStr.split(path_1.default.sep).join(path_1.default.posix.sep);
-    exports.toUnixPath = toUnixPath;
-    const unixJoin = (...paths) => (0, exports.toUnixPath)(path_1.default.join(...paths));
-    exports.unixJoin = unixJoin;
-    const unixResolve = (...paths) => (0, exports.toUnixPath)(path_1.default.resolve(...paths));
-    exports.unixResolve = unixResolve;
-    const getShortPath = (miniprogramDir, rootContext) => {
-        const suffix = (0, xhs_mp_compiler_utils_1.getMlSuffixName)();
-        miniprogramDir = (0, exports.toUnixPath)(miniprogramDir);
-        miniprogramDir = miniprogramDir.endsWith('/') ? miniprogramDir : `${miniprogramDir}/`;
-        const reg = new RegExp(`.${suffix}$`, 'g');
-        return (0, exports.toUnixPath)(rootContext).replace(reg, '').replace(miniprogramDir, '');
-    };
-    exports.getShortPath = getShortPath;
     const md5 = (str) => crypto_1.default.createHash('md5').update(str).digest('hex');
     exports.md5 = md5;
     exports.DEFAULT_ENTRY = "game";

package/dist/utils/loader-utils.d.ts

@@ -1,5 +1,3 @@
-export declare const formatPath: (pathStr?: string) => string;
-export declare const getShortPath: (projectMiniprogramPath: string, rootContext: string) => string;
 /**
  * 根据是否分包获取资源路径
  */

package/dist/utils/loader-utils.js

@@ -1,34 +1,16 @@
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "path", "./common", "xhs-mp-compiler-utils"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getResourceUris = exports.getShortPath = exports.formatPath = void 0;
+    exports.getResourceUris = void 0;
     exports.createRequire = createRequire;
-    const path_1 = __importDefault(require("path"));
-    const common_1 = require("./common");
-    const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
-    const formatPath = (pathStr = '') => pathStr.split(path_1.default.sep).join(path_1.default.posix.sep);
-    exports.formatPath = formatPath;
-    const getShortPath = (projectMiniprogramPath, rootContext) => {
-        const suffix = (0, xhs_mp_compiler_utils_1.getMlSuffixName)();
-        const reg = new RegExp(`.${suffix}$`, 'g');
-        projectMiniprogramPath = (0, common_1.toUnixPath)(projectMiniprogramPath);
-        projectMiniprogramPath = projectMiniprogramPath.endsWith('/')
-            ? projectMiniprogramPath
-            : `${projectMiniprogramPath}/`;
-        return (0, common_1.toUnixPath)(rootContext).replace(reg, '').replace(projectMiniprogramPath, '');
-    };
-    exports.getShortPath = getShortPath;
     /**
      * 根据是否分包获取资源路径
      */

package/dist/utils/postcssRpx2Vw.d.ts

@@ -4,8 +4,9 @@ interface IPostcssRpx2Vw {
     baseWidth?: number;
     unitPrecision?: number;
     mediaQuery?: boolean;
+    isDev?: boolean;
 }
-declare const postcssRpx2Vw: ({ outputUnit, baseWidth, unitPrecision, mediaQuery, }: IPostcssRpx2Vw) => {
+declare const postcssRpx2Vw: ({ outputUnit, baseWidth, unitPrecision, mediaQuery, isDev, }: IPostcssRpx2Vw) => {
     postcssPlugin: string;
     Root: (root: Root) => void;
 };

package/dist/utils/postcssRpx2Vw.js

@@ -11,7 +11,7 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     const postcss_1 = require("postcss");
     const xhs_mp_compiler_utils_1 = require("xhs-mp-compiler-utils");
-    const postcssRpx2Vw = ({ outputUnit = 'vw', baseWidth = 750, unitPrecision = 5, mediaQuery = false, }) => {
+    const postcssRpx2Vw = ({ outputUnit = 'vw', baseWidth = 750, unitPrecision = 5, mediaQuery = false, isDev = false, }) => {
         const replacement = (m, $1) => {
             return (0, xhs_mp_compiler_utils_1.calcRpx2Vw)($1, baseWidth, unitPrecision, outputUnit);
         };
@@ -27,9 +27,12 @@
                         rpxEntries.push({ prop: decl.prop, value: decl.value });
                         decl.value = decl.value.replace(xhs_mp_compiler_utils_1.RPX_REGEX, replacement);
                     });
-                    rpxEntries.forEach(decl => {
-                        rule.append(new postcss_1.Declaration({ prop: '--ide-' + decl.prop, value: decl.value }));
-                    });
+                    // dev 环境下，添加原始 rpx 值
+                    if (isDev) {
+                        rpxEntries.forEach(decl => {
+                            rule.append(new postcss_1.Declaration({ prop: '--ide-' + decl.prop, value: decl.value }));
+                        });
+                    }
                 });
                 if (mediaQuery) {
                     root.walkAtRules('media', rule => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xhs-mp-compiler-cli",
-  "version": "2.0.3",
+  "version": "2.0.4-beta.1",
   "description": "xhs mp command tool.",
   "preferGlobal": true,
   "category": "esm",
@@ -45,7 +45,6 @@
     "@babel/types": "^7.12.10",
     "@swc/core": "^1.3.74",
     "@swc/helpers": "^0.5.1",
-    "@vue/babel-preset-jsx": "^1.2.4",
     "archiver": "^7.0.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
@@ -70,41 +69,37 @@
     "module-alias": "^2.2.2",
     "open": "^7.0.4",
     "ora": "^5.4.1",
-    "postcss": "^8.2.8",
-    "postcss-import": "^14.0.2",
-    "postcss-loader": "^5.2.0",
-    "postcss-prefix-selector": "^1.10.0",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-pxtorem": "^5.1.1",
+    "postcss": "^8.2.15",
+    "postcss-import": "^14.1.0",
+    "postcss-prefix-selector": "^1.16.1",
+    "postcss-preset-env": "^6.7.2",
+    "prettier": "^3.0.3",
     "query-string": "^8.1.0",
     "querystring": "^0.2.1",
     "source-map": "^0.6.1",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "style-loader": "^1.2.1",
     "swc-loader": "^0.1.15",
     "tapable": "^2.2.1",
     "terser-webpack-plugin": "^5.2.4",
     "typescript": "^5.1.6",
     "uuid": "^9.0.1",
-    "vue": "^3.2.26",
-    "vue-loader": "^16.4.1",
-    "vue-style-loader": "^4.1.2",
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-chain": "^6.5.1",
     "webpack-sources": "^3.2.2",
     "xhs-mp-workerpool": "^9.1.3",
-    "xhs-mp-ml-loader": "2.0.3",
-    "xhs-mp-compiler-utils": "2.0.3",
-    "xhs-mp-pack": "2.0.3",
-    "xhs-mp-project": "2.0.3",
-    "xhs-mp-shared": "2.0.3",
-    "xhs-mp-shared-fs": "2.0.3",
-    "xhs-mp-sjs-loader": "2.0.3",
+    "xhs-mp-ml-loader": "2.0.4-beta.1",
+    "xhs-mp-compiler-utils": "2.0.4-beta.1",
+    "xhs-mp-pack": "2.0.4-beta.1",
+    "xhs-mp-project": "2.0.4-beta.1",
+    "xhs-mp-shared": "2.0.4-beta.1",
+    "xhs-mp-shared-fs": "2.0.4-beta.1",
+    "xhs-mp-sjs-loader": "2.0.4-beta.1",
+    "xhs-mp-sketch-loader": "2.0.4-beta.1",
     "yauzl": "^2.10.0"
   },
   "peerDependencies": {
-    "xhs-mp-ml-parser": "2.0.3"
+    "xhs-mp-ml-parser": "2.0.4-beta.1"
   },
   "devDependencies": {
     "@types/babel__generator": "7.6.3",
@@ -122,14 +117,13 @@
     "eslint": "7.27.0",
     "eslint-config-prettier": "8.1.0",
     "jest": "27.0.6",
-    "prettier": "~3.0.2",
     "rimraf": "3.0.2",
     "ts-jest": "27.0.3",
     "ts-node": "10.0.0",
     "typescript": "5.1.6",
     "vue3-jest": "27.0.0-alpha.2",
     "webpack-dev-server": "4.0.0-beta.3",
-    "xhs-mp-ml-parser": "2.0.3"
+    "xhs-mp-ml-parser": "2.0.4-beta.1"
   },
   "scripts": {
     "version": "formula changelog && git add .",

package/dist/utils/css.d.ts

@@ -1,2 +0,0 @@
-declare const getCssConfig: (packSetting: any, options: any, presets: any, independentFile?: boolean) => any;
-export default getCssConfig;

package/dist/utils/css.js

@@ -1,49 +0,0 @@
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "postcss-preset-env", "./postcssRpx2Vw", "../types", "../config/constant.config"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    const postcss_preset_env_1 = __importDefault(require("postcss-preset-env"));
-    const postcssRpx2Vw_1 = __importDefault(require("./postcssRpx2Vw"));
-    const types_1 = require("../types");
-    const constant_config_1 = require("../config/constant.config");
-    const getCssConfig = (packSetting, options, presets, independentFile = false) => {
-        const isDev = packSetting.env === types_1.ENV.development;
-        const browsers = isDev ? constant_config_1.DEV_BROWSERSLIST : constant_config_1.PROD_BROWSERSLIST;
-        const loaders = {
-            'mini-style-loader': {
-                loader: require.resolve('../presets/loaders/mini-style-loader'),
-                options: Object.assign(Object.assign({}, options), { independentFile }),
-            },
-            'postcss-loader': {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                    sourceMap: packSetting.env !== types_1.ENV.production,
-                    postcssOptions: {
-                        config: false,
-                        plugins: [(0, postcssRpx2Vw_1.default)({ baseWidth: 750 }), (0, postcss_preset_env_1.default)({ browsers })],
-                    },
-                },
-            },
-            'wxss-loader': {
-                loader: require.resolve('../presets/loaders/wxss-loader'),
-            },
-        };
-        return presets.flat().reduce((acc, cur) => {
-            if (typeof cur === "string" && loaders[cur]) {
-                Reflect.set(acc, cur, loaders[cur]);
-            }
-            return acc;
-        }, {});
-    };
-    exports.default = getCssConfig;
-});