@maizzle/framework 4.8.8 → 5.0.0-beta.0

package/types/css/inline.d.ts

@@ -0,0 +1,234 @@
+export type AttributeToStyleSupportedAttributes =
+  | 'width'
+  | 'height'
+  | 'bgcolor'
+  | 'background'
+  | 'align'
+  | 'valign';
+
+export default interface InlineCSSConfig {
+  /**
+   * Which CSS properties should be duplicated as what HTML attributes.
+   *
+   * @default {}
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       styleToAttribute: {
+   *         'background-color': 'bgcolor',
+   *       }
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  styleToAttribute?: Record<string, string>;
+
+  /**
+   * Duplicate HTML attributes to inline CSS.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       attributeToStyle: ['width', 'bgcolor', 'background']
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  attributeToStyle?: boolean | AttributeToStyleSupportedAttributes[];
+
+  /**
+   * Use any CSS pixel widths to create `width` attributes on elements set in `widthElements`.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       applyWidthAttributes: true,
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  applyWidthAttributes?: boolean;
+
+  /**
+   * Use any CSS pixel widths to create `height` attributes on elements set in `heightElements`.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       applyHeightAttributes: true,
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  applyHeightAttributes?: boolean;
+
+  /**
+   * Prefer HTML `width` and `height` attributes over inline CSS.
+   * The inline CSS `width` and `height` will be removed.
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       useAttributeSizes: true
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  useAttributeSizes?: boolean;
+
+  /**
+   * Array of CSS property names that should be excluded from the CSS inlining process.
+   *
+   * @default []
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       excludedProperties: ['padding', 'padding-left']
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  excludedProperties?: string[];
+
+  /**
+   * Fenced code blocks that should be ignored during CSS inlining.
+   *
+   * @default
+   * {
+   *   EJS: { start: '<%', end: '%>' },
+   *   HBS: { start: '{{', end: '}}' }
+   * }
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       codeBlocks: {
+   *         EJS: { start: '<%', end: '%>' },
+   *         HBS: { start: '{{', end: '}}' },
+   *       }
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  codeBlocks?: Record<string, { start: string; end: string }>;
+
+  /**
+   * Provide your own CSS to be inlined. Must be vanilla or pre-compiled CSS.
+   *
+   * Existing `<style>` in your HTML tags will be ignored and their contents won't be inlined.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       customCSS: `.custom-class { color: red }`
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  customCSS?: string | false;
+
+  /**
+   * Resolve CSS variables and replace them with their values.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       resolveVariables: true
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  resolveVariables?: boolean;
+
+  /**
+   * Remove inlined CSS selectors from the `<style>` tag.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *    inline: {
+   *      removeInlinedSelectors: true
+   *    }
+   * }
+   * ```
+   */
+  removeInlinedSelectors?: boolean;
+
+  /**
+   * Resolve calc() expressions in CSS to their computed values.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       resolveCalc: true
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  resolveCalc?: boolean;
+
+  /**
+   * Prefer unitless CSS values
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     inline: {
+   *       preferUnitless: true
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  preferUnitlessValues?: boolean;
+}

package/types/css/purge.d.ts

@@ -0,0 +1,125 @@
+import type { Opts } from 'email-comb';
+
+export default interface PurgeCSSConfig {
+  /**
+   * Classes or IDs that you don't want removed.
+   *
+   * @default []
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       whitelist: ['.some-class', '.Mso*', '#*'],
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  whitelist?: Opts['whitelist'];
+
+  /**
+   * Start and end delimiters for computed classes that you don't want removed.
+   *
+   * @default
+   * [
+   *   {
+   *     heads: '{{',
+   *     tails: '}}',
+   *   },
+   *   {
+   *     heads: '{%',
+   *     tails: '%}',
+   *   }
+   * ]
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       backend: [
+   *         { heads: '[[', tails: ']]' },
+   *       ]
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  backend?: Opts['backend'];
+
+  /**
+   * Whether to remove `<!-- HTML comments -->`.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       removeHTMLComments: false,
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  removeHTMLComments?: Opts['removeHTMLComments'];
+
+  /**
+   * Whether to remove `/* CSS comments *\/`.
+   *
+   * @default true
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       removeCSSComments: false,
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  removeCSSComments?: Opts['removeCSSComments'];
+
+  /**
+   * List of strings representing start of a conditional comment that should not be removed.
+   *
+   * @default
+   * ['[if', '[endif']
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       doNotRemoveHTMLCommentsWhoseOpeningTagContains: ['[if', '[endif'],
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  doNotRemoveHTMLCommentsWhoseOpeningTagContains: Opts['doNotRemoveHTMLCommentsWhoseOpeningTagContains'];
+
+  /**
+   * Rename all classes and IDs in both your `<style>` tags and your body HTML elements,
+   * to be as few characters as possible.
+   *
+   * @default false
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     purge: {
+   *       uglify: true,
+   *     }
+   *   }
+   * }
+   * ```
+  */
+  uglify?: Opts['uglify'];
+}

