@maizzle/framework 5.0.9 → 5.2.0

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.1.0] - 2025-06-13
+
+This release adds support for using Tailwind CSS color opacity modifiers in Gmail by automatically converting modern rgb/a syntax to the legacy, comma-separated syntax.
+
+- feat: use commas instead of slash for css color opacity modifiers f26774b
+
 ## [5.0.9] - 2025-06-12
 
 This release fixes an issue where builds failed because `preferUnitlessValues` (which is on by default) was throwing an error when encountering invalid inline CSS.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.9",
+  "version": "5.2.0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -70,6 +70,7 @@
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
     "postcss-calc": "^10.0.2",
+    "postcss-color-functional-notation": "^7.0.10",
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
@@ -96,7 +97,7 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.2",
+    "@biomejs/biome": "2.0.5",
     "@types/js-beautify": "^1.14.3",
     "@types/markdown-it": "^14.1.2",
     "@vitest/coverage-v8": "^3.0.4",

package/src/commands/build.js

@@ -298,14 +298,19 @@ export default async (config = {}) => {
 
     /**
      * Copy static files
-     *
-     * 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', []))])
+    let staticFiles = get(config, 'build.static', [])
+
+    if (!Array.isArray(staticFiles)) {
+        staticFiles = [staticFiles]
+    }
 
-    for await (const rootDir of staticSourcePaths) {
-      await cp(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')), { recursive: true })
+    for (const definition of staticFiles) {
+      const staticSourcePaths = getRootDirectories([...new Set(definition.source)])
+
+      for await (const rootDir of staticSourcePaths) {
+        await cp(rootDir, path.join(buildOutputPath, definition.destination), { recursive: true })
+      }
     }
 
     const allOutputFiles = await fg.glob(path.join(buildOutputPath, '**/*'))

package/src/posthtml/index.js

@@ -17,6 +17,7 @@ import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
+import postcssColorFunctionalNotation from 'postcss-color-functional-notation'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
 
@@ -36,6 +37,7 @@ export async function process(html = '', config = {}) {
       tailwindcss(get(config, 'css.tailwind', {})),
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
+      postcssColorFunctionalNotation(),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
@@ -104,11 +106,11 @@ export async function process(html = '', config = {}) {
     ...beforePlugins,
     envTags(config.env),
     envAttributes(config.env),
-    expandLinkTag,
+    expandLinkTag(),
     postcssPlugin,
     fetchPlugin,
     components(componentsConfig),
-    expandLinkTag,
+    expandLinkTag(),
     postcssPlugin,
     envTags(config.env),
     envAttributes(config.env),

package/src/posthtml/plugins/expandLinkTag.js

@@ -1,37 +1,59 @@
-import fs from 'node:fs'
-
 const targets = new Set(['expand', 'inline'])
 
-// TODO: refactor to a Promise so we can use async readFile
-const plugin = (() => tree => {
-  const process = node => {
-    /**
-     * Don't expand link tags that are not explicitly marked as such
-     */
-    if (node?.attrs && ![...targets].some(attr => attr in node.attrs)) {
-      for (const attr of targets) {
-        node.attrs[attr] = false
+const expandLinkPlugin = () => tree => {
+  return new Promise((resolve, reject) => {
+    const isNode = typeof process !== 'undefined' && process.versions?.node
+
+    const loadFile = async href => {
+      if (isNode) {
+        const { readFile } = await import('node:fs/promises')
+        return await readFile(href, 'utf8')
       }
 
-      return node
-    }
+      const res = await fetch(href)
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch ${href}: ${res.statusText}`)
+      }
 
-    if (
-      node
-      && node.tag === 'link'
-      && node.attrs
-      && node.attrs.href
-      && node.attrs.rel === 'stylesheet'
-    ) {
-      node.content = [fs.readFileSync(node.attrs.href, 'utf8')]
-      node.tag = 'style'
-      node.attrs = {}
+      return await res.text()
     }
 
-    return node
-  }
+    const promises = []
 
-  return tree.walk(process)
-})()
+    try {
+      tree.walk(node => {
+        if (node?.attrs && ![...targets].some(attr => attr in node.attrs)) {
+          for (const attr of targets) {
+            node.attrs[attr] = false
+          }
+          return node
+        }
+
+        if (
+          node?.tag === 'link' &&
+          node.attrs?.href &&
+          node.attrs.rel === 'stylesheet'
+        ) {
+          const promise = loadFile(node.attrs.href).then(content => {
+            node.tag = 'style'
+            node.attrs = {}
+            node.content = [content]
+          })
+
+          promises.push(promise)
+        }
+
+        return node
+      })
+
+      Promise.all(promises)
+        .then(() => resolve(tree))
+        .catch(reject)
+    } catch (err) {
+      reject(err)
+    }
+  })
+}
 
-export default plugin
+export default expandLinkPlugin

package/src/server/client.js

@@ -138,7 +138,7 @@ function connectWebSocket() {
           if (styleAttribute) {
             const urlPattern = /(url\(["']?)(.*?)(["']?\))/g
             // Replace URLs in style attribute with cache-busting parameter
-            const updatedStyleAttribute = styleAttribute.replace(urlPattern, (match, p1, p2, p3) => {
+            const updatedStyleAttribute = styleAttribute.replace(urlPattern, (_match, p1, p2, p3) => {
               // Update the value of 'v' parameter if it already exists
               if (p2.includes('?')) {
                   return `${p1}${p2.replace(/([?&])v=[^&]*/, `$1v=${randomNumber}`)}${p3}`
@@ -172,7 +172,7 @@ function connectWebSocket() {
   })
 
   // Handle connection opened
-  socket.addEventListener('open', event => {
+  socket.addEventListener('open', _event => {
     console.log('WebSocket connection opened')
   })
 

package/src/server/index.js

@@ -53,7 +53,7 @@ async function getTemplatePaths(templateFolders) {
   return await fg.glob([...new Set(templateFolders)])
 }
 
-async function getUpdatedRoutes(app, config) {
+async function getUpdatedRoutes(_app, config) {
   return getTemplatePaths(getTemplateFolders(config))
 }
 
@@ -252,6 +252,14 @@ export default async (config = {}) => {
       }
     })
 
+  let staticFiles = get(config, 'build.static', [])
+
+  if (!Array.isArray(staticFiles)) {
+    staticFiles = [staticFiles]
+  }
+
+  const staticFilesSourcePaths = staticFiles.flatMap((definition) => definition.source)
+
   /**
    * Global watcher
    *
@@ -263,7 +271,7 @@ export default async (config = {}) => {
     'maizzle.config*.{js,cjs,ts}',
     'tailwind*.config.{js,ts}',
     '**/*.css',
-    ...get(config, 'build.static.source', []),
+    ...staticFilesSourcePaths,
     ...get(config, 'server.watch', []),
   ])
 
@@ -365,12 +373,12 @@ export default async (config = {}) => {
   const srcFoldersList = await fg.glob(
     [
       '**/*/',
-      ...get(config, 'build.static.source', [])
+      ...staticFilesSourcePaths,
     ], {
     onlyFiles: false,
     ignore: [
       'node_modules',
-      get(config, 'build.output.path', 'build_*'),
+      `${get(config, 'build.output.path', 'build_*')}/**`,
     ]
   })
 

package/src/server/routes/hmr.js

@@ -8,7 +8,7 @@ const router = express.Router()
 const require = createRequire(import.meta.url)
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
-router.get('/hmr.js', async (req, res) => {
+router.get('/hmr.js', async (_req, res) => {
   try {
     const morphdomPath = require.resolve('morphdom/dist/morphdom-umd.js')
     const morphdomScript = await fs.readFile(morphdomPath, 'utf8')

package/src/server/routes/index.js

@@ -12,6 +12,7 @@ function groupFilesByDirectories(globs, files) {
   let current = {}
 
   globs.forEach(glob => {
+    // biome-ignore lint: needs to be escaped
     const rootPath = glob.split(/[\*\!\{\}]/)[0].replace(/\/+$/, '')
 
     files.forEach(file => {

package/src/transformers/inline.js

@@ -71,10 +71,10 @@ export async function inline(html = '', options = {}) {
   })
 
   // Add a `data-embed` attribute to style tags that have the embed attribute
-  $('style[embed]:not([data-embed])').each((i, el) => {
+  $('style[embed]:not([data-embed])').each((_i, el) => {
     $(el).attr('data-embed', '')
   })
-  $('style[data-embed]:not([embed])').each((i, el) => {
+  $('style[data-embed]:not([embed])').each((_i, el) => {
     $(el).attr('embed', '')
   })
 
@@ -111,7 +111,7 @@ export async function inline(html = '', options = {}) {
    * Remove inlined selectors from the HTML
    */
   // For each style tag
-  $('style:not([embed])').each((i, el) => {
+  $('style:not([embed])').each((_i, el) => {
     // Parse the CSS
     const { root } = postcss()
       .process(
@@ -243,7 +243,7 @@ export async function inline(html = '', options = {}) {
     })
   })
 
-  $('style[embed]').each((i, el) => {
+  $('style[embed]').each((_i, el) => {
     $(el).removeAttr('embed')
   })
 

package/src/utils/getConfigByFilePath.js

@@ -73,7 +73,7 @@ export async function readFileConfig(config) {
           baseConfig = merge(baseConfigFile, baseConfig)
           break
         }
-      } catch (error) {
+      } catch (_error) {
         break
       }
 
@@ -107,7 +107,7 @@ export async function readFileConfig(config) {
             loaded = true
             break
           }
-        } catch (error) {
+        } catch (_error) {
           break
         }
       }
@@ -128,7 +128,7 @@ export async function readFileConfig(config) {
     }
 
     return merge(envConfig, baseConfig)
-  } catch (error) {
+  } catch (_error) {
     throw new Error('Could not compute config')
   }
 }

package/src/utils/string.js

@@ -153,6 +153,7 @@ export function getRootDirectories(patterns = []) {
  * @returns
  */
 export function getFileExtensionsFromPattern(pattern) {
+  // biome-ignore lint: needs to be escaped
   const starExtPattern = /\.([^\*\{\}]+)$/ // Matches .ext but not .* or .{ext}
   const bracePattern = /\.{([^}]+)}$/ // Matches .{ext} or .{ext,ext}
   const wildcardPattern = /\.\*$/ // Matches .*

package/types/build.d.ts

@@ -99,7 +99,10 @@ export default interface BuildConfig {
      * @default undefined
      */
     destination?: string;
-  };
+  } | Array<{
+    source?: string[];
+    destination?: string;
+  }>
 
   /**
    * Type of spinner to show in the console.