@maizzle/framework 5.0.0-beta.9 → 5.0.0

package/src/utils/string.js

@@ -117,22 +117,34 @@ export function humanFileSize(bytes, si=false, dp=2) {
 }
 
 /**
- * Get the root directories from a list of globs.
- * @param {*} globs
- * @returns
+ * Get the root directories from a list of glob patterns.
+ *
+ * @param {array} patterns List of glob patterns.
+ * @returns {array} List of root directories.
  */
-export function getRootDirectories(globs) {
-  globs = Array.isArray(globs) ? globs : [globs]
-
-  const positiveGlobs = new Set(globs.filter(g => !g.startsWith('!')))
-
-  const rootDirs = new Set()
+export function getRootDirectories(patterns = []) {
+  if (!Array.isArray(patterns)) {
+    return []
+  }
 
-  for (const pattern of positiveGlobs) {
-    rootDirs.add(pattern.split('/').slice(0, pattern.split('/').indexOf('**')).join('/'))
+  if (patterns.length === 0) {
+    return []
   }
 
-  return Array.from(rootDirs)
+  return [...new Set(
+    patterns
+      .filter(pattern => !pattern.startsWith('!'))
+      .map(pattern => {
+        // If the pattern doesn't include wildcards, use it as is
+        if (!pattern.includes('*')) {
+          return pattern.replace(/\/$/, '') // Remove trailing slash if present
+        }
+        // For patterns with wildcards, get the part before the first wildcard
+        const parts = pattern.split(/[*{]/)[0].split('/')
+        return parts.slice(0, -1).join('/')
+      })
+      .filter(Boolean)
+  )]
 }
 
 /**
@@ -182,3 +194,13 @@ export function parseCSSRule(rule) {
 
   return { property, value }
 }
+
+/**
+ * Normalize a string by removing extra whitespace.
+ *
+ * @param {String} str The string to clean
+ * @returns {String} The cleaned string
+ */
+export function cleanString(str) {
+  return str.replace(/\s+/g, ' ').trim()
+}

package/types/build.d.ts

@@ -1,13 +1,6 @@
-import ComponentsConfig from './components';
 import type { SpinnerName } from 'cli-spinners';
-import type ExpressionsConfig from './expressions';
 
 export default interface BuildConfig {
-  /**
-   * Components configuration.
-   */
-  components?: ComponentsConfig;
-
   /**
    * Paths where Maizzle should look for Templates to compile.
    *
@@ -22,12 +15,7 @@ export default interface BuildConfig {
    * }
    * ```
    */
-  content?: string | string[];
-
-  /**
-  Configure expressions.
-  */
-  expressions?: ExpressionsConfig;
+  content?: string[];
 
   /**
    * Define the output path for compiled Templates, and what file extension they should use.
@@ -57,6 +45,29 @@ export default interface BuildConfig {
      * @default 'html'
      */
     extension: string;
+    /**
+     * Path or array of paths that will be unwrapped.
+     * Everything inside them will be copied to
+     * the root of the output directory.
+     *
+     * @example
+     *
+     * ```
+     * export default {
+     *  build: {
+     *   content: ['test/fixtures/**\/*.html'],
+     *   output: {
+     *    from: ['test/fixtures'],
+     *  }
+     * }
+     * ```
+     *
+     * This will copy everything inside `test/fixtures` to the root
+     * of the output directory, not creating the `test/fixtures`
+     * directory.
+     *
+     */
+    from: string;
   };
 
   /**
@@ -88,21 +99,6 @@ export default interface BuildConfig {
      * @default undefined
      */
     destination?: string;
-  } | {
-    /**
-     * An array of objects specifying source and destination directories for static files.
-     */
-    static: Array<{
-      /**
-       * Array of paths where Maizzle should look for static files.
-       */
-      source: string[];
-      /**
-       * Directory where static files should be copied to,
-       * relative to the `build.output` path.
-       */
-      destination: string;
-    }>;
   };
 
   /**
@@ -137,4 +133,31 @@ export default interface BuildConfig {
    * ```
    */
   summary?: boolean;
+
+  /**
+   * Information about the Template currently being compiled.
+   *
+   * @example
+   *
+   * ```
+   * {
+      path: {
+        root: 'build_production',
+        dir: 'build_production',
+        base: 'transactional.html',
+        ext: '.html',
+        name: 'transactional'
+      }
+    }
+    * ```
+   */
+  current?: {
+    path?: {
+      root: string;
+      dir: string;
+      base: string;
+      ext: string;
+      name: string;
+    };
+  };
 }

package/types/config.d.ts

@@ -1,29 +1,24 @@
+import type Events from './events';
 import type BuildConfig from './build';
 import type MinifyConfig from './minify';
 import type PostHTMLConfig from './posthtml';
 import type MarkdownConfig from './markdown';
 import type { ProcessOptions } from 'postcss';
 import type PurgeCSSConfig from './css/purge';
+import type PlaintextConfig from './plaintext';
 import type CSSInlineConfig from './css/inline';
-import type ComponentsConfig from './components';
+import type { SpinnerName } from 'cli-spinners';
 import type WidowWordsConfig from './widowWords';
 import type { CoreBeautifyOptions } from 'js-beautify';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
-import type {
-  beforeCreateType,
-  beforeRenderType,
-  afterRenderType,
-  afterTransformersType,
-  afterBuildType
-} from './events';
-import type PlaintextConfig from './plaintext';
-
+import type { PostCssCalcOptions } from 'postcss-calc';
+import type { PostHTMLFetchConfig } from 'posthtml-fetch';
 import type { Config as TailwindConfig } from 'tailwindcss';
+import type { PostHTMLComponents } from 'posthtml-component';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface Config {
-  [key: string]: any; // eslint-disable-line
-
   /**
    * Add or remove attributes from elements.
    */
@@ -47,7 +42,7 @@ export default interface Config {
      * }
      * ```
      */
-    add?: Record<string, Record<string, string|number>>;
+    add?: Record<string, Record<string, string | number>>;
 
     /**
      * Remove attributes from elements.
@@ -58,30 +53,23 @@ export default interface Config {
      * ```
      * export default {
      *   attributes: {
-     *     remove: ['width', 'height'],
+     *     remove: [
+     *      {
+     *        name: 'width',
+     *        value: '100', // or RegExp: /\d/
+     *      },
+     *     ], // or as array: ['width', 'height']
      *   }
      * }
      * ```
      */
-    remove?: Record<string, string[]>;
+    remove?: Array<string | { name: string; value: string | RegExp }>;
   }
 
   /**
-  Configure build settings.
-
-  @example
-  ```
-  export default {
-    build: {
-      components: ComponentsConfig,
-      posthtml: PostHTMLConfig,
-      tailwind: TailwindConfig,
-      templates: TemplatesConfig,
-    }
-  }
-  ```
-  */
-  build: BuildConfig;
+   * Configure build settings.
+   */
+  build?: BuildConfig;
 
   /**
   Define a string that will be prepended to sources and hrefs in your HTML and CSS.
@@ -112,12 +100,12 @@ export default interface Config {
   /**
    * Configure components.
    */
-  components?: ComponentsConfig;
+  components?: PostHTMLComponents;
 
   /**
    * Configure how CSS is handled.
    */
-  css: {
+  css?: {
     /**
      * Configure CSS inlining.
      */
@@ -128,6 +116,52 @@ export default interface Config {
      */
     purge?: PurgeCSSConfig;
 
+    /**
+     * Resolve CSS `calc()` expressions to their static values.
+     */
+    resolveCalc?: boolean | PostCssCalcOptions;
+
+    /**
+     * Resolve CSS custom properties to their static values.
+     */
+    resolveProps?: boolean | {
+      /**
+       * Whether to preserve custom properties in the output.
+       *
+       * @default false
+       */
+      preserve?: boolean | 'computed';
+      /**
+       * Define CSS variables that will be added to :root.
+       *
+       * @default {}
+       */
+      variables?: {
+        [key: string]: string | {
+          /**
+           * The value of the CSS variable.
+           */
+          value: string;
+          /**
+           * Whether the variable is !important.
+           */
+          isImportant?: boolean;
+        };
+      };
+      /**
+       * Whether to preserve variables injected via JS with the `variables` option.
+       *
+       * @default true
+       */
+      preserveInjectedVariables?: boolean;
+      /**
+       * Whether to preserve `@media` rules order.
+       *
+       * @default false
+       */
+      preserveAtRulesOrder?: boolean;
+    };
+
     /**
      * Normalize escaped character class names like `\:` or `\/` by replacing them
      * with email-safe alternatives.
@@ -147,48 +181,57 @@ export default interface Config {
     safe?: boolean | Record<string, string>;
 
     /**
-     * Ensure that all your HEX colors inside `bgcolor` and `color` attributes are defined with six digits.
+     * Rewrite longhand CSS inside style attributes with shorthand syntax.
+     * Only works with `margin`, `padding` and `border`, and only when
+     * all sides are specified.
      *
-     * @default true
+     * @default []
      *
      * @example
      * ```
      * export default {
      *   css: {
-     *     sixHex: false,
+     *     shorthand: {
+     *       tags: ['td', 'div'],
+     *     } // or shorthand: true
      *   }
      * }
      * ```
      */
-    sixHex?: boolean;
+    shorthand?: boolean | Record<string, string[]>;
 
     /**
-     * Rewrite longhand CSS inside style attributes with shorthand syntax.
-     * Only works with `margin`, `padding` and `border`, and only when
-     * all sides are specified.
+     * Ensure that all your HEX colors inside `bgcolor` and `color` attributes are defined with six digits.
      *
-     * @default []
+     * @default true
      *
      * @example
      * ```
      * export default {
      *   css: {
-     *     shorthand: {
-     *       tags: ['td', 'div'],
-     *     } // or shorthand: true
+     *     sixHex: false,
      *   }
      * }
      * ```
      */
-    shorthand?: boolean | Record<string, string[]>;
+    sixHex?: boolean;
 
     /**
      * Use a custom Tailwind CSS configuration object.
-     *
      */
     tailwind?: TailwindConfig;
   }
 
+  /**
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
+  */
+  expressions?: PostHTMLExpressions;
+
+  /**
+   * Configure the [`<fetch>`](https://maizzle.com/docs/tags#fetch) tag.
+   */
+  fetch?: PostHTMLFetchConfig;
+
   /**
    * Transform text inside elements marked with custom attributes.
    * Filters work only on elements that contain only text.
@@ -204,7 +247,7 @@ export default interface Config {
    * }
    * ```
    */
-  filters: boolean | Record<string, (str: string) => string>;
+  filters?: boolean | Record<string, (str: string) => string>;
 
   /**
    * Define variables outside of the `page` object.
@@ -228,7 +271,7 @@ export default interface Config {
    * <p>{{ company.name }}</p>
    * ```
    */
-  locals?: Record<string, any>; // eslint-disable-line
+  locals?: Record<string, any>;
 
   /**
    * Configure the Markdown parser.
@@ -384,11 +427,11 @@ export default interface Config {
     hmr?: boolean;
 
     /**
-     * Enable synchronized scrolling across devices.
+     * Enable synchronized scrolling across browser tabs.
      *
      * @default false
      */
-    syncScroll?: boolean;
+    scrollSync?: boolean;
 
     /**
      * Paths to watch for changes.
@@ -404,6 +447,22 @@ export default interface Config {
      * @default false
      */
     reportFileSize?: boolean;
+
+    /**
+     * Type of spinner to show in the console.
+     *
+     * @default 'circleHalves'
+     *
+     * @example
+     * ```
+     * export default {
+     *   server: {
+     *     spinner: 'bounce'
+     *   }
+     * }
+     * ```
+     */
+    spinner?: SpinnerName;
   }
 
   /**
@@ -471,83 +530,87 @@ export default interface Config {
   * @example
   * ```
   * export default {
-  *   beforeCreate: async (config) => {
+  *   beforeCreate: async ({config}) => {
   *     // do something with `config`
   *   }
   * }
   * ```
   */
-  beforeCreate: beforeCreateType;
+  beforeCreate?: Events['beforeCreate'];
 
   /**
    * Runs after the Template's config has been computed, but just before it is compiled.
-   * It exposes the Template's HTML, its config, and the Maizzle `render` function.
-   * Must return the `html` string.
+   *
+   * Must return the `html` string, otherwise the original will be used.
    *
    * @default undefined
    *
    * @example
    * ```
    * export default {
-   *   beforeRender: async ({html, config, render}) => {
+   *   beforeRender: async ({html, matter, config, posthtml, transform}) => {
    *     // do something...
    *     return html;
    *   }
    * }
    * ```
    */
-  beforeRender: beforeRenderType;
+  beforeRender?: Events['beforeRender'];
 
   /**
   * 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.
+  *
+  * Must return the `html` string, otherwise the original will be used.
   *
   * @default undefined
   *
   * @example
   * ```
   * export default {
-  *   afterRender: async ({html, config}) => {
+  *   afterRender: async ({html, matter, config, posthtml, transform}) => {
   *     // do something...
   *     return html;
   *   }
   * }
   * ```
   */
-  afterRender: afterRenderType;
+  afterRender?: Events['afterRender'];
 
   /**
   * 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.
+  *
+  * Must return the `html` string, otherwise the original will be used.
   *
   * @default undefined
   *
   * @example
   * ```
   * export default {
-  *   afterTransformers: async ({html, config, render}) => {
+  *   afterTransformers: async ({html, matter, config, posthtml, transform}) => {
   *     // do something...
   *     return html;
   *   }
   * }
   * ```
   */
-  afterTransformers: afterTransformersType;
+  afterTransformers?: Events['afterTransformers'];
 
   /**
   * 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.
+  * `files` will contain the paths to all the files inside the `build.output.path` directory.
   *
   * @default undefined
   *
   * @example
   * ```
   * export default {
-  *   afterBuild: async ({files, config, render}) => {
+  *   afterBuild: async ({files, config, transform}) => {
   *     // do something...
   *   }
   * }
   * ```
   */
-  afterBuild: afterBuildType;
+  afterBuild?: Events['afterBuild'];
+
+  [key: string]: any;
 }

