@dimina/compiler 1.0.12-beta.9 → 1.0.13

package/dist/core/style-compiler.js

@@ -1,6 +1,7 @@
-import fs from "node:fs";
+import { _ as tagWhiteList, a as getContentByPath, d as resetStoreInfo, i as getComponent, l as getTargetPath, m as collectAssets, n as getAppId, u as getWorkPath, v as transformRpx } from "../env-COaZNCzL.js";
 import path from "node:path";
 import { isMainThread, parentPort } from "node:worker_threads";
+import fs from "node:fs";
 import { compileStyle } from "@vue/compiler-sfc";
 import autoprefixer from "autoprefixer";
 import cssnano from "cssnano";
@@ -8,199 +9,214 @@ 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();
-if (!isMainThread) {
-  parentPort.on("message", async ({ pages, storeInfo }) => {
-    try {
-      resetStoreInfo(storeInfo);
-      const progress = {
-        _completedTasks: 0,
-        get completedTasks() {
-          return this._completedTasks;
-        },
-        set completedTasks(value) {
-          this._completedTasks = value;
-          parentPort.postMessage({ completedTasks: this._completedTasks });
-        }
-      };
-      await compileSS(pages.mainPages, null, progress);
-      for (const [root, subPages] of Object.entries(pages.subPages)) {
-        await compileSS(subPages.info, root, progress);
-      }
-      compileRes.clear();
-      parentPort.postMessage({ success: true });
-    } catch (error) {
-      compileRes.clear();
-      parentPort.postMessage({
-        success: false,
-        error: {
-          message: error.message,
-          stack: error.stack,
-          name: error.name
-        }
-      });
-    }
-  });
-}
+//#region src/core/style-compiler.js
+var fileType = [
+	".wxss",
+	".ddss",
+	".less",
+	".scss",
+	".sass"
+];
+var compileRes = /* @__PURE__ */ new Map();
+if (!isMainThread) parentPort.on("message", async ({ pages, storeInfo }) => {
+	try {
+		resetStoreInfo(storeInfo);
+		const progress = {
+			_completedTasks: 0,
+			get completedTasks() {
+				return this._completedTasks;
+			},
+			set completedTasks(value) {
+				this._completedTasks = value;
+				parentPort.postMessage({ completedTasks: this._completedTasks });
+			}
+		};
+		await compileSS(pages.mainPages, null, progress);
+		for (const [root, subPages] of Object.entries(pages.subPages)) await compileSS(subPages.info, root, progress);
+		compileRes.clear();
+		parentPort.postMessage({ success: true });
+	} catch (error) {
+		compileRes.clear();
+		parentPort.postMessage({
+			success: false,
+			error: {
+				message: error.message,
+				stack: error.stack,
+				name: error.name
+			}
+		});
+	}
+});
+/**
+*  编译样式文件
+*/
 async function compileSS(pages, root, progress) {
-  for (const page of pages) {
-    const code = await buildCompileCss(page, []) || "";
-    const filename = `${page.path.replace(/\//g, "_")}`;
-    if (root) {
-      const subDir = `${getTargetPath()}/${root}`;
-      if (!fs.existsSync(subDir)) {
-        fs.mkdirSync(subDir, { recursive: true });
-      }
-      fs.writeFileSync(`${subDir}/${filename}.css`, code);
-    } else {
-      const mainDir = `${getTargetPath()}/main`;
-      if (!fs.existsSync(mainDir)) {
-        fs.mkdirSync(mainDir, { recursive: true });
-      }
-      fs.writeFileSync(`${mainDir}/${filename}.css`, code);
-    }
-    progress.completedTasks++;
-  }
+	for (const page of pages) {
+		const code = await buildCompileCss(page, [], /* @__PURE__ */ new Set()) || "";
+		const filename = `${page.path.replace(/\//g, "_")}`;
+		if (root) {
+			const subDir = `${getTargetPath()}/${root}`;
+			if (!fs.existsSync(subDir)) fs.mkdirSync(subDir, { recursive: true });
+			fs.writeFileSync(`${subDir}/${filename}.css`, code);
+		} else {
+			const mainDir = `${getTargetPath()}/main`;
+			if (!fs.existsSync(mainDir)) fs.mkdirSync(mainDir, { recursive: true });
+			fs.writeFileSync(`${mainDir}/${filename}.css`, code);
+		}
+		progress.completedTasks++;
+	}
 }
