@open-wxa/wxa-runner-core 0.9.0 → 0.10.0

package/dist/index.js

@@ -49,6 +49,47 @@ var FileStore = class {
     this.etagPrefix = (0, import_crypto.randomUUID)();
     this.version = 0;
     this.nodes = /* @__PURE__ */ new Map([["/", { dir: true, data: Buffer.alloc(0), mtime: Date.now(), etag: "" }]]);
+    this.operations = {
+      readFile: ({ filePath, encoding }) => {
+        const data = this.read(filePath);
+        return encoding === void 0 ? { data: data.toString("base64"), binary: true } : { data: data.toString(encoding) };
+      },
+      writeFile: (args) => this.writeEncoded(args, false),
+      appendFile: (args) => this.writeEncoded(args, true),
+      copyFile: ({ srcPath, destPath }) => {
+        this.write(destPath, this.read(srcPath));
+        return {};
+      },
+      access: ({ path: path7 }) => {
+        this.existing(path7);
+        return {};
+      },
+      stat: ({ path: path7 }) => {
+        const node = this.existing(path7);
+        const stats = {
+          mode: node.dir ? 16877 : 33188,
+          size: node.data.length,
+          lastAccessedTime: Math.floor(node.mtime / 1e3),
+          lastModifiedTime: Math.floor(node.mtime / 1e3)
+        };
+        return { stats, ...stats };
+      },
+      getFileInfo: ({ filePath }) => ({ size: this.read(filePath).length }),
+      mkdir: ({ dirPath, recursive }) => {
+        this.mkdir(dirPath, !!recursive);
+        return {};
+      },
+      readdir: ({ dirPath }) => ({ files: this.readdir(dirPath) }),
+      unlink: ({ filePath }) => {
+        this.remove(filePath, { dir: false });
+        return {};
+      },
+      rmdir: ({ dirPath, recursive }) => {
+        this.assertNotRoot(dirPath);
+        this.remove(dirPath, { dir: true, recursive: !!recursive });
+        return {};
+      }
+    };
     this.roots = roots.map((root) => this.normalize(root));
     for (const root of this.roots) this.mkdir(root, true);
   }
@@ -109,66 +150,37 @@ var FileStore = class {
     }
     this.nodes.delete(target);
   }
+  /** 文件 API 经开发服务器调用的操作，参数和返回值的字段名与基础库一致 */
   execute(operation, args) {
-    switch (operation) {
-      case "readFile": {
-        const data = this.read(args.filePath);
-        return args.encoding === void 0 ? { data: data.toString("base64"), binary: true } : { data: data.toString(args.encoding) };
-      }
-      case "writeFile":
-      case "appendFile": {
-        const data = Buffer.from(args.data ?? "", args.binary ? "base64" : args.encoding || "utf8");
-        this.write(args.filePath, data, operation === "appendFile");
-        return {};
-      }
-      case "copyFile":
-        this.write(args.destPath, this.read(args.srcPath));
-        return {};
-      case "access":
-        if (!this.stat(args.path)) throw new Error(`no such file or directory ${args.path}`);
-        return {};
-      case "stat": {
-        const node = this.stat(args.path);
-        if (!node) throw new Error(`no such file or directory ${args.path}`);
-        const stats = {
-          mode: node.dir ? 16877 : 33188,
-          size: node.data.length,
-          lastAccessedTime: Math.floor(node.mtime / 1e3),
-          lastModifiedTime: Math.floor(node.mtime / 1e3)
-        };
-        return { stats, ...stats };
-      }
-      case "getFileInfo":
-        return { size: this.read(args.filePath).length };
-      case "mkdir":
-        this.mkdir(args.dirPath, !!args.recursive);
-        return {};
-      case "readdir":
-        return { files: this.readdir(args.dirPath) };
-      case "unlink":
-        this.remove(args.filePath, { dir: false });
-        return {};
-      case "rmdir": {
-        const target = this.normalize(args.dirPath);
-        const prefix = target === "/" ? "/" : target + "/";
-        if (this.roots.some((root) => root === target || root.startsWith(prefix))) {
-          throw new Error(`operation not permitted ${args.dirPath}`);
-        }
-        this.remove(args.dirPath, { dir: true, recursive: !!args.recursive });
-        return {};
-      }
-      default:
-        throw new Error(`unsupported filesystem operation ${operation}`);
+    if (!Object.prototype.hasOwnProperty.call(this.operations, operation)) {
+      throw new Error(`unsupported filesystem operation ${operation}`);
+    }
+    return this.operations[operation](args);
+  }
+  writeEncoded(args, append) {
+    this.write(args.filePath, Buffer.from(args.data ?? "", args.binary ? "base64" : args.encoding || "utf8"), append);
+    return {};
+  }
+  existing(filePath) {
+    const node = this.stat(filePath);
+    if (!node) throw new Error(`no such file or directory ${filePath}`);
+    return node;
+  }
+  assertNotRoot(dirPath) {
+    const target = this.normalize(dirPath);
+    const prefix = target === "/" ? "/" : target + "/";
+    if (this.roots.some((root) => root === target || root.startsWith(prefix))) {
+      throw new Error(`operation not permitted ${dirPath}`);
     }
   }
 };
 
 // src/server/DevServer.ts
-var import_fs5 = __toESM(require("fs"));
+var import_fs6 = __toESM(require("fs"));
 var import_http = __toESM(require("http"));
 var import_net = __toESM(require("net"));
-var import_os2 = __toESM(require("os"));
-var import_path5 = __toESM(require("path"));
+var import_os3 = __toESM(require("os"));
+var import_path6 = __toESM(require("path"));
 var import_express2 = __toESM(require("express"));
 var import_ws2 = require("ws");
 var import_wxa_runner_extractor5 = require("@open-wxa/wxa-runner-extractor");
@@ -177,6 +189,164 @@ var import_wxa_runner_extractor5 = require("@open-wxa/wxa-runner-extractor");
 var import_wxa_runner_compiler = require("@open-wxa/wxa-runner-compiler");
 var import_esbuild = require("esbuild");
 