package/types/css/inline.d.ts

@@ -85,6 +85,8 @@ export default interface InlineCSSConfig {
    * Prefer HTML `width` and `height` attributes over inline CSS.
    * The inline CSS `width` and `height` will be removed.
    *
+   * Applies to elements set in `widthElements` and `heightElements`.
+   *
    * @example
    * ```
    * export default {
@@ -161,24 +163,6 @@ export default interface InlineCSSConfig {
    */
   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.
    *
@@ -197,7 +181,7 @@ export default interface InlineCSSConfig {
   removeInlinedSelectors?: boolean;
 
   /**
-   * Resolve calc() expressions in CSS to their computed values.
+   * Prefer unitless CSS values
    *
    * @default true
    *
@@ -206,29 +190,29 @@ export default interface InlineCSSConfig {
    * export default {
    *   css: {
    *     inline: {
-   *       resolveCalc: true
+   *       preferUnitless: true
    *     }
    *   }
    * }
    * ```
    */
-  resolveCalc?: boolean;
+  preferUnitlessValues?: boolean;
 
   /**
-   * Prefer unitless CSS values
+   * Array of CSS selectors that should be preserved after inlining.
    *
-   * @default true
+   * @default [] // array of email-client targeting selectors
    *
    * @example
    * ```
    * export default {
    *   css: {
    *     inline: {
-   *       preferUnitless: true
+   *       safelist: ['.line', '.bg-red-200']
    *     }
    *   }
    * }
    * ```
-   */
-  preferUnitlessValues?: boolean;
+  */
+  safelist?: string[];
 }

package/types/css/purge.d.ts

@@ -11,13 +11,13 @@ export default interface PurgeCSSConfig {
    * export default {
    *   css: {
    *     purge: {
-   *       whitelist: ['.some-class', '.Mso*', '#*'],
+   *       safelist: ['.some-class', '.Mso*', '#*'],
    *     }
    *   }
    * }
    * ```
   */
-  whitelist?: Opts['whitelist'];
+  safelist?: Opts['whitelist'];
 
   /**
    * Start and end delimiters for computed classes that you don't want removed.
@@ -102,7 +102,7 @@ export default interface PurgeCSSConfig {
    * }
    * ```
   */
-  doNotRemoveHTMLCommentsWhoseOpeningTagContains: Opts['doNotRemoveHTMLCommentsWhoseOpeningTagContains'];
+  doNotRemoveHTMLCommentsWhoseOpeningTagContains?: Opts['doNotRemoveHTMLCommentsWhoseOpeningTagContains'];
 
   /**
    * Rename all classes and IDs in both your `<style>` tags and your body HTML elements,