@maizzle/framework 5.0.0-beta.2 → 5.0.0-beta.21

package/src/transformers/inline.js

@@ -2,18 +2,20 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
+import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
 import { calc } from '@csstools/css-calc'
 import isEmpty from 'lodash-es/isEmpty.js'
-import * as cheerio from 'cheerio/lib/slim'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
+import { parseCSSRule } from '../utils/string.js'
 import { useAttributeSizes } from './useAttributeSizes.js'
+import defaultPostHTMLConfig from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (options = {}) => tree => {
-  return inline(render(tree), options).then(html => parse(html))
+  return inline(render(tree), options).then(html => parse(html, defaultPostHTMLConfig))
 }
 
 export default posthtmlPlugin
@@ -116,7 +118,7 @@ export async function inline(html = '', options = {}) {
       rule.walkDecls(decl => {
         // Resolve calc() values to static values
         if (options.resolveCalc) {
-          decl.value = decl.value.includes('calc(') ? calc(decl.value) : decl.value
+          decl.value = decl.value.includes('calc(') ? calc(decl.value, {precision: 2}) : decl.value
         }
 
         declarations.add(decl)
@@ -179,10 +181,10 @@ export async function inline(html = '', options = {}) {
 
           if (styleAttr) {
             inlineStyles = styleAttr.split(';').reduce((acc, i) => {
-              let [property, value] = i.split(':').map(i => i.trim())
+              let { property, value } = parseCSSRule(i)
 
               if (value && options.resolveCalc) {
-                value = value.includes('calc') ? calc(value) : value
+                value = value.includes('calc') ? calc(value, {precision: 2}) : value
               }
 
               if (value && options.preferUnitlessValues) {

package/src/transformers/minify.js

@@ -4,6 +4,7 @@ import { defu as merge } from 'defu'
 import { render } from 'posthtml-render'
 import { parser as parse } from 'posthtml-parser'
 import posthtmlConfig from '../posthtml/defaultConfig.js'
+import defaultPostHTMLConfig from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (options = {}) => tree => {
   options = merge(options, {
@@ -12,7 +13,7 @@ const posthtmlPlugin = (options = {}) => tree => {
 
   const { result: html } = crush(render(tree), options)
 
-  return parse(html)
+  return parse(html, defaultPostHTMLConfig)
 }
 
 export default posthtmlPlugin

package/src/transformers/replaceStrings.js

@@ -4,6 +4,7 @@ import { render } from 'posthtml-render'
 import isEmpty from 'lodash-es/isEmpty.js'
 import { parser as parse } from 'posthtml-parser'
 import posthtmlConfig from '../posthtml/defaultConfig.js'
+import defaultPostHTMLConfig from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (replacements = {}) => tree => {
   if (!isEmpty(replacements)) {
@@ -14,10 +15,13 @@ const posthtmlPlugin = (replacements = {}) => tree => {
       render(tree).replace(patterns, matched => {
         for (const [regex, replacement] of regexes) {
           if (regex.test(matched)) {
-            return replacement
+            return matched.replace(regex, replacement)
           }
         }
-      })
+
+        return matched
+      }),
+      defaultPostHTMLConfig
     )
   }
 

package/src/transformers/template.js

@@ -0,0 +1,26 @@
+const posthtmlPlugin = (() => tree => {
+  const process = node => {
+    // Return the original node if it doesn't have a tag
+    if (!node.tag) {
+      return node
+    }
+
+    // Preserve <template> tags marked as such
+    if (node.tag === 'template' && node.attrs?.preserve) {
+      node.attrs.preserve = false
+
+      return node
+    }
+
+    // Replace <template> tags with their content
+    if (node.tag === 'template') {
+      node.tag = false
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+})
+
+export default posthtmlPlugin

package/src/utils/string.js

@@ -115,3 +115,82 @@ export function humanFileSize(bytes, si=false, dp=2) {
 
   return bytes.toFixed(dp) + ' ' + units[u]
 }
+
+/**
+ * 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(patterns = []) {
+  if (!Array.isArray(patterns)) {
+    return []
+  }
+
+  if (patterns.length === 0) {
+    return []
+  }
+
+  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)
+  )]
+}
+
+/**
+ * Get the file extensions from a glob pattern.
+ * @param {*} pattern
+ * @returns
+ */
+export function getFileExtensionsFromPattern(pattern) {
+  const starExtPattern = /\.([^\*\{\}]+)$/ // Matches .ext but not .* or .{ext}
+  const bracePattern = /\.{([^}]+)}$/ // Matches .{ext} or .{ext,ext}
+  const wildcardPattern = /\.\*$/ // Matches .*
+
+  if (wildcardPattern.test(pattern)) {
+    return ['html'] // We default to 'html' if the pattern is a wildcard
+  }
+
+  const braceMatch = pattern.match(bracePattern);
+  if (braceMatch) {
+    return braceMatch[1].split(',') // Split and return extensions inside braces
+  }
+
+  const starExtMatch = pattern.match(starExtPattern)
+  if (starExtMatch) {
+    return [starExtMatch[1]] // Return single extension
+  }
+
+  return ['html'] // No recognizable extension pattern, default to 'html'
+}
+
+export function parseCSSRule(rule) {
+  // Step 1: Trim the input string
+  rule = rule.trim()
+
+  // Step 2: Find the index of the first colon
+  const colonIndex = rule.indexOf(':')
+
+  // Step 3: Extract property and value parts
+  if (colonIndex === -1) {
+    return {
+      property: '',
+      value: ''
+    }
+  }
+
+  const property = rule.slice(0, colonIndex).trim()
+  const value = rule.slice(colonIndex + 1).trim()
+
+  return { property, value }
+}

package/types/build.d.ts

@@ -1,14 +1,9 @@
-import ComponentsConfig from './components';
 import type { SpinnerName } from 'cli-spinners';
+import type { PostHTMLExpressions } from 'posthtml-expressions';
 
 export default interface BuildConfig {
   /**
-   * Components configuration.
-   */
-  components?: ComponentsConfig;
-
-  /**
-   * Directory where Maizzle should look for Templates to compile.
+   * Paths where Maizzle should look for Templates to compile.
    *
    * @default ['src/templates/**\/*.html']
    *
@@ -16,12 +11,17 @@ export default interface BuildConfig {
    * ```
    * export default {
    *   build: {
-   *     files: ['src/templates/**\/*.html']
+   *     content: ['src/templates/**\/*.html']
    *   }
    * }
    * ```
    */
-  files?: string | string[];
+  content?: string[];
+
+  /**
+  Configure [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) options.
+  */
+  expressions?: PostHTMLExpressions;
 
   /**
    * Define the output path for compiled Templates, and what file extension they should use.
@@ -51,6 +51,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;
   };
 
   /**
@@ -82,21 +105,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;
-    }>;
   };
 
   /**
@@ -131,4 +139,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,23 @@
+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 { PostHTMLFetchConfig } from 'posthtml-fetch';
+import type { PostHTMLComponents } from 'posthtml-component';
 
 import type { Config as TailwindConfig } from 'tailwindcss';
 
 export default interface Config {
-  [key: string]: any; // eslint-disable-line
-
   /**
    * Add or remove attributes from elements.
    */
@@ -67,21 +61,9 @@ export default interface Config {
   }
 
   /**
-  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 +94,12 @@ export default interface Config {
   /**
    * Configure components.
    */
-  components?: ComponentsConfig;
+  components?: PostHTMLComponents;
 
   /**
    * Configure how CSS is handled.
    */
-  css: {
+  css?: {
     /**
      * Configure CSS inlining.
      */
@@ -136,7 +118,7 @@ export default interface Config {
      * ```
      * export default {
      *   css: {
-     *     safeClassNames: {
+     *     safe: {
      *       ':': '__',
      *       '!': 'i-',
      *     }
@@ -144,7 +126,7 @@ export default interface Config {
      * }
      * ```
      */
-    safeClassNames?: boolean | Record<string, string>;
+    safe?: boolean | Record<string, string>;
 
     /**
      * Ensure that all your HEX colors inside `bgcolor` and `color` attributes are defined with six digits.
@@ -184,11 +166,15 @@ export default interface Config {
 
     /**
      * Use a custom Tailwind CSS configuration object.
-     *
      */
     tailwind?: TailwindConfig;
   }
 
+  /**
+   * 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 +190,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 +214,7 @@ export default interface Config {
    * <p>{{ company.name }}</p>
    * ```
    */
-  locals?: Record<string, any>; // eslint-disable-line
+  locals?: Record<string, any>;
 
   /**
    * Configure the Markdown parser.
@@ -404,6 +390,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 +473,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/purge.d.ts

@@ -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,