weapp-tailwindcss 5.0.0-next.30 → 5.0.0-next.31

package/dist/bundlers/shared/generator-css/directives.d.ts

@@ -3,6 +3,7 @@ interface TailwindDirectiveOptions {
 }
 export declare function parseImportRequest(params: string): string | undefined;
 export declare function normalizeTailwindSourceForGenerator(rawSource: string, options?: TailwindDirectiveOptions): string;
+export declare function normalizeTailwindV3CssEntrySource(rawSource: string): string;
 export declare function normalizeTailwindSourceDirectives(rawSource: string, options?: TailwindDirectiveOptions): string;
 export declare function removeTailwindSourceDirectives(rawSource: string, options?: TailwindDirectiveOptions): string;
 export declare function hasTailwindSourceDirectives(rawSource: string, options?: TailwindDirectiveOptions): boolean;

package/dist/bundlers/shared/generator-css/user-layer-order.d.ts

@@ -0,0 +1,10 @@
+export declare function wrapUserLayerComponentsCss(css: string): string;
+export declare function extractMarkedUserLayerComponentsCss(css: string): {
+    layers: string[];
+    rest: string;
+};
+export declare function reorderMarkedUserLayerComponentsCss(css: string): string;
+export declare function mergeMarkedUserLayerComponentsCss(baseCss: string, markedCss: string): {
+    css: string;
+    merged: boolean;
+};

package/dist/gulp.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("./chunk-C5U5_Hdc.js");
 const require_v3_engine = require("./v3-engine-CHItlVq5.js");
-const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-BxvZONkv.js");
+const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-FAOHZmzh.js");
 const require_precheck = require("./precheck-D7gJSmJz.js");
 const require_tailwindcss = require("./tailwindcss-B-e2RiXr.js");
 const require_source_candidates = require("./source-candidates-DNM8iwXW.js");

package/dist/gulp.mjs

@@ -1,6 +1,6 @@
 import { b as ensureRuntimeClassSet, n as getCompilerContext, t as shouldSkipJsTransform, y as createTailwindRuntimeReadyPromise } from "./precheck-D7K12zeX.mjs";
 import { B as createDebug, _ as resolveViteSourceScanEntries, l as getRuntimeClassSetSignature } from "./v3-engine-DcvCCHfs.mjs";
-import { i as generateCssByGenerator, l as normalizeTailwindSourceForGenerator, o as processCachedTask, r as emitHmrTiming, s as hasTailwindRootDirectives, t as createBundleRuntimeClassSetManager } from "./incremental-runtime-class-set-BdZHkoTs.mjs";
+import { c as hasTailwindRootDirectives, i as generateCssByGenerator, r as emitHmrTiming, s as processCachedTask, t as createBundleRuntimeClassSetManager, u as normalizeTailwindSourceForGenerator } from "./incremental-runtime-class-set-Boqi1QlB.mjs";
 import { c as upsertTailwindV4CssSource, s as hasConfiguredTailwindV4CssRoots } from "./tailwindcss-C7dJHZ0G.mjs";
 import { t as createSourceCandidateCollector } from "./source-candidates-CX2ozpKM.mjs";
 import fs from "node:fs";

package/dist/{incremental-runtime-class-set-BdZHkoTs.mjs → incremental-runtime-class-set-Boqi1QlB.mjs}

