@keycloakify/angular-email 0.0.8 → 1.0.1

package/tailwindcss-preset-email/clients.css

@@ -0,0 +1,44 @@
+@variant airmail (.bloop_container &);
+
+@variant apple-mail-10 (.Singleton &);
+@variant apple-mail ([class^="apple-mail"] &);
+
+@variant comcast (.mail-detail-content &);
+
+@variant edison (#edo-container &);
+@variant edison-ios (.edo &);
+@variant edison-android (.edo-email-view &);
+
+@variant freenet (body[marginwidth][marginheight] &);
+
+@variant gmail (u + .body &);
+@variant gmail-android (div > u + .body &);
+@custom-variant gmail-ipad {
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
+    u + .body & {
+      @slot;
+    }
+  }
+}
+
+@variant ios-10 (@supports (-webkit-overflow-scrolling:touch) and (color:#ffff));
+@variant ios-13 ([class^="apple-mail"] &);
+@variant ios (@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1));
+
+@variant notion (#mail-content-wrapper &);
+
+@variant ox (&[class^="ox-"]);
+
+@variant ogsc ([data-ogsc] &);
+@variant ogsb ([data-ogsb] &);
+
+@variant outlook-mac (#converted-body &);
+@variant outlook-android (#converted-body &);
+
+@variant spark (.c17637 &);
+
+@variant superhuman (.ShadowHTML &);
+
+@variant thunderbird (.moz-text-html &);
+
+@variant yahoo (.\& &);

package/tailwindcss-preset-email/css-processor/css-processor.ts

@@ -0,0 +1,90 @@
+import tailwindcss from '@tailwindcss/postcss';
+import postcss from 'postcss';
+import calc from 'postcss-calc';
+import properties from 'postcss-custom-properties';
+import logical, { type DirectionFlow } from 'postcss-logical';
+import preset from 'postcss-preset-env';
+
+export const cssProcessor = async (style: string, html: string) => {
+  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<string, string>();
+
+          // 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' as DirectionFlow,
+        inlineDirection: 'left-to-right' as DirectionFlow,
+      }),
+      preset({
+        stage: 4,
+        minimumVendorImplementations: 3,
+        logical: {
+          blockDirection: 'top-to-bottom' as DirectionFlow,
+          inlineDirection: 'left-to-right' as DirectionFlow,
+        },
+      }),
+    ).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'}`);
+  }
+};

package/tailwindcss-preset-email/css-processor/index.d.ts

@@ -0,0 +1,3 @@
+declare const cssProcessor: (style: string, html: string) => Promise<string>;
+
+export { cssProcessor };

package/tailwindcss-preset-email/css-processor/index.ts

@@ -0,0 +1 @@
+export * from './css-processor';

package/tailwindcss-preset-email/css-processor/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/tailwindcss-preset-email/index.css

@@ -0,0 +1,25 @@
+@import "tailwindcss/theme";
+@import "./theme/colors.css";
+@import "./theme/text.css";
+@import "./theme/shadows.css";
+@import "./theme/filters.css";
+@import "./theme/spacing.css";
+@import "./theme/borders.css";
+
+@import "./mso.css";
+@import "./clients.css";
+@import "tailwindcss/utilities" important;
+
+/* Resets */
+@theme {
+  /* Unset some namespaces */
+  --breakpoint-*: initial;
+  --animate-*: initial;
+}
+
+/* Breakpoints */
+@variant sm (@media (max-width: 600px));
+@variant xs (@media (max-width: 430px));
+
+/* Prefer pseudo over @media (hover: hover) */
+@variant hover (&:hover);

package/tailwindcss-preset-email/mso.css

