@dimina/compiler 1.0.16 → 1.1.0

package/dist/core/style-compiler.cjs

@@ -1,31 +1,25 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_env = require("../env-Dmnqp9bD.cjs");
+const require_rolldown_runtime = require("../rolldown-runtime-D6vf50IK.cjs");
+const require_env = require("../env-B4U3zZUm.cjs");
 let node_path = require("node:path");
-node_path = require_env.__toESM(node_path, 1);
+node_path = require_rolldown_runtime.__toESM(node_path, 1);
 let node_worker_threads = require("node:worker_threads");
 let node_fs = require("node:fs");
-node_fs = require_env.__toESM(node_fs, 1);
+node_fs = require_rolldown_runtime.__toESM(node_fs, 1);
 let _vue_compiler_sfc = require("@vue/compiler-sfc");
 let autoprefixer = require("autoprefixer");
-autoprefixer = require_env.__toESM(autoprefixer, 1);
+autoprefixer = require_rolldown_runtime.__toESM(autoprefixer, 1);
 let cssnano = require("cssnano");
-cssnano = require_env.__toESM(cssnano, 1);
+cssnano = require_rolldown_runtime.__toESM(cssnano, 1);
 let less = require("less");
-less = require_env.__toESM(less, 1);
+less = require_rolldown_runtime.__toESM(less, 1);
 let postcss = require("postcss");
-postcss = require_env.__toESM(postcss, 1);
+postcss = require_rolldown_runtime.__toESM(postcss, 1);
 let postcss_selector_parser = require("postcss-selector-parser");
-postcss_selector_parser = require_env.__toESM(postcss_selector_parser, 1);
+postcss_selector_parser = require_rolldown_runtime.__toESM(postcss_selector_parser, 1);
 let sass = require("sass");
-sass = require_env.__toESM(sass, 1);
+sass = require_rolldown_runtime.__toESM(sass, 1);
 //#region src/core/style-compiler.js
