@maizzle/framework 6.0.0-4 → 6.0.0-5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-4",
+  "version": "6.0.0-5",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/src/posthtml/index.js

@@ -11,9 +11,10 @@ import envAttributes from './plugins/envAttributes.js'
 import { getPosthtmlOptions } from './defaultConfig.js'
 import combineMediaQueries from './plugins/combineMediaQueries.js'
 import defaultComponentsConfig from './defaultComponentsConfig.js'
+import removeRawStyleAttributes from './plugins/removeRawStyleAttributes.js'
 
 // PostCSS
-import compileCss from './plugins/postcss/compileCss.js'
+import { compileCss } from './plugins/postcss/compileCss.js'
 
 export async function process(html = '', config = {}) {
   /**
@@ -71,6 +72,7 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...beforePlugins,
+    compileCss(config),
     fetchPlugin,
     components(componentsConfig),
     fetchPlugin,
@@ -80,6 +82,7 @@ export async function process(html = '', config = {}) {
     compileCss(config),
     get(config, 'css.combineMediaQueries') !== false
       && combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
+    removeRawStyleAttributes(),
     ...get(
       config,
       'posthtml.plugins.after',

package/src/posthtml/plugins/postcss/compileCss.js

@@ -9,7 +9,7 @@ import postcssSafeParser from 'postcss-safe-parser'
 import removeDuplicateSelectors from './removeDuplicateSelectors.js'
 import cleanupTailwindArtifacts from './cleanupTailwindArtifacts.js'
 
-const validAttributeNames = new Set([
+const attributes = new Set([
   'raw',
   'plain',
   'as-is',
@@ -17,6 +17,9 @@ const validAttributeNames = new Set([
   'unprocessed',
 ])
 
+// export attributes
+export const validAttributeNames = attributes
+
 /**
  * PostHTML plugin to process Tailwind CSS within style tags.
  *
@@ -24,21 +27,14 @@ const validAttributeNames = new Set([
  * compiles it with PostCSS. `<style>` tags marked as
  * `no-process` will be skipped.
  */
-export default function compile(config = {}) {
+export function compileCss(config = {}) {
   return tree => {
     return new Promise((resolve, reject) => {
       const stylePromises = []
 
       tree.walk(node => {
         if (node.tag === 'style' && node.content) {
-          if (node.attrs && Object.keys(node.attrs).some(attr => validAttributeNames.has(attr))) {
-            // Remove the attribute
-            for (const attr of Object.keys(node.attrs)) {
-              if (validAttributeNames.has(attr)) {
-                delete node.attrs[attr]
-              }
-            }
-
+          if (node.attrs && Object.keys(node.attrs).some(attr => attributes.has(attr))) {
             return node
           }
 

package/src/posthtml/plugins/removeRawStyleAttributes.js

@@ -0,0 +1,22 @@
+import { validAttributeNames } from "./postcss/compileCss"
+
+const plugin = () => tree => {
+  const process = node => {
+    if (node.tag === 'style') {
+      if (node.attrs && Object.keys(node.attrs).some(attr => validAttributeNames.has(attr))) {
+        // Remove the attribute
+        for (const attr of Object.keys(node.attrs)) {
+          if (validAttributeNames.has(attr)) {
+            delete node.attrs[attr]
+          }
+        }
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}
+
+export default plugin