@maizzle/framework
Version:
Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.
55 lines (54 loc) • 2.02 kB
JavaScript
import resolveProps_default from "../plugins/postcss/resolveProps.js";
import pruneVars_default from "../plugins/postcss/pruneVars.js";
import { tailwindCleanup } from "../plugins/postcss/tailwindCleanup.js";
import { mergeMediaQueries } from "../plugins/postcss/mergeMediaQueries.js";
import { quoteFontFamilies } from "../plugins/postcss/quoteFontFamilies.js";
import { resolveMaizzleImports } from "../plugins/postcss/resolveMaizzleImports.js";
import postcss from "postcss";
import tailwindcssPostcss from "@tailwindcss/postcss";
import postcssCalc from "postcss-calc";
import safeParser from "postcss-safe-parser";
import { transform } from "lightningcss";
//#region src/utils/compileTailwindCss.ts
function createTailwindProcessor(config) {
return postcss([
resolveMaizzleImports(),
tailwindcssPostcss({
base: config.css?.base,
transformAssetUrls: false,
optimize: false
}),
resolveProps_default(),
postcssCalc({}),
pruneVars_default()
]);
}
function lowerCssSyntax(css) {
const result = transform({
filename: "email.css",
code: new TextEncoder().encode(css),
minify: false,
targets: { ie: 128 }
});
return new TextDecoder().decode(result.code);
}
async function optimizeTailwindCss(css, config) {
const plugins = [...tailwindCleanup(config), quoteFontFamilies()];
const mediaPlugin = mergeMediaQueries(config);
if (mediaPlugin) plugins.push(mediaPlugin);
return (await postcss(plugins).process(css, { from: void 0 })).css;
}
/**
* Compile a Tailwind CSS source string into final email-safe CSS:
* runs @tailwindcss/postcss, lowers modern syntax via lightningcss,
* then applies cleanup + media-query merging.
*/
async function compileTailwindCss(cssInput, config, from) {
return optimizeTailwindCss(lowerCssSyntax((await createTailwindProcessor(config).process(cssInput, {
from,
parser: safeParser
})).css), config);
}
//#endregion
export { compileTailwindCss, createTailwindProcessor, lowerCssSyntax, optimizeTailwindCss };
//# sourceMappingURL=compileTailwindCss.js.map