@maizzle/framework 5.0.0-beta.0 → 5.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.10",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -23,10 +23,10 @@
   },
   "scripts": {
     "dev": "vitest",
-    "lint": "biome lint ./src ./test",
+    "release": "npx np",
     "pretest": "npm run lint",
     "test": "vitest run --coverage",
-    "release": "npx np"
+    "lint": "biome lint ./src ./test"
   },
   "repository": {
     "type": "git",
@@ -48,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",
@@ -64,16 +64,16 @@
     "istextorbinary": "^9.5.0",
     "juice": "^10.0.0",
     "lodash-es": "^4.17.21",
-    "morphdom": "^2.7.2",
+    "morphdom": "^2.7.4",
     "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",
     "posthtml-attrs-parser": "^1.1.0",
-    "posthtml-base-url": "^3.1.2",
+    "posthtml-base-url": "^3.1.4",
     "posthtml-component": "^1.1.0",
     "posthtml-content": "^2.0.1",
     "posthtml-extra-attributes": "^3.0.0",
@@ -88,11 +88,11 @@
     "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": {
-    "@biomejs/biome": "^1.8.3",
+    "@biomejs/biome": "1.8.3",
     "@types/js-beautify": "^1.14.3",
     "@types/markdown-it": "^14.1.1",
     "@vitest/coverage-v8": "^2.0.1",

package/src/commands/build.js

@@ -1,10 +1,10 @@
 import {
   readFile,
   writeFile,
-  copyFile,
   lstat,
   mkdir,
-  rm
+  rm,
+  cp,
 } from 'node:fs/promises'
 import path from 'pathe'
 import fg from 'fast-glob'
@@ -12,22 +12,31 @@ 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 {
+  formatTime,
+  getRootDirectories,
+  getFileExtensionsFromPattern,
+} from '../utils/string.js'
+
 import { getColorizedFileSize } from '../utils/node.js'
-import { readFileConfig } from '../utils/getConfigByFilePath.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 +81,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 +101,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 cp(rootDir, buildOutputPath, { recursive: true })
+    }
 
     /**
-     * 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 +148,6 @@ export default async (config = {}) => {
        */
       config.build.current = {
         path: path.parse(templatePath),
-        baseDir,
-        relativePath,
       }
 
       const html = await readFile(templatePath, 'utf8')
@@ -158,8 +182,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}`
 
@@ -175,62 +200,50 @@ export default async (config = {}) => {
       await writeFile(outputPath, rendered.html)
 
       /**
-       * Add file to CLI table for build summary logging
+       * Remove original file if its path is different
+       * from the final destination path.
        */
-      if (config.build.summary) {
-        table.push([
-          path.relative(get(rendered.config, 'build.output.path'), outputPath),
-          getColorizedFileSize(rendered.html),
-          formatTime(Date.now() - templateBuildStartTime)
-        ])
+      if (outputPath !== templatePath) {
+        await rm(templatePath)
       }
+
+      /**
+       * Add file to CLI table for build summary logging
+       */
+      table.push([
+        path.relative(get(rendered.config, 'build.output.path'), outputPath),
+        getColorizedFileSize(rendered.html),
+        formatTime(Date.now() - templateBuildStartTime)
+      ])
     }
 
     /**
      * 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' }, ...]
      */
+    const staticSourcePaths = getRootDirectories([...new Set(get(config, 'build.static.source', []))])
 
-    // 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 staticSourcePaths) {
+      await cp(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')), { recursive: true })
     }
 
-    const compiledFiles = await fg.glob(path.join(config.build.output.path, '**/*'))
+    const allOutputFiles = 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: allOutputFiles,
+        transform: transformers,
+      })
     }
 
     /**
      * Log a build summary if enabled in the config
-     *
-     * Need to first clear the spinner
      */
 
     spinner.clear()
@@ -239,10 +252,10 @@ export default async (config = {}) => {
       console.log(table.toString() + '\n')
     }
 
-    spinner.succeed(`Build completed in ${formatTime(Date.now() - startTime)}`)
+    spinner.succeed(`Built ${table.length} template${table.length > 1 ? 's' : ''} in ${formatTime(Date.now() - startTime)}`)
 
     return {
-      files: compiledFiles,
+      files: allOutputFiles,
       config
     }
   } catch (error) {

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/posthtml/index.js

@@ -7,6 +7,8 @@ import components from 'posthtml-component'
 import posthtmlPostcss from 'posthtml-postcss'
 import defaultPosthtmlConfig from './defaultConfig.js'
 import expandLinkTag from './plugins/expandLinkTag.js'
+import envAttributes from './plugins/envAttributes.js'
+import envTags from './plugins/envTags.js'
 
 // PostCSS
 import tailwindcss from 'tailwindcss'
@@ -50,6 +52,8 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...get(config, 'posthtml.plugins.before', []),
+    envTags(config.env),
+    envAttributes(config.env),
     expandLinkTag,
     postcssPlugin,
     components(

package/src/posthtml/plugins/envAttributes.js

@@ -0,0 +1,32 @@
+const plugin = (env => tree => {
+  const process = node => {
+    // Return the original node if no environment is set
+    if (!env) {
+      return node
+    }
+
+    if (node.attrs) {
+      for (const attr in node.attrs) {
+        const suffix = `-${env}`
+
+        // Find attributes on this node that have this suffix
+        if (attr.endsWith(suffix)) {
+          const key = attr.slice(0, -suffix.length)
+          const value = node.attrs[attr]
+
+          // Change the attribute without the suffix to have the value of the suffixed attribute
+          node.attrs[key] = value
+
+          // Remove the attribute with the suffix
+          node.attrs[attr] = false
+        }
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+})
+
+export default plugin

package/src/posthtml/plugins/envTags.js

@@ -0,0 +1,33 @@
+const plugin = (env => tree => {
+  const process = node => {
+    env = env || 'local'
+
+    // Return the original node if it doesn't have a tag
+    if (!node.tag) {
+      return node
+    }
+
+    const tagEnv = node.tag.split(':').pop()
+
+    // Tag targets current env, remove it and return its content
+    if (node.tag === `env:${env}`) {
+      node.tag = false
+    }
+
+    // Tag doesn't target current env, remove it completely
+    if (
+      typeof node.tag === 'string'
+      && node.tag.startsWith('env:')
+      && tagEnv !== env
+    ) {
+      node.content = []
+      node.tag = false
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+})
+
+export default plugin

package/src/server/client.js

@@ -3,7 +3,8 @@ var lastKnownScrollPosition = 0
 
 function connectWebSocket() {
   if (!('WebSocket' in window)) {
-    return
+    // Force reload if WebSocket is not supported
+    window.location.reload()
   }
 
   const { hostname, port } = window.location

package/src/server/routes/hmr.js

@@ -1,14 +1,15 @@
 import express from 'express'
 const router = express.Router()
 import fs from 'node:fs/promises'
-import { dirname, join } from 'pathe'
+import { cwd } from 'node:process'
 import { fileURLToPath } from 'node:url'
+import { dirname, join, resolve } from 'pathe'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 router.get('/hmr.js', async (req, res) => {
   const morphdomScript = await fs.readFile(
-    join(__dirname, '../../../node_modules/morphdom/dist/morphdom-umd.js'),
+    resolve(cwd(), 'node_modules/morphdom/dist/morphdom-umd.js'),
     'utf8'
   )
 

package/src/transformers/core.js

@@ -11,6 +11,18 @@ const posthtmlPlugin = (config = {}) => tree => {
       node.content = ['']
     }
 
+    /**
+     * Custom attributes to prevent inlining CSS from <style> tags
+     */
+    if (
+      node.tag === 'style'
+      && (node.attrs?.['no-inline'] || node.attrs?.embed)
+    ) {
+      node.attrs['no-inline'] = false
+      node.attrs.embed = false
+      node.attrs['data-embed'] = true
+    }
+
     return node
   }
 

package/src/transformers/index.js

@@ -8,6 +8,7 @@ import minify from './minify.js'
 import baseUrl from './baseUrl.js'
 import inlineCSS from './inline.js'
 import prettify from './prettify.js'
+import templateTag from './template.js'
 import filters from './filters/index.js'
 import markdown from 'posthtml-markdownit'
 import posthtmlMso from './posthtmlMso.js'
@@ -56,9 +57,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', {}))
     )
   }
 
@@ -251,7 +252,14 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 18. Replace strings
+   * 18. <template> tags
+   *
+   * Replace <template> tags with their content
+   */
+  posthtmlPlugins.push(templateTag())
+
+  /**
+   * 19. Replace strings
    *
    * Replace strings through regular expressions
    */
@@ -267,3 +275,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

@@ -10,6 +10,7 @@ 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'
 
 const posthtmlPlugin = (options = {}) => tree => {
@@ -116,7 +117,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 +180,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/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/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() {

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