@maizzle/framework 5.0.0-beta.6 → 5.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.6",
+  "version": "5.0.0-beta.8",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -73,7 +73,7 @@
     "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.3",
     "posthtml-component": "^1.1.0",
     "posthtml-content": "^2.0.1",
     "posthtml-extra-attributes": "^3.0.0",

package/src/commands/build.js

@@ -212,13 +212,11 @@ export default async (config = {}) => {
       /**
        * Add file to CLI table for build summary logging
        */
-      if (config.build.summary) {
-        table.push([
-          path.relative(get(rendered.config, 'build.output.path'), outputPath),
-          getColorizedFileSize(rendered.html),
-          formatTime(Date.now() - templateBuildStartTime)
-        ])
-      }
+      table.push([
+        path.relative(get(rendered.config, 'build.output.path'), outputPath),
+        getColorizedFileSize(rendered.html),
+        formatTime(Date.now() - templateBuildStartTime)
+      ])
     }
 
     /**
@@ -233,7 +231,7 @@ export default async (config = {}) => {
       await copyDirectory(rootDir, path.join(buildOutputPath, get(config, 'build.static.destination')))
     }
 
-    const compiledFiles = await fg.glob(path.join(buildOutputPath, '**/*'))
+    const allOutputFiles = await fg.glob(path.join(buildOutputPath, '**/*'))
 
     /**
      * Run `afterBuild` event
@@ -241,7 +239,7 @@ export default async (config = {}) => {
     if (typeof config.afterBuild === 'function') {
       await config.afterBuild({
         config,
-        files: compiledFiles,
+        files: allOutputFiles,
         transform: transformers,
       })
     }
@@ -256,10 +254,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/posthtml/index.js

@@ -8,6 +8,7 @@ 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'
@@ -51,6 +52,7 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...get(config, 'posthtml.plugins.before', []),
+    envTags(config.env),
     envAttributes(config.env),
     expandLinkTag,
     postcssPlugin,

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/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'
@@ -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
    */

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 => {
@@ -179,7 +180,7 @@ 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, {precision: 2}) : value

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

@@ -161,3 +161,24 @@ export function getFileExtensionsFromPattern(pattern) {
 
   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 }
+}