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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.4",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -23,9 +23,10 @@
   },
   "scripts": {
     "dev": "vitest",
-    "lint": "biome lint ./src ./test",
+    "release": "npx np",
     "pretest": "npm run lint",
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "lint": "biome lint ./src ./test"
   },
   "repository": {
     "type": "git",
@@ -47,7 +48,7 @@
     "html-emails"
   ],
   "dependencies": {
-    "@csstools/css-calc": "^1.2.2",
+    "@csstools/css-calc": "^1.2.4",
     "@maizzle/cli": "next",
     "cheerio": "^1.0.0-rc.12",
     "chokidar": "^3.6.0",
@@ -63,11 +64,11 @@
     "istextorbinary": "^9.5.0",
     "juice": "^10.0.0",
     "lodash-es": "^4.17.21",
-    "morphdom": "^2.7.2",
+    "morphdom": "^2.7.3",
     "ora": "^8.0.1",
     "pathe": "^1.1.2",
-    "postcss": "^8.4.38",
-    "postcss-custom-properties": "^13.3.10",
+    "postcss": "^8.4.39",
+    "postcss-custom-properties": "^13.3.12",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
@@ -87,7 +88,7 @@
     "pretty": "^2.0.0",
     "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.5",
     "ws": "^8.17.0"
   },
   "devDependencies": {

package/src/commands/build.js

@@ -1,7 +1,6 @@
 import {
   readFile,
   writeFile,
-  copyFile,
   lstat,
   mkdir,
   rm
@@ -12,22 +11,34 @@ import { defu as merge } from 'defu'
 
 import get from 'lodash/get.js'
 import isEmpty from 'lodash-es/isEmpty.js'
-import { isBinary } from 'istextorbinary'
 
 import ora from 'ora'
 import pico from 'picocolors'
 import cliTable from 'cli-table3'
 
 import { render } from '../generators/render.js'
-import { formatTime } from '../utils/string.js'
-import { getColorizedFileSize } from '../utils/node.js'
-import { readFileConfig } from '../utils/getConfigByFilePath.js'
+
+import {
+  formatTime,
+  getRootDirectories,
+  getFileExtensionsFromPattern,
+} from '../utils/string.js'
+
+import {
+  getColorizedFileSize,
+  copyDirectory,
+} from '../utils/node.js'
+
 import {
   generatePlaintext,
   handlePlaintextTags,
   writePlaintextFile
 } from '../generators/plaintext.js'
 
+import { readFileConfig } from '../utils/getConfigByFilePath.js'
+
+import { transformers } from '../transformers/index.js'
+
 /**
  * Compile templates and output to the build directory.
  * Returns a promise containing an object with files output and the config object.
@@ -72,9 +83,19 @@ export default async (config = {}) => {
       head: ['File name', 'File size', 'Build time'].map(item => pico.bold(item)),
     })
 
-    // Determine paths of templates to build
-    const userFilePaths = get(config, 'build.content', 'src/templates/**/*.html')
-    const templateFolders = Array.isArray(userFilePaths) ? userFilePaths : [userFilePaths]
+    /**
+     * Determine paths to handle
+     *
+     * 1. Resolve globs in `build.content` to folders that should be copied over to `build.output.path`
+     * 2. Check that templates to be built, actually exist
+     */
+    const contentPaths = get(config, 'build.content', 'src/templates/**/*.html')
+
+    // 1. Resolve globs in `build.content` to folders that should be copied over to `build.output.path`
+    const rootDirs = await getRootDirectories(contentPaths)
+
+    // 2. Check that templates to be built, actually exist
+    const templateFolders = Array.isArray(contentPaths) ? contentPaths : [contentPaths]
     const templatePaths = await fg.glob([...new Set(templateFolders)])
 
     // If there are no templates to build, throw error
@@ -82,37 +103,44 @@ export default async (config = {}) => {
       throw new Error(`No templates found in ${pico.inverse(templateFolders)}`)
     }
 
-    const baseDirs = templateFolders.filter(p => !p.startsWith('!')).map(p => {
-      const parts = p.split('/')
-      // remove the glob part (e.g., **/*.html):
-      return parts.filter(part => !part.includes('*')).join('/')
-    })
-
     /**
-     * Check for binary files
+     * Copy source directories to destination
      *
-     * We store paths to binary files in a separate array, because we don't want
-     * to render them. These files will be treated as static files and will
-     * be copied directly to the output directory, just like the
-     * `build.static` folders.
+     * Copies each `build.content` path to the `build.output.path` directory.
      */
-    const binaryPaths = await fg.glob([...new Set(baseDirs.map(base => `${base}/**/*.*`))])
-      .then(paths => paths.filter(file => isBinary(file)))
+    for await (const rootDir of rootDirs) {
+      await copyDirectory(rootDir, buildOutputPath)
+    }
 
     /**
-     * Render templates
+     * Get a list of files to render, from the output directory
      *
-     * Render each template and write the output to the output directory,
-     * preserving the relative path.
+     * Uses all file extensions from non-negated glob paths in `build.content`
+     * to determine which files to render from the output directory.
      */
-    for await (const templatePath of templatePaths) {
-      const templateBuildStartTime = Date.now()
+    const outputExtensions = new Set()
 
-      // Determine the base directory the template belongs to
-      const baseDir = baseDirs.find(base => templatePath.startsWith(base))
+    for (const pattern of contentPaths) {
+      outputExtensions.add(...getFileExtensionsFromPattern(pattern))
+    }
 
-      // Compute the relative path
-      const relativePath = path.relative(baseDir, templatePath)
+    /**
+     * Create a list of templates to compile
+     */
+    const extensions = outputExtensions.size > 1 ? `{${[...outputExtensions].join(',')}}` : 'html'
+
+    const templatesToCompile = await fg.glob(
+      path.join(
+        buildOutputPath,
+        `**/*.${extensions}`
+      )
+    )
+
+    /**
+     * Render templates
+     */
+    for await (const templatePath of templatesToCompile) {
+      const templateBuildStartTime = Date.now()
 
       /**
        * Add the current template path to the config
@@ -122,8 +150,6 @@ export default async (config = {}) => {
        */
       config.build.current = {
         path: path.parse(templatePath),
-        baseDir,
-        relativePath,
       }
 
       const html = await readFile(templatePath, 'utf8')
@@ -158,8 +184,9 @@ export default async (config = {}) => {
        * We do this before generating plaintext, so that
        * any paths will already have been created.
        */
-      const outputPathFromConfig = get(rendered.config, 'permalink', path.join(buildOutputPath, relativePath))
+      const outputPathFromConfig = get(rendered.config, 'permalink', templatePath)
       const parsedOutputPath = path.parse(outputPathFromConfig)
+      // This keeps original file extension if no output extension is set
       const extension = get(rendered.config, 'build.output.extension', parsedOutputPath.ext.slice(1))
       const outputPath = `${parsedOutputPath.dir}/${parsedOutputPath.name}.${extension}`
 
@@ -174,6 +201,14 @@ export default async (config = {}) => {
        */
       await writeFile(outputPath, rendered.html)
 
+      /**
+       * Remove original file if its path is different
+       * from the final destination path.
+       */
+      if (outputPath !== templatePath) {
+        await rm(templatePath)
+      }
+
       /**
        * Add file to CLI table for build summary logging
        */
@@ -189,48 +224,30 @@ export default async (config = {}) => {
     /**
      * Copy static files
      *
-     * Copy binary files that are alongside templates as well as
-     * files from `build.static`, to the output directory.
-     *
-     * TODO: support an array of objects with source and destination, i.e. static: [{ source: 'src/assets', destination: 'assets' }, ...]
+     * TODO: support an array of objects with source and destination,
+     * i.e. static: [{ source: 'src/assets', destination: 'assets' }, ...]
      */
-
-    // Copy binary files that are alongside templates
-    for await (const binaryPath of binaryPaths) {
-      const relativePath = path.relative(get(config, 'build.current.baseDir'), binaryPath)
-      const outputPath = path.join(get(config, 'build.output.path'), get(config, 'build.static.destination'), relativePath)
-
-      await mkdir(path.dirname(outputPath), { recursive: true })
-      await copyFile(binaryPath, outputPath)
-    }
-
-    // Copy files from `build.static`
     const staticSourcePaths = await fg.glob([...new Set(get(config, 'build.static.source', []))])
-      .then(paths => paths.filter(file => isBinary(file)))
-
-    if (!isEmpty(staticSourcePaths)) {
-      for await (const staticPath of staticSourcePaths) {
-        const relativePath = path.relative(get(config, 'build.current.baseDir'), staticPath)
-        const outputPath = path.join(get(config, 'build.output.path'), get(config, 'build.static.destination'), relativePath)
 
-        await mkdir(path.dirname(outputPath), { recursive: true })
-        await copyFile(staticPath, outputPath)
-      }
+    for await (const rootDir of getRootDirectories(staticSourcePaths)) {
+      await copyDirectory(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')))
     }
 
-    const compiledFiles = await fg.glob(path.join(config.build.output.path, '**/*'))
+    const compiledFiles = await fg.glob(path.join(buildOutputPath, '**/*'))
 
     /**
      * Run `afterBuild` event
      */
     if (typeof config.afterBuild === 'function') {
-      await config.afterBuild({ files: compiledFiles, config, render })
+      await config.afterBuild({
+        config,
+        files: compiledFiles,
+        transform: transformers,
+      })
     }
 
     /**
      * Log a build summary if enabled in the config
-     *
-     * Need to first clear the spinner
      */
 
     spinner.clear()

package/src/generators/plaintext.js

@@ -134,7 +134,7 @@ export async function generatePlaintext(html = '', config = {}) {
   ).result
 }
 
-export async function writePlaintextFile(plaintext = '', templateConfig = {}) {
+export async function writePlaintextFile(plaintext = '', config = {}) {
   if (!plaintext) {
     throw new Error('Missing plaintext content.')
   }
@@ -149,8 +149,8 @@ export async function writePlaintextFile(plaintext = '', templateConfig = {}) {
    * Fall back to template's build output path and extension, for example:
    * `config.build.output.path`
    */
-  const plaintextConfig = get(templateConfig, 'plaintext')
-  let plaintextOutputPath = get(plaintextConfig, 'output.path', get(templateConfig, 'build.output.path'))
+  const plaintextConfig = get(config, 'plaintext')
+  let plaintextOutputPath = get(plaintextConfig, 'output.path', get(config, 'build.output.path'))
   const plaintextExtension = get(plaintextConfig, 'output.extension', 'txt')
 
   /**
@@ -158,15 +158,12 @@ export async function writePlaintextFile(plaintext = '', templateConfig = {}) {
    */
   if (plaintextConfig === true) {
     // If the template has a `permalink` key set in the FM
-    if (typeof templateConfig.permalink === 'string') {
+    if (typeof config.permalink === 'string') {
       // Output plaintext at the `permalink` path
-      plaintextOutputPath = templateConfig.permalink
+      plaintextOutputPath = config.permalink
     } else {
       // Output plaintext at the same directory as the HTML file
-      plaintextOutputPath = path.join(
-        get(templateConfig, 'build.output.path'),
-        get(templateConfig, 'build.current.relativePath')
-      )
+      plaintextOutputPath = get(config, 'build.output.path')
     }
   }
 
@@ -186,8 +183,8 @@ export async function writePlaintextFile(plaintext = '', templateConfig = {}) {
    */
   if (path.extname(plaintextOutputPath)) {
     // Ensure the target directory exists
-    await lstat(path.dirname(plaintextOutputPath)).catch(async () => {
-      await mkdir(path.dirname(plaintextOutputPath), { recursive: true })
+    await lstat(plaintextOutputPath).catch(async () => {
+      await mkdir(plaintextOutputPath, { recursive: true })
     })
 
     // Ensure correct extension is used
@@ -196,17 +193,19 @@ export async function writePlaintextFile(plaintext = '', templateConfig = {}) {
       path.basename(plaintextOutputPath, path.extname(plaintextOutputPath)) + '.' + plaintextExtension
     )
 
+    console.log('plaintextOutputPath', plaintextOutputPath);
+
     return writeFile(plaintextOutputPath, plaintext)
   }
 
   /**
    * If `plaintextOutputPath` is a directory path, output file there, using the template's name
    */
-  const templateFileName = get(templateConfig, 'build.current.path.name')
+  const templateFileName = get(config, 'build.current.path.name')
 
   plaintextOutputPath = path.join(
-    plaintextOutputPath,
-    get(templateConfig, 'build.current.path.dir'),
+    path.dirname(plaintextOutputPath),
+    get(config, 'build.current.path.dir'),
     templateFileName + '.' + plaintextExtension
   )
 

package/src/generators/render.js

@@ -5,7 +5,7 @@ import { defu as merge } from 'defu'
 import expressions from 'posthtml-expressions'
 import { parseFrontMatter } from '../utils/node.js'
 import { process as compilePostHTML } from '../posthtml/index.js'
-import { run as useTransformers } from '../transformers/index.js'
+import { run as useTransformers, transformers } from '../transformers/index.js'
 
 export async function render(html = '', config = {}) {
   if (typeof html !== 'string') {
@@ -65,7 +65,8 @@ export async function render(html = '', config = {}) {
     content = await templateConfig.beforeRender(({
       html: content,
       config: templateConfig,
-      render
+      posthtml: compilePostHTML,
+      transform: transformers,
     })) ?? content
   }
 
@@ -85,7 +86,8 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterRender(({
       html: compiled.html,
       config: templateConfig,
-      render
+      posthtml: compilePostHTML,
+      transform: transformers,
     })) ?? compiled.html
   }
 
@@ -117,7 +119,8 @@ export async function render(html = '', config = {}) {
     compiled.html = await templateConfig.afterTransformers(({
       html: compiled.html,
       config: templateConfig,
-      render
+      posthtml: compilePostHTML,
+      transform: transformers,
     })) ?? compiled.html
   }
 

package/src/transformers/index.js

@@ -56,9 +56,9 @@ export async function run(html = '', config = {}) {
    * Rewrite Tailwind CSS class names to email-safe alternatives,
    * unless explicitly disabled
    */
-  if (get(config, 'css.safeClassNames') !== false) {
+  if (get(config, 'css.safe') !== false) {
     posthtmlPlugins.push(
-      safeClassNames(get(config, 'css.safeClassNames', {}))
+      safeClassNames(get(config, 'css.safe', {}))
     )
   }
 
@@ -267,3 +267,23 @@ export async function run(html = '', config = {}) {
       html: result.html,
     }))
 }
+
+export const transformers = {
+  comb,
+  sixHex,
+  minify,
+  baseUrl,
+  inlineCSS,
+  prettify,
+  filters,
+  markdown,
+  posthtmlMso,
+  shorthandCss,
+  preventWidows,
+  addAttributes,
+  urlParameters,
+  safeClassNames,
+  replaceStrings,
+  attributeToStyle,
+  removeAttributes,
+}

package/src/transformers/inline.js

@@ -116,7 +116,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)
@@ -182,7 +182,7 @@ export async function inline(html = '', options = {}) {
               let [property, value] = i.split(':').map(i => i.trim())
 
               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/utils/node.js

@@ -1,7 +1,13 @@
+import path from 'pathe'
 import os from 'node:os'
 import gm from 'gray-matter'
 import pico from 'picocolors'
 import { humanFileSize } from './string.js'
+import {
+  copyFile,
+  mkdir,
+  readdir
+} from 'node:fs/promises'
 
 // Return a local IP address
 export function getLocalIP() {
@@ -66,3 +72,20 @@ export function parseFrontMatter(html) {
   const { content, data, matter, stringify } = gm(html, {})
   return { content, data, matter, stringify }
 }
+
+export async function copyDirectory(src, dest) {
+  await mkdir(dest, { recursive: true })
+
+  const entries = await readdir(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    if (entry.isDirectory()) {
+      await copyDirectory(srcPath, destPath) // Recursively copy subdirectories
+    } else {
+      await copyFile(srcPath, destPath) // Copy files
+    }
+  }
+}

package/src/utils/string.js

@@ -115,3 +115,49 @@ export function humanFileSize(bytes, si=false, dp=2) {
 
   return bytes.toFixed(dp) + ' ' + units[u]
 }
+
+/**
+ * Get the root directories from a list of globs.
+ * @param {*} globs
+ * @returns
+ */
+export function getRootDirectories(globs) {
+  globs = Array.isArray(globs) ? globs : [globs]
+
+  const positiveGlobs = new Set(globs.filter(g => !g.startsWith('!')))
+
+  const rootDirs = new Set()
+
+  for (const pattern of positiveGlobs) {
+    rootDirs.add(pattern.split('/').slice(0, pattern.split('/').indexOf('**')).join('/'))
+  }
+
+  return Array.from(rootDirs)
+}
+
+/**
+ * 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'
+}

package/types/build.d.ts

@@ -1,5 +1,6 @@
 import ComponentsConfig from './components';
 import type { SpinnerName } from 'cli-spinners';
+import type ExpressionsConfig from './expressions';
 
 export default interface BuildConfig {
   /**
@@ -8,7 +9,7 @@ export default interface BuildConfig {
   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 +17,17 @@ export default interface BuildConfig {
    * ```
    * export default {
    *   build: {
-   *     files: ['src/templates/**\/*.html']
+   *     content: ['src/templates/**\/*.html']
    *   }
    * }
    * ```
    */
-  files?: string | string[];
+  content?: string | string[];
+
+  /**
+  Configure expressions.
+  */
+  expressions?: ExpressionsConfig;
 
   /**
    * Define the output path for compiled Templates, and what file extension they should use.

package/types/config.d.ts

@@ -136,7 +136,7 @@ export default interface Config {
      * ```
      * export default {
      *   css: {
-     *     safeClassNames: {
+     *     safe: {
      *       ':': '__',
      *       '!': 'i-',
      *     }
@@ -144,7 +144,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.