package/types/events.d.ts

@@ -1,105 +1,5 @@
-export type beforeCreateType = (config: any) => Promise<void>;
-export type beforeRenderType = (html: string, config: any) => Promise<string>;
-export type afterRenderType = (html: string, config: any) => Promise<string>;
-export type afterTransformersType = (html: string, config: any) => Promise<string>;
-export type afterBuildType = (files: any[], config: any) => Promise<void>;
-
-export default interface EventsConfig {
-  /**
-  Runs after the Environment config has been computed, but before Templates are processed.
-  Exposes the `config` object so you can further customize it.
-
-  @default undefined
-
-  @example
-  ```
-  module.exports = {
-    events: {
-      beforeCreate: async (config) => {
-        // do something with `config`
-      }
-    }
-  }
-  ```
-  */
-  beforeCreate: beforeCreateType;
-
-  /**
-  Runs after the Template's config has been computed, but just before it is compiled.
-  It exposes the Template's config, as well as the HTML. Must return the `html` string.
-
-  @default undefined
-
-  @example
-  ```
-  module.exports = {
-    events: {
-      beforeRender: async (html, config) => {
-        // do something with html and config
-        return html;
-      }
-    }
-  }
-  ```
-  */
-  beforeRender: beforeRenderType;
-
-  /**
-  Runs after the Template has been compiled, but before any Transformers have been applied.
-  Exposes the rendered `html` string and the `config`. Must return the `html` string.
-
-  @default undefined
-
-  @example
-  ```
-  module.exports = {
-    events: {
-      afterRender: async (html, config) => {
-        // do something with html and config
-        return html;
-      }
-    }
-  }
-  ```
-  */
-  afterRender: afterRenderType;
-
-  /**
-  Runs after all Transformers have been applied, just before the final HTML is returned.
-  Exposes the rendered `html` string and the `config`. Must return the `html` string.
-
-  @default undefined
-
-  @example
-  ```
-  module.exports = {
-    events: {
-      afterTransformers: async (html, config) => {
-        // do something with html and config
-        return html;
-      }
-    }
-  }
-  ```
-  */
-  afterTransformers: afterTransformersType;
-
-  /**
-  Runs after all Templates have been compiled and output to disk.
-  The files parameter will contain the paths to all the files inside the `build.templates.destination.path` directory.
-
-  @default undefined
-
-  @example
-  ```
-  module.exports = {
-    events: {
-      afterBuild: async (files, config) => {
-        // do something with files or config
-      }
-    }
-  }
-  ```
-  */
-  afterBuild: afterBuildType;
-}
+export type beforeCreateType = (config: object) => Promise<void>;
+export type beforeRenderType = (html: string, config: object, render: (html: string, config: object) => Promise<string>) => Promise<string>;
+export type afterRenderType = ({ html, config }: { html: string, config: object }) => Promise<string>;
+export type afterTransformersType = ({ html, config, render }: { html: string, config: object, render: (html: string, config: object) => Promise<string> }) => Promise<string>;
+export type afterBuildType = ({ files, config, render }: { files: string[], config: object, render: (html: string, config: object) => Promise<string> }) => Promise<void>;