@dimina/compiler 1.0.6 → 1.0.8

package/dist/core/style-compiler.cjs

@@ -1,16 +1,35 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fs = require("node:fs");
 const path = require("node:path");
 const node_worker_threads = require("node:worker_threads");
-const postcss = require("postcss");
+const compilerSfc = require("@vue/compiler-sfc");
 const autoprefixer = require("autoprefixer");
-const selectorParser = require("postcss-selector-parser");
 const cssnano = require("cssnano");
-const compilerSfc = require("@vue/compiler-sfc");
-const env = require("../env-Chow6VXH.cjs");
-const fileType = [".wxss", ".ddss"];
+const less = require("less");
+const postcss = require("postcss");
+const selectorParser = require("postcss-selector-parser");
+const sass = require("sass");
+const env = require("../env-Cmen1qwy.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const sass__namespace = /* @__PURE__ */ _interopNamespaceDefault(sass);
+const fileType = [".wxss", ".ddss", ".less", ".scss", ".sass"];
 const compileRes = /* @__PURE__ */ new Map();
-const processedModules = /* @__PURE__ */ new Set();
 if (!node_worker_threads.isMainThread) {
   node_worker_threads.parentPort.on("message", async ({ pages, storeInfo }) => {
     try {
@@ -42,13 +61,13 @@ async function compileSS(pages, root, progress) {
     if (root) {
       const subDir = `${env.getTargetPath()}/${root}`;
       if (!fs.existsSync(subDir)) {
-        fs.mkdirSync(subDir);
+        fs.mkdirSync(subDir, { recursive: true });
       }
       fs.writeFileSync(`${subDir}/${filename}.css`, code);
     } else {
       const mainDir = `${env.getTargetPath()}/main`;
       if (!fs.existsSync(mainDir)) {
-        fs.mkdirSync(mainDir);
+        fs.mkdirSync(mainDir, { recursive: true });
       }
       fs.writeFileSync(`${mainDir}/${filename}.css`, code);
     }
@@ -58,10 +77,12 @@ async function compileSS(pages, root, progress) {
 async function buildCompileCss(module2, depthChain = []) {
   const currentPath = module2.path;
   if (depthChain.includes(currentPath)) {
-    console.warn(`检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    console.warn("[style]", `检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    return;
   }
-  if (depthChain.length > 100) {
-    console.warn(`检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+  if (depthChain.length > 20) {
+    console.warn("[style]", `检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    return;
   }
   depthChain = [...depthChain, currentPath];
   let result = await enhanceCSS(module2) || "";
@@ -74,7 +95,6 @@ async function buildCompileCss(module2, depthChain = []) {
       result += await buildCompileCss(componentModule, depthChain);
     }
   }
-  processedModules.add(currentPath);
   return result;
 }
 async function enhanceCSS(module2) {
@@ -89,10 +109,34 @@ async function enhanceCSS(module2) {
   if (compileRes.has(absolutePath)) {
     return compileRes.get(absolutePath);
   }
-  const fixedCSS = inputCSS.replace(/@import[^;\n]*$/gm, (match) => {
-    return match.endsWith(";") ? match : `${match};`;
-  });
-  const ast = postcss.parse(fixedCSS);
+  let processedCSS = inputCSS;
+  const ext = path.extname(absolutePath).toLowerCase();
+  try {
+    if (ext === ".less") {
+      const result2 = await less.render(inputCSS, {
+        filename: absolutePath,
+        paths: [path.dirname(absolutePath)]
+      });
+      processedCSS = result2.css;
+    } else if (ext === ".scss" || ext === ".sass") {
+      const result2 = sass__namespace.compileString(inputCSS, {
+        loadPaths: [path.dirname(absolutePath)],
+        syntax: ext === ".sass" ? "indented" : "scss"
+      });
+      processedCSS = result2.css;
+    }
+  } catch (error) {
+    console.error(`[style] 预处理器编译失败 ${absolutePath}:`, error.message);
+    processedCSS = inputCSS;
+  }
+  const fixedCSS = ensureImportSemicolons(processedCSS);
+  let ast;
+  try {
+    ast = postcss.parse(fixedCSS);
+  } catch (error) {
+    console.error(`[style] PostCSS 解析失败 ${absolutePath}:`, error.message);
+    return "";
+  }
   const promises = [];
   ast.walk(async (node) => {
     if (node.type === "atrule" && node.name === "import") {
@@ -104,6 +148,9 @@ async function enhanceCSS(module2) {
       if (node.selector.includes("::v-deep")) {
         node.selector = node.selector.replace(/::v-deep\s+(\S[^{]*)/g, ":deep($1)");
       }
+      if (node.selector.includes(":host")) {
+        node.selector = processHostSelector(node.selector, module2.id);
+      }
       node.selector = selectorParser((selectors) => {
         selectors.walkTags((tag) => {
           if (env.tagWhiteList.includes(tag.value)) {
@@ -129,10 +176,11 @@ async function enhanceCSS(module2) {
     }
   });
   const cssCode = ast.toResult().css;
+  const moduleId = module2.id;
   const code = compilerSfc.compileStyle({
     source: cssCode,
-    id: module2.id,
-    scoped: !!module2.id
+    id: moduleId,
+    scoped: !!moduleId
   }).code;
   const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(code, {
     from: void 0
@@ -153,4 +201,14 @@ function getAbsolutePath(modulePath) {
     }
   }
 }
-module.exports = compileSS;
+function ensureImportSemicolons(css) {
+  return css.replace(/@import[^;\n]*$/gm, (match) => {
+    return match.endsWith(";") ? match : `${match};`;
+  });
+}
+function processHostSelector(selector, moduleId) {
+  return selector.replace(/^:host$/, `[data-v-${moduleId}]`).replace(/:host\(([^)]+)\)/g, `[data-v-${moduleId}]$1`).replace(/:host\s+/g, `[data-v-${moduleId}] `).replace(/:host(?=\.|#|:)/g, `[data-v-${moduleId}]`);
+}
+exports.compileSS = compileSS;
+exports.ensureImportSemicolons = ensureImportSemicolons;
+exports.processHostSelector = processHostSelector;

package/dist/core/style-compiler.js

@@ -1,15 +1,16 @@
 import fs from "node:fs";
 import path from "node:path";
 import { isMainThread, parentPort } from "node:worker_threads";
-import postcss from "postcss";
+import { compileStyle } from "@vue/compiler-sfc";
 import autoprefixer from "autoprefixer";
-import selectorParser from "postcss-selector-parser";
 import cssnano from "cssnano";
-import { compileStyle } from "@vue/compiler-sfc";
-import { r as resetStoreInfo, g as getTargetPath, a as getComponent, b as getContentByPath, h as tagWhiteList, d as collectAssets, e as getAppId, f as getWorkPath, t as transformRpx } from "../env-CezfCSQz.js";
-const fileType = [".wxss", ".ddss"];
+import less from "less";
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+import * as sass from "sass";
+import { r as resetStoreInfo, g as getTargetPath, a as getComponent, b as getContentByPath, h as tagWhiteList, e as collectAssets, f as getAppId, d as getWorkPath, t as transformRpx } from "../env-Csj3AHY4.js";
+const fileType = [".wxss", ".ddss", ".less", ".scss", ".sass"];
 const compileRes = /* @__PURE__ */ new Map();
-const processedModules = /* @__PURE__ */ new Set();
 if (!isMainThread) {
   parentPort.on("message", async ({ pages, storeInfo }) => {
     try {
@@ -41,13 +42,13 @@ async function compileSS(pages, root, progress) {
     if (root) {
       const subDir = `${getTargetPath()}/${root}`;
       if (!fs.existsSync(subDir)) {
-        fs.mkdirSync(subDir);
+        fs.mkdirSync(subDir, { recursive: true });
       }
       fs.writeFileSync(`${subDir}/${filename}.css`, code);
     } else {
       const mainDir = `${getTargetPath()}/main`;
       if (!fs.existsSync(mainDir)) {
-        fs.mkdirSync(mainDir);
+        fs.mkdirSync(mainDir, { recursive: true });
       }
       fs.writeFileSync(`${mainDir}/${filename}.css`, code);
     }
@@ -57,10 +58,12 @@ async function compileSS(pages, root, progress) {
 async function buildCompileCss(module, depthChain = []) {
   const currentPath = module.path;
   if (depthChain.includes(currentPath)) {
-    console.warn(`检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    console.warn("[style]", `检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    return;
   }
-  if (depthChain.length > 100) {
-    console.warn(`检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+  if (depthChain.length > 20) {
+    console.warn("[style]", `检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+    return;
   }
   depthChain = [...depthChain, currentPath];
   let result = await enhanceCSS(module) || "";
@@ -73,7 +76,6 @@ async function buildCompileCss(module, depthChain = []) {
       result += await buildCompileCss(componentModule, depthChain);
     }
   }
-  processedModules.add(currentPath);
   return result;
 }
 async function enhanceCSS(module) {
@@ -88,10 +90,34 @@ async function enhanceCSS(module) {
   if (compileRes.has(absolutePath)) {
     return compileRes.get(absolutePath);
   }
-  const fixedCSS = inputCSS.replace(/@import[^;\n]*$/gm, (match) => {
-    return match.endsWith(";") ? match : `${match};`;
-  });
-  const ast = postcss.parse(fixedCSS);
+  let processedCSS = inputCSS;
+  const ext = path.extname(absolutePath).toLowerCase();
+  try {
+    if (ext === ".less") {
+      const result2 = await less.render(inputCSS, {
+        filename: absolutePath,
+        paths: [path.dirname(absolutePath)]
+      });
+      processedCSS = result2.css;
+    } else if (ext === ".scss" || ext === ".sass") {
+      const result2 = sass.compileString(inputCSS, {
+        loadPaths: [path.dirname(absolutePath)],
+        syntax: ext === ".sass" ? "indented" : "scss"
+      });
+      processedCSS = result2.css;
+    }
+  } catch (error) {
+    console.error(`[style] 预处理器编译失败 ${absolutePath}:`, error.message);
+    processedCSS = inputCSS;
+  }
+  const fixedCSS = ensureImportSemicolons(processedCSS);
+  let ast;
+  try {
+    ast = postcss.parse(fixedCSS);
+  } catch (error) {
+    console.error(`[style] PostCSS 解析失败 ${absolutePath}:`, error.message);
+    return "";
+  }
   const promises = [];
   ast.walk(async (node) => {
     if (node.type === "atrule" && node.name === "import") {
@@ -103,6 +129,9 @@ async function enhanceCSS(module) {
       if (node.selector.includes("::v-deep")) {
         node.selector = node.selector.replace(/::v-deep\s+(\S[^{]*)/g, ":deep($1)");
       }
+      if (node.selector.includes(":host")) {
+        node.selector = processHostSelector(node.selector, module.id);
+      }
       node.selector = selectorParser((selectors) => {
         selectors.walkTags((tag) => {
           if (tagWhiteList.includes(tag.value)) {
@@ -128,10 +157,11 @@ async function enhanceCSS(module) {
     }
   });
   const cssCode = ast.toResult().css;
+  const moduleId = module.id;
   const code = compileStyle({
     source: cssCode,
-    id: module.id,
-    scoped: !!module.id
+    id: moduleId,
+    scoped: !!moduleId
   }).code;
   const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(code, {
     from: void 0
@@ -152,6 +182,16 @@ function getAbsolutePath(modulePath) {
     }
   }
 }
+function ensureImportSemicolons(css) {
+  return css.replace(/@import[^;\n]*$/gm, (match) => {
+    return match.endsWith(";") ? match : `${match};`;
+  });
+}
+function processHostSelector(selector, moduleId) {
+  return selector.replace(/^:host$/, `[data-v-${moduleId}]`).replace(/:host\(([^)]+)\)/g, `[data-v-${moduleId}]$1`).replace(/:host\s+/g, `[data-v-${moduleId}] `).replace(/:host(?=\.|#|:)/g, `[data-v-${moduleId}]`);
+}
 export {
-  compileSS as default
+  compileSS,
+  ensureImportSemicolons,
+  processHostSelector
 };