@maizzle/framework 5.0.0-beta.5 → 5.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.7",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -92,7 +92,7 @@
     "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/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.endsWith(`:${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/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
   }