@@ -104,6 +104,11 @@ const TAILWIND_ROOT_DIRECTIVE_RE = /@(?:import\s+(?:url\(\s*)?["']?tailwindcss4?
 const TAILWIND_EXTRACTABLE_DIRECTIVE_RE = /^\s*@(?:import|use|forward|tailwind|config|source|reference|plugin)\b[\s\S]*?(?:;|$)/;
 const TAILWIND_EXTRACTABLE_LAYER_STATEMENT_RE = /^\s*@layer\s[^;{]+;\s*$/;
 const TAILWIND_EXTRACTABLE_BLOCK_START_RE = /^\s*@(?:layer|theme|utility|variant|custom-variant)\b[\s\S]*\{/;
+const TAILWIND_V3_SUBPATH_IMPORT_LAYERS = new Map([
+	["tailwindcss/base", "base"],
+	["tailwindcss/components", "components"],
+	["tailwindcss/utilities", "utilities"]
+]);
 function parseImportRequest(params) {
 	return /^(?:url\(\s*)?(["']?)([^"')\s]+)\1\s*\)?/.exec(params.trim())?.[2];
 }
@@ -283,6 +288,24 @@ function hasPreprocessorOnlySyntax(rawSource) {
 function normalizeTailwindSourceForGenerator(rawSource, options = {}) {
 	return hasPreprocessorOnlySyntax(rawSource) ? extractTailwindSourceForPostcssFallback(rawSource, options) ?? rawSource : rawSource;
 }
+function normalizeTailwindV3CssEntrySource(rawSource) {
+	try {
+		const root = postcss.parse(rawSource);
+		let changed = false;
+		root.walkAtRules("import", (node) => {
+			const layer = TAILWIND_V3_SUBPATH_IMPORT_LAYERS.get(parseImportRequest(node.params) ?? "");
+			if (!layer) return;
+			node.replaceWith(postcss.atRule({
+				name: "tailwind",
+				params: layer
+			}));
+			changed = true;
+		});
+		return changed ? root.toString() : rawSource;
+	} catch {
+		return rawSource;
+	}
+}
 function normalizeTailwindSourceDirectives(rawSource, options = {}) {
 	if (!options.importFallback) return rawSource;
 	try {
@@ -1018,14 +1041,14 @@ async function resolveGeneratorSource(majorVersion, runtimeState, rawSource, fil
 			css: rawSource
 		} : void 0;
 		const sourceSideEntrySource = canResolveSourceSideCssEntry(file, cssHandlerOptions) ? resolveSourceSideCssEntrySource(file, mergedSourceOptions, { removeConfig: true }) : void 0;
-		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? applyEntrySource ?? cssEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
+		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
 		if (!resolvedEntrySource) return generatorOptions?.config ? resolveTailwindV3Source(mergedSourceOptions) : resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		if (cssEntrySource && !sourceSideEntrySource && !applyEntrySource && !hasTailwindRootDirectives(rawSource, { importFallback: true })) return generatorOptions?.config ? resolveTailwindV3Source(mergedSourceOptions) : resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		const config = resolveExistingConfigPath(resolvedEntrySource.config, resolvedEntrySource.configRequest, file, omitUndefined(mergedSourceOptions));
 		return resolveTailwindV3Source({
 			...mergedSourceOptions,
 			base: resolvedEntrySource.base,
-			css: resolvedEntrySource.css,
+			css: normalizeTailwindV3CssEntrySource(resolvedEntrySource.css),
 			...config ? { config } : {}
 		});
 	}
@@ -1372,6 +1395,125 @@ function inheritLegacyUnitConvertedDeclarations(css, legacyCss) {
 	}
 }
 //#endregion
+//#region src/bundlers/shared/generator-css/user-layer-order.ts
+const USER_LAYER_COMPONENTS_START = "/*! weapp-tailwindcss layer components start */";
+const USER_LAYER_COMPONENTS_END = "/*! weapp-tailwindcss layer components end */";
+const UTILITY_LAYER_INSERTION_RES = [
+	/(^|\n)\.(?:fixed|absolute|relative|sticky|static)\s*\{/,
+	/(^|\n)\.(?:block|inline-block|inline|flex|inline-flex|grid|hidden)\s*\{/,
+	/(^|\n)\.(?:m|mx|my|mt|mr|mb|ml|p|px|py|pt|pr|pb|pl)-/,
+	/(^|\n)\.(?:w|h|min-w|min-h|max-w|max-h)-/,
+	/(^|\n)\.(?:bg|text|border|rounded|shadow|opacity|transition|transform|translate|scale|rotate|gap|items|justify|content)-/
+];
+function appendCss(base, extra) {
+	if (!base) return extra;
+	if (!extra) return base;
+	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
+	return `${base}\n${extra}`;
+}
+function removeFirstCssOccurrence(css, chunk) {
+	const trimmed = chunk.trim();
+	if (!trimmed) return css;
+	const index = css.indexOf(trimmed);
+	if (index === -1) return css;
+	return appendCss(css.slice(0, index).trimEnd(), css.slice(index + trimmed.length).trimStart());
+}
+function collectSelectorsFromCss(css) {
+	const selectors = /* @__PURE__ */ new Set();
+	try {
+		postcss.parse(css).walkRules((rule) => {
+			for (const selector of rule.selectors ?? [rule.selector]) {
+				const normalized = selector.trim();
+				if (normalized) selectors.add(normalized);
+			}
+		});
+	} catch {}
+	return selectors;
+}
+function matchesLayerSelector(selector, layerSelector) {
+	if (selector === layerSelector) return true;
+	if (!selector.startsWith(layerSelector)) return false;
+	const next = selector[layerSelector.length];
+	return next === ":" || next === "[";
+}
+function removeCssRulesForSelectors(css, layerCss) {
+	const selectors = [...collectSelectorsFromCss(layerCss)];
+	if (selectors.length === 0) return css;
+	try {
+		const root = postcss.parse(css);
+		root.walkRules((rule) => {
+			if ((rule.selectors ?? [rule.selector]).some((selector) => selectors.some((layerSelector) => matchesLayerSelector(selector.trim(), layerSelector)))) rule.remove();
+		});
+		return root.toString();
+	} catch {
+		return removeFirstCssOccurrence(css, layerCss);
+	}
+}
+function wrapUserLayerComponentsCss(css) {
+	return css.trim().length > 0 ? `${USER_LAYER_COMPONENTS_START}\n${css}\n${USER_LAYER_COMPONENTS_END}` : css;
+}
+function extractMarkedUserLayerComponentsCss(css) {
+	const layers = [];
+	let rest = "";
+	let cursor = 0;
+	while (cursor < css.length) {
+		const startIndex = css.indexOf(USER_LAYER_COMPONENTS_START, cursor);
+		if (startIndex === -1) {
+			rest += css.slice(cursor);
+			break;
+		}
+		rest += css.slice(cursor, startIndex);
+		const contentStart = startIndex + 47;
+		const endIndex = css.indexOf(USER_LAYER_COMPONENTS_END, contentStart);
+		if (endIndex === -1) {
+			rest += css.slice(startIndex);
+			break;
+		}
+		const layerCss = css.slice(contentStart, endIndex).trim();
+		if (layerCss) layers.push(layerCss);
+		cursor = endIndex + 45;
+	}
+	return {
+		layers,
+		rest
+	};
+}
+function findUtilityLayerInsertionIndex(css) {
+	let index = -1;
+	for (const pattern of UTILITY_LAYER_INSERTION_RES) {
+		const match = pattern.exec(css);
+		if (!match) continue;
+		const nextIndex = match.index + (match[1]?.length ?? 0);
+		index = index === -1 ? nextIndex : Math.min(index, nextIndex);
+	}
+	return index;
+}
+function reorderMarkedUserLayerComponentsCss(css) {
+	if (!css.includes(USER_LAYER_COMPONENTS_START)) return css;
+	const { layers, rest } = extractMarkedUserLayerComponentsCss(css);
+	if (layers.length === 0) return rest;
+	const layerCss = layers.join("\n");
+	const insertionIndex = findUtilityLayerInsertionIndex(rest);
+	if (insertionIndex === -1) return appendCss(rest, layerCss);
+	return appendCss(appendCss(rest.slice(0, insertionIndex), layerCss), rest.slice(insertionIndex));
+}
+function mergeMarkedUserLayerComponentsCss(baseCss, markedCss) {
+	if (!markedCss.includes(USER_LAYER_COMPONENTS_START)) return {
+		css: baseCss,
+		merged: false
+	};
+	const { layers } = extractMarkedUserLayerComponentsCss(markedCss);
+	if (layers.length === 0) return {
+		css: baseCss,
+		merged: false
+	};
+	const layerCss = layers.join("\n");
+	return {
+		css: reorderMarkedUserLayerComponentsCss(appendCss(removeCssRulesForSelectors(baseCss, layerCss), wrapUserLayerComponentsCss(layerCss))),
+		merged: true
+	};
+}
+//#endregion
 //#region src/bundlers/shared/generator-css.ts
 const SUPPORTED_GENERATOR_MAJOR_VERSIONS = new Set([3, 4]);
 const REMOTE_IMPORT_RE = /^(?:https?:)?\/\//i;
@@ -1445,6 +1587,9 @@ function createCssSourceOrderAppend(base, extra) {
 	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
 	return `${base}\n${extra}`;
 }
+function shouldFinalizeMarkedUserLayerComponentsCss(file) {
+	return !/\.(?:vue|svelte|astro|scss|sass|less|styl)(?:[?#].*)?$/i.test(file);
+}
 function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	const placeholderParts = splitGeneratorPlaceholderCssBySourceOrder(rawSource, rawTailwindCss);
 	if (placeholderParts) return placeholderParts;
@@ -1452,6 +1597,84 @@ function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	if (exactParts) return exactParts;
 	return splitTailwindGeneratedCssByBanner(rawSource);
 }
+function splitUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return {
+		layer: "",
+		rest: source
+	};
+	try {
+		const root = postcss.parse(source);
+		const layerRoot = postcss.root();
+		const restRoot = postcss.root();
+		for (const node of root.nodes) (node.type === "atrule" && node.name === "layer" && node.nodes?.length ? layerRoot : restRoot).append(node.clone());
+		return {
+			layer: layerRoot.toString(),
+			rest: restRoot.toString()
+		};
+	} catch {
+		return {
+			layer: source,
+			rest: ""
+		};
+	}
+}
+function hasUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return false;
+	try {
+		let hasLayerBlock = false;
+		postcss.parse(source).walkAtRules("layer", (node) => {
+			if (node.nodes?.length) hasLayerBlock = true;
+		});
+		return hasLayerBlock;
+	} catch {
+		return true;
+	}
+}
+function collectUserLayerSelectors(source) {
+	const selectors = /* @__PURE__ */ new Set();
+	try {
+		postcss.parse(source).walkRules((rule) => {
+			for (const selector of rule.selectors ?? [rule.selector]) {
+				const normalized = selector.trim();
+				if (normalized) selectors.add(normalized);
+			}
+		});
+	} catch {}
+	return selectors;
+}
+function matchesUserLayerSelector(selector, userLayerSelector) {
+	if (selector === userLayerSelector) return true;
+	if (!selector.startsWith(userLayerSelector)) return false;
+	const next = selector[userLayerSelector.length];
+	return next === ":" || next === "[";
+}
+function extractGeneratedCssForUserLayerSelectors(css, userLayerSource) {
+	const selectors = collectUserLayerSelectors(userLayerSource);
+	if (selectors.size === 0) return {
+		layer: "",
+		rest: css
+	};
+	try {
+		const root = postcss.parse(css);
+		const layerRoot = postcss.root();
+		const selectorList = [...selectors];
+		root.walkRules((rule) => {
+			if ((rule.selectors ?? [rule.selector]).some((selector) => selectorList.some((userSelector) => matchesUserLayerSelector(selector.trim(), userSelector)))) {
+				layerRoot.append(rule.clone());
+				rule.remove();
+			}
+		});
+		return {
+			layer: layerRoot.toString(),
+			rest: root.toString()
+		};
+	} catch {
+		return {
+			layer: "",
+			rest: css
+		};
+	}
+}
 async function transformGeneratorUserCss(source, options) {
 	if (source.trim().length === 0) return "";
 	const cleanedSource = removeTailwindSourceDirectives(stripUnmatchedTailwindSourceMediaCloseFragments(stripTailwindSourceMediaFragments(source)), { importFallback: options.importFallback });
@@ -1580,7 +1803,7 @@ async function generateCssByGenerator(options) {
 			sources: generatedResults.flatMap((item) => item.sources)
 		};
 		debug("tailwind generator result: %s rawBytes=%d cssBytes=%d candidates=%d", file, generated.rawCss.length, generated.css.length, generated.classSet.size);
-		if (typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
+		if ((generated.target !== "weapp" || !hasUserCssLayerBlocks(effectiveRawSource)) && typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
 			const incrementalCss = stripTailwindBanner(generated.incrementalCss);
 			return {
 				css: incrementalCss.trim().length > 0 ? createCssAppend(options.previousCss, finalizeMiniProgramGeneratorCss(incrementalCss, generated.target, majorVersion, opts.cssPreflight, { injectPreflight: false })) : options.previousCss,
@@ -1602,9 +1825,14 @@ async function generateCssByGenerator(options) {
 				styleHandler,
 				importFallback: generatorOptions.importFallback
 			};
+			const afterLayerParts = generated.target === "weapp" ? splitUserCssLayerBlocks(orderedExtraCss.after) : {
+				layer: "",
+				rest: orderedExtraCss.after
+			};
 			const beforeUserCss = await transformGeneratorUserCss(orderedExtraCss.before, userCssOptions);
-			const afterUserCss = await transformGeneratorUserCss(orderedExtraCss.after, userCssOptions);
-			css = createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, css), afterUserCss);
+			const afterLayerUserCss = await transformGeneratorUserCss(afterLayerParts.layer, userCssOptions);
+			const afterUserCss = await transformGeneratorUserCss(afterLayerParts.rest, userCssOptions);
+			css = createCssSourceOrderAppend(createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, generated.target === "weapp" ? wrapUserLayerComponentsCss(afterLayerUserCss) : afterLayerUserCss), css), afterUserCss);
 			if (isEmptyCssSourceOrderParts(orderedExtraCss) && shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,
 				hasMatchedCssSourceFile
@@ -1613,6 +1841,7 @@ async function generateCssByGenerator(options) {
 				css = createCssSourceOrderAppend(css, userCss);
 			}
 			if (generated.target === "weapp") {
+				if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
 				css = await appendLegacyCompatCss(css, effectiveRawSource, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 				css = await appendLegacyContainerCompatCss(css, effectiveRawSource, file, runtime, configuredContainerCompat, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 			}
@@ -1625,7 +1854,27 @@ async function generateCssByGenerator(options) {
 		}
 		debug("tailwind direct css generation prefix mismatch, append transformed bundle css %s", file);
 		let css = stripTailwindBanner(generated.css);
-		if (generated.target === "weapp") css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+		if (generated.target === "weapp") {
+			css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+			if (hasUserCssLayerBlocks(effectiveRawSource)) {
+				const layerParts = splitUserCssLayerBlocks(effectiveRawSource);
+				const layerUserCss = await transformGeneratorUserCss(layerParts.layer, {
+					generatorTarget: generated.target,
+					generatorStyleOptions,
+					cssUserHandlerOptions,
+					styleHandler,
+					importFallback: generatorOptions.importFallback
+				});
+				const layerCss = layerUserCss.trim().length > 0 && !hasTailwindApplyDirective(layerUserCss) ? {
+					layer: layerUserCss,
+					rest: css
+				} : extractGeneratedCssForUserLayerSelectors(css, layerParts.layer);
+				if (layerCss.layer.trim().length > 0) {
+					css = createCssSourceOrderAppend(wrapUserLayerComponentsCss(layerCss.layer), layerCss.rest);
+					if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
+				}
+			}
+		}
 		if (hasMatchedCssSourceFile || generated.target === "web") {
 			if (shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,
@@ -1972,4 +2221,4 @@ function createBundleRuntimeClassSetManager(options = {}) {
 	};
 }
 //#endregion
-export { validateCandidatesByGenerator as a, hasTailwindSourceDirectives as c, generateCssByGenerator as i, normalizeTailwindSourceForGenerator as l, createHmrTimingRecorder as n, processCachedTask as o, emitHmrTiming as r, hasTailwindRootDirectives as s, createBundleRuntimeClassSetManager as t, hasTailwindGeneratedCssMarkers as u };
+export { validateCandidatesByGenerator as a, hasTailwindRootDirectives as c, hasTailwindGeneratedCssMarkers as d, generateCssByGenerator as i, hasTailwindSourceDirectives as l, createHmrTimingRecorder as n, mergeMarkedUserLayerComponentsCss as o, emitHmrTiming as r, processCachedTask as s, createBundleRuntimeClassSetManager as t, normalizeTailwindSourceForGenerator as u };

package/dist/{incremental-runtime-class-set-BxvZONkv.js → incremental-runtime-class-set-FAOHZmzh.js}

@@ -108,6 +108,11 @@ const TAILWIND_ROOT_DIRECTIVE_RE = /@(?:import\s+(?:url\(\s*)?["']?tailwindcss4?
 const TAILWIND_EXTRACTABLE_DIRECTIVE_RE = /^\s*@(?:import|use|forward|tailwind|config|source|reference|plugin)\b[\s\S]*?(?:;|$)/;
 const TAILWIND_EXTRACTABLE_LAYER_STATEMENT_RE = /^\s*@layer\s[^;{]+;\s*$/;
 const TAILWIND_EXTRACTABLE_BLOCK_START_RE = /^\s*@(?:layer|theme|utility|variant|custom-variant)\b[\s\S]*\{/;
+const TAILWIND_V3_SUBPATH_IMPORT_LAYERS = new Map([
+	["tailwindcss/base", "base"],
+	["tailwindcss/components", "components"],
+	["tailwindcss/utilities", "utilities"]
+]);
 function parseImportRequest(params) {
 	return /^(?:url\(\s*)?(["']?)([^"')\s]+)\1\s*\)?/.exec(params.trim())?.[2];
 }
@@ -287,6 +292,24 @@ function hasPreprocessorOnlySyntax(rawSource) {
 function normalizeTailwindSourceForGenerator(rawSource, options = {}) {
 	return hasPreprocessorOnlySyntax(rawSource) ? extractTailwindSourceForPostcssFallback(rawSource, options) ?? rawSource : rawSource;
 }
+function normalizeTailwindV3CssEntrySource(rawSource) {
+	try {
+		const root = postcss.default.parse(rawSource);
+		let changed = false;
+		root.walkAtRules("import", (node) => {
+			const layer = TAILWIND_V3_SUBPATH_IMPORT_LAYERS.get(parseImportRequest(node.params) ?? "");
+			if (!layer) return;
+			node.replaceWith(postcss.default.atRule({
+				name: "tailwind",
+				params: layer
+			}));
+			changed = true;
+		});
+		return changed ? root.toString() : rawSource;
+	} catch {
+		return rawSource;
+	}
+}
 function normalizeTailwindSourceDirectives(rawSource, options = {}) {
 	if (!options.importFallback) return rawSource;
 	try {
@@ -1022,14 +1045,14 @@ async function resolveGeneratorSource(majorVersion, runtimeState, rawSource, fil
 			css: rawSource
 		} : void 0;
 		const sourceSideEntrySource = canResolveSourceSideCssEntry(file, cssHandlerOptions) ? resolveSourceSideCssEntrySource(file, mergedSourceOptions, { removeConfig: true }) : void 0;
-		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? applyEntrySource ?? cssEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
+		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
 		if (!resolvedEntrySource) return generatorOptions?.config ? require_v3_engine.resolveTailwindV3Source(mergedSourceOptions) : require_v3_engine.resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		if (cssEntrySource && !sourceSideEntrySource && !applyEntrySource && !hasTailwindRootDirectives(rawSource, { importFallback: true })) return generatorOptions?.config ? require_v3_engine.resolveTailwindV3Source(mergedSourceOptions) : require_v3_engine.resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		const config = resolveExistingConfigPath(resolvedEntrySource.config, resolvedEntrySource.configRequest, file, require_v3_engine.omitUndefined(mergedSourceOptions));
 		return require_v3_engine.resolveTailwindV3Source({
 			...mergedSourceOptions,
 			base: resolvedEntrySource.base,
-			css: resolvedEntrySource.css,
+			css: normalizeTailwindV3CssEntrySource(resolvedEntrySource.css),
 			...config ? { config } : {}
 		});
 	}
@@ -1376,6 +1399,125 @@ function inheritLegacyUnitConvertedDeclarations(css, legacyCss) {
 	}
 }
 //#endregion
+//#region src/bundlers/shared/generator-css/user-layer-order.ts
+const USER_LAYER_COMPONENTS_START = "/*! weapp-tailwindcss layer components start */";
+const USER_LAYER_COMPONENTS_END = "/*! weapp-tailwindcss layer components end */";
+const UTILITY_LAYER_INSERTION_RES = [
+	/(^|\n)\.(?:fixed|absolute|relative|sticky|static)\s*\{/,
+	/(^|\n)\.(?:block|inline-block|inline|flex|inline-flex|grid|hidden)\s*\{/,
+	/(^|\n)\.(?:m|mx|my|mt|mr|mb|ml|p|px|py|pt|pr|pb|pl)-/,
+	/(^|\n)\.(?:w|h|min-w|min-h|max-w|max-h)-/,
+	/(^|\n)\.(?:bg|text|border|rounded|shadow|opacity|transition|transform|translate|scale|rotate|gap|items|justify|content)-/
+];
+function appendCss(base, extra) {
+	if (!base) return extra;
+	if (!extra) return base;
+	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
+	return `${base}\n${extra}`;
+}
+function removeFirstCssOccurrence(css, chunk) {
+	const trimmed = chunk.trim();
+	if (!trimmed) return css;
+	const index = css.indexOf(trimmed);
+	if (index === -1) return css;
+	return appendCss(css.slice(0, index).trimEnd(), css.slice(index + trimmed.length).trimStart());
+}
+function collectSelectorsFromCss(css) {
+	const selectors = /* @__PURE__ */ new Set();
+	try {
+		postcss.default.parse(css).walkRules((rule) => {
+			for (const selector of rule.selectors ?? [rule.selector]) {
+				const normalized = selector.trim();
+				if (normalized) selectors.add(normalized);
+			}
+		});
+	} catch {}
+	return selectors;
+}
+function matchesLayerSelector(selector, layerSelector) {
+	if (selector === layerSelector) return true;
+	if (!selector.startsWith(layerSelector)) return false;
+	const next = selector[layerSelector.length];
+	return next === ":" || next === "[";
+}
+function removeCssRulesForSelectors(css, layerCss) {
+	const selectors = [...collectSelectorsFromCss(layerCss)];
+	if (selectors.length === 0) return css;
+	try {
+		const root = postcss.default.parse(css);
+		root.walkRules((rule) => {
+			if ((rule.selectors ?? [rule.selector]).some((selector) => selectors.some((layerSelector) => matchesLayerSelector(selector.trim(), layerSelector)))) rule.remove();
+		});
+		return root.toString();
+	} catch {
+		return removeFirstCssOccurrence(css, layerCss);
+	}
+}
+function wrapUserLayerComponentsCss(css) {
+	return css.trim().length > 0 ? `${USER_LAYER_COMPONENTS_START}\n${css}\n${USER_LAYER_COMPONENTS_END}` : css;
+}
+function extractMarkedUserLayerComponentsCss(css) {
+	const layers = [];
+	let rest = "";
+	let cursor = 0;
+	while (cursor < css.length) {
+		const startIndex = css.indexOf(USER_LAYER_COMPONENTS_START, cursor);
+		if (startIndex === -1) {
+			rest += css.slice(cursor);
+			break;
+		}
+		rest += css.slice(cursor, startIndex);
+		const contentStart = startIndex + 47;
+		const endIndex = css.indexOf(USER_LAYER_COMPONENTS_END, contentStart);
+		if (endIndex === -1) {
+			rest += css.slice(startIndex);
+			break;
+		}
+		const layerCss = css.slice(contentStart, endIndex).trim();
+		if (layerCss) layers.push(layerCss);
+		cursor = endIndex + 45;
+	}
+	return {
+		layers,
+		rest
+	};
+}
+function findUtilityLayerInsertionIndex(css) {
+	let index = -1;
+	for (const pattern of UTILITY_LAYER_INSERTION_RES) {
+		const match = pattern.exec(css);
+		if (!match) continue;
+		const nextIndex = match.index + (match[1]?.length ?? 0);
+		index = index === -1 ? nextIndex : Math.min(index, nextIndex);
+	}
+	return index;
+}
+function reorderMarkedUserLayerComponentsCss(css) {
+	if (!css.includes(USER_LAYER_COMPONENTS_START)) return css;
+	const { layers, rest } = extractMarkedUserLayerComponentsCss(css);
+	if (layers.length === 0) return rest;
+	const layerCss = layers.join("\n");
+	const insertionIndex = findUtilityLayerInsertionIndex(rest);
+	if (insertionIndex === -1) return appendCss(rest, layerCss);
+	return appendCss(appendCss(rest.slice(0, insertionIndex), layerCss), rest.slice(insertionIndex));
+}
+function mergeMarkedUserLayerComponentsCss(baseCss, markedCss) {
+	if (!markedCss.includes(USER_LAYER_COMPONENTS_START)) return {
+		css: baseCss,
+		merged: false
+	};
+	const { layers } = extractMarkedUserLayerComponentsCss(markedCss);
+	if (layers.length === 0) return {
+		css: baseCss,
+		merged: false
+	};
+	const layerCss = layers.join("\n");
+	return {
+		css: reorderMarkedUserLayerComponentsCss(appendCss(removeCssRulesForSelectors(baseCss, layerCss), wrapUserLayerComponentsCss(layerCss))),
+		merged: true
+	};
+}
+//#endregion
 //#region src/bundlers/shared/generator-css.ts
 const SUPPORTED_GENERATOR_MAJOR_VERSIONS = new Set([3, 4]);
 const REMOTE_IMPORT_RE = /^(?:https?:)?\/\//i;
@@ -1449,6 +1591,9 @@ function createCssSourceOrderAppend(base, extra) {
 	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
 	return `${base}\n${extra}`;
 }
+function shouldFinalizeMarkedUserLayerComponentsCss(file) {
+	return !/\.(?:vue|svelte|astro|scss|sass|less|styl)(?:[?#].*)?$/i.test(file);
+}
 function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	const placeholderParts = splitGeneratorPlaceholderCssBySourceOrder(rawSource, rawTailwindCss);
 	if (placeholderParts) return placeholderParts;
@@ -1456,6 +1601,84 @@ function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	if (exactParts) return exactParts;
 	return splitTailwindGeneratedCssByBanner(rawSource);
 }
+function splitUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return {
+		layer: "",
+		rest: source
+	};
+	try {
+		const root = postcss.default.parse(source);
+		const layerRoot = postcss.default.root();
+		const restRoot = postcss.default.root();
+		for (const node of root.nodes) (node.type === "atrule" && node.name === "layer" && node.nodes?.length ? layerRoot : restRoot).append(node.clone());
+		return {
+			layer: layerRoot.toString(),
+			rest: restRoot.toString()
+		};
+	} catch {
+		return {
+			layer: source,
+			rest: ""
+		};
+	}
+}
+function hasUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return false;
+	try {
+		let hasLayerBlock = false;
+		postcss.default.parse(source).walkAtRules("layer", (node) => {
+			if (node.nodes?.length) hasLayerBlock = true;
+		});
+		return hasLayerBlock;
+	} catch {
+		return true;
+	}
+}
+function collectUserLayerSelectors(source) {
+	const selectors = /* @__PURE__ */ new Set();
+	try {
+		postcss.default.parse(source).walkRules((rule) => {
+			for (const selector of rule.selectors ?? [rule.selector]) {
+				const normalized = selector.trim();
+				if (normalized) selectors.add(normalized);
+			}
+		});
+	} catch {}
+	return selectors;
+}
+function matchesUserLayerSelector(selector, userLayerSelector) {
+	if (selector === userLayerSelector) return true;
+	if (!selector.startsWith(userLayerSelector)) return false;
+	const next = selector[userLayerSelector.length];
+	return next === ":" || next === "[";
+}
+function extractGeneratedCssForUserLayerSelectors(css, userLayerSource) {
+	const selectors = collectUserLayerSelectors(userLayerSource);
+	if (selectors.size === 0) return {
+		layer: "",
+		rest: css
+	};
+	try {
+		const root = postcss.default.parse(css);
+		const layerRoot = postcss.default.root();
+		const selectorList = [...selectors];
+		root.walkRules((rule) => {
+			if ((rule.selectors ?? [rule.selector]).some((selector) => selectorList.some((userSelector) => matchesUserLayerSelector(selector.trim(), userSelector)))) {
+				layerRoot.append(rule.clone());
+				rule.remove();
+			}
+		});
+		return {
+			layer: layerRoot.toString(),
+			rest: root.toString()
+		};
+	} catch {
+		return {
+			layer: "",
+			rest: css
+		};
+	}
+}
 async function transformGeneratorUserCss(source, options) {
 	if (source.trim().length === 0) return "";
 	const cleanedSource = removeTailwindSourceDirectives(stripUnmatchedTailwindSourceMediaCloseFragments(stripTailwindSourceMediaFragments(source)), { importFallback: options.importFallback });
@@ -1584,7 +1807,7 @@ async function generateCssByGenerator(options) {
 			sources: generatedResults.flatMap((item) => item.sources)
 		};
 		debug("tailwind generator result: %s rawBytes=%d cssBytes=%d candidates=%d", file, generated.rawCss.length, generated.css.length, generated.classSet.size);
-		if (typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
+		if ((generated.target !== "weapp" || !hasUserCssLayerBlocks(effectiveRawSource)) && typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
 			const incrementalCss = stripTailwindBanner(generated.incrementalCss);
 			return {
 				css: incrementalCss.trim().length > 0 ? createCssAppend(options.previousCss, finalizeMiniProgramGeneratorCss(incrementalCss, generated.target, majorVersion, opts.cssPreflight, { injectPreflight: false })) : options.previousCss,
@@ -1606,9 +1829,14 @@ async function generateCssByGenerator(options) {
 				styleHandler,
 				importFallback: generatorOptions.importFallback
 			};
+			const afterLayerParts = generated.target === "weapp" ? splitUserCssLayerBlocks(orderedExtraCss.after) : {
+				layer: "",
+				rest: orderedExtraCss.after
+			};
 			const beforeUserCss = await transformGeneratorUserCss(orderedExtraCss.before, userCssOptions);
-			const afterUserCss = await transformGeneratorUserCss(orderedExtraCss.after, userCssOptions);
-			css = createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, css), afterUserCss);
+			const afterLayerUserCss = await transformGeneratorUserCss(afterLayerParts.layer, userCssOptions);
+			const afterUserCss = await transformGeneratorUserCss(afterLayerParts.rest, userCssOptions);
+			css = createCssSourceOrderAppend(createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, generated.target === "weapp" ? wrapUserLayerComponentsCss(afterLayerUserCss) : afterLayerUserCss), css), afterUserCss);
 			if (isEmptyCssSourceOrderParts(orderedExtraCss) && shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,
 				hasMatchedCssSourceFile
@@ -1617,6 +1845,7 @@ async function generateCssByGenerator(options) {
 				css = createCssSourceOrderAppend(css, userCss);
 			}
 			if (generated.target === "weapp") {
+				if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
 				css = await appendLegacyCompatCss(css, effectiveRawSource, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 				css = await appendLegacyContainerCompatCss(css, effectiveRawSource, file, runtime, configuredContainerCompat, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 			}
@@ -1629,7 +1858,27 @@ async function generateCssByGenerator(options) {
 		}
 		debug("tailwind direct css generation prefix mismatch, append transformed bundle css %s", file);
 		let css = stripTailwindBanner(generated.css);
-		if (generated.target === "weapp") css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+		if (generated.target === "weapp") {
+			css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+			if (hasUserCssLayerBlocks(effectiveRawSource)) {
+				const layerParts = splitUserCssLayerBlocks(effectiveRawSource);
+				const layerUserCss = await transformGeneratorUserCss(layerParts.layer, {
+					generatorTarget: generated.target,
+					generatorStyleOptions,
+					cssUserHandlerOptions,
+					styleHandler,
+					importFallback: generatorOptions.importFallback
+				});
+				const layerCss = layerUserCss.trim().length > 0 && !hasTailwindApplyDirective(layerUserCss) ? {
+					layer: layerUserCss,
+					rest: css
+				} : extractGeneratedCssForUserLayerSelectors(css, layerParts.layer);
+				if (layerCss.layer.trim().length > 0) {
+					css = createCssSourceOrderAppend(wrapUserLayerComponentsCss(layerCss.layer), layerCss.rest);
+					if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
+				}
+			}
+		}
 		if (hasMatchedCssSourceFile || generated.target === "web") {
 			if (shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,
@@ -2018,6 +2267,12 @@ Object.defineProperty(exports, "hasTailwindSourceDirectives", {
 		return hasTailwindSourceDirectives;
 	}
 });
+Object.defineProperty(exports, "mergeMarkedUserLayerComponentsCss", {
+	enumerable: true,
+	get: function() {
+		return mergeMarkedUserLayerComponentsCss;
+	}
+});
 Object.defineProperty(exports, "normalizeTailwindSourceForGenerator", {
 	enumerable: true,
 	get: function() {

package/dist/index.js

@@ -2,8 +2,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_generator = require("./generator-CrU-Ghc1.js");
 const require_gulp = require("./gulp.js");
 const require_postcss = require("./postcss-DAWf9D3C.js");
-const require_vite = require("./vite-C65DdWEj.js");
-const require_webpack = require("./webpack-CqGvjvSQ.js");
+const require_vite = require("./vite-BgTPSkQS.js");
+const require_webpack = require("./webpack-BXSWVdXh.js");
 let _weapp_tailwindcss_postcss = require("@weapp-tailwindcss/postcss");
 exports.WeappTailwindcss = require_vite.WeappTailwindcss;
 exports.createPlugins = require_gulp.createPlugins;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { t as createWeappTailwindcssGenerator } from "./generator-Qw-tZ0Z2.mjs";
 import { WeappTailwindcss as createPlugins } from "./gulp.mjs";
 import { t as weappTailwindcssPostcssPlugin } from "./postcss-C6zOQqlL.mjs";
-import { t as WeappTailwindcss } from "./vite-rmL1rsA_.mjs";
-import { n as weappTailwindcssPackageDir } from "./webpack-BU2Er4qg.mjs";
+import { t as WeappTailwindcss } from "./vite-fFRpSvyz.mjs";
+import { n as weappTailwindcssPackageDir } from "./webpack-Dx2AZpGU.mjs";
 import { unitConversionComposeRules, unitConversionPresets } from "@weapp-tailwindcss/postcss";
 export { WeappTailwindcss, createPlugins, createWeappTailwindcssGenerator, unitConversionComposeRules, unitConversionPresets, weappTailwindcssPackageDir, weappTailwindcssPostcssPlugin };

package/dist/{vite-C65DdWEj.js → vite-BgTPSkQS.js}

@@ -1,7 +1,7 @@
 const require_chunk = require("./chunk-C5U5_Hdc.js");
 const require_v3_engine = require("./v3-engine-CHItlVq5.js");
 const require_generator = require("./generator-CrU-Ghc1.js");
-const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-BxvZONkv.js");
+const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-FAOHZmzh.js");
 const require_precheck = require("./precheck-D7gJSmJz.js");
 const require_utils = require("./utils-D7Ygohep.js");
 const require_tailwindcss = require("./tailwindcss-B-e2RiXr.js");
@@ -22389,7 +22389,7 @@ function collectViteProcessedCssAssetResults(bundle, options) {
 	return collected;
 }
 function injectViteProcessedCssIntoMainCssAssets(bundle, options) {
-	const viteCssResults = [...options.getViteProcessedCssAssetResults?.() ?? []].filter(([file, css]) => isCssOutputFile(file) && css.length > 0);
+	const viteCssResults = [...options.getViteProcessedCssAssetResults?.() ?? []].filter(([, css]) => css.length > 0);
 	if (viteCssResults.length === 0) return 0;
 	let injected = 0;
 	for (const [bundleFile, output] of Object.entries(bundle)) {
@@ -22402,7 +22402,13 @@ function injectViteProcessedCssIntoMainCssAssets(bundle, options) {
 		for (const [sourceFile, sourceCss] of viteCssResults) {
 			if (require_bundle_state.normalizeOutputPathKey(sourceFile) === mainFileKey || options.opts.mainCssChunkMatcher(sourceFile, options.opts.appType)) continue;
 			const css = require_bundle_state.stripBundlerGeneratedCssMarkers(sourceCss).trim();
-			if (css.length === 0 || nextCss.includes(css)) continue;
+			if (css.length === 0) continue;
+			const mergedLayerCss = require_incremental_runtime_class_set.mergeMarkedUserLayerComponentsCss(nextCss, css);
+			if (mergedLayerCss.merged) {
+				nextCss = mergedLayerCss.css;
+				continue;
+			}
+			if (nextCss.includes(css)) continue;
 			nextCss = appendCss(nextCss, css);
 		}
 		if (nextCss === originalSource) continue;
@@ -24218,6 +24224,7 @@ function WeappTailwindcss(options = {}) {
 		if (!generated) return;
 		for (const dependency of generated.dependencies) hookContext?.addWatchFile?.(dependency);
 		viteGeneratedCssByFile.set(file, generated.css);
+		if (generated.css.includes("weapp-tailwindcss layer components start")) recordViteProcessedCssAssetResult(file, generated.css);
 		markViteProcessedCssSource(file);
 		rememberTailwindRootCssModule(id);
 		recordGeneratorCandidates(runtime);

package/dist/{vite-rmL1rsA_.mjs → vite-fFRpSvyz.mjs}

@@ -1,7 +1,7 @@
 import { C as __esmMin, S as __commonJSMin, _ as toCustomAttributesEntities, a as vitePluginName, c as createAttributeMatcher, d as _defineProperty, f as init_defineProperty, h as babelParse, l as analyzeSource, m as replaceWxml, n as getCompilerContext, p as isClassContextLiteralPath, s as generateCode, t as shouldSkipJsTransform, u as JsTokenUpdater, v as collectRuntimeClassSet, w as __require, x as refreshTailwindRuntimeState, y as createTailwindRuntimeReadyPromise } from "./precheck-D7K12zeX.mjs";
 import { B as createDebug, E as filterUnsupportedMiniProgramTailwindV4Candidates, J as findNearestPackageRoot, U as findTailwindConfig, W as resolveTailwindcssOptions, _ as resolveViteSourceScanEntries, g as resolveTailwindV4EntriesFromCssCached, l as getRuntimeClassSetSignature, m as discoverTailwindV4CssEntries, p as createViteSourceScanMatcher, q as omitUndefined, v as resolveViteTailwindV4CssDependencies } from "./v3-engine-DcvCCHfs.mjs";
 import { i as normalizeWeappTailwindcssGeneratorOptions } from "./generator-Qw-tZ0Z2.mjs";
-import { a as validateCandidatesByGenerator, c as hasTailwindSourceDirectives, i as generateCssByGenerator, l as normalizeTailwindSourceForGenerator, n as createHmrTimingRecorder, o as processCachedTask, s as hasTailwindRootDirectives, t as createBundleRuntimeClassSetManager, u as hasTailwindGeneratedCssMarkers } from "./incremental-runtime-class-set-BdZHkoTs.mjs";
+import { a as validateCandidatesByGenerator, c as hasTailwindRootDirectives, d as hasTailwindGeneratedCssMarkers, i as generateCssByGenerator, l as hasTailwindSourceDirectives, n as createHmrTimingRecorder, o as mergeMarkedUserLayerComponentsCss, s as processCachedTask, t as createBundleRuntimeClassSetManager, u as normalizeTailwindSourceForGenerator } from "./incremental-runtime-class-set-Boqi1QlB.mjs";
 import { o as resolveUniUtsPlatform } from "./utils-DsaS975I.mjs";
 import { c as upsertTailwindV4CssSource, i as resolveUniAppXOptions, r as isUniAppXEnabled, s as hasConfiguredTailwindV4CssRoots } from "./tailwindcss-C7dJHZ0G.mjs";
 import { n as isSourceCandidateRequest, t as createSourceCandidateCollector } from "./source-candidates-CX2ozpKM.mjs";
@@ -22380,7 +22380,7 @@ function collectViteProcessedCssAssetResults(bundle, options) {
 	return collected;
 }
 function injectViteProcessedCssIntoMainCssAssets(bundle, options) {
-	const viteCssResults = [...options.getViteProcessedCssAssetResults?.() ?? []].filter(([file, css]) => isCssOutputFile(file) && css.length > 0);
+	const viteCssResults = [...options.getViteProcessedCssAssetResults?.() ?? []].filter(([, css]) => css.length > 0);
 	if (viteCssResults.length === 0) return 0;
 	let injected = 0;
 	for (const [bundleFile, output] of Object.entries(bundle)) {
@@ -22393,7 +22393,13 @@ function injectViteProcessedCssIntoMainCssAssets(bundle, options) {
 		for (const [sourceFile, sourceCss] of viteCssResults) {
 			if (normalizeOutputPathKey(sourceFile) === mainFileKey || options.opts.mainCssChunkMatcher(sourceFile, options.opts.appType)) continue;
 			const css = stripBundlerGeneratedCssMarkers(sourceCss).trim();
-			if (css.length === 0 || nextCss.includes(css)) continue;
+			if (css.length === 0) continue;
+			const mergedLayerCss = mergeMarkedUserLayerComponentsCss(nextCss, css);
+			if (mergedLayerCss.merged) {
+				nextCss = mergedLayerCss.css;
+				continue;
+			}
+			if (nextCss.includes(css)) continue;
 			nextCss = appendCss(nextCss, css);
 		}
 		if (nextCss === originalSource) continue;
@@ -24209,6 +24215,7 @@ function WeappTailwindcss(options = {}) {
 		if (!generated) return;
 		for (const dependency of generated.dependencies) hookContext?.addWatchFile?.(dependency);
 		viteGeneratedCssByFile.set(file, generated.css);
+		if (generated.css.includes("weapp-tailwindcss layer components start")) recordViteProcessedCssAssetResult(file, generated.css);
 		markViteProcessedCssSource(file);
 		rememberTailwindRootCssModule(id);
 		recordGeneratorCandidates(runtime);

package/dist/vite.js

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_vite = require("./vite-C65DdWEj.js");
+const require_vite = require("./vite-BgTPSkQS.js");
 exports.WeappTailwindcss = require_vite.WeappTailwindcss;
 exports.weappTailwindcss = require_vite.WeappTailwindcss;

package/dist/vite.mjs

@@ -1,2 +1,2 @@
-import { t as WeappTailwindcss } from "./vite-rmL1rsA_.mjs";
+import { t as WeappTailwindcss } from "./vite-fFRpSvyz.mjs";
 export { WeappTailwindcss, WeappTailwindcss as weappTailwindcss };

package/dist/weapp-tw-css-import-rewrite-loader.js

@@ -3272,6 +3272,11 @@ const TAILWIND_ROOT_DIRECTIVE_RE = /@(?:import\s+(?:url\(\s*)?["']?tailwindcss4?
 const TAILWIND_EXTRACTABLE_DIRECTIVE_RE = /^\s*@(?:import|use|forward|tailwind|config|source|reference|plugin)\b[\s\S]*?(?:;|$)/;
 const TAILWIND_EXTRACTABLE_LAYER_STATEMENT_RE = /^\s*@layer\s[^;{]+;\s*$/;
 const TAILWIND_EXTRACTABLE_BLOCK_START_RE = /^\s*@(?:layer|theme|utility|variant|custom-variant)\b[\s\S]*\{/;
+const TAILWIND_V3_SUBPATH_IMPORT_LAYERS = new Map([
+	["tailwindcss/base", "base"],
+	["tailwindcss/components", "components"],
+	["tailwindcss/utilities", "utilities"]
+]);
 function parseImportRequest(params) {
 	return /^(?:url\(\s*)?(["']?)([^"')\s]+)\1\s*\)?/.exec(params.trim())?.[2];
 }
@@ -3451,6 +3456,24 @@ function hasPreprocessorOnlySyntax(rawSource) {
 function normalizeTailwindSourceForGenerator(rawSource, options = {}) {
 	return hasPreprocessorOnlySyntax(rawSource) ? extractTailwindSourceForPostcssFallback(rawSource, options) ?? rawSource : rawSource;
 }
+function normalizeTailwindV3CssEntrySource(rawSource) {
+	try {
+		const root = require_runtime_registry.postcss_default.parse(rawSource);
+		let changed = false;
+		root.walkAtRules("import", (node) => {
+			const layer = TAILWIND_V3_SUBPATH_IMPORT_LAYERS.get(parseImportRequest(node.params) ?? "");
+			if (!layer) return;
+			node.replaceWith(require_runtime_registry.postcss_default.atRule({
+				name: "tailwind",
+				params: layer
+			}));
+			changed = true;
+		});
+		return changed ? root.toString() : rawSource;
+	} catch {
+		return rawSource;
+	}
+}
 function normalizeTailwindSourceDirectives(rawSource, options = {}) {
 	if (!options.importFallback) return rawSource;
 	try {
@@ -4332,14 +4355,14 @@ async function resolveGeneratorSource(majorVersion, runtimeState, rawSource, fil
 			css: rawSource
 		} : void 0;
 		const sourceSideEntrySource = canResolveSourceSideCssEntry(file, cssHandlerOptions) ? resolveSourceSideCssEntrySource(file, mergedSourceOptions, { removeConfig: true }) : void 0;
-		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? applyEntrySource ?? cssEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
+		const resolvedEntrySource = shouldResolveSourceSideCssEntry(rawSource) ? cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource : shouldPreferTailwindV3SourceSideEntry(rawSource, sourceSideEntrySource) ? sourceSideEntrySource ?? cssEntrySource : cssEntrySource ?? applyEntrySource ?? sourceSideEntrySource;
 		if (!resolvedEntrySource) return generatorOptions?.config ? resolveTailwindV3Source(mergedSourceOptions) : resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		if (cssEntrySource && !sourceSideEntrySource && !applyEntrySource && !hasTailwindRootDirectives(rawSource, { importFallback: true })) return generatorOptions?.config ? resolveTailwindV3Source(mergedSourceOptions) : resolveTailwindV3SourceFromPatcher(runtimeState.twPatcher);
 		const config = resolveExistingConfigPath(resolvedEntrySource.config, resolvedEntrySource.configRequest, file, omitUndefined(mergedSourceOptions));
 		return resolveTailwindV3Source({
 			...mergedSourceOptions,
 			base: resolvedEntrySource.base,
-			css: resolvedEntrySource.css,
+			css: normalizeTailwindV3CssEntrySource(resolvedEntrySource.css),
 			...config ? { config } : {}
 		});
 	}
@@ -4686,6 +4709,71 @@ function inheritLegacyUnitConvertedDeclarations(css, legacyCss) {
 	}
 }
 //#endregion
+//#region src/bundlers/shared/generator-css/user-layer-order.ts
+const USER_LAYER_COMPONENTS_START = "/*! weapp-tailwindcss layer components start */";
+const USER_LAYER_COMPONENTS_END = "/*! weapp-tailwindcss layer components end */";
+const UTILITY_LAYER_INSERTION_RES = [
+	/(^|\n)\.(?:fixed|absolute|relative|sticky|static)\s*\{/,
+	/(^|\n)\.(?:block|inline-block|inline|flex|inline-flex|grid|hidden)\s*\{/,
+	/(^|\n)\.(?:m|mx|my|mt|mr|mb|ml|p|px|py|pt|pr|pb|pl)-/,
+	/(^|\n)\.(?:w|h|min-w|min-h|max-w|max-h)-/,
+	/(^|\n)\.(?:bg|text|border|rounded|shadow|opacity|transition|transform|translate|scale|rotate|gap|items|justify|content)-/
+];
+function appendCss(base, extra) {
+	if (!base) return extra;
+	if (!extra) return base;
+	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
+	return `${base}\n${extra}`;
+}
+function wrapUserLayerComponentsCss(css) {
+	return css.trim().length > 0 ? `${USER_LAYER_COMPONENTS_START}\n${css}\n${USER_LAYER_COMPONENTS_END}` : css;
+}
+function extractMarkedUserLayerComponentsCss(css) {
+	const layers = [];
+	let rest = "";
+	let cursor = 0;
+	while (cursor < css.length) {
+		const startIndex = css.indexOf(USER_LAYER_COMPONENTS_START, cursor);
+		if (startIndex === -1) {
+			rest += css.slice(cursor);
+			break;
+		}
+		rest += css.slice(cursor, startIndex);
+		const contentStart = startIndex + 47;
+		const endIndex = css.indexOf(USER_LAYER_COMPONENTS_END, contentStart);
+		if (endIndex === -1) {
+			rest += css.slice(startIndex);
+			break;
+		}
+		const layerCss = css.slice(contentStart, endIndex).trim();
+		if (layerCss) layers.push(layerCss);
+		cursor = endIndex + 45;
+	}
+	return {
+		layers,
+		rest
+	};
+}
+function findUtilityLayerInsertionIndex(css) {
+	let index = -1;
+	for (const pattern of UTILITY_LAYER_INSERTION_RES) {
+		const match = pattern.exec(css);
+		if (!match) continue;
+		const nextIndex = match.index + (match[1]?.length ?? 0);
+		index = index === -1 ? nextIndex : Math.min(index, nextIndex);
+	}
+	return index;
+}
+function reorderMarkedUserLayerComponentsCss(css) {
+	if (!css.includes(USER_LAYER_COMPONENTS_START)) return css;
+	const { layers, rest } = extractMarkedUserLayerComponentsCss(css);
+	if (layers.length === 0) return rest;
+	const layerCss = layers.join("\n");
+	const insertionIndex = findUtilityLayerInsertionIndex(rest);
+	if (insertionIndex === -1) return appendCss(rest, layerCss);
+	return appendCss(appendCss(rest.slice(0, insertionIndex), layerCss), rest.slice(insertionIndex));
+}
+//#endregion
 //#region src/bundlers/shared/generator-css.ts
 const SUPPORTED_GENERATOR_MAJOR_VERSIONS = new Set([3, 4]);
 const REMOTE_IMPORT_RE = /^(?:https?:)?\/\//i;
@@ -4759,6 +4847,9 @@ function createCssSourceOrderAppend(base, extra) {
 	if (/\s$/.test(base) || /^\s/.test(extra)) return `${base}${extra}`;
 	return `${base}\n${extra}`;
 }
+function shouldFinalizeMarkedUserLayerComponentsCss(file) {
+	return !/\.(?:vue|svelte|astro|scss|sass|less|styl)(?:[?#].*)?$/i.test(file);
+}
 function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	const placeholderParts = splitGeneratorPlaceholderCssBySourceOrder(rawSource, rawTailwindCss);
 	if (placeholderParts) return placeholderParts;
@@ -4766,6 +4857,84 @@ function splitRawSourceByGeneratedCssOrder(rawSource, rawTailwindCss) {
 	if (exactParts) return exactParts;
 	return splitTailwindGeneratedCssByBanner(rawSource);
 }
+function splitUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return {
+		layer: "",
+		rest: source
+	};
+	try {
+		const root = require_runtime_registry.postcss_default.parse(source);
+		const layerRoot = require_runtime_registry.postcss_default.root();
+		const restRoot = require_runtime_registry.postcss_default.root();
+		for (const node of root.nodes) (node.type === "atrule" && node.name === "layer" && node.nodes?.length ? layerRoot : restRoot).append(node.clone());
+		return {
+			layer: layerRoot.toString(),
+			rest: restRoot.toString()
+		};
+	} catch {
+		return {
+			layer: source,
+			rest: ""
+		};
+	}
+}
+function hasUserCssLayerBlocks(source) {
+	if (!source.includes("@layer")) return false;
+	try {
+		let hasLayerBlock = false;
+		require_runtime_registry.postcss_default.parse(source).walkAtRules("layer", (node) => {
+			if (node.nodes?.length) hasLayerBlock = true;
+		});
+		return hasLayerBlock;
+	} catch {
+		return true;
+	}
+}
+function collectUserLayerSelectors(source) {
+	const selectors = /* @__PURE__ */ new Set();
+	try {
+		require_runtime_registry.postcss_default.parse(source).walkRules((rule) => {
+			for (const selector of rule.selectors ?? [rule.selector]) {
+				const normalized = selector.trim();
+				if (normalized) selectors.add(normalized);
+			}
+		});
+	} catch {}
+	return selectors;
+}
+function matchesUserLayerSelector(selector, userLayerSelector) {
+	if (selector === userLayerSelector) return true;
+	if (!selector.startsWith(userLayerSelector)) return false;
+	const next = selector[userLayerSelector.length];
+	return next === ":" || next === "[";
+}
+function extractGeneratedCssForUserLayerSelectors(css, userLayerSource) {
+	const selectors = collectUserLayerSelectors(userLayerSource);
+	if (selectors.size === 0) return {
+		layer: "",
+		rest: css
+	};
+	try {
+		const root = require_runtime_registry.postcss_default.parse(css);
+		const layerRoot = require_runtime_registry.postcss_default.root();
+		const selectorList = [...selectors];
+		root.walkRules((rule) => {
+			if ((rule.selectors ?? [rule.selector]).some((selector) => selectorList.some((userSelector) => matchesUserLayerSelector(selector.trim(), userSelector)))) {
+				layerRoot.append(rule.clone());
+				rule.remove();
+			}
+		});
+		return {
+			layer: layerRoot.toString(),
+			rest: root.toString()
+		};
+	} catch {
+		return {
+			layer: "",
+			rest: css
+		};
+	}
+}
 async function transformGeneratorUserCss(source, options) {
 	if (source.trim().length === 0) return "";
 	const cleanedSource = removeTailwindSourceDirectives(stripUnmatchedTailwindSourceMediaCloseFragments(stripTailwindSourceMediaFragments(source)), { importFallback: options.importFallback });
@@ -4894,7 +5063,7 @@ async function generateCssByGenerator(options) {
 			sources: generatedResults.flatMap((item) => item.sources)
 		};
 		debug("tailwind generator result: %s rawBytes=%d cssBytes=%d candidates=%d", file, generated.rawCss.length, generated.css.length, generated.classSet.size);
-		if (typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
+		if ((generated.target !== "weapp" || !hasUserCssLayerBlocks(effectiveRawSource)) && typeof options.previousCss === "string" && typeof generated.incrementalCss === "string") {
 			const incrementalCss = stripTailwindBanner(generated.incrementalCss);
 			return {
 				css: incrementalCss.trim().length > 0 ? createCssAppend(options.previousCss, finalizeMiniProgramGeneratorCss(incrementalCss, generated.target, majorVersion, opts.cssPreflight, { injectPreflight: false })) : options.previousCss,
@@ -4916,9 +5085,14 @@ async function generateCssByGenerator(options) {
 				styleHandler,
 				importFallback: generatorOptions.importFallback
 			};
+			const afterLayerParts = generated.target === "weapp" ? splitUserCssLayerBlocks(orderedExtraCss.after) : {
+				layer: "",
+				rest: orderedExtraCss.after
+			};
 			const beforeUserCss = await transformGeneratorUserCss(orderedExtraCss.before, userCssOptions);
-			const afterUserCss = await transformGeneratorUserCss(orderedExtraCss.after, userCssOptions);
-			css = createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, css), afterUserCss);
+			const afterLayerUserCss = await transformGeneratorUserCss(afterLayerParts.layer, userCssOptions);
+			const afterUserCss = await transformGeneratorUserCss(afterLayerParts.rest, userCssOptions);
+			css = createCssSourceOrderAppend(createCssSourceOrderAppend(createCssSourceOrderAppend(beforeUserCss, generated.target === "weapp" ? wrapUserLayerComponentsCss(afterLayerUserCss) : afterLayerUserCss), css), afterUserCss);
 			if (isEmptyCssSourceOrderParts(orderedExtraCss) && shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,
 				hasMatchedCssSourceFile
@@ -4927,6 +5101,7 @@ async function generateCssByGenerator(options) {
 				css = createCssSourceOrderAppend(css, userCss);
 			}
 			if (generated.target === "weapp") {
+				if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
 				css = await appendLegacyCompatCss(css, effectiveRawSource, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 				css = await appendLegacyContainerCompatCss(css, effectiveRawSource, file, runtime, configuredContainerCompat, generated.target, styleHandler, cssHandlerOptions, generatorStyleOptions);
 			}
@@ -4939,7 +5114,27 @@ async function generateCssByGenerator(options) {
 		}
 		debug("tailwind direct css generation prefix mismatch, append transformed bundle css %s", file);
 		let css = stripTailwindBanner(generated.css);
-		if (generated.target === "weapp") css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+		if (generated.target === "weapp") {
+			css = inheritLegacyUnitConvertedDeclarations(css, effectiveRawSource);
+			if (hasUserCssLayerBlocks(effectiveRawSource)) {
+				const layerParts = splitUserCssLayerBlocks(effectiveRawSource);
+				const layerUserCss = await transformGeneratorUserCss(layerParts.layer, {
+					generatorTarget: generated.target,
+					generatorStyleOptions,
+					cssUserHandlerOptions,
+					styleHandler,
+					importFallback: generatorOptions.importFallback
+				});
+				const layerCss = layerUserCss.trim().length > 0 && !hasTailwindApplyDirective(layerUserCss) ? {
+					layer: layerUserCss,
+					rest: css
+				} : extractGeneratedCssForUserLayerSelectors(css, layerParts.layer);
+				if (layerCss.layer.trim().length > 0) {
+					css = createCssSourceOrderAppend(wrapUserLayerComponentsCss(layerCss.layer), layerCss.rest);
+					if (shouldFinalizeMarkedUserLayerComponentsCss(file)) css = reorderMarkedUserLayerComponentsCss(css);
+				}
+			}
+		}
 		if (hasMatchedCssSourceFile || generated.target === "web") {
 			if (shouldAppendWebBundleCssFallback(generated.target, {
 				hasSourceDirectives,

package/dist/{webpack-CqGvjvSQ.js → webpack-BXSWVdXh.js}

@@ -1,7 +1,7 @@
 const require_chunk = require("./chunk-C5U5_Hdc.js");
 const require_v3_engine = require("./v3-engine-CHItlVq5.js");
 const require_generator = require("./generator-CrU-Ghc1.js");
-const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-BxvZONkv.js");
+const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-FAOHZmzh.js");
 const require_precheck = require("./precheck-D7gJSmJz.js");
 const require_utils = require("./utils-D7Ygohep.js");
 const require_tailwindcss = require("./tailwindcss-B-e2RiXr.js");

package/dist/{webpack-BU2Er4qg.mjs → webpack-Dx2AZpGU.mjs}

@@ -1,7 +1,7 @@
 import { b as ensureRuntimeClassSet, d as _defineProperty, f as init_defineProperty, i as pluginName, n as getCompilerContext, t as shouldSkipJsTransform, x as refreshTailwindRuntimeState, y as createTailwindRuntimeReadyPromise } from "./precheck-D7K12zeX.mjs";
 import { B as createDebug, W as resolveTailwindcssOptions, l as getRuntimeClassSetSignature } from "./v3-engine-DcvCCHfs.mjs";
 import { i as normalizeWeappTailwindcssGeneratorOptions } from "./generator-Qw-tZ0Z2.mjs";
-import { i as generateCssByGenerator, o as processCachedTask, r as emitHmrTiming, t as createBundleRuntimeClassSetManager } from "./incremental-runtime-class-set-BdZHkoTs.mjs";
+import { i as generateCssByGenerator, r as emitHmrTiming, s as processCachedTask, t as createBundleRuntimeClassSetManager } from "./incremental-runtime-class-set-Boqi1QlB.mjs";
 import { r as getGroupedEntries } from "./utils-DsaS975I.mjs";
 import { c as upsertTailwindV4CssSource, s as hasConfiguredTailwindV4CssRoots } from "./tailwindcss-C7dJHZ0G.mjs";
 import { _ as stripRequestQuery, b as toAbsoluteOutputPath, d as resolvePluginDisabledState, g as isSourceStyleRequest, l as stripBundlerGeneratedCssMarkers, n as createBundleBuildState, o as pushConcurrentTaskFactories, r as updateBundleBuildState, t as buildBundleSnapshot, u as resolvePackageDir, y as resolveOutputSpecifier } from "./bundle-state-Bi-cQua6.mjs";

package/dist/webpack.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_webpack = require("./webpack-CqGvjvSQ.js");
+const require_webpack = require("./webpack-BXSWVdXh.js");
 exports.WeappTailwindcss = require_webpack.WeappTailwindcss;
 exports.weappTailwindcss = require_webpack.WeappTailwindcss;
 exports.weappTailwindcssPackageDir = require_webpack.weappTailwindcssPackageDir;

package/dist/webpack.mjs

@@ -1,2 +1,2 @@
-import { n as weappTailwindcssPackageDir, t as WeappTailwindcss } from "./webpack-BU2Er4qg.mjs";
+import { n as weappTailwindcssPackageDir, t as WeappTailwindcss } from "./webpack-Dx2AZpGU.mjs";
 export { WeappTailwindcss, WeappTailwindcss as weappTailwindcss, weappTailwindcssPackageDir };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weapp-tailwindcss",
-  "version": "5.0.0-next.30",
+  "version": "5.0.0-next.31",
   "description": "把 tailwindcss 原子化样式思想，带给小程序开发者们! bring tailwindcss to miniprogram developers!",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",