@keycloakify/angular-email 0.0.8 → 1.0.1

package/README.md

@@ -14,6 +14,11 @@ yarn add @keycloakify/angular-email
 
 ## Usage
 
+| Angular | Tailwind CSS | @keycloakify/angular-email | Maintained    |
+| ------- | ------------ | -------------------------- | ------------- |
+| 20      | 4.x+         | 1.x+                       | Yes           |
+| 20      | 3.x+         | 0.x+                       | Bugfixes only |
+
 ### Creating an Email Component
 
 see this [example](https://github.com/keycloakify/angular-email/blob/main/projects/showcase/src/app/app.component.ts)
@@ -49,8 +54,11 @@ export const renderToHtml: RenderToHtml<EmailComponentProps> = (props) => {
 ```sh
 # cmd
 
-export $EMAIL_COMPONENTS_DIR_PATH="src/emails"
-npx keycloakify-angular-email build -p $EMAIL_COMPONENTS_DIR_PATH
+export EMAIL_COMPONENTS_DIR_PATH="src/emails"
+export EMAIL_OUTPUT_DIR_PATH="dist/emails"
+export EMAIL_EXTERNAL_PACKAGES="tailwindcss,@tailwindcss/postcss,postcss,postcss-calc,postcss-custom-properties,postcss-preset-env,postcss-logical"
+
+npx keycloakify-angular-email build -p "$EMAIL_COMPONENTS_DIR_PATH" -o "$EMAIL_OUTPUT_DIR_PATH" -e "$EMAIL_EXTERNAL_PACKAGES"
 ```
 
 NB: use `keycloakify-angular-email build` when you don't need to pass dynamic inputs to your components, otherwise see [Standalone Dynamic Rendering](#standalone-dynamic-rendering)
@@ -70,7 +78,6 @@ NB: use `keycloakify-angular-email build` when you don't need to pass dynamic in
   "files": [],
   "include": ["*.ts", "**/*.ts"]
 }
-
 ```
 
 ```ts
@@ -117,7 +124,7 @@ export default defineConfig(({ mode }) => ({
       ...
       postBuild: async (buildContext) => {
         await buildEmailTheme({
-          templatesSrcDirPath: join(import.meta.dirname, '/emails/templates'),
+          templatesSrcDirPath: join(import.meta.dirname, 'emails', 'templates'),
           filterTemplate: (filePath: string) => !!filePath.endsWith('.component.ts'),
           themeNames: buildContext.themeNames,
           keycloakifyBuildDirPath: buildContext.keycloakifyBuildDirPath,
@@ -125,10 +132,10 @@ export default defineConfig(({ mode }) => ({
           cwd: import.meta.dirname,
           esbuild: {
             packages: 'bundle',
-            external: ['juice', 'postcss', 'tailwindcss-v3'],
+            external: ['juice', '...other packages you might use to process css'],
             format: 'esm',
             outExtension: { '.js': '.mjs' },
-            plugins: [angularEsbuildPlugin(join(import.meta.dirname, '/emails'))],
+            plugins: [angularEsbuildPlugin(join(import.meta.dirname, 'emails'))],
           },
         });
       },
@@ -149,6 +156,7 @@ import { toHTML } from '@keycloakify/angular-email/node';
 toHTML({
   filePath: 'path/to/your.component.ts',
   props: { foo: 'bar' },
+  externals: [],
 })
   .then((html) => {
     console.log(html);
@@ -168,6 +176,7 @@ const { toHTML } = require('@keycloakify/angular-email/node');
 toHTML({
   filePath: 'path/to/your.component.ts',
   props: { foo: 'bar' },
+  externals: [],
 })
   .then((html) => {
     console.log(html);
@@ -201,8 +210,8 @@ type Render<Input extends Record<string, any>> = {
     plainText?: boolean;
     /** format the html output */
     pretty?: boolean;
-    /** tailwind v3 configuration object */
-    tailwindConfig?: Partial<Config>;
+    /** Optional hook to manipulate the extracted CSS. Useful for PostCSS processing */
+    cssProcessor?: (css: string, html: string) => Promise<string>;
     /** if you use prefix conventions on signal inputs */
     signalInputsPrefix?: string;
   };
@@ -232,18 +241,52 @@ toHTML<Input extends Record<string, any>>(options: {
     filePath: string;
     props?: Input;
     root?: string;
+    externals?: string[];
 }) => Promise<string>
 ```
 
 ### @keycloakify/angular-email/tailwindcss-preset-email
 
-Just a tailwind v3 preset, inspired by [@maizzle/tailwindcss-preset-email](https://github.com/maizzle/tailwindcss-preset-email)
+Just a tailwind v4 preset, inspired by [@maizzle/tailwindcss](https://github.com/maizzle/tailwindcss)
 
-**NB**: tailwind v4 is not supported due to high level css generation and poor support in overriding default utilities
+```css
+/* styles.css */
+@import '@keycloakify/angular-email/tailwindcss-preset-email';
+```
 
-[add support for disabling core plugins](https://github.com/tailwindlabs/tailwindcss/discussions/16132)
+```typescript
+// email.component.ts
+...
+import { Component, ViewEncapsulation } from '@angular/core';
+import { render, RenderToHtml } from '@keycloakify/angular-email';
+// or your custom css processor implementation
+import { cssProcessor } from '@keycloakify/angular-email/tailwindcss-preset-email/css-processor';
 
-[Cannot override tailwind utilities](https://github.com/tailwindlabs/tailwindcss/issues/16856)
+
+...
+@Component({
+  ...
+  styleUrls: ['styles.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class EmailComponent {
+  ....
+}
+
+type EmailComponentProps = {};
+
+export const renderToHtml: RenderToHtml<EmailComponentProps> = (props) => {
+  return render({
+    component: EmailComponent,
+    selector: 'app-root',
+    props,
+    options: {
+      pretty: true,
+      cssProcessor,
+    },
+  });
+};
+```
 
 ## Contributing
 

package/bin/build.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{angularEsbuildPlugin as h}from"@keycloakify/angular-email/esbuild";import y from"esbuild";import{readdir as b,rm as g,writeFile as w}from"node:fs/promises";import{basename as P,join as c,resolve as p}from"node:path";import{cwd as d,exit as m}from"node:process";import{pathToFileURL as k}from"node:url";import{termost as D}from"termost";import F from"../package.json"with{type:"json"};async function v(t,e,r){const a=await y.build({entryPoints:t,bundle:!0,splitting:!0,outdir:r,absWorkingDir:e,platform:"node",sourcemap:!0,packages:"bundle",external:["juice","postcss","tailwindcss-v3"],format:"esm",outExtension:{".js":".mjs"},target:"node20",plugins:[h(e)],metafile:!0});return Object.entries(a.metafile.outputs).reduce((i,[l,o])=>(o.entryPoint&&(i[p(e,o.entryPoint)]=k(p(e,l)).toString()),i),{})}async function x(t,e){try{const r=async i=>{const l=await b(i,{withFileTypes:!0}),o=[];for(const s of l)s.isFile()?o.push(s):s.isDirectory()&&o.push(...await r(c(s.parentPath,s.name)));return o};return(await r(t)).map(i=>c(i.parentPath,i.name)).filter(i=>e?e(i):!0)}catch(r){throw console.error(`Error scanning directory: ${r.message}`),r}}const j=async(t,e="dist/emails")=>{t||(console.error("emailFilesPath is required!"),m(1));try{console.log(`building emails to ${e}...`);const r=c(d(),e,".tmp");await g(e,{recursive:!0,force:!0});const a=await x(p(d(),t),n=>n.endsWith(".ts"));a.length||(console.error("no templates found!"),m(1));const i=[...a],l=await v(i,d(),r),o=a.map(async n=>{const u=await import(l[n]);return console.log(`- ${n}`),{...u,file:n}}),s=await Promise.all(o);for(const n of s){const u=await n.renderToHtml();await w(`${e}/${P(n.file).split(".")[0]}.html`,u)}await g(r,{recursive:!0,force:!0}),console.log("\x1B[36m%s\x1B[0m","build complete!"),m(0)}catch(r){console.error(r),m(1)}},f=D({name:"keycloakify-angular-email",description:"Keycloakify CLI",version:F.version,onException:t=>{console.error(t),m(1)}});f.option({key:"emailFilesPath",name:{long:"emailFilesPath",short:"p"},description:"",defaultValue:""}),f.option({key:"outDir",name:{long:"outDir",short:"o"},description:"",defaultValue:"dist/emails"}),f.command({name:"build",description:"build angular components to html"}).input({key:"emailFilesPath",type:"text",defaultValue:void 0,label:"what's the path of your email components files?",skip(t){return!!t.emailFilesPath}}).input({key:"outDir",type:"text",defaultValue:"dist/emails",label:"where do you want to output html files?",skip(t){return!!t.outDir}}).task({handler:async t=>{await j(t.emailFilesPath,t.outDir)}});
+import{angularEsbuildPlugin as b}from"@keycloakify/angular-email/esbuild";import k from"esbuild";import{readdir as w,rm as f,writeFile as P}from"node:fs/promises";import{basename as x,join as g,resolve as p}from"node:path";import{cwd as c,exit as m}from"node:process";import{pathToFileURL as F}from"node:url";import{termost as D}from"termost";import v from"../package.json"with{type:"json"};async function E(e,t,i,a=[]){const r=await k.build({entryPoints:e,bundle:!0,splitting:!0,outdir:i,absWorkingDir:t,platform:"node",sourcemap:!0,packages:"bundle",external:["juice",...a],format:"esm",outExtension:{".js":".mjs"},target:"node20",plugins:[b(t)],metafile:!0});return Object.entries(r.metafile.outputs).reduce((l,[s,o])=>(o.entryPoint&&(l[p(t,o.entryPoint)]=F(p(t,s)).toString()),l),{})}async function j(e,t){try{const i=async r=>{const l=await w(r,{withFileTypes:!0}),s=[];for(const o of l)o.isFile()?s.push(o):o.isDirectory()&&s.push(...await i(g(o.parentPath,o.name)));return s};return(await i(e)).map(r=>g(r.parentPath,r.name)).filter(r=>t?t(r):!0)}catch(i){throw console.error(`Error scanning directory: ${i.message}`),i}}const C=async(e,t="dist/emails",i=[])=>{e||(console.error("emailFilesPath is required!"),m(1));try{console.log(`building emails to ${t}...`);const a=g(c(),t,".tmp");await f(t,{recursive:!0,force:!0});const r=await j(p(c(),e),n=>n.endsWith(".ts"));r.length||(console.error("no templates found!"),m(1));const l=[...r],s=await E(l,c(),a,i),o=r.map(async n=>{const u=s[n]??s[p(c(),n)];if(!u)throw new Error(`Failed to locate bundled URL for "${n}". Ensure getTemplates() returns absolute paths and esbuild.metafile entryPoint mapping uses the same base.`);const h=await import(u);return console.log(`- ${n}`),{...h,file:n}}),y=await Promise.all(o);for(const n of y){const u=await n.renderToHtml();await P(`${t}/${x(n.file).split(".")[0]}.html`,u)}await f(a,{recursive:!0,force:!0}),console.log("\x1B[36m%s\x1B[0m","build complete!"),m(0)}catch(a){console.error(a),m(1)}},d=D({name:"keycloakify-angular-email",description:"Keycloakify CLI",version:v.version,onException:e=>{console.error(e),m(1)}});d.option({key:"emailFilesPath",name:{long:"emailFilesPath",short:"p"},description:"input directory for angular email components",defaultValue:""}),d.option({key:"outDir",name:{long:"outDir",short:"o"},description:"output directory for generated html",defaultValue:"dist/emails"}),d.option({key:"externals",name:{long:"externals",short:"e"},description:"Comma-separated packages to mark as external in esbuild (e.g. tailwindcss,postcss,postcss-calc)",defaultValue:""}),d.command({name:"build",description:"build angular components to html"}).input({key:"emailFilesPath",type:"text",defaultValue:void 0,label:"what's the path of your email components files?",skip(e){return!!e.emailFilesPath}}).input({key:"outDir",type:"text",defaultValue:"dist/emails",label:"where do you want to output html files?",skip(e){return!!e.outDir}}).input({key:"externals",type:"text",label:"any additional package to mark as external (comma separated)?",skip(){return!0}}).task({handler:async e=>{let t=[];e.externals&&(t=e.externals.split(",").map(i=>i.trim()).filter(Boolean)),await C(e.emailFilesPath,e.outDir,t)}});

package/fesm2022/keycloakify-angular-email-tailwindcss-preset-email-css-processor.mjs

@@ -0,0 +1,82 @@
+import tailwindcss from '@tailwindcss/postcss';
+import postcss from 'postcss';
+import calc from 'postcss-calc';
+import properties from 'postcss-custom-properties';
+import logical from 'postcss-logical';
+import preset from 'postcss-preset-env';
+
+const cssProcessor = async (style, html) => {
+    try {
+        const inlineSafelist = html
+            ? Array.from(new Set((html.match(/class=["']([^"']+)["']/g) ?? [])
+                .flatMap((m) => m
+                .replace(/^class=["']|["']$/g, '')
+                .trim()
+                .split(/\s+/))
+                .filter(Boolean)))
+                .slice(0, 5000) // safety cap
+                .map((c) => c.replace(/\\/g, '\\\\').replace(/"/g, '\\"'))
+                .join(' ')
+            : '';
+        const styleWithSources = inlineSafelist.length > 0 ? `@source inline("${inlineSafelist}");\n${style}` : style;
+        const result = await postcss(tailwindcss({ base: '' }), properties({ preserve: false }), calc({ preserve: false }), {
+            postcssPlugin: 'inline-tw-vars-from-layer',
+            Once(root) {
+                const defaultVars = new Map();
+                // 1. Find the default variables in @layer properties
+                root.walkAtRules('layer', (layerRule) => {
+                    if (layerRule.params === 'properties') {
+                        layerRule.walkDecls(/^--tw-/, (decl) => {
+                            defaultVars.set(decl.prop, decl.value);
+                        });
+                    }
+                });
+                // 2. Walk all rules and replace var() usages
+                root.walkDecls((decl) => {
+                    decl.value = decl.value.replace(/var\((--tw-[^,)]+)\)/g, (match, varName) => {
+                        return defaultVars.has(varName) ? defaultVars.get(varName) : match;
+                    });
+                });
+            },
+        }, {
+            postcssPlugin: 'remove-unused-tw-vars',
+            Once(root) {
+                root.walkDecls(/^--tw-/, (decl) => {
+                    decl.remove();
+                });
+                root.walkAtRules('property', (atRule) => {
+                    if (atRule.params.startsWith('--tw-')) {
+                        atRule.remove();
+                    }
+                });
+                root.walkAtRules('layer', (atRule) => {
+                    if (atRule.params === 'properties') {
+                        atRule.remove();
+                    }
+                });
+            },
+        }, logical({
+            blockDirection: 'top-to-bottom',
+            inlineDirection: 'left-to-right',
+        }), preset({
+            stage: 4,
+            minimumVendorImplementations: 3,
+            logical: {
+                blockDirection: 'top-to-bottom',
+                inlineDirection: 'left-to-right',
+            },
+        })).process(styleWithSources, { map: false, from: undefined });
+        return result.css;
+    }
+    catch (error) {
+        console.error('CSS processing failed:', error);
+        throw new Error(`Failed to process CSS: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { cssProcessor };
+//# sourceMappingURL=keycloakify-angular-email-tailwindcss-preset-email-css-processor.mjs.map

package/fesm2022/keycloakify-angular-email-tailwindcss-preset-email-css-processor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keycloakify-angular-email-tailwindcss-preset-email-css-processor.mjs","sources":["../../../projects/angular-email/tailwindcss-preset-email/css-processor/css-processor.ts","../../../projects/angular-email/tailwindcss-preset-email/css-processor/keycloakify-angular-email-tailwindcss-preset-email-css-processor.ts"],"sourcesContent":["import tailwindcss from '@tailwindcss/postcss';\nimport postcss from 'postcss';\nimport calc from 'postcss-calc';\nimport properties from 'postcss-custom-properties';\nimport logical, { type DirectionFlow } from 'postcss-logical';\nimport preset from 'postcss-preset-env';\n\nexport const cssProcessor = async (style: string, html: string) => {\n  try {\n    const inlineSafelist = html\n      ? Array.from(\n          new Set(\n            (html.match(/class=[\"']([^\"']+)[\"']/g) ?? [])\n              .flatMap((m) =>\n                m\n                  .replace(/^class=[\"']|[\"']$/g, '')\n                  .trim()\n                  .split(/\\s+/),\n              )\n              .filter(Boolean),\n          ),\n        )\n          .slice(0, 5000) // safety cap\n          .map((c) => c.replace(/\\\\/g, '\\\\\\\\').replace(/\"/g, '\\\\\"'))\n          .join(' ')\n      : '';\n    const styleWithSources = inlineSafelist.length > 0 ? `@source inline(\"${inlineSafelist}\");\\n${style}` : style;\n    const result = await postcss(\n      tailwindcss({ base: '' }),\n      properties({ preserve: false }),\n      calc({ preserve: false }),\n      {\n        postcssPlugin: 'inline-tw-vars-from-layer',\n        Once(root) {\n          const defaultVars = new Map<string, string>();\n\n          // 1. Find the default variables in @layer properties\n          root.walkAtRules('layer', (layerRule) => {\n            if (layerRule.params === 'properties') {\n              layerRule.walkDecls(/^--tw-/, (decl) => {\n                defaultVars.set(decl.prop, decl.value);\n              });\n            }\n          });\n\n          // 2. Walk all rules and replace var() usages\n          root.walkDecls((decl) => {\n            decl.value = decl.value.replace(/var\\((--tw-[^,)]+)\\)/g, (match, varName) => {\n              return defaultVars.has(varName) ? defaultVars.get(varName)! : match;\n            });\n          });\n        },\n      },\n      {\n        postcssPlugin: 'remove-unused-tw-vars',\n        Once(root) {\n          root.walkDecls(/^--tw-/, (decl) => {\n            decl.remove();\n          });\n          root.walkAtRules('property', (atRule) => {\n            if (atRule.params.startsWith('--tw-')) {\n              atRule.remove();\n            }\n          });\n          root.walkAtRules('layer', (atRule) => {\n            if (atRule.params === 'properties') {\n              atRule.remove();\n            }\n          });\n        },\n      },\n      logical({\n        blockDirection: 'top-to-bottom' as DirectionFlow,\n        inlineDirection: 'left-to-right' as DirectionFlow,\n      }),\n      preset({\n        stage: 4,\n        minimumVendorImplementations: 3,\n        logical: {\n          blockDirection: 'top-to-bottom' as DirectionFlow,\n          inlineDirection: 'left-to-right' as DirectionFlow,\n        },\n      }),\n    ).process(styleWithSources, { map: false, from: undefined });\n    return result.css;\n  } catch (error) {\n    console.error('CSS processing failed:', error);\n    throw new Error(`Failed to process CSS: ${error instanceof Error ? error.message : 'Unknown error'}`);\n  }\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/keycloakify-angular-email.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, Component, effect, CUSTOM_ELEMENTS_SCHEMA, inject, DOCUMENT, NO_ERRORS_SCHEMA, provideZonelessChangeDetection } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import { bootstrapApplication } from '@angular/platform-browser';
 import { renderApplication } from '@angular/platform-server';
 import { provideServerRendering } from '@angular/ssr';
-import { bootstrapApplication } from '@angular/platform-browser';
 import * as cheerio from 'cheerio/slim';
 import { convert } from 'html-to-text';
 import juice from 'juice';
@@ -625,6 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
             args: [{ selector: 'ng-email-text', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n  [style]=\"$textStyle()\"\n  [class]=\"$styleClass()\"\n>\n  <ng-content></ng-content>\n</p>\n" }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Renders an Angular component to HTML and applies transformations.
  *
@@ -635,21 +636,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
  * @returns {Promise<string>} The rendered HTML or plain text.
  */
 const render = async ({ component, selector, props, options, }) => {
+    const __originalConsoleLog = console.log;
     console.log = ((log) => (...args) => {
         if (args[0] !== 'Angular is running in development mode.')
             log(...args);
     })(console.log);
-    const { style, html: normalizedHtml } = await renderNgComponent(component, selector, props, options?.signalInputsPrefix);
-    const html = applyHtmlTransformations(normalizedHtml);
-    if (options?.plainText) {
-        return renderAsPlainText(html);
+    try {
+        const { style, html: normalizedHtml } = await renderNgComponent(component, selector, props, options?.signalInputsPrefix);
+        const html = applyHtmlTransformations(normalizedHtml);
+        if (options?.plainText) {
+            return renderAsPlainText(html);
+        }
+        const cssProcessor = options?.cssProcessor;
+        const css = await parseStyles(style, html, cssProcessor);
+        const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
+        const markup = await inlineCss(html, css, !!options?.pretty);
+        const document = `${doctype}${markup}`;
+        return document;
+    }
+    finally {
+        console.log = __originalConsoleLog;
     }
-    const tailwindConfig = options?.tailwindConfig;
-    const css = await parseStyles(html, style, tailwindConfig);
-    const doctype = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
-    const markup = await inlineCss(html, css, !!options?.pretty);
-    const document = `${doctype}${markup}`;
-    return document;
 };
 /**
  * Converts the given markup string to plain text while skipping certain elements.
@@ -732,7 +739,7 @@ const renderNgComponent = async (component, selector, props, signalInputsPrefix)
 const normalizeNgHtml = (html, selector) => {
     const nsHtmlRegex = new RegExp(`<(?!(\\/?(${HTMLElements.join('|')})(?![-\\w])))[^>]+>`, 'gm');
     return html
-        .replace(new RegExp(`[\\s\\S]*?<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>[\\s\\S]*?`, 'gm'), '$1')
+        .replace(new RegExp(`[\\s\\S]*?<${selector}[\\s\\S]*?>([\\s\\S]*?)<\\/${selector}>[\\s\\S]*?.+`, 'gm'), '$1')
         .replace(nsHtmlRegex, '');
 };
 /**
@@ -748,9 +755,7 @@ const normalizeNgHtml = (html, selector) => {
  * @returns The transformed HTML string.
  */
 const applyHtmlTransformations = (html) => {
-    const $ = cheerio.load(html, {
-        xml: { lowerCaseAttributeNames: false, lowerCaseTags: false },
-    });
+    const $ = cheerio.load(html);
     replacePlaceholders($);
     return $.html()
         .replace(/\s+/g, ' ')
@@ -779,25 +784,33 @@ const replacePlaceholders = ($) => {
 /**
  * Applies the styles from the specified CSS file paths to the HTML document.
  *
- * @param html - The HTML string to process.
  * @param style - The raw content of <style> tags
- * @param tailwindConfig - Optional Tailwind CSS configuration to use. If not provided, the `tailwindcss-preset-email` preset will be used.
+ * @param cssProcessor - Optional hook for manipulate the css extracted.
+ * Useful for postcss processing
  *
  */
-const parseStyles = async (html, style, tailwindConfig) => {
-    const { tailwindcssPresetEmail } = await import('@keycloakify/angular-email/tailwindcss-preset-email');
-    const { default: postcss } = await import('postcss');
-    const { default: tailwindcss } = await import('tailwindcss-v3');
-    const result = await postcss(tailwindcss({
-        presets: tailwindConfig ? [tailwindConfig] : [tailwindcssPresetEmail],
-        content: [
-            {
-                raw: html,
-                extension: 'html',
-            },
-        ],
-    })).process(style, { map: false, from: undefined });
-    return result.css;
+const parseStyles = async (style, html, cssProcessor) => {
+    const normalized = normalizeCssInput(style);
+    if (!cssProcessor)
+        return normalized;
+    const processed = await cssProcessor(style, html);
+    return processed;
+};
+/**
+ * Normalize css
+ *
+ * @param input css to normalize
+ * @returns normalized css
+ */
+const normalizeCssInput = (input) => {
+    return input
+        .replace(/\s+/g, ' ')
+        .replace(/>\s+</g, '><')
+        .replaceAll('&lt;', '<')
+        .replaceAll('&gt;', '>')
+        .replaceAll('&#x24;', '$')
+        .replaceAll('&quot;', '"')
+        .replaceAll('&amp;', '&');
 };
 /**
  * Inlines CSS into the provided HTML string using Maizzle and Tailwind CSS.