-async function buildCompileCss(module, depthChain = []) {
-  const currentPath = module.path;
-  if (depthChain.includes(currentPath)) {
-    console.warn("[style]", `检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
-    return;
-  }
-  if (depthChain.length > 20) {
-    console.warn("[style]", `检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
-    return;
-  }
-  depthChain = [...depthChain, currentPath];
-  let result = await enhanceCSS(module) || "";
-  if (module.usingComponents) {
-    for (const componentInfo of Object.values(module.usingComponents)) {
-      const componentModule = getComponent(componentInfo);
-      if (!componentModule) {
-        continue;
-      }
-      result += await buildCompileCss(componentModule, depthChain);
-    }
-  }
-  return result;
+async function buildCompileCss(module, depthChain = [], compiledPaths = /* @__PURE__ */ new Set()) {
+	const currentPath = module.path || module.absolutePath;
+	if (depthChain.includes(currentPath)) {
+		console.warn("[style]", `检测到循环依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+		return;
+	}
+	if (depthChain.length > 20) {
+		console.warn("[style]", `检测到深度依赖: ${[...depthChain, currentPath].join(" -> ")}`);
+		return;
+	}
+	if (compiledPaths.has(currentPath)) return "";
+	compiledPaths.add(currentPath);
+	depthChain = [...depthChain, currentPath];
+	let result = await enhanceCSS(module) || "";
+	if (module.usingComponents) for (const componentInfo of Object.values(module.usingComponents)) {
+		const componentModule = getComponent(componentInfo);
+		if (!componentModule) continue;
+		result += await buildCompileCss(componentModule, depthChain, compiledPaths);
+	}
+	return result;
 }
 async function enhanceCSS(module) {
-  const absolutePath = module.absolutePath ? module.absolutePath : getAbsolutePath(module.path);
-  if (!absolutePath) {
-    return;
-  }
-  const inputCSS = getContentByPath(absolutePath);
-  if (!inputCSS) {
-    return;
-  }
-  if (compileRes.has(absolutePath)) {
-    return compileRes.get(absolutePath);
-  }
-  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") {
-      const str = node.params.replace(/^['"]|['"]$/g, "");
-      const importFullPath = path.resolve(absolutePath, `../${str}`);
-      node.remove();
-      promises.push(buildCompileCss({ absolutePath: importFullPath, id: module.id }));
-    } else if (node.type === "rule") {
-      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)) {
-            tag.value = `.dd-${tag.value}`;
-          }
-        });
-      }).processSync(node.selector);
-      node.walkDecls((decl) => {
-        const match = decl.value.match(/url\("([^"]*)"\)/);
-        if (match) {
-          const imgSrc = match[1].trim();
-          if (imgSrc.startsWith("data:image")) {
-            return;
-          }
-          const realSrc = collectAssets(getWorkPath(), absolutePath, imgSrc, getTargetPath(), getAppId());
-          decl.value = `url(${realSrc})`;
-        } else {
-          decl.value = transformRpx(decl.value);
-        }
-      });
-    } else if (node.type === "comment") {
-      node.remove();
-    }
-  });
-  const cssCode = ast.toResult().css;
-  const moduleId = module.id;
-  const code = compileStyle({
-    source: cssCode,
-    id: moduleId,
-    scoped: !!moduleId
-  }).code;
-  const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(code, {
-    from: void 0
-    // 未指定输入源文件路径
-  });
-  const importCss = (await Promise.all(promises)).filter(Boolean).join("");
-  const result = importCss ? importCss + res.css : res.css;
-  compileRes.set(module.path, result);
-  return result;
+	const absolutePath = module.absolutePath ? module.absolutePath : getAbsolutePath(module.path);
+	if (!absolutePath) return;
+	const inputCSS = getContentByPath(absolutePath);
+	if (!inputCSS) return;
+	if (compileRes.has(absolutePath)) return compileRes.get(absolutePath);
+	let processedCSS = normalizeRootStyleImports(inputCSS);
+	const ext = path.extname(absolutePath).toLowerCase();
+	try {
+		if (ext === ".less") processedCSS = (await less.render(processedCSS, {
+			filename: absolutePath,
+			paths: [path.dirname(absolutePath), getWorkPath()]
+		})).css;
+		else if (ext === ".scss" || ext === ".sass") processedCSS = sass.compileString(processedCSS, {
+			loadPaths: [path.dirname(absolutePath), getWorkPath()],
+			syntax: ext === ".sass" ? "indented" : "scss"
+		}).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") {
+			const importFullPath = resolveStyleImportPath(absolutePath, node.params.replace(/^['"]|['"]$/g, ""));
+			node.remove();
+			promises.push(buildCompileCss({
+				absolutePath: importFullPath,
+				id: module.id
+			}, [], /* @__PURE__ */ new Set()));
+		} else if (node.type === "rule") {
+			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)) tag.value = `.dd-${tag.value}`;
+				});
+			}).processSync(node.selector);
+		} else if (node.type === "comment") node.remove();
+	});
+	ast.walkDecls((decl) => {
+		decl.value = normalizeCssUrlValue(decl.value, absolutePath);
+		decl.value = transformRpx(decl.value);
+	});
+	const cssCode = ast.toResult().css;
+	const moduleId = module.id;
+	const scopedCode = compileStyle({
+		source: cssCode,
+		id: moduleId,
+		scoped: !!moduleId
+	}).code;
+	const cleanedCode = await removeBaseComponentScope(scopedCode, moduleId);
+	const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(cleanedCode, { from: void 0 });
+	const result = (await Promise.all(promises)).filter(Boolean).join("") + res.css;
+	compileRes.set(module.path, result);
+	return result;
+}
+function normalizeCssUrlValue(value, absolutePath) {
+	return value.replace(/url\(([^)]+)\)/g, (fullMatch, rawUrl) => {
+		const cleanedUrl = rawUrl.trim().replace(/^['"]|['"]$/g, "");
+		if (!cleanedUrl || cleanedUrl.startsWith("data:image")) return fullMatch;
+		if (cleanedUrl.startsWith("//")) return `url(https:${cleanedUrl})`;
+		if (/^(https?:|blob:|data:)/.test(cleanedUrl)) return fullMatch;
+		return `url(${collectAssets(getWorkPath(), absolutePath, cleanedUrl, getTargetPath(), getAppId())})`;
+	});
 }
 function getAbsolutePath(modulePath) {
-  const workPath = getWorkPath();
-  const src = modulePath.startsWith("/") ? modulePath : `/${modulePath}`;
-  for (const ssType of fileType) {
-    const ssFullPath = `${workPath}${src}${ssType}`;
-    if (fs.existsSync(ssFullPath)) {
-      return ssFullPath;
-    }
-  }
+	const workPath = getWorkPath();
+	const src = modulePath.startsWith("/") ? modulePath : `/${modulePath}`;
+	for (const ssType of fileType) {
+		const ssFullPath = `${workPath}${src}${ssType}`;
+		if (fs.existsSync(ssFullPath)) return ssFullPath;
+		const indexSsFullPath = `${workPath}${src}/index${ssType}`;
+		if (fs.existsSync(indexSsFullPath)) return indexSsFullPath;
+	}
+}
+function resolveStyleImportPath(absolutePath, importPath, workPath = getWorkPath()) {
+	if (importPath.startsWith("/")) return path.join(workPath, importPath);
+	return path.resolve(path.dirname(absolutePath), importPath);
+}
+function normalizeRootStyleImports(source, workPath = getWorkPath()) {
+	return source.replace(/(@import\s+(?:\(.*?\)\s*)?(?:url\()?['"])(\/[^'")]+)(['"]\)?)/g, (_, prefix, importPath, suffix) => {
+		return `${prefix}${path.join(workPath, importPath)}${suffix}`;
+	});
+}
+/**
+* 移除基础组件选择器的 scoped 属性
+* @param {string} css - 包含 scoped 属性的 CSS
+* @param {string} moduleId - 模块 ID
+* @returns {Promise<string>} - 清理后的 CSS
+*/
+async function removeBaseComponentScope(css, moduleId) {
+	if (!moduleId) return css;
+	const ast = postcss.parse(css);
+	const scopeAttrName = `data-v-${moduleId}`;
+	ast.walkRules((rule) => {
+		if (tagWhiteList.some((tag) => rule.selector.includes(`.dd-${tag}`)) && rule.selector.includes(scopeAttrName)) rule.selector = selectorParser((selectors) => {
+			selectors.walkAttributes((attr) => {
+				if (attr.attribute === scopeAttrName) attr.remove();
+			});
+		}).processSync(rule.selector);
+	});
+	return ast.toResult().css;
 }
+/**
+* Ensures that all @import statements in CSS end with semicolons
+* @param {string} css - The CSS content to process
+* @returns {string} - The processed CSS with semicolons added to @import statements as needed
+*/
 function ensureImportSemicolons(css) {
-  return css.replace(/@import[^;\n]*$/gm, (match) => {
-    return match.endsWith(";") ? match : `${match};`;
-  });
+	return css.replace(/@import[^;\n]*$/gm, (match) => {
+		return match.endsWith(";") ? match : `${match};`;
+	});
 }
+/**
+* 处理 :host 选择器，将其转换为适合组件根节点的选择器
+* @param {string} selector - 包含 :host 的选择器
+* @param {string} moduleId - 组件的模块ID
+* @returns {string} - 转换后的选择器
+*/
 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}]`);
+	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,
-  ensureImportSemicolons,
-  processHostSelector
-};
+//#endregion
+export { compileSS, ensureImportSemicolons, normalizeCssUrlValue, normalizeRootStyleImports, processHostSelector, removeBaseComponentScope, resolveStyleImportPath };