@@ -0,0 +1,433 @@
+/*
+|-------------------------------------------------------------------------------
+| Utilities with predefined values
+|-------------------------------------------------------------------------------
+|
+| These utilities use predefined values, and some also support values from
+| your config, like spacing or colors.
+|
+*/
+
+@utility mso-ansi-font-size-* {
+  mso-ansi-font-size: --spacing(--value(integer));
+  mso-ansi-font-size: --value(
+    "large", "larger", "medium", "small", "smaller", "x-large", "x-small", "xx-large", "xx-small"
+  );
+}
+
+@utility mso-bidi-font-size-* {
+  mso-bidi-font-size: --spacing(--value(integer));
+  mso-bidi-font-size: --value(
+    "large", "larger", "medium", "small", "smaller", "x-large", "x-small", "xx-large", "xx-small"
+  );
+}
+
+@utility mso-ansi-font-style-* {
+  mso-ansi-font-style: --value("normal", "italic", "oblique");
+}
+
+@utility mso-bidi-font-style-* {
+  mso-bidi-font-style: --value("normal", "italic", "oblique");
+}
+
+@utility mso-ansi-font-weight-* {
+  mso-ansi-font-weight: --value("lighter", "normal", "bold", "bolder");
+}
+
+@utility mso-bidi-font-weight-* {
+  mso-bidi-font-weight: --value("lighter", "normal", "bold", "bolder");
+}
+
+@utility mso-ascii-font-family-* {
+  mso-ascii-font-family: --value("auto", "serif", "sans-serif", "monospace", "cursive", "fantasy");
+}
+
+@utility mso-bidi-font-family-* {
+  mso-bidi-font-family: --value("auto", "serif", "sans-serif", "monospace", "cursive", "fantasy");
+}
+
+@utility mso-arabic-font-family-* {
+  mso-arabic-font-family: --value("auto", "serif", "sans-serif", "monospace", "cursive", "fantasy");
+}
+
+@utility mso-bidi-flag-* {
+  mso-bidi-flag: --value("on", "off");
+}
+
+@utility mso-highlight-* {
+  mso-highlight: --value("auto", "windowtext");
+  mso-highlight: --value(--color-*);
+  mso-highlight: --value([*]);
+}
+
+@utility mso-generic-font-family-* {
+  mso-generic-font-family: --value("auto", "decorative", "modern", "roman", "script", "swiss");
+}
+
+@utility mso-font-alt-* {
+  mso-font-alt: --value(--font-*);
+  mso-font-alt: --value([*]);
+}
+
+@utility mso-element-frame-width-* {
+  mso-element-frame-width: --value("auto");
+  mso-element-frame-width: --spacing(--value(integer));
+  mso-element-frame-width: --value([*]);
+}
+
+@utility mso-element-frame-height-* {
+  mso-element-frame-height: --value("auto");
+  mso-element-frame-height: --spacing(--value(integer));
+  mso-element-frame-height: --value([*]);
+}
+
+@utility mso-element-* {
+  mso-element: --value(
+    "comment", "comment-list", "dropcap-dropped", "dropcap-in-margin", "endnote", "endnote-continuation-notice",
+    "endnote-continuation-separator", "endnote-list", "endnote-separator", "field-begin", "field-end",
+    "field-separator", "footer", "footnote", "footnote-continuation-notice", "footnote-continuation-separator",
+    "footnote-list", "footnote-separator", "frame", "header", "none", "paragraph-mark-properties", "table-head"
+  );
+  mso-element: --value([*]);
+}
+
+@utility mso-element-wrap-* {
+  mso-element-wrap: --value("none", "auto", "around",  "no-wrap-beside");
+  mso-element-wrap: --value([*]);
+}
+
+@utility mso-element-left-* {
+  mso-element-left: --value("center", "inside", "outside", "left", "right");
+  mso-element-left: --spacing(--value(integer));
+  mso-element-left: --value([*]);
+}
+@utility -mso-element-left-* {
+  mso-element-left: --spacing(--value(integer) * -1);
+}
+
+@utility mso-element-top-* {
+  mso-element-top: --value("bottom", "inside", "middle", "outside", "top");
+  mso-element-top: --spacing(--value(integer));
+  mso-element-top: --value([*]);
+}
+@utility -mso-element-top-* {
+  mso-element-top: --spacing(--value(integer) * -1);
+}
+
+@utility mso-hide-* {
+  mso-hide: --value("all", "none", "screen");
+  mso-hide: --value([*]);
+}
+
+@utility mso-color-alt-* {
+  mso-color-alt: --value("auto", "windowtext");
+  mso-color-alt: --value(--color-*);
+  mso-color-alt: --value([*]);
+}
+
+@utility mso-line-height-rule-* {
+  mso-line-height-rule: --value("exactly", "at-least");
+}
+
+@utility mso-line-height-alt-* {
+  mso-line-height-alt: --value("normal");
+  mso-line-height-alt: --spacing(--value(integer));
+  mso-line-height-alt: --value([*]);
+}
+@utility -mso-line-height-alt-* {
+  mso-line-height-alt: --spacing(--value(integer) * -1);
+}
+
+@utility text-underline-* {
+  text-underline: --value(
+    "auto", "dash", "dash-dot-dot-heavy", "dash-dot-heavy", "dashed-heavy", "dash-long", "dash-long-heavy", "dot-dash",
+    "dot-dot-dash", "dotted", "dotted-heavy", "double", "double-accounting", "none", "single", "single-accounting",
+    "thick", "wave", "wavy-double", "wavy-heavy", "windowtext", "word"
+  );
+}
+@utility text-underline-style-* {
+  text-underline-style: --value(
+    "auto", "dash", "dash-dot-dot-heavy", "dash-dot-heavy", "dashed-heavy", "dash-long", "dash-long-heavy", "dot-dash",
+    "dot-dot-dash", "dotted", "dotted-heavy", "double", "double-accounting", "none", "single", "single-accounting",
+    "thick", "wave", "wavy-double", "wavy-heavy", "windowtext", "word"
+  );
+}
+
+@utility text-underline-color-* {
+  text-underline-color: --value("auto", "windowtext");
+  text-underline-color: --value(--color-*);
+  text-underline-color: --value([*]);
+}
+
+@utility mso-special-format-bullet {
+  mso-special-format: bullet;
+}
+
+/*
+|-------------------------------------------------------------------------------
+| Spacing utilities
+|-------------------------------------------------------------------------------
+|
+| These utilities are based on the spacing scale from your config. Some also
+| support negative values.
+|
+*/
+
+@utility mso-text-raise-* {
+  mso-text-raise: --spacing(--value(integer));
+  mso-text-raise: --value([*]);
+}
+@utility -mso-text-raise-* {
+  mso-text-raise: --spacing(--value(integer) * -1);
+}
+
+/* mso-padding */
+@utility mso-padding-alt-* {
+  mso-padding-alt: --spacing(--value(integer));
+  mso-padding-alt: --value([*]);
+}
+@utility mso-padding-top-alt-* {
+  mso-padding-top-alt: --spacing(--value(integer));
+  mso-padding-top-alt: --value([*]);
+}
+@utility mso-padding-right-alt-* {
+  mso-padding-right-alt: --spacing(--value(integer));
+  mso-padding-right-alt: --value([*]);
+}
+@utility mso-padding-bottom-alt-* {
+  mso-padding-bottom-alt: --spacing(--value(integer));
+  mso-padding-bottom-alt: --value([*]);
+}
+@utility mso-padding-left-alt-* {
+  mso-padding-left-alt: --spacing(--value(integer));
+  mso-padding-left-alt: --value([*]);
+}
+
+/* mso-margin */
+@utility mso-margin-alt-* {
+  mso-margin-alt: --spacing(--value(integer));
+  mso-margin-alt: --value([*]);
+}
+@utility -mso-margin-alt-* {
+  mso-margin-alt: --spacing(--value(integer) * -1);
+}
+@utility mso-margin-top-alt-* {
+  mso-margin-top-alt: --spacing(--value(integer));
+  mso-margin-top-alt: --value([*]);
+}
+@utility -mso-margin-top-alt-* {
+  mso-margin-top-alt: --spacing(--value(integer) * -1);
+}
+@utility mso-margin-right-alt-* {
+  mso-margin-right-alt: --spacing(--value(integer));
+  mso-margin-right-alt: --value([*]);
+}
+@utility -mso-margin-right-alt-* {
+  mso-margin-right-alt: --spacing(--value(integer) * -1);
+}
+@utility mso-margin-bottom-alt-* {
+  mso-margin-bottom-alt: --spacing(--value(integer));
+  mso-margin-bottom-alt: --value([*]);
+}
+@utility -mso-margin-bottom-alt-* {
+  mso-margin-bottom-alt: --spacing(--value(integer) * -1);
+}
+@utility mso-margin-left-alt-* {
+  mso-margin-left-alt: --spacing(--value(integer));
+  mso-margin-left-alt: --value([*]);
+}
+@utility -mso-margin-left-alt-* {
+  mso-margin-left-alt: --spacing(--value(integer) * -1);
+}
+
+/* mso-para-margin */
+@utility mso-para-margin-* {
+  mso-para-margin: --spacing(--value(integer));
+  mso-para-margin: --value([*]);
+}
+@utility -mso-para-margin-* {
+  mso-para-margin: --spacing(--value(integer) * -1);
+}
+@utility mso-para-margin-top-* {
+  mso-para-margin-top: --spacing(--value(integer));
+  mso-para-margin-top: --value([*]);
+}
+@utility -mso-para-margin-top-* {
+  mso-para-margin-top: --spacing(--value(integer) * -1);
+}
+@utility mso-para-margin-right-* {
+  mso-para-margin-right: --spacing(--value(integer));
+  mso-para-margin-right: --value([*]);
+}
+@utility -mso-para-margin-right-* {
+  mso-para-margin-right: --spacing(--value(integer) * -1);
+}
+@utility mso-para-margin-bottom-* {
+  mso-para-margin-bottom: --spacing(--value(integer));
+  mso-para-margin-bottom: --value([*]);
+}
+@utility -mso-para-margin-bottom-* {
+  mso-para-margin-bottom: --spacing(--value(integer) * -1);
+}
+@utility mso-para-margin-left-* {
+  mso-para-margin-left: --spacing(--value(integer));
+  mso-para-margin-left: --value([*]);
+}
+@utility -mso-para-margin-left-* {
+  mso-para-margin-left: --spacing(--value(integer) * -1);
+}
+
+/* mso-text-indent-alt */
+@utility mso-text-indent-alt-* {
+  mso-text-indent-alt: --spacing(--value(integer));
+  mso-text-indent-alt: --value([*]);
+}
+@utility -mso-text-indent-alt-* {
+  mso-text-indent-alt: --spacing(--value(integer) * -1);
+}
+
+/* mso-table-{?}space */
+@utility mso-table-tspace-* {
+  mso-table-tspace: --spacing(--value(integer));
+  mso-table-tspace: --value([*]);
+}
+@utility -mso-table-tspace-* {
+  mso-table-tspace: --spacing(--value(integer) * -1);
+}
+@utility mso-table-rspace-* {
+  mso-table-rspace: --spacing(--value(integer));
+  mso-table-rspace: --value([*]);
+}
+@utility -mso-table-rspace-* {
+  mso-table-rspace: --spacing(--value(integer) * -1);
+}
+@utility mso-table-bspace-* {
+  mso-table-bspace: --spacing(--value(integer));
+  mso-table-bspace: --value([*]);
+}
+@utility -mso-table-bspace-* {
+  mso-table-bspace: --spacing(--value(integer) * -1);
+}
+@utility mso-table-lspace-* {
+  mso-table-lspace: --spacing(--value(integer));
+  mso-table-lspace: --value([*]);
+}
+@utility -mso-table-lspace-* {
+  mso-table-lspace: --spacing(--value(integer) * -1);
+}
+
+/* mso-font-width */
+@utility mso-font-width-* {
+  mso-font-width: --spacing(--value(integer));
+  mso-font-width: --value([*]);
+}
+
+/* mso-shading */
+@utility mso-shading-* {
+  mso-shading: --value("auto", "windowtext", "transparent");
+  mso-shading: --value(--color-*);
+  mso-shading: --value([*]);
+}
+
+/* mso-shadow-color */
+@utility mso-shadow-color-* {
+  mso-shadow-color: --value("auto", "windowtext");
+  mso-shadow-color: --value(--color-*);
+  mso-shadow-color: --value([*]);
+}
+
+/* mso-element-frame-vspace, mso-element-frame-hspace */
+@utility mso-element-frame-vspace-* {
+  mso-element-frame-vspace: --spacing(--value(integer));
+  mso-element-frame-vspace: --value([*]);
+}
+@utility -mso-element-frame-vspace-* {
+  mso-element-frame-vspace: --spacing(--value(integer) * -1);
+}
+@utility mso-element-frame-hspace-* {
+  mso-element-frame-hspace: --spacing(--value(integer));
+  mso-element-frame-hspace: --value([*]);
+}
+@utility -mso-element-frame-hspace-* {
+  mso-element-frame-hspace: --spacing(--value(integer) * -1);
+}
+
+/* mso-border-* colors */
+@utility mso-border-alt-* {
+  mso-border-alt: --value(--color-*);
+  mso-border-alt: --value([*]);
+}
+@utility mso-border-between-* {
+  mso-border-between: --value(--color-*);
+  mso-border-between: --value([*]);
+}
+@utility mso-border-bottom-alt-* {
+  mso-border-bottom-alt: --value(--color-*);
+  mso-border-bottom-alt: --value([*]);
+}
+@utility mso-border-left-alt-* {
+  mso-border-left-alt: --value(--color-*);
+  mso-border-left-alt: --value([*]);
+}
+@utility mso-border-right-alt-* {
+  mso-border-right-alt: --value(--color-*);
+  mso-border-right-alt: --value([*]);
+}
+@utility mso-border-top-alt-* {
+  mso-border-top-alt: --value(--color-*);
+  mso-border-top-alt: --value([*]);
+}
+
+/* mso-border widths */
+@utility mso-border-between-width-* {
+  mso-border-between-width: --value("thin", "medium", "thick");
+  mso-border-between-width: --spacing(--value(integer));
+  mso-border-between-width: --value([*]);
+}
+@utility mso-border-width-alt-* {
+  mso-border-width-alt: --value("thin", "medium", "thick");
+  mso-border-width-alt: --spacing(--value(integer));
+  mso-border-width-alt: --value([*]);
+}
+@utility mso-border-bottom-width-alt-* {
+  mso-border-bottom-width-alt: --value("thin", "medium", "thick");
+  mso-border-bottom-width-alt: --spacing(--value(integer));
+  mso-border-bottom-width-alt: --value([*]);
+}
+@utility mso-border-left-width-alt-* {
+  mso-border-left-width-alt: --value("thin", "medium", "thick");
+  mso-border-left-width-alt: --spacing(--value(integer));
+  mso-border-left-width-alt: --value([*]);
+}
+@utility mso-border-right-width-alt-* {
+  mso-border-right-width-alt: --value("thin", "medium", "thick");
+  mso-border-right-width-alt: --spacing(--value(integer));
+  mso-border-right-width-alt: --value([*]);
+}
+@utility mso-border-top-width-alt-* {
+  mso-border-top-width-alt: --value("thin", "medium", "thick");
+  mso-border-top-width-alt: --spacing(--value(integer));
+  mso-border-top-width-alt: --value([*]);
+}
+
+/* mso-border-*-source */
+@utility mso-border-bottom-source-* {
+  mso-border-bottom-source: --value("auto", "background", 'foreground');
+}
+@utility mso-border-left-source-* {
+  mso-border-left-source: --value("auto", "background", 'foreground');
+}
+@utility mso-border-right-source-* {
+  mso-border-right-source: --value("auto", "background", 'foreground');
+}
+@utility mso-border-top-source-* {
+  mso-border-top-source: --value("auto", "background", 'foreground');
+}
+
+@utility mso-border-shadow-* {
+  mso-border-shadow: --value("yes", "no");
+}
+
+@utility mso-border-effect-* {
+  mso-border-effect: --value("3d", "box");
+}

package/tailwindcss-preset-email/theme/borders.css

@@ -0,0 +1,15 @@
+@theme {
+  --radius-*: initial;
+  
+  /* Border radius */
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-full: 9999px;
+}