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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.6",
   "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

@@ -7,6 +7,7 @@ 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'
 
 // PostCSS
 import tailwindcss from 'tailwindcss'
@@ -50,6 +51,7 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...get(config, 'posthtml.plugins.before', []),
+    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/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
   }