-var fileType = [
-	".wxss",
-	".ddss",
-	".less",
-	".scss",
-	".sass"
-];
 var compileRes = /* @__PURE__ */ new Map();
 if (!node_worker_threads.isMainThread) node_worker_threads.parentPort.on("message", async ({ pages, storeInfo }) => {
 	try {
@@ -61,7 +55,7 @@ if (!node_worker_threads.isMainThread) node_worker_threads.parentPort.on("messag
 */
 async function compileSS(pages, root, progress) {
 	for (const page of pages) {
-		const code = await buildCompileCss(page, [], /* @__PURE__ */ new Set()) || "";
+		const code = await buildCompileCss(page, /* @__PURE__ */ new Set()) || "";
 		const filename = `${page.path.replace(/\//g, "_")}`;
 		if (root) {
 			const subDir = `${require_env.getTargetPath()}/${root}`;
@@ -75,27 +69,51 @@ async function compileSS(pages, root, progress) {
 		progress.completedTasks++;
 	}
 }
-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 = require_env.getComponent(componentInfo);
-		if (!componentModule) continue;
-		result += await buildCompileCss(componentModule, depthChain, compiledPaths) || "";
+async function buildCompileCss(module, compiledPaths = /* @__PURE__ */ new Set()) {
+	let result = "";
+	const pendingModules = [module];
+	while (pendingModules.length > 0) {
+		const currentModule = pendingModules.pop();
+		const currentPath = currentModule.path || currentModule.absolutePath;
+		if (compiledPaths.has(currentPath)) continue;
+		compiledPaths.add(currentPath);
+		result += await enhanceCSS(currentModule) || "";
+		const componentPaths = Object.values(currentModule.usingComponents || {});
+		for (let index = componentPaths.length - 1; index >= 0; index--) {
+			const componentModule = require_env.getComponent(componentPaths[index]);
+			if (componentModule) pendingModules.push(componentModule);
+		}
 	}
 	return result;
 }
+function boostExternalClassSelectors(cssCode, moduleId) {
+	if (!moduleId || !cssCode) return cssCode;
+	const scopeAttribute = `data-v-${moduleId}`;
+	const externalScopeAttribute = "data-dd-external-class-scope";
+	const ast = postcss.default.parse(cssCode);
+	ast.walkRules((rule) => {
+		if (!rule.selector.includes(`[${scopeAttribute}]`)) return;
+		rule.selector = (0, postcss_selector_parser.default)((selectors) => {
+			for (const selector of [...selectors.nodes]) {
+				const boostedSelector = selector.clone();
+				const scopeNodes = [];
+				boostedSelector.walkAttributes((attribute) => {
+					if (attribute.attribute === scopeAttribute) scopeNodes.push(attribute);
+				});
+				const targetScope = scopeNodes.at(-1);
+				if (!targetScope) continue;
+				targetScope.parent.insertAfter(targetScope, postcss_selector_parser.default.attribute({
+					attribute: externalScopeAttribute,
+					operator: "~=",
+					quoteMark: "\"",
+					value: scopeAttribute
+				}));
+				selectors.append(boostedSelector);
+			}
+		}).processSync(rule.selector);
+	});
+	return ast.toResult().css;
+}
 async function enhanceCSS(module) {
 	const absolutePath = module.absolutePath ? module.absolutePath : getAbsolutePath(module.path);
 	if (!absolutePath) return "";
@@ -129,12 +147,13 @@ async function enhanceCSS(module) {
 	const promises = [];
 	ast.walk(async (node) => {
 		if (node.type === "atrule" && node.name === "import") {
-			const importFullPath = resolveStyleImportPath(absolutePath, node.params.replace(/^['"]|['"]$/g, ""));
+			const str = node.params.replace(/^['"]|['"]$/g, "");
+			const importFullPath = resolveStyleImportPath(absolutePath, str);
 			node.remove();
 			promises.push(buildCompileCss({
 				absolutePath: importFullPath,
 				id: module.id
-			}, [], /* @__PURE__ */ new Set()));
+			}, /* @__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);
@@ -156,8 +175,8 @@ async function enhanceCSS(module) {
 		id: moduleId,
 		scoped: !!moduleId
 	}).code;
-	const cleanedCode = await removeBaseComponentScope(scopedCode, moduleId);
-	const res = await (0, postcss.default)([(0, autoprefixer.default)({ overrideBrowserslist: ["cover 99.5%"] }), (0, cssnano.default)()]).process(cleanedCode, { from: void 0 });
+	const externalClassCode = boostExternalClassSelectors(scopedCode, moduleId);
+	const res = await (0, postcss.default)([(0, autoprefixer.default)({ overrideBrowserslist: ["cover 99.5%"] }), (0, cssnano.default)()]).process(externalClassCode, { from: void 0 });
 	const result = (await Promise.all(promises)).filter(Boolean).join("") + res.css;
 	compileRes.set(cacheKey, result);
 	return result;
@@ -174,7 +193,7 @@ function normalizeCssUrlValue(value, absolutePath) {
 function getAbsolutePath(modulePath) {
 	const workPath = require_env.getWorkPath();
 	const src = modulePath.startsWith("/") ? modulePath : `/${modulePath}`;
-	for (const ssType of fileType) {
+	for (const ssType of require_env.getStyleExts()) {
 		const ssFullPath = `${workPath}${src}${ssType}`;
 		if (node_fs.default.existsSync(ssFullPath)) return ssFullPath;
 		const indexSsFullPath = `${workPath}${src}/index${ssType}`;
@@ -191,25 +210,6 @@ function normalizeRootStyleImports(source, workPath = require_env.getWorkPath())
 	});
 }
 /**
-* 移除基础组件选择器的 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.default.parse(css);
-	const scopeAttrName = `data-v-${moduleId}`;
-	ast.walkRules((rule) => {
-		if (require_env.tagWhiteList.some((tag) => rule.selector.includes(`.dd-${tag}`)) && rule.selector.includes(scopeAttrName)) rule.selector = (0, postcss_selector_parser.default)((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
@@ -226,13 +226,14 @@ function ensureImportSemicolons(css) {
 * @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}]`);
+	const hostSelector = `[data-dd-style-host~="${moduleId}"]`;
+	return selector.replace(/:host\(([^)]+)\)/g, `${hostSelector}$1`).replace(/:host(?![\w-])/g, hostSelector);
 }
 //#endregion
+exports.boostExternalClassSelectors = boostExternalClassSelectors;
 exports.compileSS = compileSS;
 exports.ensureImportSemicolons = ensureImportSemicolons;
 exports.normalizeCssUrlValue = normalizeCssUrlValue;
 exports.normalizeRootStyleImports = normalizeRootStyleImports;
 exports.processHostSelector = processHostSelector;
-exports.removeBaseComponentScope = removeBaseComponentScope;
 exports.resolveStyleImportPath = resolveStyleImportPath;

package/dist/core/style-compiler.js

@@ -1,4 +1,4 @@
-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-p9Az8lv5.js";
+import { C as tagWhiteList, a as getComponent, d as getTargetPath, g as resetStoreInfo, h as getWorkPath, n as getAppId, o as getContentByPath, u as getStyleExts, w as transformRpx, y as collectAssets } from "../env-OH3--qg8.js";
 import path from "node:path";
 import { isMainThread, parentPort } from "node:worker_threads";
 import fs from "node:fs";
@@ -10,13 +10,6 @@ import postcss from "postcss";
 import selectorParser from "postcss-selector-parser";
 import * as sass from "sass";
 //#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 {
@@ -52,7 +45,7 @@ if (!isMainThread) parentPort.on("message", async ({ pages, storeInfo }) => {
 */
 async function compileSS(pages, root, progress) {
 	for (const page of pages) {
-		const code = await buildCompileCss(page, [], /* @__PURE__ */ new Set()) || "";
+		const code = await buildCompileCss(page, /* @__PURE__ */ new Set()) || "";
 		const filename = `${page.path.replace(/\//g, "_")}`;
 		if (root) {
 			const subDir = `${getTargetPath()}/${root}`;
@@ -66,27 +59,51 @@ async function compileSS(pages, root, progress) {
 		progress.completedTasks++;
 	}
 }
-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) || "";
+async function buildCompileCss(module, compiledPaths = /* @__PURE__ */ new Set()) {
+	let result = "";
+	const pendingModules = [module];
+	while (pendingModules.length > 0) {
+		const currentModule = pendingModules.pop();
+		const currentPath = currentModule.path || currentModule.absolutePath;
+		if (compiledPaths.has(currentPath)) continue;
+		compiledPaths.add(currentPath);
+		result += await enhanceCSS(currentModule) || "";
+		const componentPaths = Object.values(currentModule.usingComponents || {});
+		for (let index = componentPaths.length - 1; index >= 0; index--) {
+			const componentModule = getComponent(componentPaths[index]);
+			if (componentModule) pendingModules.push(componentModule);
+		}
 	}
 	return result;
 }
+function boostExternalClassSelectors(cssCode, moduleId) {
+	if (!moduleId || !cssCode) return cssCode;
+	const scopeAttribute = `data-v-${moduleId}`;
+	const externalScopeAttribute = "data-dd-external-class-scope";
+	const ast = postcss.parse(cssCode);
+	ast.walkRules((rule) => {
+		if (!rule.selector.includes(`[${scopeAttribute}]`)) return;
+		rule.selector = selectorParser((selectors) => {
+			for (const selector of [...selectors.nodes]) {
+				const boostedSelector = selector.clone();
+				const scopeNodes = [];
+				boostedSelector.walkAttributes((attribute) => {
+					if (attribute.attribute === scopeAttribute) scopeNodes.push(attribute);
+				});
+				const targetScope = scopeNodes.at(-1);
+				if (!targetScope) continue;
+				targetScope.parent.insertAfter(targetScope, selectorParser.attribute({
+					attribute: externalScopeAttribute,
+					operator: "~=",
+					quoteMark: "\"",
+					value: scopeAttribute
+				}));
+				selectors.append(boostedSelector);
+			}
+		}).processSync(rule.selector);
+	});
+	return ast.toResult().css;
+}
 async function enhanceCSS(module) {
 	const absolutePath = module.absolutePath ? module.absolutePath : getAbsolutePath(module.path);
 	if (!absolutePath) return "";
@@ -120,12 +137,13 @@ async function enhanceCSS(module) {
 	const promises = [];
 	ast.walk(async (node) => {
 		if (node.type === "atrule" && node.name === "import") {
-			const importFullPath = resolveStyleImportPath(absolutePath, node.params.replace(/^['"]|['"]$/g, ""));
+			const str = node.params.replace(/^['"]|['"]$/g, "");
+			const importFullPath = resolveStyleImportPath(absolutePath, str);
 			node.remove();
 			promises.push(buildCompileCss({
 				absolutePath: importFullPath,
 				id: module.id
-			}, [], /* @__PURE__ */ new Set()));
+			}, /* @__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);
@@ -147,8 +165,8 @@ async function enhanceCSS(module) {
 		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 externalClassCode = boostExternalClassSelectors(scopedCode, moduleId);
+	const res = await postcss([autoprefixer({ overrideBrowserslist: ["cover 99.5%"] }), cssnano()]).process(externalClassCode, { from: void 0 });
 	const result = (await Promise.all(promises)).filter(Boolean).join("") + res.css;
 	compileRes.set(cacheKey, result);
 	return result;
@@ -165,7 +183,7 @@ function normalizeCssUrlValue(value, absolutePath) {
 function getAbsolutePath(modulePath) {
 	const workPath = getWorkPath();
 	const src = modulePath.startsWith("/") ? modulePath : `/${modulePath}`;
-	for (const ssType of fileType) {
+	for (const ssType of getStyleExts()) {
 		const ssFullPath = `${workPath}${src}${ssType}`;
 		if (fs.existsSync(ssFullPath)) return ssFullPath;
 		const indexSsFullPath = `${workPath}${src}/index${ssType}`;
@@ -182,25 +200,6 @@ function normalizeRootStyleImports(source, workPath = getWorkPath()) {
 	});
 }
 /**
-* 移除基础组件选择器的 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
@@ -217,7 +216,8 @@ function ensureImportSemicolons(css) {
 * @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}]`);
+	const hostSelector = `[data-dd-style-host~="${moduleId}"]`;
+	return selector.replace(/:host\(([^)]+)\)/g, `${hostSelector}$1`).replace(/:host(?![\w-])/g, hostSelector);
 }
 //#endregion
-export { compileSS, ensureImportSemicolons, normalizeCssUrlValue, normalizeRootStyleImports, processHostSelector, removeBaseComponentScope, resolveStyleImportPath };
+export { boostExternalClassSelectors, compileSS, ensureImportSemicolons, normalizeCssUrlValue, normalizeRootStyleImports, processHostSelector, resolveStyleImportPath };