@maizzle/framework 5.0.0-beta.9 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -48,58 +48,60 @@
     "html-emails"
   ],
   "dependencies": {
-    "@csstools/css-calc": "^1.2.4",
-    "@maizzle/cli": "next",
-    "cheerio": "^1.0.0-rc.12",
+    "@maizzle/cli": "^2.0.0",
+    "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
     "cli-table3": "^0.6.5",
     "color-shorthand-hex-to-six-digit": "^5.0.16",
     "defu": "^6.1.4",
     "email-comb": "^7.0.21",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
-    "html-crush": "^6.0.18",
+    "html-crush": "^6.0.19",
     "is-url-superb": "^6.1.0",
     "istextorbinary": "^9.5.0",
-    "juice": "^10.0.0",
+    "juice": "^11.0.0",
     "lodash-es": "^4.17.21",
     "morphdom": "^2.7.4",
-    "ora": "^8.0.1",
+    "ora": "^8.1.0",
     "pathe": "^1.1.2",
-    "postcss": "^8.4.39",
-    "postcss-custom-properties": "^13.3.12",
+    "postcss": "^8.4.49",
+    "postcss-calc": "^10.0.2",
+    "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
     "posthtml": "^0.16.6",
-    "posthtml-attrs-parser": "^1.1.0",
+    "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.4",
-    "posthtml-component": "^1.1.0",
-    "posthtml-content": "^2.0.1",
-    "posthtml-extra-attributes": "^3.0.0",
-    "posthtml-markdownit": "^3.0.1",
-    "posthtml-mso": "^3.0.0",
-    "posthtml-parser": "^0.12.0",
-    "posthtml-postcss": "^1.0.0",
-    "posthtml-postcss-merge-longhand": "^3.1.0",
+    "posthtml-component": "^2.1.0",
+    "posthtml-content": "^2.1.0",
+    "posthtml-expressions": "^1.11.4",
+    "posthtml-extra-attributes": "^3.1.0",
+    "posthtml-fetch": "^4.0.0",
+    "posthtml-markdownit": "^3.1.0",
+    "posthtml-mso": "^3.1.0",
+    "posthtml-parser": "^0.12.1",
+    "posthtml-postcss": "^1.0.2",
+    "posthtml-postcss-merge-longhand": "^3.1.2",
     "posthtml-render": "^3.0.0",
-    "posthtml-safe-class-names": "^4.0.2",
-    "posthtml-url-parameters": "^3.0.0",
+    "posthtml-safe-class-names": "^4.1.0",
+    "posthtml-url-parameters": "^3.1.0",
+    "posthtml-widows": "^1.0.0",
     "pretty": "^2.0.0",
-    "string-remove-widows": "^4.0.22",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.5",
-    "ws": "^8.17.0"
+    "tailwindcss": "^3.4.16",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
+    "@biomejs/biome": "1.9.2",
     "@types/js-beautify": "^1.14.3",
-    "@types/markdown-it": "^14.1.1",
-    "@vitest/coverage-v8": "^2.0.1",
+    "@types/markdown-it": "^14.1.2",
+    "@vitest/coverage-v8": "^2.1.5",
     "supertest": "^7.0.0",
-    "vitest": "^2.0.1"
+    "vitest": "^2.1.5"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.20"
   }
 }

package/src/commands/build.js

@@ -1,9 +1,11 @@
 import {
   readFile,
   writeFile,
+  copyFile,
   lstat,
   mkdir,
-  rm
+  rm,
+  cp,
 } from 'node:fs/promises'
 import path from 'pathe'
 import fg from 'fast-glob'
@@ -24,10 +26,7 @@ import {
   getFileExtensionsFromPattern,
 } from '../utils/string.js'
 