+// src/project/StyleMirror.ts
+var import_fs = __toESM(require("fs"));
+var import_module = require("module");
+var import_os = __toESM(require("os"));
+var import_path = __toESM(require("path"));
+var import_url = require("url");
+var PLUGIN_EXTENSIONS = {
+  less: [".less"],
+  sass: [".sass", ".scss"]
+};
+var IMPORT_WXSS = /(?:^|\s)?(?:@import)(?:\s*)?(["'])([^"']+.wxss)\1(?:\s*);/g;
+function readStyleSetting(setting) {
+  const plugins = [];
+  let lessGlobalVars = {};
+  for (const item of Array.isArray(setting?.useCompilerPlugins) ? setting.useCompilerPlugins : []) {
+    const [name, options] = Array.isArray(item) ? item : [item, void 0];
+    if (name !== "less" && name !== "sass" || plugins.includes(name)) continue;
+    plugins.push(name);
+    if (name === "less" && options?.globalVars) lessGlobalVars = options.globalVars;
+  }
+  return {
+    plugins,
+    lessGlobalVars,
+    lessCommonFile: setting?.lessSetting?.commonUseFilePath || "app.less",
+    sassCommonFile: setting?.sassSetting?.sassCommonUseFilePath || "global.sass",
+    scssCommonFile: setting?.sassSetting?.scssCommonUseFilePath || "global.scss"
+  };
+}
+function ignoredStyleSources(project, setting) {
+  return Object.keys(PLUGIN_EXTENSIONS).filter((plugin) => !setting.plugins.includes(plugin)).map((plugin) => ({ plugin, files: project.listFiles(PLUGIN_EXTENSIONS[plugin]) })).filter(({ files }) => files.length > 0);
+}
+var StyleMirror = class {
+  constructor(setting) {
+    this.setting = setting;
+    this.dir = null;
+    /** 已写入的 .wxss 与写入的内容 */
+    this.files = /* @__PURE__ */ new Map();
+    this.compilers = /* @__PURE__ */ new Map();
+  }
+  /** 镜像目录；还没同步过时为 null */
+  get directory() {
+    return this.dir;
+  }
+  /**
+   * 编译全部预处理文件，与原有的 .wxss 一起写进镜像目录。
+   * @returns 镜像目录，以及其中全部 .wxss 的相对路径
+   */
+  async sync(project) {
+    const sources = this.pickSources(project);
+    const outputs = await Promise.all(
+      [...sources].map(async ([target, source]) => [target, await this.compile(project, source)])
+    );
+    const dir = this.dir ??= import_fs.default.mkdtempSync(import_path.default.join(import_os.default.tmpdir(), "wxa-runner-wxss-"));
+    for (const rel of [...this.files.keys()]) {
+      if (sources.has(rel)) continue;
+      import_fs.default.rmSync(import_path.default.join(dir, rel), { force: true });
+      this.files.delete(rel);
+    }
+    for (const [rel, css] of outputs) {
+      if (this.files.get(rel) === css) continue;
+      const target = import_path.default.join(dir, rel);
+      import_fs.default.mkdirSync(import_path.default.dirname(target), { recursive: true });
+      import_fs.default.writeFileSync(target, css);
+      this.files.set(rel, css);
+    }
+    return { cwd: dir, files: [...sources.keys()] };
+  }
+  dispose() {
+    if (this.dir) import_fs.default.rmSync(this.dir, { recursive: true, force: true });
+    this.dir = null;
+    this.files.clear();
+  }
+  /** 每个 .wxss 由哪个源文件生成：键为 .wxss 的相对路径 */
+  pickSources(project) {
+    const extensions = [".wxss", ...this.setting.plugins.flatMap((plugin) => PLUGIN_EXTENSIONS[plugin])];
+    const sources = /* @__PURE__ */ new Map();
+    for (const file of project.listFiles(extensions)) {
+      const ext = import_path.default.extname(file);
+      const target = file.slice(0, -ext.length) + ".wxss";
+      const current = sources.get(target);
+      if (!current || extensions.indexOf(ext) > extensions.indexOf(import_path.default.extname(current))) sources.set(target, file);
+    }
+    return sources;
+  }
+  async compile(project, file) {
+    const ext = import_path.default.extname(file);
+    if (ext === ".wxss") return project.readText(file);
+    const compiler = await this.loadCompiler(ext === ".less" ? "less" : "sass", project);
+    try {
+      return ext === ".less" ? await this.compileLess(compiler, project, file) : this.compileSass(compiler, project, file);
+    } catch (error) {
+      throw new Error(`${file} \u7F16\u8BD1\u5931\u8D25\uFF1A${describeError(project, error)}`);
+    }
+  }
+  async compileLess(less, project, file) {
+    const common = this.setting.lessCommonFile;
+    const prefix = Object.entries(this.setting.lessGlobalVars).map(([name, value]) => `@${name.replace(/^@/, "")}: ${value};`);
+    if (file !== common && project.exists(common)) prefix.push(`@import (optional, reference) '${toRoot(file)}/${common}';`);
+    let code = prefix.map((statement) => statement + " ").join("") + project.readText(file);
+    code = code.replace(IMPORT_WXSS, (statement, _quote, target) => statement.replace(target, `${target}?css`));
+    const { css } = await less.render(code, {
+      filename: import_path.default.join(project.root, file),
+      paths: [project.root]
+    });
+    return css.replace(/(@import\s*["'][^"']+\.wxss)\?css(["'])/g, "$1$2");
+  }
+  compileSass(sass, project, file) {
+    const indented = file.endsWith(".sass");
+    const preferred = indented ? this.setting.sassCommonFile : this.setting.scssCommonFile;
+    const fallback = indented ? this.setting.scssCommonFile : this.setting.sassCommonFile;
+    const common = project.exists(preferred) ? preferred : project.exists(fallback) ? fallback : null;
+    let code = project.readText(file);
+    if (common && file !== preferred && file !== fallback) {
+      code = `@use '${toRoot(file)}/${common}'${indented ? "\n" : "; "}${code}`;
+    }
+    const imported = /* @__PURE__ */ new Set();
+    code = code.replace(IMPORT_WXSS, (statement, _quote, target) => {
+      imported.add(target);
+      return statement.replace(target, `${target.slice(0, -".wxss".length)}.css`);
+    });
+    const css = typeof sass.compileString === "function" ? sass.compileString(code, { url: (0, import_url.pathToFileURL)(import_path.default.join(project.root, file)), syntax: indented ? "indented" : "scss", loadPaths: [project.root] }).css : sass.renderSync({ data: code, file: import_path.default.join(project.root, file), indentedSyntax: indented, includePaths: [project.root] }).css.toString();
+    return css.replace(
+      /(@import\s*["'])([^"']+)\.css(["'])/g,
+      (statement, head, target, tail) => imported.has(`${target}.wxss`) ? `${head}${target}.wxss${tail}` : statement
+    );
+  }
+  /** 用到时才加载：先从小程序根目录和项目目录向上查找 node_modules，找不到时用 wxa-runner 自带的 */
+  loadCompiler(name, project) {
+    let loading = this.compilers.get(name);
+    if (!loading) {
+      loading = importCompiler(name, project);
+      this.compilers.set(name, loading);
+    }
+    return loading;
+  }
+};
+async function importCompiler(name, project) {
+  let resolved = null;
+  try {
+    resolved = (0, import_module.createRequire)(import_path.default.join(project.root, "package.json")).resolve(name, { paths: [project.root, project.projectPath] });
+  } catch {
+  }
+  const module2 = resolved ? await import((0, import_url.pathToFileURL)(resolved).href) : name === "less" ? await import("less") : await import("sass");
+  const entry = name === "less" ? "render" : "renderSync";
+  return typeof module2[entry] === "function" ? module2 : module2.default;
+}
+function toRoot(file) {
+  const dir = import_path.default.posix.dirname(file);
+  return dir === "." ? "." : dir.split("/").map(() => "..").join("/");
+}
+function describeError(project, error) {
+  if (typeof error?.line === "number" && error.filename) {
+    const file = import_path.default.relative(project.root, error.filename).split(import_path.default.sep).join("/");
+    return `${file}:${error.line}:${(error.column ?? 0) + 1} ${error.message}`;
+  }
+  return error?.message ?? String(error);
+}
+
 // src/project/wxConfig.ts
 var DEFAULT_WINDOW = {
   navigationBarBackgroundColor: "#000000",
@@ -234,9 +404,9 @@ function createWxConfig(input) {
 }
 
 // src/project/WxmlMirror.ts
-var import_fs = __toESM(require("fs"));
-var import_os = __toESM(require("os"));
-var import_path = __toESM(require("path"));
+var import_fs2 = __toESM(require("fs"));
+var import_os2 = __toESM(require("os"));
+var import_path2 = __toESM(require("path"));
 var WxmlMirror = class {
   constructor(transform) {
     this.transform = transform;
@@ -253,25 +423,25 @@ var WxmlMirror = class {
    * 只重写源内容变化的文件；项目里已删除的文件同时从镜像目录删除，被引用时 wcc 照常报错
    */
   sync(project, relPaths) {
-    const dir = this.dir ??= import_fs.default.mkdtempSync(import_path.default.join(import_os.default.tmpdir(), "wxa-runner-wxml-"));
+    const dir = this.dir ??= import_fs2.default.mkdtempSync(import_path2.default.join(import_os2.default.tmpdir(), "wxa-runner-wxml-"));
     const current = new Set(relPaths);
     for (const rel of [...this.files.keys()]) {
       if (current.has(rel)) continue;
-      import_fs.default.rmSync(import_path.default.join(dir, rel), { force: true });
+      import_fs2.default.rmSync(import_path2.default.join(dir, rel), { force: true });
       this.files.delete(rel);
     }
     for (const rel of relPaths) {
       const source = project.readText(rel);
       if (this.files.get(rel) === source) continue;
-      const target = import_path.default.join(dir, rel);
-      import_fs.default.mkdirSync(import_path.default.dirname(target), { recursive: true });
-      import_fs.default.writeFileSync(target, rel.endsWith(".wxml") ? this.transform(source, rel) : source);
+      const target = import_path2.default.join(dir, rel);
+      import_fs2.default.mkdirSync(import_path2.default.dirname(target), { recursive: true });
+      import_fs2.default.writeFileSync(target, rel.endsWith(".wxml") ? this.transform(source, rel) : source);
       this.files.set(rel, source);
     }
     return dir;
   }
   dispose() {
-    if (this.dir) import_fs.default.rmSync(this.dir, { recursive: true, force: true });
+    if (this.dir) import_fs2.default.rmSync(this.dir, { recursive: true, force: true });
     this.dir = null;
     this.files.clear();
   }
@@ -313,15 +483,18 @@ var AppBuilder = class {
     this.dirty = /* @__PURE__ */ new Set(["config", "wxml", "wxss", "js"]);
     this.wxmlCache = null;
     this.wxssCache = null;
+    /** 开启了 less / sass 编译插件时才有；插件设置变了就换一个 */
+    this.styleMirror = null;
     this.wxmlMirror = options.wxmlTransform ? new WxmlMirror(options.wxmlTransform) : null;
   }
   /** wxmlTransform 的镜像目录；没有设置转换或还没编译过时为 null */
   get wxmlMirrorDir() {
     return this.wxmlMirror?.directory ?? null;
   }
-  /** 删除 wxmlTransform 的镜像目录，开发服务器关闭时调用 */
+  /** 删除 wxmlTransform 和样式预处理的镜像目录，开发服务器关闭时调用 */
   dispose() {
     this.wxmlMirror?.dispose();
+    this.styleMirror?.mirror.dispose();
   }
   /** 根据变化的文件标记需要重新构建的部分；返回 true 表示需要刷新 */
   invalidate(changedFiles = []) {
@@ -455,14 +628,26 @@ ${pageStyles}`,
   }
   /** 与开发者工具一致，项目里的 wxss 全部交给 wcsc：被 @import 的文件（如 uni-app 的 common/main.wxss）也要在列表里 */
   async compileStyles(units) {
-    const pageFiles = units.filter((id) => this.project.exists(id + ".wxss")).map((id) => `./${id}.wxss`);
-    const commonFiles = this.project.listFiles([".wxss"]).map((file) => `./${file}`).filter((file) => !pageFiles.includes(file));
-    const { comm, pages } = await (0, import_wxa_runner_compiler.compileWxss)({ cwd: this.project.root, pageFiles, commonFiles });
+    const mirror = this.currentStyleMirror();
+    const { cwd, files } = mirror ? await mirror.sync(this.project) : { cwd: this.project.root, files: this.project.listFiles([".wxss"]) };
+    const styles = new Set(files);
+    const pageFiles = units.filter((id) => styles.has(id + ".wxss")).map((id) => `./${id}.wxss`);
+    const commonFiles = files.map((file) => `./${file}`).filter((file) => !pageFiles.includes(file));
+    const { comm, pages } = await (0, import_wxa_runner_compiler.compileWxss)({ cwd, pageFiles, commonFiles });
     return {
       comm: rewriteSafeAreaInsets(comm),
       pages: Object.fromEntries(Object.entries(pages).map(([file, css]) => [file, rewriteSafeAreaInsets(css)]))
     };
   }
+  currentStyleMirror() {
+    const setting = this.project.styleSetting;
+    const key = JSON.stringify(setting);
+    if (this.styleMirror?.setting !== key) {
+      this.styleMirror?.mirror.dispose();
+      this.styleMirror = setting.plugins.length > 0 ? { setting: key, mirror: new StyleMirror(setting) } : null;
+    }
+    return this.styleMirror?.mirror ?? null;
+  }
   /** $gwx 加上各页面、组件的 json / wxml 注册；逻辑层用裁剪版 $gwx，渲染层用完整版 */
   createTemplates(app, units, unitJson, gwx) {
     const lines = [gwx, `__wxAppCode__["app.json"] = ${toJs(app)};`];
@@ -507,28 +692,32 @@ function toJs(value) {
 function classifyFile(file) {
   if (file.endsWith(".json")) return "config";
   if (file.endsWith(".wxml") || file.endsWith(".wxs")) return "wxml";
-  if (file.endsWith(".wxss")) return "wxss";
+  if (/\.(wxss|less|scss|sass|css)$/.test(file)) return "wxss";
   if (file.endsWith(".js")) return "js";
   return null;
 }
 
 // src/project/MiniProgram.ts
-var import_fs2 = __toESM(require("fs"));
-var import_path2 = __toESM(require("path"));
+var import_fs3 = __toESM(require("fs"));
+var import_path3 = __toESM(require("path"));
 var IGNORED_DIRS = /* @__PURE__ */ new Set(["node_modules", ".git", ".idea", ".vscode"]);
 var PROJECT_FILES = /* @__PURE__ */ new Set(["project.config.json", "project.private.config.json", "sitemap.json", "app.json", "wxa.setup.js"]);
 var MiniProgram = class {
   constructor(projectPath) {
     this.projectPath = projectPath;
-    const projectConfig = readJsonFile(import_path2.default.join(projectPath, "project.config.json")) || {};
-    this.root = import_path2.default.resolve(projectPath, projectConfig.miniprogramRoot || "");
+    const projectConfig = readJsonFile(import_path3.default.join(projectPath, "project.config.json")) || {};
+    this.root = import_path3.default.resolve(projectPath, projectConfig.miniprogramRoot || "");
     this.appid = projectConfig.appid || "touristappid";
-    if (!import_fs2.default.existsSync(import_path2.default.join(this.root, "app.json"))) {
+    if (!import_fs3.default.existsSync(import_path3.default.join(this.root, "app.json"))) {
       throw new Error(`${this.root} \u4E0B\u6CA1\u6709 app.json\uFF0C\u4E0D\u662F\u6709\u6548\u7684\u5C0F\u7A0B\u5E8F\u76EE\u5F55`);
     }
   }
+  /** project.config.json 里与 less / sass 编译插件有关的设置；每次重新读取，开发中修改了也能生效 */
+  get styleSetting() {
+    return readStyleSetting(readJsonFile(import_path3.default.join(this.projectPath, "project.config.json"))?.setting);
+  }
   readAppJson() {
-    const app = readJsonFile(import_path2.default.join(this.root, "app.json"));
+    const app = readJsonFile(import_path3.default.join(this.root, "app.json"));
     if (!app || !Array.isArray(app.pages) || app.pages.length === 0) {
       throw new Error("app.json \u7F3A\u5C11 pages \u914D\u7F6E");
     }
@@ -540,14 +729,14 @@ var MiniProgram = class {
   /** Worker 代码所在目录，不带首尾的 /；没有配置 workers 时为 null */
   workersDir(app) {
     const dir = typeof app.workers === "string" ? app.workers : app.workers?.path;
-    return dir ? import_path2.default.posix.normalize(dir).replace(/^\/+|\/+$/g, "") : null;
+    return dir ? import_path3.default.posix.normalize(dir).replace(/^\/+|\/+$/g, "") : null;
   }
   /** 主包页面 + 分包页面（带 root 前缀） */
   allPages(app) {
     const pages = [...app.pages];
     for (const pkg of this.subPackages(app)) {
       for (const page of pkg.pages) {
-        const full = import_path2.default.posix.join(pkg.root, page);
+        const full = import_path3.default.posix.join(pkg.root, page);
         if (!pages.includes(full)) pages.push(full);
       }
     }
@@ -559,7 +748,7 @@ var MiniProgram = class {
    * 所以能解析到的引用都换成组件的绝对路径
    */
   readUnitJson(id, app) {
-    const json = { ...readJsonFile(import_path2.default.join(this.root, id + ".json")) };
+    const json = { ...readJsonFile(import_path3.default.join(this.root, id + ".json")) };
     const resolve = (fromId, ref) => {
       const resolved = this.resolveComponent(fromId, ref);
       return resolved ? "/" + resolved : null;
@@ -580,7 +769,7 @@ var MiniProgram = class {
         if (resolved || ref.startsWith("/") || /^plugin(-private)?:\/\//.test(ref)) {
           json.usingComponents[tag] = resolved ?? ref;
         } else {
-          const relative = import_path2.default.posix.relative(import_path2.default.posix.dirname(id), ref);
+          const relative = import_path3.default.posix.relative(import_path3.default.posix.dirname(id), ref);
           json.usingComponents[tag] = relative.startsWith(".") ? relative : "./" + relative;
         }
       }
@@ -593,25 +782,25 @@ var MiniProgram = class {
    */
   resolveComponent(fromId, ref) {
     if (!ref || ref.startsWith("plugin://") || ref.startsWith("plugin-private://")) return null;
-    const fromDir = import_path2.default.posix.dirname(fromId);
+    const fromDir = import_path3.default.posix.dirname(fromId);
     const candidates = [];
     if (ref.startsWith("/")) {
       candidates.push(ref.slice(1));
     } else {
-      candidates.push(import_path2.default.posix.join(fromDir, ref));
+      candidates.push(import_path3.default.posix.join(fromDir, ref));
       if (!ref.startsWith(".")) {
         let dir = fromDir;
         for (; ; ) {
-          candidates.push(import_path2.default.posix.join(dir === "." ? "" : dir, "miniprogram_npm", ref));
+          candidates.push(import_path3.default.posix.join(dir === "." ? "" : dir, "miniprogram_npm", ref));
           if (dir === "." || dir === "") break;
-          dir = import_path2.default.posix.dirname(dir);
+          dir = import_path3.default.posix.dirname(dir);
         }
       }
     }
     for (const candidate of candidates) {
-      const normalized = import_path2.default.posix.normalize(candidate);
-      for (const id of [normalized, import_path2.default.posix.join(normalized, "index")]) {
-        if (import_fs2.default.existsSync(import_path2.default.join(this.root, id + ".json"))) return id;
+      const normalized = import_path3.default.posix.normalize(candidate);
+      for (const id of [normalized, import_path3.default.posix.join(normalized, "index")]) {
+        if (import_fs3.default.existsSync(import_path3.default.join(this.root, id + ".json"))) return id;
       }
     }
     return null;
@@ -643,11 +832,11 @@ var MiniProgram = class {
   listFiles(extensions) {
     const result = [];
     const walk = (dir, rel) => {
-      for (const entry of import_fs2.default.readdirSync(dir, { withFileTypes: true })) {
+      for (const entry of import_fs3.default.readdirSync(dir, { withFileTypes: true })) {
         if (entry.name.startsWith(".") || IGNORED_DIRS.has(entry.name)) continue;
         const childRel = rel ? `${rel}/${entry.name}` : entry.name;
         if (entry.isDirectory()) {
-          walk(import_path2.default.join(dir, entry.name), childRel);
+          walk(import_path3.default.join(dir, entry.name), childRel);
         } else if (extensions.some((ext) => entry.name.endsWith(ext))) {
           if (!rel && PROJECT_FILES.has(entry.name)) continue;
           result.push(childRel);
@@ -658,18 +847,18 @@ var MiniProgram = class {
     return result.sort();
   }
   exists(relPath) {
-    return import_fs2.default.existsSync(import_path2.default.join(this.root, relPath));
+    return import_fs3.default.existsSync(import_path3.default.join(this.root, relPath));
   }
   readText(relPath) {
-    return import_fs2.default.readFileSync(import_path2.default.join(this.root, relPath), "utf8");
+    return import_fs3.default.readFileSync(import_path3.default.join(this.root, relPath), "utf8");
   }
   isInIndependentSubPackage(id, app) {
     return this.subPackages(app).some((pkg) => pkg.independent && id.startsWith(pkg.root.replace(/\/?$/, "/")));
   }
 };
 function readJsonFile(file) {
-  if (!import_fs2.default.existsSync(file)) return null;
-  const text = import_fs2.default.readFileSync(file, "utf8");
+  if (!import_fs3.default.existsSync(file)) return null;
+  const text = import_fs3.default.readFileSync(file, "utf8");
   try {
     return JSON.parse(text);
   } catch (error) {
@@ -735,9 +924,9 @@ var WechatDevClient = class {
    *
    * @throws 没有可用的登录态、超时、连不上、HTTP 状态不是 2xx 时，消息是给用户看的原因
    */
-  async post(path6, body, timeout = DEFAULT_TIMEOUT) {
+  async post(path7, body, timeout = DEFAULT_TIMEOUT) {
     const query = new URLSearchParams({ appid: this.appid, newticket: requireUsableTicket(await this.findTicket()), clientversion: CLIENT_VERSION });
-    const response = await fetch(`${BASE_URL}/${path6}?${query}`, {
+    const response = await fetch(`${BASE_URL}/${path7}?${query}`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
@@ -749,8 +938,8 @@ var WechatDevClient = class {
     return response;
   }
   /** 同 post，返回解析后的 JSON */
-  async postJson(path6, body) {
-    return (await this.post(path6, body)).json();
+  async postJson(path7, body) {
+    return (await this.post(path7, body)).json();
   }
 };
 
@@ -1112,28 +1301,9 @@ var DROPPED_RESPONSE_HEADERS = /* @__PURE__ */ new Set(["content-encoding", "con
 async function handleProxy(req, res) {
   const target = fromServerPath(PROXY_PREFIX, req.originalUrl);
   if (!target) {
-    res.status(400).set("x-wxa-proxy-error", "1").send(`invalid url "${req.originalUrl}"`);
+    sendProxyError(res, 400, `invalid url "${req.originalUrl}"`);
     return;
   }
-  let requestHeaders = {};
-  try {
-    requestHeaders = JSON.parse(req.get("x-wxa-headers") || "{}");
-  } catch {
-  }
-  const headers = {};
-  for (const [key, value] of Object.entries(requestHeaders)) {
-    if (!DROPPED_REQUEST_HEADERS.has(key.toLowerCase()) && value !== void 0 && value !== null) {
-      headers[key] = String(value);
-    }
-  }
-  const browserContentType = req.get("content-type") || "";
-  if (browserContentType.startsWith("multipart/form-data")) {
-    for (const key of Object.keys(headers)) {
-      if (key.toLowerCase() === "content-type") delete headers[key];
-    }
-    headers["content-type"] = browserContentType;
-  }
-  const hasBody = !["GET", "HEAD"].includes(req.method) && Buffer.isBuffer(req.body) && req.body.length > 0;
   const controller = new AbortController();
   const cancel = () => controller.abort();
   res.once("close", cancel);
@@ -1142,48 +1312,77 @@ async function handleProxy(req, res) {
     try {
       upstream = await fetch(target, {
         method: req.method,
-        headers,
-        body: hasBody ? req.body : void 0,
+        headers: forwardedRequestHeaders(req.get("x-wxa-headers"), req.get("content-type")),
+        body: requestBody(req),
         redirect: "follow",
         signal: controller.signal
       });
     } catch (error) {
       if (res.destroyed || controller.signal.aborted) return;
-      const cause = error?.cause?.message;
-      res.status(502).set("x-wxa-proxy-error", "1").send(cause || error.message);
+      sendProxyError(res, 502, fetchErrorMessage(error));
       return;
     }
-    const responseHeaders = {};
-    upstream.headers.forEach((value, key) => {
-      responseHeaders[key] = value;
-    });
-    const setCookies = typeof upstream.headers.getSetCookie === "function" ? upstream.headers.getSetCookie() : [];
-    res.status(upstream.status);
-    upstream.headers.forEach((value, key) => {
-      if (!DROPPED_RESPONSE_HEADERS.has(key)) res.setHeader(key, value);
-    });
-    res.setHeader("x-wxa-headers", encodeURIComponent(JSON.stringify(responseHeaders)));
-    res.setHeader("x-wxa-set-cookie", encodeURIComponent(JSON.stringify(setCookies)));
-    res.flushHeaders();
-    if (!upstream.body) {
-      res.end();
-      return;
-    }
-    await (0, import_promises.pipeline)(import_node_stream.Readable.fromWeb(upstream.body), res);
+    await relayResponse(upstream, res);
   } catch (error) {
     if (!res.destroyed) res.destroy(error);
   } finally {
     res.off("close", cancel);
   }
 }
+function requestBody(req) {
+  const hasBody = !["GET", "HEAD"].includes(req.method) && Buffer.isBuffer(req.body) && req.body.length > 0;
+  return hasBody ? req.body : void 0;
+}
+function fetchErrorMessage(error) {
+  return error?.cause?.message || error.message;
+}
+function sendProxyError(res, status, message) {
+  res.status(status).set("x-wxa-proxy-error", "1").send(message);
+}
+function forwardedRequestHeaders(encoded, browserContentType = "") {
+  const multipart = browserContentType.startsWith("multipart/form-data");
+  const headers = {};
+  for (const [key, value] of Object.entries(parseHeaders(encoded))) {
+    const name = key.toLowerCase();
+    if (DROPPED_REQUEST_HEADERS.has(name) || multipart && name === "content-type" || value === void 0 || value === null) continue;
+    headers[key] = String(value);
+  }
+  if (multipart) headers["content-type"] = browserContentType;
+  return headers;
+}
+function parseHeaders(encoded = "{}") {
+  try {
+    return JSON.parse(encoded);
+  } catch {
+    return {};
+  }
+}
+async function relayResponse(upstream, res) {
+  const responseHeaders = {};
+  upstream.headers.forEach((value, key) => {
+    responseHeaders[key] = value;
+    if (!DROPPED_RESPONSE_HEADERS.has(key)) res.setHeader(key, value);
+  });
+  res.status(upstream.status);
+  res.setHeader("x-wxa-headers", encodeURIComponent(JSON.stringify(responseHeaders)));
+  const setCookies = typeof upstream.headers.getSetCookie === "function" ? upstream.headers.getSetCookie() : [];
+  res.setHeader("x-wxa-set-cookie", encodeURIComponent(JSON.stringify(setCookies)));
+  res.flushHeaders();
+  if (!upstream.body) {
+    res.end();
+    return;
+  }
+  await (0, import_promises.pipeline)(import_node_stream.Readable.fromWeb(upstream.body), res);
+}
 
 // src/server/hmr.ts
+var STYLE_FILE = /\.(wxss|less|scss|sass|css)$/;
 function planHotUpdate(files, units) {
   const owners = /* @__PURE__ */ new Set([...units.pages, ...units.components]);
   const plan = { templates: [], scripts: [], styles: [] };
   for (const file of files) {
-    const id = file.replace(/\.(wxml|js|wxss)$/, "");
-    const target = file.endsWith(".wxss") ? plan.styles : !owners.has(id) ? null : file.endsWith(".wxml") ? plan.templates : file.endsWith(".js") ? plan.scripts : null;
+    const id = file.replace(/\.(wxml|js|wxss|less|scss|sass|css)$/, "");
+    const target = STYLE_FILE.test(file) ? plan.styles : !owners.has(id) ? null : file.endsWith(".wxml") ? plan.templates : file.endsWith(".js") ? plan.scripts : null;
     if (!target) return null;
     if (!target.includes(id)) target.push(id);
   }
@@ -1387,16 +1586,16 @@ function respond(action) {
 }
 
 // src/server/setup.ts
-var import_fs3 = __toESM(require("fs"));
-var import_path3 = __toESM(require("path"));
+var import_fs4 = __toESM(require("fs"));
+var import_path4 = __toESM(require("path"));
 var import_esbuild2 = require("esbuild");
 var SETUP_FILE_NAMES = ["wxa.setup.ts", "wxa.setup.js", "wxa.setup.mjs"];
 var SETUP_MODULE = "@open-wxa/wxa-runner-core/setup";
 var ENV_PREFIX = "WXA_";
 function findSetupFile(projectPath) {
   for (const name of SETUP_FILE_NAMES) {
-    const file = import_path3.default.join(projectPath, name);
-    if (import_fs3.default.existsSync(file)) return file;
+    const file = import_path4.default.join(projectPath, name);
+    if (import_fs4.default.existsSync(file)) return file;
   }
   return null;
 }
@@ -1408,7 +1607,7 @@ function collectSetupEnv(env) {
 async function bundleSetup(file) {
   const result = await (0, import_esbuild2.build)({
     entryPoints: [file],
-    absWorkingDir: import_path3.default.dirname(file),
+    absWorkingDir: import_path4.default.dirname(file),
     bundle: true,
     format: "esm",
     platform: "browser",
@@ -1436,12 +1635,12 @@ function builtinSetupModule() {
 
 // src/server/watcher.ts
 var import_crypto3 = require("crypto");
-var import_fs4 = __toESM(require("fs"));
-var import_path4 = __toESM(require("path"));
+var import_fs5 = __toESM(require("fs"));
+var import_path5 = __toESM(require("path"));
 var import_chokidar = __toESM(require("chokidar"));
 var DEBOUNCE = 120;
 var IGNORED = /(^|[/\\])(node_modules|\.git)([/\\]|$)/;
-var FINGERPRINTED = /\.(js|mjs|ts|json|wxml|wxss|wxs)$/;
+var FINGERPRINTED = /\.(js|mjs|ts|json|wxml|wxss|wxs|less|scss|sass|css)$/;
 function watchProject(root, paths, onChange) {
   let changed = /* @__PURE__ */ new Set();
   let structural = false;
@@ -1465,7 +1664,7 @@ function watchProject(root, paths, onChange) {
     const unchanged = updateFingerprint(fingerprints, file, event);
     if (!scanned || unchanged) return;
     if (event !== "change") structural = true;
-    changed.add(import_path4.default.relative(root, file).split(import_path4.default.sep).join("/"));
+    changed.add(import_path5.default.relative(root, file).split(import_path5.default.sep).join("/"));
     if (timer) clearTimeout(timer);
     timer = setTimeout(flush, DEBOUNCE);
   });
@@ -1479,7 +1678,7 @@ function updateFingerprint(fingerprints, file, event) {
   if (event !== "add" && event !== "change" || !FINGERPRINTED.test(file)) return false;
   let next;
   try {
-    next = (0, import_crypto3.createHash)("sha1").update(import_fs4.default.readFileSync(file)).digest("hex");
+    next = (0, import_crypto3.createHash)("sha1").update(import_fs5.default.readFileSync(file)).digest("hex");
   } catch {
     return false;
   }
@@ -1533,7 +1732,12 @@ var DevServer = class {
     /** 运行时生成的临时文件（canvas 导出、拍照等），随服务器进程存在 */
     this.fileSessions = /* @__PURE__ */ new Map();
     this.logger = options.logger || console;
-    this.project = new MiniProgram(import_path5.default.resolve(options.projectPath));
+    this.project = new MiniProgram(import_path6.default.resolve(options.projectPath));
+    for (const { plugin, files } of ignoredStyleSources(this.project, this.project.styleSetting)) {
+      this.logger.warn(
+        `[wxa-runner] ${files.length} \u4E2A ${plugin} \u6837\u5F0F\u6587\u4EF6\u4E0D\u4F1A\u751F\u6548\uFF08\u5982 ${files[0]}\uFF09\uFF1Aproject.config.json \u7684 setting.useCompilerPlugins \u6CA1\u6709\u5F00\u542F ${plugin}\uFF0C\u5F00\u53D1\u8005\u5DE5\u5177\u540C\u6837\u4E0D\u7F16\u8BD1\u5B83\u4EEC`
+      );
+    }
     const extended = applyExtensions(options, options.extensions ?? [], { projectPath: this.project.projectPath, root: this.project.root });
     extended.middlewares.forEach(({ path: mountPath }) => assertMountPath(mountPath));
     this.webviewScripts = extended.webviewScripts;
@@ -1563,7 +1767,7 @@ var DevServer = class {
   get networkUrls() {
     if (!this.lanAccess) return [];
     const { port } = new URL(this.address);
-    return Object.values(import_os2.default.networkInterfaces()).flat().filter((net2) => net2 && net2.family === "IPv4" && !net2.internal).map((net2) => `http://${net2.address}:${port}`);
+    return Object.values(import_os3.default.networkInterfaces()).flat().filter((net2) => net2 && net2.family === "IPv4" && !net2.internal).map((net2) => `http://${net2.address}:${port}`);
   }
   async start() {
     try {
@@ -1681,7 +1885,7 @@ ${error.message}`);
     app.get(/^\/__plugin__\/([^/]+)(\/.+)$/, this.withBuild((build2, req, res, next) => {
       const file = build2.plugins.find((plugin) => plugin.provider === req.params[0])?.files.get(decodeURIComponent(req.params[1]));
       if (!file) return next();
-      res.type(import_path5.default.extname(req.params[1]) || "application/octet-stream").send(file);
+      res.type(import_path6.default.extname(req.params[1]) || "application/octet-stream").send(file);
     }));
     app.get(/^\/__wxa__\/module\/(.+\.js)$/, this.withBuild((build2, req, res) => {
       const id = decodeURIComponent(req.params[0]);
@@ -1692,7 +1896,7 @@ ${error.message}`);
       res.type("js").send(this.builder.getModuleScript(id));
     }));
     app.get("/__wxa__/worker.js", this.withBuild((build2, _req, res) => {
-      const hasWorker = import_fs5.default.existsSync(import_path5.default.join(this.baseLib.dir, "WAWorker.js"));
+      const hasWorker = import_fs6.default.existsSync(import_path6.default.join(this.baseLib.dir, "WAWorker.js"));
       res.type("js").send(workerScript(build2, { version: this.baseLib.version, hasWorker }));
     }));
     app.get("/__wxa__/service-bootstrap.js", this.withBuild((build2, _req, res) => {
@@ -1711,28 +1915,28 @@ ${error.message}`);
       res.type("js").send(build2.pageFrame);
     }));
     app.get("/__wxa__/runtime/frame.js.map", (_req, res, next) => {
-      const file = import_path5.default.join(this.runtimeDir(), "frame.js.map");
-      if (!import_fs5.default.existsSync(file)) return next();
-      res.type("json").send(ignoreConsoleHook(import_fs5.default.readFileSync(file, "utf8")));
+      const file = import_path6.default.join(this.runtimeDir(), "frame.js.map");
+      if (!import_fs6.default.existsSync(file)) return next();
+      res.type("json").send(ignoreConsoleHook(import_fs6.default.readFileSync(file, "utf8")));
     });
     app.use("/__wxa__/runtime", import_express2.default.static(this.runtimeDir(), {
       cacheControl: false,
       // Service Worker 默认只能接管自己所在目录下的页面，宿主页面在根路径
       setHeaders: (res, file) => {
-        if (import_path5.default.basename(file) === "sw.js") res.setHeader("Service-Worker-Allowed", "/");
+        if (import_path6.default.basename(file) === "sw.js") res.setHeader("Service-Worker-Allowed", "/");
       }
     }));
     const sourceMaps = /* @__PURE__ */ new Map();
     app.get(/^\/__baselib__\/(.+\.js)\.map$/, (req, res, next) => {
-      const file = import_path5.default.resolve(this.baseLib.dir, req.params[0]);
-      if (!file.startsWith(this.baseLib.dir + import_path5.default.sep) || !import_fs5.default.existsSync(file)) return next();
-      if (!sourceMaps.has(file)) sourceMaps.set(file, ignoreListSourceMap(import_fs5.default.readFileSync(file, "utf8"), `${import_path5.default.basename(file)}?original`));
+      const file = import_path6.default.resolve(this.baseLib.dir, req.params[0]);
+      if (!file.startsWith(this.baseLib.dir + import_path6.default.sep) || !import_fs6.default.existsSync(file)) return next();
+      if (!sourceMaps.has(file)) sourceMaps.set(file, ignoreListSourceMap(import_fs6.default.readFileSync(file, "utf8"), `${import_path6.default.basename(file)}?original`));
       res.type("json").send(sourceMaps.get(file));
     });
     app.use("/__baselib__", import_express2.default.static(this.baseLib.dir, {
       maxAge: "1d",
       setHeaders: (res, file) => {
-        if (file.endsWith(".js")) res.setHeader("SourceMap", `${import_path5.default.basename(file)}.map`);
+        if (file.endsWith(".js")) res.setHeader("SourceMap", `${import_path6.default.basename(file)}.map`);
       }
     }));
     app.use(PROXY_PREFIX, import_express2.default.raw({ type: () => true, limit: "100mb" }), handleProxy);
@@ -1792,7 +1996,7 @@ ${error.message}`);
         return;
       }
       const data = node.data;
-      res.type(import_path5.default.extname(req.params[0]));
+      res.type(import_path6.default.extname(req.params[0]));
       res.setHeader("ETag", `"${node.etag}"`);
       res.setHeader("Accept-Ranges", "bytes");
       const ranges = req.range(data.length);
@@ -1862,11 +2066,11 @@ ${error.message}`);
   runtimeDir() {
     const candidates = [
       this.options.runtimeDir,
-      import_path5.default.join(__dirname, "runtime"),
-      import_path5.default.join(__dirname, "../runtime"),
-      import_path5.default.join(__dirname, "../../dist/runtime")
+      import_path6.default.join(__dirname, "runtime"),
+      import_path6.default.join(__dirname, "../runtime"),
+      import_path6.default.join(__dirname, "../../dist/runtime")
     ].filter((dir) => !!dir);
-    const found = candidates.find((dir) => import_fs5.default.existsSync(import_path5.default.join(dir, "host.js")));
+    const found = candidates.find((dir) => import_fs6.default.existsSync(import_path6.default.join(dir, "host.js")));
     if (!found) {
       throw new Error("\u627E\u4E0D\u5230\u6D4F\u89C8\u5668\u7AEF\u8FD0\u884C\u65F6\uFF08host.js\uFF09\uFF0C\u8BF7\u5148\u6267\u884C pnpm build");
     }
@@ -1879,7 +2083,10 @@ ${error.message}`);
   startWatching() {
     let lastBuildFailed = false;
     const watched = [this.project.root];
-    if (this.setupFile && import_path5.default.relative(this.project.root, this.setupFile).startsWith("..")) watched.push(this.setupFile);
+    const outsideRoot = (file) => import_path6.default.relative(this.project.root, file).startsWith("..");
+    if (this.setupFile && outsideRoot(this.setupFile)) watched.push(this.setupFile);
+    const projectConfig = import_path6.default.join(this.project.projectPath, "project.config.json");
+    if (outsideRoot(projectConfig) && import_fs6.default.existsSync(projectConfig)) watched.push(projectConfig);
     this.watcher = watchProject(this.project.root, watched, async ({ files, structural }) => {
       const reloadOnly = structural || lastBuildFailed;
       this.builder.invalidate(files);
@@ -1951,8 +2158,8 @@ function assertMountPath(mountPath) {
 function resolveSetupFile(option, projectPath) {
   if (option === false) return null;
   if (!option) return findSetupFile(projectPath);
-  const file = import_path5.default.resolve(option);
-  if (!import_fs5.default.existsSync(file)) throw new Error(`\u627E\u4E0D\u5230 setup \u6587\u4EF6\uFF1A${file}`);
+  const file = import_path6.default.resolve(option);
+  if (!import_fs6.default.existsSync(file)) throw new Error(`\u627E\u4E0D\u5230 setup \u6587\u4EF6\uFF1A${file}`);
   return file;
 }
 // Annotate the CommonJS export names for ESM import in node: