@maizzle/framework 6.0.0-rc.9 → 6.0.0

package/dist/transformers/{safeClassNames.mjs → safeSelectors.js}

@@ -1,9 +1,10 @@
-import { walk } from "../utils/ast/walker.mjs";
-import "../utils/ast/index.mjs";
+import { parse } from "../utils/ast/parser.js";
+import { walk } from "../utils/ast/walker.js";
+import { serialize } from "../utils/ast/serializer.js";
+import "../utils/ast/index.js";
 import postcss from "postcss";
 import safeParser from "postcss-safe-parser";
-
-//#region src/transformers/safeClassNames.ts
+//#region src/transformers/safeSelectors.ts
 const DEFAULT_REPLACEMENTS = {
 	":": "-",
 	"/": "-",
@@ -50,7 +51,19 @@ function processCssSelectors(css, replacements) {
 	const selectorRegex = new RegExp(`\\\\(${Object.keys(replacements).map(escapeForRegex).join("|")})`, "g");
 	return postcss([(root) => {
 		root.walkRules((rule) => {
-			rule.selector = rule.selector.replace(selectorRegex, (_matched, char) => replacements[char] ?? _matched).replaceAll("\\2c ", "_");
+			rule.selector = rule.selector.replace(selectorRegex, (matched, char, offset, str) => {
+				/**
+				* Yahoo Mail wraps content in a class literally named `&`, so
+				* the selector `.\&` must be preserved. Detect it as a
+				* `\&` that follows a `.` and ends the class atom
+				* (space, combinator, comma, `{`, or end-of-str).
+				*/
+				if (char === "&" && str[offset - 1] === ".") {
+					const next = str[offset + 2];
+					if (next === void 0 || /[\s,{>~+)]/.test(next)) return matched;
+				}
+				return replacements[char] ?? matched;
+			}).replaceAll("\\2c ", "_");
 		});
 	}]).process(css, { parser: safeParser }).css;
 }
@@ -67,7 +80,7 @@ function processClassAttr(classStr, replacements) {
 	}).join(" ");
 }
 /**
-* Safe class names transformer.
+* Safe selectors transformer.
 *
 * Replaces unsafe characters (`:`, `/`, `[`, `]`, etc.) in:
 * - CSS selectors inside `<style>` tags
@@ -79,8 +92,25 @@ function processClassAttr(classStr, replacements) {
 * Enabled by default. Disable by setting `css.safe` to `false`.
 * Customize replacements by passing a `Record<string, string>` — user
 * values are merged on top of the defaults.
+*
+* @param html   HTML string to transform.
+* @param config CSS config (see {@link CssConfig}).
+* @returns      The transformed HTML string.
+*
+* @example
+* import { safeSelectors } from '@maizzle/framework'
+*
+* const out = safeSelectors('<div class="sm:text-base"></div>')
 */
-function safeClassNames(dom, config = {}) {
+function safeSelectors(html, config = {}) {
+	return serialize(safeSelectorsDom(parse(html), config));
+}
+/**
+* DOM-form of {@link safeSelectors} used by the internal transformer pipeline.
+* Takes a parsed DOM, returns a parsed DOM — avoids redundant
+* serialize/parse round-trips when chained with other transformers.
+*/
+function safeSelectorsDom(dom, config = {}) {
 	const option = config.safe ?? true;
 	if (!option) return dom;
 	const replacements = option && typeof option === "object" ? {
@@ -97,7 +127,7 @@ function safeClassNames(dom, config = {}) {
 	});
 	return dom;
 }
-
 //#endregion
-export { safeClassNames };
-//# sourceMappingURL=safeClassNames.mjs.map
+export { safeSelectors, safeSelectorsDom };
+
+//# sourceMappingURL=safeSelectors.js.map

package/dist/transformers/safeSelectors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeSelectors.js","names":[],"sources":["../../src/transformers/safeSelectors.ts"],"sourcesContent":["import postcss from 'postcss'\nimport safeParser from 'postcss-safe-parser'\nimport type { ChildNode, Element } from 'domhandler'\nimport { parse, serialize, walk } from '../utils/ast/index.ts'\nimport type { CssConfig } from '../types/config.ts'\n\nconst DEFAULT_REPLACEMENTS: Record<string, string> = {\n  ':': '-',\n  '/': '-',\n  '%': 'pc',\n  '.': '_',\n  ',': '_',\n  '#': '_',\n  '[': '',\n  ']': '',\n  '(': '',\n  ')': '',\n  '{': '',\n  '}': '',\n  '!': '-i',\n  '&': 'and-',\n  '<': 'lt-',\n  '=': 'eq-',\n  '>': 'gt-',\n  '|': 'or-',\n  '@': 'at-',\n  '?': 'q-',\n  '\\\\': '-',\n  '\"': '-',\n  \"'\": '-',\n  '*': '-',\n  '+': '-',\n  ';': '-',\n  '^': '-',\n  '`': '-',\n  '~': '-',\n  '$': '-',\n}\n\nfunction escapeForRegex(s: string): string {\n  return s.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n}\n\n/**\n * Replace escaped special characters in CSS selectors.\n *\n * Tailwind generates selectors like `.sm\\:text-base`. This function\n * replaces the `\\:` with `-` (or whatever the configured replacement is)\n * so the selector becomes `.sm-text-base`, which is safe for email clients.\n */\nfunction processCssSelectors(css: string, replacements: Record<string, string>): string {\n  // Matches \\<char> in CSS selectors — e.g. \\: \\/ \\. \\[ etc.\n  const selectorRegex = new RegExp(\n    `\\\\\\\\(${Object.keys(replacements).map(escapeForRegex).join('|')})`,\n    'g',\n  )\n\n  return postcss([\n    (root: postcss.Root) => {\n      root.walkRules((rule: postcss.Rule) => {\n        rule.selector = rule.selector\n          .replace(selectorRegex, (matched, char, offset, str) => {\n            /**\n             * Yahoo Mail wraps content in a class literally named `&`, so\n             * the selector `.\\&` must be preserved. Detect it as a\n             * `\\&` that follows a `.` and ends the class atom\n             * (space, combinator, comma, `{`, or end-of-str).\n             */\n            if (char === '&' && str[offset - 1] === '.') {\n              const next = str[offset + 2]\n              if (next === undefined || /[\\s,{>~+)]/.test(next)) return matched\n            }\n            return replacements[char] ?? matched\n          })\n          // Handle CSS unicode escape for comma (\\2c  → _)\n          .replaceAll('\\\\2c ', '_')\n      })\n    },\n  ]).process(css, { parser: safeParser }).css\n}\n\n/**\n * Replace unsafe special characters in a class attribute value.\n *\n * Splits on whitespace and replaces each char from the replacements map\n * in each class token individually.\n */\nfunction processClassAttr(classStr: string, replacements: Record<string, string>): string {\n  return classStr\n    .split(/\\s+/)\n    .filter(Boolean)\n    .map((cls) => {\n      for (const [from, to] of Object.entries(replacements)) {\n        cls = cls.split(from).join(to)\n      }\n      return cls\n    })\n    .join(' ')\n}\n\n/**\n * Safe selectors transformer.\n *\n * Replaces unsafe characters (`:`, `/`, `[`, `]`, etc.) in:\n * - CSS selectors inside `<style>` tags\n * - HTML `class` attributes\n *\n * This makes Tailwind utility classes like `sm:text-base` safe for\n * email clients that cannot handle escaped characters in class names.\n *\n * Enabled by default. Disable by setting `css.safe` to `false`.\n * Customize replacements by passing a `Record<string, string>` — user\n * values are merged on top of the defaults.\n *\n * @param html   HTML string to transform.\n * @param config CSS config (see {@link CssConfig}).\n * @returns      The transformed HTML string.\n *\n * @example\n * import { safeSelectors } from '@maizzle/framework'\n *\n * const out = safeSelectors('<div class=\"sm:text-base\"></div>')\n */\nexport function safeSelectors(html: string, config: CssConfig = {}): string {\n  return serialize(safeSelectorsDom(parse(html), config))\n}\n\n/**\n * DOM-form of {@link safeSelectors} used by the internal transformer pipeline.\n * Takes a parsed DOM, returns a parsed DOM — avoids redundant\n * serialize/parse round-trips when chained with other transformers.\n */\nexport function safeSelectorsDom(dom: ChildNode[], config: CssConfig = {}): ChildNode[] {\n  const option = config.safe ?? true\n\n  if (!option) return dom\n\n  const replacements: Record<string, string> =\n    option && typeof option === 'object'\n      ? { ...DEFAULT_REPLACEMENTS, ...option }\n      : DEFAULT_REPLACEMENTS\n\n  walk(dom, (node) => {\n    const el = node as Element\n\n    // Process CSS selectors inside <style> tags\n    if (el.name === 'style' && el.children?.length) {\n      const text = el.children.find((c) => c.type === 'text') as any\n      if (text?.data?.trim()) {\n        text.data = processCssSelectors(text.data, replacements)\n      }\n    }\n\n    // Replace special chars in class attributes\n    if ('attribs' in el && el.attribs?.class) {\n      el.attribs.class = processClassAttr(el.attribs.class, replacements)\n    }\n  })\n\n  return dom\n}\n"],"mappings":";;;;;;;AAMA,MAAM,uBAA+C;CACnD,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,MAAM;CACN,MAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;AACP;AAEA,SAAS,eAAe,GAAmB;CACzC,OAAO,EAAE,QAAQ,uBAAuB,MAAM;AAChD;;;;;;;;AASA,SAAS,oBAAoB,KAAa,cAA8C;CAEtF,MAAM,gBAAgB,IAAI,OACxB,QAAQ,OAAO,KAAK,YAAY,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,KAAK,GAAG,EAAE,IAChE,GACF;CAEA,OAAO,QAAQ,EACZ,SAAuB;EACtB,KAAK,WAAW,SAAuB;GACrC,KAAK,WAAW,KAAK,SAClB,QAAQ,gBAAgB,SAAS,MAAM,QAAQ,QAAQ;;;;;;;IAOtD,IAAI,SAAS,OAAO,IAAI,SAAS,OAAO,KAAK;KAC3C,MAAM,OAAO,IAAI,SAAS;KAC1B,IAAI,SAAS,KAAA,KAAa,aAAa,KAAK,IAAI,GAAG,OAAO;IAC5D;IACA,OAAO,aAAa,SAAS;GAC/B,CAAC,CAAC,CAED,WAAW,SAAS,GAAG;EAC5B,CAAC;CACH,CACF,CAAC,CAAC,CAAC,QAAQ,KAAK,EAAE,QAAQ,WAAW,CAAC,CAAC,CAAC;AAC1C;;;;;;;AAQA,SAAS,iBAAiB,UAAkB,cAA8C;CACxF,OAAO,SACJ,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO,CAAC,CACf,KAAK,QAAQ;EACZ,KAAK,MAAM,CAAC,MAAM,OAAO,OAAO,QAAQ,YAAY,GAClD,MAAM,IAAI,MAAM,IAAI,CAAC,CAAC,KAAK,EAAE;EAE/B,OAAO;CACT,CAAC,CAAC,CACD,KAAK,GAAG;AACb;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAAc,MAAc,SAAoB,CAAC,GAAW;CAC1E,OAAO,UAAU,iBAAiB,MAAM,IAAI,GAAG,MAAM,CAAC;AACxD;;;;;;AAOA,SAAgB,iBAAiB,KAAkB,SAAoB,CAAC,GAAgB;CACtF,MAAM,SAAS,OAAO,QAAQ;CAE9B,IAAI,CAAC,QAAQ,OAAO;CAEpB,MAAM,eACJ,UAAU,OAAO,WAAW,WACxB;EAAE,GAAG;EAAsB,GAAG;CAAO,IACrC;CAEN,KAAK,MAAM,SAAS;EAClB,MAAM,KAAK;EAGX,IAAI,GAAG,SAAS,WAAW,GAAG,UAAU,QAAQ;GAC9C,MAAM,OAAO,GAAG,SAAS,MAAM,MAAM,EAAE,SAAS,MAAM;GACtD,IAAI,MAAM,MAAM,KAAK,GACnB,KAAK,OAAO,oBAAoB,KAAK,MAAM,YAAY;EAE3D;EAGA,IAAI,aAAa,MAAM,GAAG,SAAS,OACjC,GAAG,QAAQ,QAAQ,iBAAiB,GAAG,QAAQ,OAAO,YAAY;CAEtE,CAAC;CAED,OAAO;AACT"}

package/dist/transformers/shorthandCss.d.ts

@@ -0,0 +1,47 @@
+import { ChildNode } from "domhandler";
+
+//#region src/transformers/shorthandCss.d.ts
+/**
+ * Options for the `shorthandCss` transformer.
+ */
+interface ShorthandCssOptions {
+  /**
+   * Restrict the transform to a list of HTML tag names. Omit to apply to
+   * every element with a `style` attribute.
+   *
+   * @example ['td', 'div']
+   */
+  tags?: string[];
+}
+/**
+ * Rewrite longhand CSS inside inline `style` attributes with shorthand
+ * syntax. Works with margin, padding, and border when all sides are
+ * specified.
+ *
+ * For example:
+ * `margin-left: 2px; margin-right: 2px; margin-top: 4px; margin-bottom: 4px`
+ * becomes:
+ * `margin: 4px 2px`
+ *
+ * @param html    HTML string to transform.
+ * @param options Optional Maizzle options (`tags`).
+ * @returns       The transformed HTML string.
+ *
+ * @example
+ * import { shorthandCss } from '@maizzle/framework'
+ *
+ * const out = shorthandCss(
+ *   '<p style="margin-top: 4px; margin-right: 2px; margin-bottom: 4px; margin-left: 2px;">x</p>',
+ *   { tags: ['p'] },
+ * )
+ */
+declare function shorthandCss(html: string, options?: ShorthandCssOptions): string;
+/**
+ * DOM-form of {@link shorthandCss} used by the internal transformer
+ * pipeline. Takes a parsed DOM, returns a parsed DOM — avoids redundant
+ * serialize/parse round-trips when chained with other transformers.
+ */
+declare function shorthandCssDom(dom: ChildNode[], options?: ShorthandCssOptions): ChildNode[];
+//#endregion
+export { ShorthandCssOptions, shorthandCss, shorthandCssDom };
+//# sourceMappingURL=shorthandCss.d.ts.map

package/dist/transformers/shorthandCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthandCss.d.ts","names":[],"sources":["../../src/transformers/shorthandCss.ts"],"mappings":";;;;;AASA;UAAiB,mBAAA;;;AAOX;AAyBN;;;EAzBE,IAAI;AAAA;;;;AAyBsE;AAS5E;;;;;;;;;;;;;;AAA+F;;;;iBAT/E,YAAA,CAAa,IAAA,UAAc,OAAA,GAAS,mBAAwB;;;;;;iBAS5D,eAAA,CAAgB,GAAA,EAAK,SAAA,IAAa,OAAA,GAAS,mBAAA,GAA2B,SAAA"}

package/dist/transformers/shorthandCss.js

@@ -0,0 +1,92 @@
+import { parse } from "../utils/ast/parser.js";
+import { walk } from "../utils/ast/walker.js";
+import { serialize } from "../utils/ast/serializer.js";
+import "../utils/ast/index.js";
+import postcss from "postcss";
+import safeParser from "postcss-safe-parser";
+import mergeLonghand from "postcss-merge-longhand";
+//#region src/transformers/shorthandCss.ts
+/**
+* Rewrite longhand CSS inside inline `style` attributes with shorthand
+* syntax. Works with margin, padding, and border when all sides are
+* specified.
+*
+* For example:
+* `margin-left: 2px; margin-right: 2px; margin-top: 4px; margin-bottom: 4px`
+* becomes:
+* `margin: 4px 2px`
+*
+* @param html    HTML string to transform.
+* @param options Optional Maizzle options (`tags`).
+* @returns       The transformed HTML string.
+*
+* @example
+* import { shorthandCss } from '@maizzle/framework'
+*
+* const out = shorthandCss(
+*   '<p style="margin-top: 4px; margin-right: 2px; margin-bottom: 4px; margin-left: 2px;">x</p>',
+*   { tags: ['p'] },
+* )
+*/
+function shorthandCss(html, options = {}) {
+	return serialize(shorthandCssDom(parse(html), options));
+}
+/**
+* DOM-form of {@link shorthandCss} used by the internal transformer
+* pipeline. Takes a parsed DOM, returns a parsed DOM — avoids redundant
+* serialize/parse round-trips when chained with other transformers.
+*/
+function shorthandCssDom(dom, options = {}) {
+	const allowedTags = options.tags ?? [];
+	const hasTagFilter = allowedTags.length > 0;
+	/**
+	* Merge longhand within a single inline-style value. Returns the merged
+	* string when shorter, otherwise the original. Wraps the value in a
+	* dummy selector since postcss-merge-longhand operates on rules.
+	*/
+	const mergeStyleValue = (styleValue) => {
+		try {
+			const { css } = postcss().use(mergeLonghand).process(`div { ${styleValue} }`, { parser: safeParser });
+			const match = css.match(/div\s*\{\s*([^}]+)\s*\}/);
+			if (match && match[1]) {
+				const merged = match[1].trim();
+				if (merged !== styleValue) return merged;
+			}
+		} catch {}
+		return styleValue;
+	};
+	walk(dom, (node) => {
+		/**
+		* MSO conditional comments carry their own inline-style attributes
+		* (e.g. `<!--[if mso]><td style="…"><![endif]-->`) as opaque text.
+		* The element walker can't see them, so without this branch the td/
+		* v:rect styles inside comments stay longhand even when the visible
+		* div has already been merged. Match each `style="…"` substring,
+		* run it through mergeLonghand, splice back.
+		*
+		* Tag filter intentionally bypassed: the user can't address MSO td
+		* elements (they don't parse as elements), and these comments
+		* always wrap email-layout primitives anyway.
+		*/
+		if (node.type === "comment") {
+			const data = node.data;
+			if (!data || !data.includes("style=\"")) return;
+			const newData = data.replace(/style="([^"]*)"/g, (full, value) => {
+				const merged = mergeStyleValue(value);
+				return merged === value ? full : `style="${merged}"`;
+			});
+			if (newData !== data) node.data = newData;
+			return;
+		}
+		const el = node;
+		if (!el.attribs?.style) return;
+		if (hasTagFilter && !allowedTags.includes(el.name)) return;
+		const merged = mergeStyleValue(el.attribs.style);
+		if (merged !== el.attribs.style) el.attribs.style = merged;
+	});
+	return dom;
+}
+//#endregion
+export { shorthandCss, shorthandCssDom };
+
+//# sourceMappingURL=shorthandCss.js.map

package/dist/transformers/shorthandCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shorthandCss.js","names":[],"sources":["../../src/transformers/shorthandCss.ts"],"sourcesContent":["import postcss from 'postcss'\nimport safeParser from 'postcss-safe-parser'\nimport mergeLonghand from 'postcss-merge-longhand'\nimport type { ChildNode, Element } from 'domhandler'\nimport { parse, serialize, walk } from '../utils/ast/index.ts'\n\n/**\n * Options for the `shorthandCss` transformer.\n */\nexport interface ShorthandCssOptions {\n  /**\n   * Restrict the transform to a list of HTML tag names. Omit to apply to\n   * every element with a `style` attribute.\n   *\n   * @example ['td', 'div']\n   */\n  tags?: string[]\n}\n\n/**\n * Rewrite longhand CSS inside inline `style` attributes with shorthand\n * syntax. Works with margin, padding, and border when all sides are\n * specified.\n *\n * For example:\n * `margin-left: 2px; margin-right: 2px; margin-top: 4px; margin-bottom: 4px`\n * becomes:\n * `margin: 4px 2px`\n *\n * @param html    HTML string to transform.\n * @param options Optional Maizzle options (`tags`).\n * @returns       The transformed HTML string.\n *\n * @example\n * import { shorthandCss } from '@maizzle/framework'\n *\n * const out = shorthandCss(\n *   '<p style=\"margin-top: 4px; margin-right: 2px; margin-bottom: 4px; margin-left: 2px;\">x</p>',\n *   { tags: ['p'] },\n * )\n */\nexport function shorthandCss(html: string, options: ShorthandCssOptions = {}): string {\n  return serialize(shorthandCssDom(parse(html), options))\n}\n\n/**\n * DOM-form of {@link shorthandCss} used by the internal transformer\n * pipeline. Takes a parsed DOM, returns a parsed DOM — avoids redundant\n * serialize/parse round-trips when chained with other transformers.\n */\nexport function shorthandCssDom(dom: ChildNode[], options: ShorthandCssOptions = {}): ChildNode[] {\n  const allowedTags = options.tags ?? []\n  const hasTagFilter = allowedTags.length > 0\n\n  /**\n   * Merge longhand within a single inline-style value. Returns the merged\n   * string when shorter, otherwise the original. Wraps the value in a\n   * dummy selector since postcss-merge-longhand operates on rules.\n   */\n  const mergeStyleValue = (styleValue: string): string => {\n    try {\n      const { css } = postcss()\n        .use(mergeLonghand)\n        .process(`div { ${styleValue} }`, { parser: safeParser })\n      const match = css.match(/div\\s*\\{\\s*([^}]+)\\s*\\}/)\n      if (match && match[1]) {\n        const merged = match[1].trim()\n        if (merged !== styleValue) return merged\n      }\n    }\n    catch {}\n    return styleValue\n  }\n\n  walk(dom, (node) => {\n    /**\n     * MSO conditional comments carry their own inline-style attributes\n     * (e.g. `<!--[if mso]><td style=\"…\"><![endif]-->`) as opaque text.\n     * The element walker can't see them, so without this branch the td/\n     * v:rect styles inside comments stay longhand even when the visible\n     * div has already been merged. Match each `style=\"…\"` substring,\n     * run it through mergeLonghand, splice back.\n     *\n     * Tag filter intentionally bypassed: the user can't address MSO td\n     * elements (they don't parse as elements), and these comments\n     * always wrap email-layout primitives anyway.\n     */\n    if (node.type === 'comment') {\n      const data = (node as any).data as string\n      if (!data || !data.includes('style=\"')) return\n      const newData = data.replace(/style=\"([^\"]*)\"/g, (full, value) => {\n        const merged = mergeStyleValue(value)\n        return merged === value ? full : `style=\"${merged}\"`\n      })\n      if (newData !== data) (node as any).data = newData\n      return\n    }\n\n    const el = node as Element\n\n    if (!el.attribs?.style) return\n    if (hasTagFilter && !allowedTags.includes(el.name)) return\n\n    const merged = mergeStyleValue(el.attribs.style)\n    if (merged !== el.attribs.style) el.attribs.style = merged\n  })\n\n  return dom\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,aAAa,MAAc,UAA+B,CAAC,GAAW;CACpF,OAAO,UAAU,gBAAgB,MAAM,IAAI,GAAG,OAAO,CAAC;AACxD;;;;;;AAOA,SAAgB,gBAAgB,KAAkB,UAA+B,CAAC,GAAgB;CAChG,MAAM,cAAc,QAAQ,QAAQ,CAAC;CACrC,MAAM,eAAe,YAAY,SAAS;;;;;;CAO1C,MAAM,mBAAmB,eAA+B;EACtD,IAAI;GACF,MAAM,EAAE,QAAQ,QAAQ,CAAC,CACtB,IAAI,aAAa,CAAC,CAClB,QAAQ,SAAS,WAAW,KAAK,EAAE,QAAQ,WAAW,CAAC;GAC1D,MAAM,QAAQ,IAAI,MAAM,yBAAyB;GACjD,IAAI,SAAS,MAAM,IAAI;IACrB,MAAM,SAAS,MAAM,EAAE,CAAC,KAAK;IAC7B,IAAI,WAAW,YAAY,OAAO;GACpC;EACF,QACM,CAAC;EACP,OAAO;CACT;CAEA,KAAK,MAAM,SAAS;;;;;;;;;;;;;EAalB,IAAI,KAAK,SAAS,WAAW;GAC3B,MAAM,OAAQ,KAAa;GAC3B,IAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,UAAS,GAAG;GACxC,MAAM,UAAU,KAAK,QAAQ,qBAAqB,MAAM,UAAU;IAChE,MAAM,SAAS,gBAAgB,KAAK;IACpC,OAAO,WAAW,QAAQ,OAAO,UAAU,OAAO;GACpD,CAAC;GACD,IAAI,YAAY,MAAM,KAAc,OAAO;GAC3C;EACF;EAEA,MAAM,KAAK;EAEX,IAAI,CAAC,GAAG,SAAS,OAAO;EACxB,IAAI,gBAAgB,CAAC,YAAY,SAAS,GAAG,IAAI,GAAG;EAEpD,MAAM,SAAS,gBAAgB,GAAG,QAAQ,KAAK;EAC/C,IAAI,WAAW,GAAG,QAAQ,OAAO,GAAG,QAAQ,QAAQ;CACtD,CAAC;CAED,OAAO;AACT"}

package/dist/transformers/sixHex.d.ts

@@ -0,0 +1,25 @@
+import { ChildNode } from "domhandler";
+
+//#region src/transformers/sixHex.d.ts
+/**
+ * Convert 3-digit HEX color codes to 6-digit in `bgcolor` and `color`
+ * attributes, for better email client compatibility.
+ *
+ * @param html HTML string to transform.
+ * @returns    The transformed HTML string.
+ *
+ * @example
+ * import { sixHex } from '@maizzle/framework'
+ *
+ * const out = sixHex('<font color="#abc">x</font>')
+ */
+declare function sixHex(html: string): string;
+/**
+ * DOM-form of {@link sixHex} used by the internal transformer pipeline.
+ * Takes a parsed DOM, returns a parsed DOM — avoids redundant
+ * serialize/parse round-trips when chained with other transformers.
+ */
+declare function sixHexDom(dom: ChildNode[]): ChildNode[];
+//#endregion
+export { sixHex, sixHexDom };
+//# sourceMappingURL=sixHex.d.ts.map

package/dist/transformers/sixHex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sixHex.d.ts","names":[],"sources":["../../src/transformers/sixHex.ts"],"mappings":";;;;;AAkBA;;;;AAAmC;AASnC;;;;;iBATgB,MAAA,CAAO,IAAY;;;AASmB;;;iBAAtC,SAAA,CAAU,GAAA,EAAK,SAAA,KAAc,SAAS"}

package/dist/transformers/sixHex.js

@@ -0,0 +1,42 @@
+import { parse } from "../utils/ast/parser.js";
+import { walk } from "../utils/ast/walker.js";
+import { serialize } from "../utils/ast/serializer.js";
+import "../utils/ast/index.js";
+import { conv } from "color-shorthand-hex-to-six-digit";
+//#region src/transformers/sixHex.ts
+const targets = new Set(["bgcolor", "color"]);
+/**
+* Convert 3-digit HEX color codes to 6-digit in `bgcolor` and `color`
+* attributes, for better email client compatibility.
+*
+* @param html HTML string to transform.
+* @returns    The transformed HTML string.
+*
+* @example
+* import { sixHex } from '@maizzle/framework'
+*
+* const out = sixHex('<font color="#abc">x</font>')
+*/
+function sixHex(html) {
+	return serialize(sixHexDom(parse(html)));
+}
+/**
+* DOM-form of {@link sixHex} used by the internal transformer pipeline.
+* Takes a parsed DOM, returns a parsed DOM — avoids redundant
+* serialize/parse round-trips when chained with other transformers.
+*/
+function sixHexDom(dom) {
+	walk(dom, (node) => {
+		const el = node;
+		if (!el.attribs) return;
+		for (const attr of targets) {
+			const value = el.attribs[attr];
+			if (value) el.attribs[attr] = conv(value);
+		}
+	});
+	return dom;
+}
+//#endregion
+export { sixHex, sixHexDom };
+
+//# sourceMappingURL=sixHex.js.map

package/dist/transformers/sixHex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sixHex.js","names":[],"sources":["../../src/transformers/sixHex.ts"],"sourcesContent":["import { conv } from 'color-shorthand-hex-to-six-digit'\nimport type { ChildNode, Element } from 'domhandler'\nimport { parse, serialize, walk } from '../utils/ast/index.ts'\n\nconst targets = new Set(['bgcolor', 'color'])\n\n/**\n * Convert 3-digit HEX color codes to 6-digit in `bgcolor` and `color`\n * attributes, for better email client compatibility.\n *\n * @param html HTML string to transform.\n * @returns    The transformed HTML string.\n *\n * @example\n * import { sixHex } from '@maizzle/framework'\n *\n * const out = sixHex('<font color=\"#abc\">x</font>')\n */\nexport function sixHex(html: string): string {\n  return serialize(sixHexDom(parse(html)))\n}\n\n/**\n * DOM-form of {@link sixHex} used by the internal transformer pipeline.\n * Takes a parsed DOM, returns a parsed DOM — avoids redundant\n * serialize/parse round-trips when chained with other transformers.\n */\nexport function sixHexDom(dom: ChildNode[]): ChildNode[] {\n  walk(dom, (node) => {\n    const el = node as Element\n\n    if (!el.attribs) {\n      return\n    }\n\n    for (const attr of targets) {\n      const value = el.attribs[attr]\n\n      if (value) {\n        el.attribs[attr] = conv(value)\n      }\n    }\n  })\n\n  return dom\n}\n"],"mappings":";;;;;;AAIA,MAAM,UAAU,IAAI,IAAI,CAAC,WAAW,OAAO,CAAC;;;;;;;;;;;;;AAc5C,SAAgB,OAAO,MAAsB;CAC3C,OAAO,UAAU,UAAU,MAAM,IAAI,CAAC,CAAC;AACzC;;;;;;AAOA,SAAgB,UAAU,KAA+B;CACvD,KAAK,MAAM,SAAS;EAClB,MAAM,KAAK;EAEX,IAAI,CAAC,GAAG,SACN;EAGF,KAAK,MAAM,QAAQ,SAAS;GAC1B,MAAM,QAAQ,GAAG,QAAQ;GAEzB,IAAI,OACF,GAAG,QAAQ,QAAQ,KAAK,KAAK;EAEjC;CACF,CAAC;CAED,OAAO;AACT"}

package/dist/transformers/tailwindComponent.d.ts

@@ -0,0 +1,16 @@
+import { MaizzleConfig } from "../types/config.js";
+import { TailwindBlock } from "../composables/renderContext.js";
+import { ChildNode } from "domhandler";
+
+//#region src/transformers/tailwindComponent.d.ts
+/**
+ * Compile Tailwind CSS for each top-level <Tailwind> block in the render
+ * context. Nested <Tailwind> instances are flattened: their classes flow
+ * up to the outermost block, their `#config` slot (if any) is ignored.
+ * One <style> per outermost block is appended to <head>; marker comments
+ * are stripped after.
+ */
+declare function tailwindComponent(dom: ChildNode[], blocks: TailwindBlock[], config: MaizzleConfig, filePath?: string): Promise<ChildNode[]>;
+//#endregion
+export { tailwindComponent };
+//# sourceMappingURL=tailwindComponent.d.ts.map

package/dist/transformers/tailwindComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwindComponent.d.ts","names":[],"sources":["../../src/transformers/tailwindComponent.ts"],"mappings":";;;;;;;AA0BA;;;;;iBAAsB,iBAAA,CACpB,GAAA,EAAK,SAAA,IACL,MAAA,EAAQ,aAAA,IACR,MAAA,EAAQ,aAAA,EACR,QAAA,YACC,OAAA,CAAQ,SAAA"}

package/dist/transformers/tailwindComponent.js

@@ -0,0 +1,101 @@
+import { walk } from "../utils/ast/walker.js";
+import "../utils/ast/index.js";
+import { compileTailwindCss } from "../utils/compileTailwindCss.js";
+import { resolve } from "pathe";
+//#region src/transformers/tailwindComponent.ts
+const DEFAULT_SEED = "@import \"@maizzle/tailwindcss\" source(none);";
+const OPEN_RE = /^mz-tw:(\S+)$/;
+const CLOSE_RE = /^\/mz-tw:(\S+)$/;
+/**
+* Compile Tailwind CSS for each top-level <Tailwind> block in the render
+* context. Nested <Tailwind> instances are flattened: their classes flow
+* up to the outermost block, their `#config` slot (if any) is ignored.
+* One <style> per outermost block is appended to <head>; marker comments
+* are stripped after.
+*/
+async function tailwindComponent(dom, blocks, config, filePath) {
+	if (!blocks.length) return dom;
+	const map = /* @__PURE__ */ new Map();
+	for (const b of blocks) map.set(b.id, {
+		id: b.id,
+		configCss: b.css,
+		nested: false,
+		classes: /* @__PURE__ */ new Set()
+	});
+	const stack = [];
+	const markers = [];
+	walk(dom, (node) => {
+		if (node.type === "comment") {
+			const data = node.data;
+			const open = data.match(OPEN_RE);
+			const close = data.match(CLOSE_RE);
+			if (open) {
+				const id = open[1];
+				const meta = map.get(id);
+				if (meta && stack.length > 0) meta.nested = true;
+				if (meta) stack.push(id);
+				markers.push(node);
+			} else if (close) {
+				const id = close[1];
+				if (stack[stack.length - 1] === id) stack.pop();
+				markers.push(node);
+			}
+			return;
+		}
+		const el = node;
+		/**
+		* Always assign to the OUTERMOST active marker (stack[0]) so nested
+		* <Tailwind> blocks merge their classes into the parent's scope.
+		*/
+		if (el.attribs?.class && stack.length > 0) map.get(stack[0]).classes.add(el.attribs.class);
+	});
+	const fromPath = filePath ?? resolve(process.cwd(), "template.vue");
+	let head;
+	walk(dom, (n) => {
+		if (!head && n.name === "head") head = n;
+	});
+	if (!head) throw new Error("`Tailwind` component requires `Head` component to be present in the template.");
+	/**
+	* Compile + inject one <style raw> per outermost block. `raw` opts
+	* the existing tailwindcss transformer out of recompiling
+	* already-compiled CSS.
+	*/
+	for (const meta of map.values()) {
+		if (meta.nested) continue;
+		const css = (await compileTailwindCss(buildCssInput(meta.configCss, meta.classes), config, `${fromPath}?tw=${meta.id}`)).trim();
+		if (!css) continue;
+		const styleNode = {
+			type: "tag",
+			name: "style",
+			attribs: { raw: "" },
+			children: [],
+			parent: head,
+			prev: null,
+			next: null
+		};
+		styleNode.children = [{
+			type: "text",
+			data: css,
+			parent: styleNode,
+			prev: null,
+			next: null
+		}];
+		head.children.push(styleNode);
+	}
+	for (const c of markers) {
+		const parent = c.parent;
+		if (!parent?.children) continue;
+		const i = parent.children.indexOf(c);
+		if (i >= 0) parent.children.splice(i, 1);
+	}
+	return dom;
+}
+function buildCssInput(configCss, classes) {
+	const seed = configCss ?? DEFAULT_SEED;
+	if (!classes.size) return seed;
+	return `${seed}\n@source inline("${[...classes].join(" ").replace(/"/g, "\\\"")}");`;
+}
+//#endregion
+export { tailwindComponent };
+
+//# sourceMappingURL=tailwindComponent.js.map

package/dist/transformers/tailwindComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwindComponent.js","names":[],"sources":["../../src/transformers/tailwindComponent.ts"],"sourcesContent":["import { resolve } from 'pathe'\nimport type { ChildNode, Element, Comment } from 'domhandler'\nimport { walk } from '../utils/ast/index.ts'\nimport { compileTailwindCss } from '../utils/compileTailwindCss.ts'\nimport type { TailwindBlock } from '../composables/renderContext.ts'\nimport type { MaizzleConfig } from '../types/config.ts'\n\nconst DEFAULT_SEED = '@import \"@maizzle/tailwindcss\" source(none);'\n\ninterface BlockMeta {\n  id: string\n  configCss?: string\n  nested: boolean\n  classes: Set<string>\n}\n\nconst OPEN_RE = /^mz-tw:(\\S+)$/\nconst CLOSE_RE = /^\\/mz-tw:(\\S+)$/\n\n/**\n * Compile Tailwind CSS for each top-level <Tailwind> block in the render\n * context. Nested <Tailwind> instances are flattened: their classes flow\n * up to the outermost block, their `#config` slot (if any) is ignored.\n * One <style> per outermost block is appended to <head>; marker comments\n * are stripped after.\n */\nexport async function tailwindComponent(\n  dom: ChildNode[],\n  blocks: TailwindBlock[],\n  config: MaizzleConfig,\n  filePath?: string,\n): Promise<ChildNode[]> {\n  if (!blocks.length) return dom\n\n  const map = new Map<string, BlockMeta>()\n  for (const b of blocks) {\n    map.set(b.id, { id: b.id, configCss: b.css, nested: false, classes: new Set() })\n  }\n\n  const stack: string[] = []\n  const markers: Comment[] = []\n\n  walk(dom, (node) => {\n    if (node.type === 'comment') {\n      const data = (node as Comment).data\n      const open = data.match(OPEN_RE)\n      const close = data.match(CLOSE_RE)\n      if (open) {\n        const id = open[1]\n        const meta = map.get(id)\n        if (meta && stack.length > 0) meta.nested = true\n        if (meta) stack.push(id)\n        markers.push(node as Comment)\n      } else if (close) {\n        const id = close[1]\n        if (stack[stack.length - 1] === id) stack.pop()\n        markers.push(node as Comment)\n      }\n      return\n    }\n\n    const el = node as Element\n    /**\n     * Always assign to the OUTERMOST active marker (stack[0]) so nested\n     * <Tailwind> blocks merge their classes into the parent's scope.\n     */\n    if (el.attribs?.class && stack.length > 0) {\n      map.get(stack[0])!.classes.add(el.attribs.class)\n    }\n  })\n\n  const fromPath = filePath ?? resolve(process.cwd(), 'template.vue')\n\n  let head: Element | undefined\n  walk(dom, (n) => {\n    if (!head && (n as Element).name === 'head') head = n as Element\n  })\n\n  if (!head) {\n    throw new Error('`Tailwind` component requires `Head` component to be present in the template.')\n  }\n\n  /**\n   * Compile + inject one <style raw> per outermost block. `raw` opts\n   * the existing tailwindcss transformer out of recompiling\n   * already-compiled CSS.\n   */\n  for (const meta of map.values()) {\n    if (meta.nested) continue\n\n    const cssInput = buildCssInput(meta.configCss, meta.classes)\n    const css = (await compileTailwindCss(cssInput, config, `${fromPath}?tw=${meta.id}`)).trim()\n    if (!css) continue\n\n    const styleNode: Element = {\n      type: 'tag',\n      name: 'style',\n      attribs: { raw: '' },\n      children: [],\n      parent: head,\n      prev: null,\n      next: null,\n    } as any\n\n    const textNode = {\n      type: 'text',\n      data: css,\n      parent: styleNode,\n      prev: null,\n      next: null,\n    } as any\n\n    styleNode.children = [textNode]\n    head.children.push(styleNode)\n  }\n\n  // Strip marker comments from their parents\n  for (const c of markers) {\n    const parent = c.parent as Element | null\n    if (!parent?.children) continue\n    const i = parent.children.indexOf(c)\n    if (i >= 0) parent.children.splice(i, 1)\n  }\n\n  return dom\n}\n\nfunction buildCssInput(configCss: string | undefined, classes: Set<string>): string {\n  const seed = configCss ?? DEFAULT_SEED\n\n  if (!classes.size) return seed\n\n  const inline = [...classes].join(' ').replace(/\"/g, '\\\\\"')\n  return `${seed}\\n@source inline(\"${inline}\");`\n}\n"],"mappings":";;;;;AAOA,MAAM,eAAe;AASrB,MAAM,UAAU;AAChB,MAAM,WAAW;;;;;;;;AASjB,eAAsB,kBACpB,KACA,QACA,QACA,UACsB;CACtB,IAAI,CAAC,OAAO,QAAQ,OAAO;CAE3B,MAAM,sBAAM,IAAI,IAAuB;CACvC,KAAK,MAAM,KAAK,QACd,IAAI,IAAI,EAAE,IAAI;EAAE,IAAI,EAAE;EAAI,WAAW,EAAE;EAAK,QAAQ;EAAO,yBAAS,IAAI,IAAI;CAAE,CAAC;CAGjF,MAAM,QAAkB,CAAC;CACzB,MAAM,UAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS;EAClB,IAAI,KAAK,SAAS,WAAW;GAC3B,MAAM,OAAQ,KAAiB;GAC/B,MAAM,OAAO,KAAK,MAAM,OAAO;GAC/B,MAAM,QAAQ,KAAK,MAAM,QAAQ;GACjC,IAAI,MAAM;IACR,MAAM,KAAK,KAAK;IAChB,MAAM,OAAO,IAAI,IAAI,EAAE;IACvB,IAAI,QAAQ,MAAM,SAAS,GAAG,KAAK,SAAS;IAC5C,IAAI,MAAM,MAAM,KAAK,EAAE;IACvB,QAAQ,KAAK,IAAe;GAC9B,OAAO,IAAI,OAAO;IAChB,MAAM,KAAK,MAAM;IACjB,IAAI,MAAM,MAAM,SAAS,OAAO,IAAI,MAAM,IAAI;IAC9C,QAAQ,KAAK,IAAe;GAC9B;GACA;EACF;EAEA,MAAM,KAAK;;;;;EAKX,IAAI,GAAG,SAAS,SAAS,MAAM,SAAS,GACtC,IAAI,IAAI,MAAM,EAAE,CAAC,CAAE,QAAQ,IAAI,GAAG,QAAQ,KAAK;CAEnD,CAAC;CAED,MAAM,WAAW,YAAY,QAAQ,QAAQ,IAAI,GAAG,cAAc;CAElE,IAAI;CACJ,KAAK,MAAM,MAAM;EACf,IAAI,CAAC,QAAS,EAAc,SAAS,QAAQ,OAAO;CACtD,CAAC;CAED,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,+EAA+E;;;;;;CAQjG,KAAK,MAAM,QAAQ,IAAI,OAAO,GAAG;EAC/B,IAAI,KAAK,QAAQ;EAGjB,MAAM,OAAO,MAAM,mBADF,cAAc,KAAK,WAAW,KAAK,OACP,GAAG,QAAQ,GAAG,SAAS,MAAM,KAAK,IAAI,EAAA,CAAG,KAAK;EAC3F,IAAI,CAAC,KAAK;EAEV,MAAM,YAAqB;GACzB,MAAM;GACN,MAAM;GACN,SAAS,EAAE,KAAK,GAAG;GACnB,UAAU,CAAC;GACX,QAAQ;GACR,MAAM;GACN,MAAM;EACR;EAUA,UAAU,WAAW,CAAC;GAPpB,MAAM;GACN,MAAM;GACN,QAAQ;GACR,MAAM;GACN,MAAM;EAGqB,CAAC;EAC9B,KAAK,SAAS,KAAK,SAAS;CAC9B;CAGA,KAAK,MAAM,KAAK,SAAS;EACvB,MAAM,SAAS,EAAE;EACjB,IAAI,CAAC,QAAQ,UAAU;EACvB,MAAM,IAAI,OAAO,SAAS,QAAQ,CAAC;EACnC,IAAI,KAAK,GAAG,OAAO,SAAS,OAAO,GAAG,CAAC;CACzC;CAEA,OAAO;AACT;AAEA,SAAS,cAAc,WAA+B,SAA8B;CAClF,MAAM,OAAO,aAAa;CAE1B,IAAI,CAAC,QAAQ,MAAM,OAAO;CAG1B,OAAO,GAAG,KAAK,oBADA,CAAC,GAAG,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,QAAQ,MAAM,MACZ,EAAE;AAC5C"}

package/dist/transformers/{tailwindcss.d.mts → tailwindcss.d.ts}

@@ -1,4 +1,4 @@
-import { MaizzleConfig } from "../types/config.mjs";
+import { MaizzleConfig } from "../types/config.js";
 import { ChildNode } from "domhandler";
 
 //#region src/transformers/tailwindcss.d.ts
@@ -21,4 +21,4 @@ import { ChildNode } from "domhandler";
 declare function tailwindcss(dom: ChildNode[], config: MaizzleConfig, filePath?: string): Promise<ChildNode[]>;
 //#endregion
 export { tailwindcss };
-//# sourceMappingURL=tailwindcss.d.mts.map
+//# sourceMappingURL=tailwindcss.d.ts.map

package/dist/transformers/tailwindcss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwindcss.d.ts","names":[],"sources":["../../src/transformers/tailwindcss.ts"],"mappings":";;;;;;AA6EA;;;;;;;;;;;;;;iBAAsB,WAAA,CAAY,GAAA,EAAK,SAAA,IAAa,MAAA,EAAQ,aAAA,EAAe,QAAA,YAAoB,OAAA,CAAQ,SAAA"}

package/dist/transformers/{tailwindcss.mjs → tailwindcss.js}

@@ -1,39 +1,9 @@
-import { walk } from "../utils/ast/walker.mjs";
-import "../utils/ast/index.mjs";
-import pruneVars_default from "../plugins/postcss/pruneVars.mjs";
-import { tailwindCleanup } from "../plugins/postcss/tailwindCleanup.mjs";
-import { mergeMediaQueries } from "../plugins/postcss/mergeMediaQueries.mjs";
-import { dirname, relative, resolve } from "node:path";
-import postcss from "postcss";
-import tailwindcssPostcss from "@tailwindcss/postcss";
-import customProperties from "postcss-custom-properties";
-import postcssCalc from "postcss-calc";
-import safeParser from "postcss-safe-parser";
-import { transform } from "lightningcss";
-
+import { walk } from "../utils/ast/walker.js";
+import "../utils/ast/index.js";
+import { compileTailwindCss } from "../utils/compileTailwindCss.js";
+import { decodeStyleEntities } from "../utils/decodeStyleEntities.js";
+import { dirname, relative, resolve } from "pathe";
 //#region src/transformers/tailwindcss.ts
-function createProcessor(config) {
-	return postcss([
-		tailwindcssPostcss({
-			base: config.css?.base,
-			transformAssetUrls: false,
-			optimize: false
-		}),
-		customProperties({ preserve: false }),
-		postcssCalc({}),
-		pruneVars_default()
-	]);
-}
-/**
-* Decode HTML entities that Vue SSR encodes inside <style> tags.
-*
-* Vue's renderToString HTML-encodes quotes and other characters
-* inside <style> tags within templates, breaking CSS like
-* `@import "@maizzle/tailwindcss"` → `@import &quot;...&quot;`
-*/
-function decodeEntities(str) {
-	return str.replace(/&quot;/g, "\"").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#39;/g, "'").replace(/&apos;/g, "'");
-}
 /**
 * Check if CSS content uses Tailwind features that require source scanning.
 *
@@ -42,34 +12,7 @@ function decodeEntities(str) {
 * and would pass through @source directives unconsumed.
 */
 function usesTailwind(css) {
-	return /(@import\s+["'](tailwindcss|@maizzle\/tailwindcss)|@tailwind\s)/.test(css);
-}
-/**
-* Lower modern CSS syntax using lightningcss.
-*
-* Targets IE 1 to maximize syntax lowering — converts modern features
-* like nesting, oklch(), color-mix(), @property, etc. into simple CSS
-* that email clients can understand.
-*/
-function lowerSyntax(css) {
-	return transform({
-		filename: "email.css",
-		code: Buffer.from(css),
-		minify: false,
-		targets: { ie: 128 }
-	}).code.toString();
-}
-/**
-* Run cleanup and media query merging on the compiled CSS.
-*
-* Removes unwanted selectors (:host, :lang) and at-rules (@layer, @property),
-* then sorts and merges media queries.
-*/
-async function optimizeCss(css, config) {
-	const plugins = [...tailwindCleanup(config)];
-	const mediaPlugin = mergeMediaQueries(config);
-	if (mediaPlugin) plugins.push(mediaPlugin);
-	return (await postcss(plugins).process(css, { from: void 0 })).css;
+	return /((@import|@reference)\s+["'](tailwindcss|@maizzle\/tailwindcss)|@tailwind\s)/.test(css);
 }
 /**
 * Build @source directives for Tailwind CSS scanning.
@@ -85,6 +28,13 @@ function buildSourceDirectives(dom, config, fromDir) {
 	const directives = [];
 	const excludePaths = [resolve(config.output?.path ?? "dist"), ...(config.css?.exclude ?? []).map((p) => resolve(p))];
 	for (const p of excludePaths) directives.push(`@source not "${relative(fromDir, resolve(p))}";`);
+	/**
+	* Inline source: collect all class attribute values from the rendered DOM.
+	* After Vue SSR, the DOM contains every class from every component
+	* (built-in framework components, user components, dynamic
+	* bindings). We pass these raw values to Tailwind's
+	* scanner via @source inline().
+	*/
 	const classes = [];
 	walk(dom, (n) => {
 		const cls = n.attribs?.class;
@@ -114,37 +64,46 @@ async function tailwindcss(dom, config, filePath) {
 	walk(dom, (node) => {
 		if (node.name !== "style") return;
 		const el = node;
-		const attrs = el.attribs || {};
-		if ("raw" in attrs) {
+		/**
+		* `raw` opts out of compilation entirely (marker is consumed here).
+		* `embed`/`data-embed` only signal "preserve tag after inlining"
+		* — they still need to go through compile so Tailwind/@apply
+		* resolves.
+		*/
+		if ("raw" in el.attribs) {
 			delete el.attribs.raw;
 			return;
 		}
-		if ("embed" in attrs || "data-embed" in attrs) return;
 		const rawContent = el.children.filter((child) => child.type === "text").map((child) => child.data).join("");
 		if (!rawContent.trim()) return;
 		styleTags.push({
 			node: el,
-			cssContent: decodeEntities(rawContent)
+			cssContent: decodeStyleEntities(rawContent)
 		});
 	});
 	if (!styleTags.length) return dom;
 	const fromPath = filePath ?? resolve(process.cwd(), "template.vue");
 	const fromDir = dirname(fromPath);
 	const sourceDirectives = styleTags.some(({ cssContent }) => usesTailwind(cssContent)) ? buildSourceDirectives(dom, config, fromDir) : "";
-	const processor = createProcessor(config);
 	for (let i = 0; i < styleTags.length; i++) {
 		const { node, cssContent } = styleTags[i];
+		/**
+		* Only add source directives to style tags that import Tailwind —
+		* plain CSS doesn't need them and @tailwindcss/postcss would
+		* leave the directives unconsumed in the output.
+		*/
 		const fullCss = usesTailwind(cssContent) ? `${cssContent}\n${sourceDirectives}` : cssContent;
 		try {
 			node.children = [{
 				type: "text",
-				data: await optimizeCss(lowerSyntax((await processor.process(fullCss, {
-					from: `${fromPath}?style=${i}`,
-					parser: safeParser
-				})).css), config),
+				data: await compileTailwindCss(fullCss, config, `${fromPath}?style=${i}`),
 				parent: node
 			}];
 		} catch {
+			/**
+			* If CSS processing fails, still replace with decoded content
+			* so HTML entities don't break the CSS.
+			*/
 			node.children = [{
 				type: "text",
 				data: cssContent,
@@ -154,7 +113,7 @@ async function tailwindcss(dom, config, filePath) {
 	}
 	return dom;
 }
-
 //#endregion
 export { tailwindcss };
-//# sourceMappingURL=tailwindcss.mjs.map
+
+//# sourceMappingURL=tailwindcss.js.map