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

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

@@ -30,7 +30,6 @@ _babel_traverse = require_runtime_registry.__toESM(_babel_traverse);
 require("@babel/parser");
 require("@babel/types");
 require("@ast-core/escape");
-require("@weapp-tailwindcss/shared/extractors");
 //#region src/bundlers/shared/css-imports.ts
 const tailwindcssImportRE = /^(?:tailwindcss|weapp-tailwindcss)(?:\/.*)?$/;
 const tailwindcssCssImportStatementRE = /(@import\s+(?:url\(\s*)?)(["'])((?:tailwindcss|weapp-tailwindcss)(?:\/[^"']*)?\$?)(\2\s*\)?)/gi;
@@ -278,6 +277,126 @@ const creator = () => {
 };
 creator.postcss = true;
 const CSS_MACRO_STYLE_OPTIONS_MARKER = "__weappTailwindcssCssMacroEnabled";
+const PLATFORM_ENV_KEYS = [
+	"WEAPP_TW_TARGET",
+	"WEAPP_TAILWINDCSS_TARGET",
+	"UNI_PLATFORM",
+	"UNI_UTS_PLATFORM",
+	"TARO_ENV",
+	"MPX_CLI_MODE",
+	"MPX_CURRENT_TARGET_MODE"
+];
+const CONDITIONAL_END_RE = /^\s*#endif\s*$/;
+function readEnvValue(key) {
+	return typeof node_process.default === "undefined" ? void 0 : node_process.default.env[key];
+}
+function normalizePlatformToken(value) {
+	return value?.trim().replaceAll("_", "-").toUpperCase() || void 0;
+}
+function resolveCssMacroPlatform(options) {
+	const explicit = normalizePlatformToken(options?.platform);
+	if (explicit) return explicit;
+	for (const key of PLATFORM_ENV_KEYS) {
+		const value = normalizePlatformToken(readEnvValue(key));
+		if (value) return value;
+	}
+}
+function createPlatformTokenSet(platform) {
+	const normalized = normalizePlatformToken(platform);
+	const tokens = /* @__PURE__ */ new Set();
+	if (!normalized) return tokens;
+	tokens.add(normalized);
+	if (normalized.startsWith("MP-")) tokens.add("MP");
+	if (normalized === "WEAPP" || normalized === "WEIXIN" || normalized === "WX") {
+		tokens.add("MP");
+		tokens.add("MP-WEIXIN");
+	}
+	if (normalized === "MP-WEIXIN") {
+		tokens.add("WEAPP");
+		tokens.add("WEIXIN");
+		tokens.add("WX");
+	}
+	if (normalized === "H5") tokens.add("WEB");
+	if (normalized === "WEB") tokens.add("H5");
+	if (normalized === "APP") tokens.add("APP-PLUS");
+	if (normalized.startsWith("APP-")) tokens.add("APP");
+	if (normalized.startsWith("QUICKAPP-WEBVIEW")) tokens.add("QUICKAPP-WEBVIEW");
+	return tokens;
+}
+function combineAnd(values) {
+	if (values.includes(false)) return false;
+	return values.every((value) => value === true) ? true : void 0;
+}
+function combineOr(values) {
+	if (values.includes(true)) return true;
+	return values.every((value) => value === false) ? false : void 0;
+}
+function evaluatePlatformExpression(expression, platformTokens) {
+	return combineOr(expression.split(/\s*\|\|\s*/).map((orPart) => {
+		return combineAnd(orPart.split(/\s*&&\s*/).map((part) => {
+			const token = normalizePlatformToken(part);
+			if (!token || /[<>=!()]/.test(token)) return;
+			return platformTokens.has(token);
+		}));
+	}));
+}
+function negateConditionalValue(value) {
+	return value === void 0 ? void 0 : !value;
+}
+function getActiveConditionalValue(stack) {
+	if (stack.includes(false)) return false;
+	return stack.includes(void 0) ? void 0 : true;
+}
+function parseConditionalStart(text) {
+	const normalized = text.trim();
+	if (!normalized.startsWith("#")) return;
+	const body = normalized.slice(1).trimStart();
+	for (const directive of ["ifndef", "ifdef"]) {
+		if (!body.startsWith(directive)) continue;
+		const expression = body.slice(directive.length).trim();
+		if (expression.length === 0) return;
+		return {
+			directive,
+			expression
+		};
+	}
+}
+function compileCssMacroConditionalComments(css, options) {
+	const platformTokens = createPlatformTokenSet(resolveCssMacroPlatform(options));
+	if (platformTokens.size === 0 || !css.includes("#if")) return css;
+	try {
+		const root = require_runtime_registry.postcss_default.parse(css);
+		const transformContainer = (container) => {
+			const stack = [];
+			for (const node of [...container.nodes ?? []]) {
+				if (node.type === "comment") {
+					const start = parseConditionalStart(node.text);
+					if (start) {
+						const value = start.directive === "ifndef" ? negateConditionalValue(evaluatePlatformExpression(start.expression, platformTokens)) : evaluatePlatformExpression(start.expression, platformTokens);
+						const parentActive = getActiveConditionalValue(stack);
+						stack.push(value);
+						if (parentActive !== void 0 && value !== void 0) node.remove();
+						continue;
+					}
+					if (CONDITIONAL_END_RE.test(node.text)) {
+						const value = stack.pop();
+						if (getActiveConditionalValue(stack) !== void 0 && value !== void 0) node.remove();
+						continue;
+					}
+				}
+				if (getActiveConditionalValue(stack) === false) {
+					node.remove();
+					continue;
+				}
+				if ("nodes" in node && node.nodes) transformContainer(node);
+			}
+		};
+		transformContainer(root);
+		return root.toString();
+	} catch {
+		return css;
+	}
+}
 function isCssMacroTailwindPlugin(value) {
 	return Boolean(value && (typeof value === "function" || typeof value === "object") && value["__weappTailwindcssCssMacro"] === true);
 }
@@ -338,8 +457,9 @@ function withCssMacroStyleOptions(options) {
 function hasCssMacroStyleOptions(options) {
 	return Boolean(options?.[CSS_MACRO_STYLE_OPTIONS_MARKER]);
 }
-async function transformCssMacroCss(css) {
-	return (await require_runtime_registry.postcss_default([creator()]).process(css, { from: void 0 })).css;
+async function transformCssMacroCss(css, options) {
+	const result = (await require_runtime_registry.postcss_default([creator()]).process(css, { from: void 0 })).css;
+	return compileCssMacroConditionalComments(result, options);
 }
 //#endregion
 //#region src/context/workspace.ts
@@ -912,7 +1032,7 @@ function normalizeTailwindV4GeneratedUrlValues(css) {
 	});
 }
 async function transformTailwindV4CssToWeapp(css, options) {
-	const protectedCss = (0, _weapp_tailwindcss_postcss.protectDynamicColorMixAlpha)(normalizeTailwindV4GeneratedUrlValues(css), { customPropertyValues: options && "customPropertyValues" in options ? options.customPropertyValues : void 0 });
+	const protectedCss = (0, _weapp_tailwindcss_postcss.protectDynamicColorMixAlpha)(normalizeTailwindV4GeneratedUrlValues(hasCssMacroStyleOptions(options) ? await transformCssMacroCss(css, options) : css), { customPropertyValues: options && "customPropertyValues" in options ? options.customPropertyValues : void 0 });
 	const result = await defaultStyleHandler$1(protectedCss.css, {
 		cssChildCombinatorReplaceValue: ["view", "text"],
 		cssRemoveHoverPseudoClass: true,
@@ -925,7 +1045,7 @@ async function transformTailwindV4CssToWeapp(css, options) {
 }
 async function transformTailwindV4CssByTarget(css, target, options) {
 	if (target === "weapp") return transformTailwindV4CssToWeapp(css, options);
-	return hasCssMacroStyleOptions(options) ? transformCssMacroCss(css) : css;
+	return hasCssMacroStyleOptions(options) ? transformCssMacroCss(css, options) : css;
 }
 //#endregion
 //#region src/tailwindcss/v4-engine/tailwind-v3-default-colors.ts
@@ -2625,7 +2745,7 @@ function ensureMiniProgramV3PreflightReset(css, cssPreflight) {
 	}
 }
 async function transformTailwindV3CssToWeapp(css, options) {
-	const result = await defaultStyleHandler(css, {
+	const result = await defaultStyleHandler(hasCssMacroStyleOptions(options) ? await transformCssMacroCss(css, options) : css, {
 		cssChildCombinatorReplaceValue: ["view", "text"],
 		cssRemoveHoverPseudoClass: true,
 		isMainChunk: true,
@@ -2640,7 +2760,7 @@ async function transformTailwindV3CssToWeapp(css, options) {
 }
 async function transformTailwindV3CssByTarget(css, target, options) {
 	if (target === "weapp") return transformTailwindV3CssToWeapp(css, options);
-	return hasCssMacroStyleOptions(options) ? transformCssMacroCss(css) : css;
+	return hasCssMacroStyleOptions(options) ? transformCssMacroCss(css, options) : css;
 }
 //#endregion
 //#region src/tailwindcss/v3-engine/generator.ts

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

@@ -1,19 +1,19 @@
 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-FAOHZmzh.js");
-const require_precheck = require("./precheck-D7gJSmJz.js");
+const require_v3_engine = require("./v3-engine-DwY4Fixu.js");
+const require_generator = require("./generator-BEXaaUzP.js");
+const require_incremental_runtime_class_set = require("./incremental-runtime-class-set-BE8RVbuz.js");
+const require_precheck = require("./precheck-D_KT1pis.js");
 const require_utils = require("./utils-D7Ygohep.js");
-const require_tailwindcss = require("./tailwindcss-B-e2RiXr.js");
-const require_bundle_state = require("./bundle-state-Ct_8GcSR.js");
+const require_tailwindcss = require("./tailwindcss-Cl7hUlYV.js");
+const require_bundle_state = require("./bundle-state-Co_ksa-C.js");
 let node_fs = require("node:fs");
 node_fs = require_chunk.__toESM(node_fs);
 let node_module = require("node:module");
 node_module = require_chunk.__toESM(node_module);
-let node_path = require("node:path");
-node_path = require_chunk.__toESM(node_path);
 let node_process = require("node:process");
 node_process = require_chunk.__toESM(node_process);
+let node_path = require("node:path");
+node_path = require_chunk.__toESM(node_path);
 //#region src/shared/tailwindcss-css-redirect.ts
 const moduleWithMutableResolve = node_module.default;
 const patched = /* @__PURE__ */ new WeakSet();

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

@@ -1,14 +1,14 @@
-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, r as emitHmrTiming, s as processCachedTask, t as createBundleRuntimeClassSetManager } from "./incremental-runtime-class-set-Boqi1QlB.mjs";
+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-mM9IVd1f.mjs";
+import { B as createDebug, W as resolveTailwindcssOptions, l as getRuntimeClassSetSignature } from "./v3-engine-C_KeUQG3.mjs";
+import { i as normalizeWeappTailwindcssGeneratorOptions } from "./generator-CpsHA4Wd.mjs";
+import { i as generateCssByGenerator, r as emitHmrTiming, s as processCachedTask, t as createBundleRuntimeClassSetManager } from "./incremental-runtime-class-set-BXYUYjCd.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";
+import { c as upsertTailwindV4CssSource, s as hasConfiguredTailwindV4CssRoots } from "./tailwindcss-udhXxMX9.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-DUIidcox.mjs";
 import Module, { createRequire } from "node:module";
 import fs from "node:fs";
-import path from "node:path";
 import process from "node:process";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 //#region src/shared/tailwindcss-css-redirect.ts
 const moduleWithMutableResolve = Module;

package/dist/webpack.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_webpack = require("./webpack-BXSWVdXh.js");
+const require_webpack = require("./webpack-DlHo84RT.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-Dx2AZpGU.mjs";
+import { n as weappTailwindcssPackageDir, t as WeappTailwindcss } from "./webpack-dva53gYi.mjs";
 export { WeappTailwindcss, WeappTailwindcss as weappTailwindcss, weappTailwindcssPackageDir };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weapp-tailwindcss",
-  "version": "5.0.0-next.31",
+  "version": "5.0.0-next.33",
   "description": "把 tailwindcss 原子化样式思想，带给小程序开发者们! bring tailwindcss to miniprogram developers!",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",
@@ -182,13 +182,13 @@
     "micromatch": "^4.0.8",
     "postcss-load-config": "^6.0.1",
     "semver": "~7.8.1",
-    "tailwindcss-patch": "9.3.7",
+    "tailwindcss-patch": "9.4.1",
     "yaml": "^2.9.0",
     "@weapp-tailwindcss/logger": "2.0.0-next.0",
-    "@weapp-tailwindcss/postcss": "3.0.0-next.8",
+    "@weapp-tailwindcss/postcss": "3.0.0-next.9",
     "@weapp-tailwindcss/reset": "0.1.1-next.1",
-    "@weapp-tailwindcss/shared": "2.0.0-next.0",
-    "tailwindcss-config": "2.0.0-next.2"
+    "@weapp-tailwindcss/shared": "2.0.0-next.1",
+    "tailwindcss-config": "2.0.0-next.3"
   },
   "devDependencies": {
     "@vue/compiler-dom": "^3.5.35",

package/dist/auto-TH1jG2UW.js

@@ -1,115 +0,0 @@
-const require_chunk = require("./chunk-C5U5_Hdc.js");
-const require_postcss = require("./postcss-CiYLsqZn.js");
-let postcss = require("postcss");
-postcss = require_chunk.__toESM(postcss);
-//#region src/css-macro/auto.ts
-const CSS_MACRO_PLUGIN_MARKER = "__weappTailwindcssCssMacro";
-const CSS_MACRO_STYLE_OPTIONS_MARKER = "__weappTailwindcssCssMacroEnabled";
-function markCssMacroPlugin(value) {
-	Object.defineProperty(value, CSS_MACRO_PLUGIN_MARKER, {
-		configurable: false,
-		enumerable: false,
-		value: true
-	});
-	return value;
-}
-function isCssMacroTailwindPlugin(value) {
-	return Boolean(value && (typeof value === "function" || typeof value === "object") && value["__weappTailwindcssCssMacro"] === true);
-}
-function hasCssMacroTailwindPlugin(plugins) {
-	if (!plugins) return false;
-	if (Array.isArray(plugins)) return plugins.some(isCssMacroTailwindPlugin);
-	if (typeof plugins === "object") return Object.values(plugins).some(isCssMacroTailwindPlugin);
-	return false;
-}
-function parseCssPluginRequest(params) {
-	const value = params.trim();
-	const quoted = /^(['"])(.*?)\1/.exec(value);
-	if (quoted) return quoted[2];
-	const url = /^url\(\s*(?:(['"])(.*?)\1|([^'")\s]+))\s*\)/.exec(value);
-	return url?.[2] ?? url?.[3];
-}
-function isCssMacroPluginRequest(request) {
-	return request === "weapp-tailwindcss/css-macro";
-}
-function hasCssMacroTailwindV4Directive(css) {
-	if (!css?.includes("css-macro")) return false;
-	try {
-		let found = false;
-		postcss.default.parse(css).walkAtRules("plugin", (rule) => {
-			if (isCssMacroPluginRequest(parseCssPluginRequest(rule.params))) found = true;
-		});
-		return found;
-	} catch {
-		return /@plugin\s+(?:url\(\s*)?["']weapp-tailwindcss\/css-macro["']/.test(css);
-	}
-}
-function isCssMacroPostcssPlugin(plugin) {
-	if (plugin === require_postcss.creator) return true;
-	return Boolean(plugin && (typeof plugin === "function" || typeof plugin === "object") && plugin.postcssPlugin === "postcss-weapp-tw-css-macro-plugin");
-}
-function withCssMacroPostcssPlugins(plugins) {
-	const macroPlugin = require_postcss.creator();
-	if (!plugins) return [macroPlugin];
-	if (Array.isArray(plugins)) return plugins.some(isCssMacroPostcssPlugin) ? plugins : [...plugins, macroPlugin];
-	if (typeof plugins === "object") {
-		const values = Object.values(plugins).filter(Boolean);
-		if (values.some(isCssMacroPostcssPlugin)) return values;
-		return [...values, macroPlugin];
-	}
-	return [macroPlugin];
-}
-function withCssMacroStyleOptions(options) {
-	const postcssOptions = options?.postcssOptions;
-	return {
-		...options,
-		[CSS_MACRO_STYLE_OPTIONS_MARKER]: true,
-		postcssOptions: {
-			...postcssOptions,
-			plugins: withCssMacroPostcssPlugins(postcssOptions?.plugins)
-		}
-	};
-}
-function hasCssMacroStyleOptions(options) {
-	return Boolean(options?.[CSS_MACRO_STYLE_OPTIONS_MARKER]);
-}
-async function transformCssMacroCss(css) {
-	return (await (0, postcss.default)([require_postcss.creator()]).process(css, { from: void 0 })).css;
-}
-//#endregion
-Object.defineProperty(exports, "hasCssMacroStyleOptions", {
-	enumerable: true,
-	get: function() {
-		return hasCssMacroStyleOptions;
-	}
-});
-Object.defineProperty(exports, "hasCssMacroTailwindPlugin", {
-	enumerable: true,
-	get: function() {
-		return hasCssMacroTailwindPlugin;
-	}
-});
-Object.defineProperty(exports, "hasCssMacroTailwindV4Directive", {
-	enumerable: true,
-	get: function() {
-		return hasCssMacroTailwindV4Directive;
-	}
-});
-Object.defineProperty(exports, "markCssMacroPlugin", {
-	enumerable: true,
-	get: function() {
-		return markCssMacroPlugin;
-	}
-});
-Object.defineProperty(exports, "transformCssMacroCss", {
-	enumerable: true,
-	get: function() {
-		return transformCssMacroCss;
-	}
-});
-Object.defineProperty(exports, "withCssMacroStyleOptions", {
-	enumerable: true,
-	get: function() {
-		return withCssMacroStyleOptions;
-	}
-});

package/dist/auto-XyKTOP7B.mjs

@@ -1,78 +0,0 @@
-import { n as creator } from "./postcss-C7BMYpEF.mjs";
-import postcss from "postcss";
-//#region src/css-macro/auto.ts
-const CSS_MACRO_PLUGIN_MARKER = "__weappTailwindcssCssMacro";
-const CSS_MACRO_STYLE_OPTIONS_MARKER = "__weappTailwindcssCssMacroEnabled";
-function markCssMacroPlugin(value) {
-	Object.defineProperty(value, CSS_MACRO_PLUGIN_MARKER, {
-		configurable: false,
-		enumerable: false,
-		value: true
-	});
-	return value;
-}
-function isCssMacroTailwindPlugin(value) {
-	return Boolean(value && (typeof value === "function" || typeof value === "object") && value["__weappTailwindcssCssMacro"] === true);
-}
-function hasCssMacroTailwindPlugin(plugins) {
-	if (!plugins) return false;
-	if (Array.isArray(plugins)) return plugins.some(isCssMacroTailwindPlugin);
-	if (typeof plugins === "object") return Object.values(plugins).some(isCssMacroTailwindPlugin);
-	return false;
-}
-function parseCssPluginRequest(params) {
-	const value = params.trim();
-	const quoted = /^(['"])(.*?)\1/.exec(value);
-	if (quoted) return quoted[2];
-	const url = /^url\(\s*(?:(['"])(.*?)\1|([^'")\s]+))\s*\)/.exec(value);
-	return url?.[2] ?? url?.[3];
-}
-function isCssMacroPluginRequest(request) {
-	return request === "weapp-tailwindcss/css-macro";
-}
-function hasCssMacroTailwindV4Directive(css) {
-	if (!css?.includes("css-macro")) return false;
-	try {
-		let found = false;
-		postcss.parse(css).walkAtRules("plugin", (rule) => {
-			if (isCssMacroPluginRequest(parseCssPluginRequest(rule.params))) found = true;
-		});
-		return found;
-	} catch {
-		return /@plugin\s+(?:url\(\s*)?["']weapp-tailwindcss\/css-macro["']/.test(css);
-	}
-}
-function isCssMacroPostcssPlugin(plugin) {
-	if (plugin === creator) return true;
-	return Boolean(plugin && (typeof plugin === "function" || typeof plugin === "object") && plugin.postcssPlugin === "postcss-weapp-tw-css-macro-plugin");
-}
-function withCssMacroPostcssPlugins(plugins) {
-	const macroPlugin = creator();
-	if (!plugins) return [macroPlugin];
-	if (Array.isArray(plugins)) return plugins.some(isCssMacroPostcssPlugin) ? plugins : [...plugins, macroPlugin];
-	if (typeof plugins === "object") {
-		const values = Object.values(plugins).filter(Boolean);
-		if (values.some(isCssMacroPostcssPlugin)) return values;
-		return [...values, macroPlugin];
-	}
-	return [macroPlugin];
-}
-function withCssMacroStyleOptions(options) {
-	const postcssOptions = options?.postcssOptions;
-	return {
-		...options,
-		[CSS_MACRO_STYLE_OPTIONS_MARKER]: true,
-		postcssOptions: {
-			...postcssOptions,
-			plugins: withCssMacroPostcssPlugins(postcssOptions?.plugins)
-		}
-	};
-}
-function hasCssMacroStyleOptions(options) {
-	return Boolean(options?.[CSS_MACRO_STYLE_OPTIONS_MARKER]);
-}
-async function transformCssMacroCss(css) {
-	return (await postcss([creator()]).process(css, { from: void 0 })).css;
-}
-//#endregion
-export { transformCssMacroCss as a, markCssMacroPlugin as i, hasCssMacroTailwindPlugin as n, withCssMacroStyleOptions as o, hasCssMacroTailwindV4Directive as r, hasCssMacroStyleOptions as t };