-import {
-  getColorizedFileSize,
-  copyDirectory,
-} from '../utils/node.js'
+import { getColorizedFileSize } from '../utils/node.js'
 
 import {
   generatePlaintext,
@@ -37,7 +36,26 @@ import {
 
 import { readFileConfig } from '../utils/getConfigByFilePath.js'
 
-import { transformers } from '../transformers/index.js'
+/**
+ * Ensures that a directory exists, creating it if needed.
+ *
+ * @param {string} filePath - The path to the file to check.
+ */
+async function ensureDirectoryExistence(filePath) {
+  const dirname = path.dirname(filePath)
+  await mkdir(dirname, { recursive: true })
+}
+
+/**
+ * Copy a file from source to target.
+ *
+ * @param {string} source - The source file path.
+ * @param {string} target - The target file path.
+ */
+async function copyFileAsync(source, target) {
+  await ensureDirectoryExistence(target)
+  await copyFile(source, target)
+}
 
 /**
  * Compile templates and output to the build directory.
@@ -52,7 +70,10 @@ export default async (config = {}) => {
   try {
     const startTime = Date.now()
 
-    // Compute config
+    /**
+     * Read the config file for this environment,
+     * merging it with the default config.
+     */
     config = await readFileConfig(config).catch(() => { throw new Error('Could not compute config') })
 
     /**
@@ -84,17 +105,10 @@ export default async (config = {}) => {
     })
 
     /**
-     * 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
+     * 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)
+    const contentPaths = get(config, 'build.content', ['src/templates/**/*.html'])
 
-    // 2. Check that templates to be built, actually exist
     const templateFolders = Array.isArray(contentPaths) ? contentPaths : [contentPaths]
     const templatePaths = await fg.glob([...new Set(templateFolders)])
 
@@ -108,8 +122,48 @@ export default async (config = {}) => {
      *
      * Copies each `build.content` path to the `build.output.path` directory.
      */
-    for await (const rootDir of rootDirs) {
-      await copyDirectory(rootDir, buildOutputPath)
+    let from = get(config, 'build.output.from', ['src/templates', 'src'])
+
+    const globPathsToCopy = contentPaths.map(glob => {
+      // Keep negated paths as they are
+      if (glob.startsWith('!')) {
+        return glob
+      }
+
+      // Keep single-file sources as they are
+      if (!/\*/.test(glob)) {
+        return glob
+      }
+
+      // Update non-negated paths to target all files, avoiding duplication
+      return glob.replace(/\/\*\*\/\*\.\{.*?\}$|\/\*\*\/\*\.[^/]*$|\/*\.[^/]*$/, '/**/*')
+    })
+
+    try {
+      from = Array.isArray(from) ? from : [from]
+
+      /**
+       * Copy files from source to destination
+       *
+       * The array/set conversion is to remove duplicates
+       */
+      for (const file of await fg(Array.from(new Set(globPathsToCopy)))) {
+        let relativePath
+        for (const dir of from) {
+          if (file.startsWith(dir)) {
+            relativePath = path.relative(dir, file)
+            break
+          }
+        }
+        if (!relativePath) {
+          relativePath = path.relative('.', file)
+        }
+
+        const targetPath = path.join(buildOutputPath, relativePath)
+        await copyFileAsync(file, targetPath)
+      }
+    } catch (error) {
+      console.error('Error while processing pattern:', error)
     }
 
     /**
@@ -121,13 +175,15 @@ export default async (config = {}) => {
     const outputExtensions = new Set()
 
     for (const pattern of contentPaths) {
-      outputExtensions.add(...getFileExtensionsFromPattern(pattern))
+      getFileExtensionsFromPattern(pattern).map(ext => outputExtensions.add(ext))
     }
 
     /**
      * Create a list of templates to compile
      */
-    const extensions = outputExtensions.size > 1 ? `{${[...outputExtensions].join(',')}}` : 'html'
+    const extensions = outputExtensions.size > 1
+      ? `{${[...outputExtensions].join(',')}}`
+      : [...outputExtensions][0] || 'html'
 
     const templatesToCompile = await fg.glob(
       path.join(
@@ -154,7 +210,26 @@ export default async (config = {}) => {
 
       const html = await readFile(templatePath, 'utf8')
 
-      const rendered = await render(html, config)
+      /**
+       * Render the markup.
+       *
+       * Merging a custom `components` object to make sure that file extensions from both
+       * `build.content` * and * `components.fileExtension` are used when scanning for
+       * component files.
+       */
+      const userComponentFileExtensions = get(config, 'components.fileExtension', ['html'])
+
+      const rendered = await render(html, merge(
+        {
+          components: {
+            fileExtension: [
+              ...outputExtensions,
+              ...(new Set([].concat(userComponentFileExtensions))),
+            ],
+          }
+        },
+        config
+      ))
 
       /**
        * Generate plaintext
@@ -167,12 +242,14 @@ export default async (config = {}) => {
       if (Boolean(plaintextConfig) || !isEmpty(plaintextConfig)) {
         const posthtmlOptions = get(rendered.config, 'posthtml.options', {})
 
-        const plaintext = await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions))
+        await writePlaintextFile(
+          await generatePlaintext(rendered.html, merge(plaintextConfig, posthtmlOptions)),
+          rendered.config
+        ).catch(error => {
+          throw new Error(`Error writing plaintext file: ${error}`)
+        })
+
         rendered.html = await handlePlaintextTags(rendered.html, posthtmlOptions)
-        await writePlaintextFile(plaintext, rendered.config)
-          .catch(error => {
-            throw new Error(`Error writing plaintext file: ${error}`)
-          })
       }
 
       /**
@@ -225,10 +302,10 @@ export default async (config = {}) => {
      * TODO: support an array of objects with source and destination,
      * i.e. static: [{ source: 'src/assets', destination: 'assets' }, ...]
      */
-    const staticSourcePaths = await fg.glob([...new Set(get(config, 'build.static.source', []))])
+    const staticSourcePaths = getRootDirectories([...new Set(get(config, 'build.static.source', []))])
 
-    for await (const rootDir of getRootDirectories(staticSourcePaths)) {
-      await copyDirectory(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')))
+    for await (const rootDir of staticSourcePaths) {
+      await cp(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')), { recursive: true })
     }
 
     const allOutputFiles = await fg.glob(path.join(buildOutputPath, '**/*'))
@@ -240,7 +317,6 @@ export default async (config = {}) => {
       await config.afterBuild({
         config,
         files: allOutputFiles,
-        transform: transformers,
       })
     }
 

package/src/generators/plaintext.js

@@ -3,8 +3,8 @@ import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
 import { defu as merge } from 'defu'
 import { stripHtml } from 'string-strip-html'
-import defaultConfig from '../posthtml/defaultConfig.js'
 import { writeFile, lstat, mkdir } from 'node:fs/promises'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 /**
  * Removes HTML tags from a given HTML string based on
@@ -46,7 +46,7 @@ const removeTags = ({ tag = 'not-plaintext', html = '', config = {} }) => {
     return tree.walk(process)
   }
 
-  const posthtmlOptions = merge(defaultConfig, config)
+  const posthtmlOptions = merge(config, getPosthtmlOptions())
 
   return posthtml([posthtmlPlugin()]).process(html, { ...posthtmlOptions }).then(res => res.html)
 }
@@ -95,7 +95,7 @@ export async function handlePlaintextTags(html = '', config = {}) {
     return tree.walk(process)
   }
 
-  const posthtmlOptions = merge(defaultConfig, config)
+  const posthtmlOptions = merge(config, getPosthtmlOptions())
 
   return posthtml([posthtmlPlugin()]).process(html, { ...posthtmlOptions }).then(res => res.html)
 }
@@ -154,17 +154,11 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   const plaintextExtension = get(plaintextConfig, 'output.extension', 'txt')
 
   /**
-   * If `plaintext: true` (either from Front Matter or from config)
+   * If `plaintext: true` (either from Front Matter or from config),
+   * output plaintext file in the same location as the HTML file.
    */
   if (plaintextConfig === true) {
-    // If the template has a `permalink` key set in the FM
-    if (typeof config.permalink === 'string') {
-      // Output plaintext at the `permalink` path
-      plaintextOutputPath = config.permalink
-    } else {
-      // Output plaintext at the same directory as the HTML file
-      plaintextOutputPath = get(config, 'build.output.path')
-    }
+    plaintextOutputPath = get(config, 'build.output.path')
   }
 
   /**
@@ -179,12 +173,22 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
   // No need to handle if it's an object, since we already set it to that initially
 
   /**
-   * If `plaintextOutputPath` is a file path, output file there
+   * If the template has a `permalink` key set in the FM, always output plaintext file there
+   */
+  if (typeof config.permalink === 'string') {
+    plaintextOutputPath = config.permalink
+  }
+
+  /**
+   * If `plaintextOutputPath` is a file path, output file there.
+   *
+   * The file will be output relative to the project root, and the extension
+   * doesn't matter, it will be replaced with `plaintextExtension`.
    */
   if (path.extname(plaintextOutputPath)) {
     // Ensure the target directory exists
     await lstat(plaintextOutputPath).catch(async () => {
-      await mkdir(plaintextOutputPath, { recursive: true })
+      await mkdir(path.dirname(plaintextOutputPath), { recursive: true })
     })
 
     // Ensure correct extension is used
@@ -193,19 +197,19 @@ export async function writePlaintextFile(plaintext = '', config = {}) {
       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
+   * If `plaintextOutputPath` is a directory path, output file there using the Template's name.
+   *
+   * The file will be output relative to the `build.output.path` directory.
    */
   const templateFileName = get(config, 'build.current.path.name')
 
   plaintextOutputPath = path.join(
-    path.dirname(plaintextOutputPath),
     get(config, 'build.current.path.dir'),
+    plaintextOutputPath,
     templateFileName + '.' + plaintextExtension
   )
 

package/src/generators/render.js

@@ -4,8 +4,9 @@ import { cwd } from 'node:process'
 import { defu as merge } from 'defu'
 import expressions from 'posthtml-expressions'
 import { parseFrontMatter } from '../utils/node.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 import { process as compilePostHTML } from '../posthtml/index.js'
-import { run as useTransformers, transformers } from '../transformers/index.js'
+import { run as useTransformers } from '../transformers/index.js'
 
 export async function render(html = '', config = {}) {
   if (typeof html !== 'string') {
@@ -40,7 +41,7 @@ export async function render(html = '', config = {}) {
       })
     ]
   )
-    .process(matter)
+    .process(matter, getPosthtmlOptions())
     .then(({ html }) => parseFrontMatter(`---${html}\n---`))
 
   const templateConfig = merge(matterData, config)
@@ -57,20 +58,21 @@ export async function render(html = '', config = {}) {
    *
    * @param {Object} options
    * @param {string} options.html - The HTML to be transformed
+   * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.render - The render function
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.beforeRender === 'function') {
     content = await templateConfig.beforeRender(({
       html: content,
+      matter: matterData,
       config: templateConfig,
-      posthtml: compilePostHTML,
-      transform: transformers,
     })) ?? content
   }
 
-  //  Compile PostHTML
+  /**
+   * Compile PostHTML
+   */
   const compiled = await compilePostHTML(content, templateConfig)
 
   /**
@@ -78,20 +80,18 @@ export async function render(html = '', config = {}) {
    *
    * @param {Object} options
    * @param {string} options.html - The HTML to be transformed
+   * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.render - The render function
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.afterRender === 'function') {
     compiled.html = await templateConfig.afterRender(({
       html: compiled.html,
-      config: templateConfig,
-      posthtml: compilePostHTML,
-      transform: transformers,
+      matter: matterData,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
-  // Run Transformers
   /**
    * Run Transformers
    *
@@ -102,30 +102,28 @@ export async function render(html = '', config = {}) {
    * @returns {string} - The transformed HTML
    */
   if (templateConfig.useTransformers !== false) {
-    compiled.html = await useTransformers(compiled.html, templateConfig).then(({ html }) => html)
+    compiled.html = await useTransformers(compiled.html, compiled.config).then(({ html }) => html)
   }
 
-  // Run `afterTransformers` event
   /**
    * Run `afterTransformers` event
    *
    * @param {Object} options
    * @param {string} options.html - The HTML to be transformed
+   * @param {Object} options.matter - The front matter data
    * @param {Object} options.config - The current template config
-   * @param {function} options.render - The render function
    * @returns {string} - The transformed HTML, or the original one if nothing was returned
    */
   if (typeof templateConfig.afterTransformers === 'function') {
     compiled.html = await templateConfig.afterTransformers(({
       html: compiled.html,
-      config: templateConfig,
-      posthtml: compilePostHTML,
-      transform: transformers,
+      matter: matterData,
+      config: compiled.config,
     })) ?? compiled.html
   }
 
   return {
-    config: templateConfig,
+    config: compiled.config,
     html: compiled.html,
   }
 }

package/src/index.js

@@ -5,7 +5,7 @@ import { render } from './generators/render.js'
 import { addAttributes } from './transformers/addAttributes.js'
 import { attributeToStyle } from './transformers/attributeToStyle.js'
 import { addBaseUrl } from './transformers/baseUrl.js'
-import { comb } from './transformers/comb.js'
+import { purge } from './transformers/purge.js'
 import { filters } from './transformers/filters/index.js'
 import { inline } from './transformers/inline.js'
 import { markdown } from './transformers/markdown.js'
@@ -29,8 +29,8 @@ export {
   addAttributes,
   attributeToStyle,
   addBaseUrl,
-  comb as removeUnusedCSS,
-  comb as purgeCSS,
+  purge as removeUnusedCSS,
+  purge as purgeCSS,
   filters,
   inline as inlineCSS,
   markdown,

package/src/posthtml/defaultComponentsConfig.js

@@ -1,8 +1,16 @@
 export default {
   root: './',
-  folders: ['src/components', 'src/layouts', 'src/templates'],
-  fileExtension: 'html',
   tag: 'component',
+  fileExtension: ['html'],
+  folders: [
+    'layouts',
+    'emails',
+    'templates',
+    'components',
+    'src/layouts',
+    'src/templates',
+    'src/components'
+  ],
   expressions: {
     loopTags: ['each', 'for'],
     missingLocal: '{local}',

package/src/posthtml/defaultConfig.js

@@ -1,4 +1,14 @@
-export default {
-  recognizeNoValueAttribute: true,
-  recognizeSelfClosing: true
+import { defu as merge } from 'defu'
+
+export function getPosthtmlOptions(userConfigOptions = {}) {
+  return merge(
+    userConfigOptions,
+    {
+      recognizeNoValueAttribute: true,
+      recognizeSelfClosing: true,
+      directives: [
+        { name: '?php', start: '<', end: '>' },
+      ],
+    }
+  )
 }