@maizzle/framework 6.0.0-3 → 6.0.0-5

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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).
 
+## [6.0.0-3] - 2025-07-14
+
+### Added
+
+- added support for skipping CSS compilation on individual `<style>` tags by adding any of the following attributes: `raw`, `plain`, `as-is`, `uncompiled`, `unprocessed`
+
+### Changed
+
+- refactored CSS compilation into a custom PostHTML plugin
+
+### Removed
+
+- removed `posthtml-postcss` dependency
+
 ## [6.0.0-2] - 2025-07-11
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-3",
+  "version": "6.0.0-5",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -86,7 +86,6 @@
     "posthtml-markdownit": "^3.1.0",
     "posthtml-mso": "^3.1.0",
     "posthtml-parser": "^0.12.1",
-    "posthtml-postcss": "^1.0.2",
     "posthtml-postcss-merge-longhand": "^3.1.2",
     "posthtml-render": "^3.0.0",
     "posthtml-safe-class-names": "^4.1.0",

package/src/posthtml/index.js

@@ -6,51 +6,17 @@ import posthtml from 'posthtml'
 import posthtmlFetch from 'posthtml-fetch'
 import envTags from './plugins/envTags.js'
 import components from 'posthtml-component'
-import posthtmlPostcss from 'posthtml-postcss'
 import expandLinkTag from './plugins/expandLinkTag.js'
 import envAttributes from './plugins/envAttributes.js'
 import { getPosthtmlOptions } from './defaultConfig.js'
-import lowerCssSyntax from './plugins/lowerCssSyntax.js'
 import combineMediaQueries from './plugins/combineMediaQueries.js'
+import defaultComponentsConfig from './defaultComponentsConfig.js'
+import removeRawStyleAttributes from './plugins/removeRawStyleAttributes.js'
 
 // PostCSS
-import tailwindcss from '@tailwindcss/postcss'
-import postcssCalc from 'postcss-calc'
-import cssVariables from 'postcss-css-variables'
-import postcssSafeParser from 'postcss-safe-parser'
-import removeDuplicateSelectors from './plugins/postcss/removeDuplicateSelectors.js'
-import cleanupTailwindArtifacts from './plugins/postcss/cleanupTailwindArtifacts.js'
-
-import defaultComponentsConfig from './defaultComponentsConfig.js'
+import { compileCss } from './plugins/postcss/compileCss.js'
 
 export async function process(html = '', config = {}) {
-  /**
-   * Configure PostCSS pipeline. Plugins defined and added here
-   * will apply to all `<style>` tags in the HTML.
-   */
-  const resolveCSSProps = get(config, 'css.resolveProps')
-  const resolveCalc = get(config, 'css.resolveCalc') !== false
-    ? get(config, 'css.resolveCalc', { precision: 2 }) // it's true by default, use default precision 2
-    : false
-
-  const postcssPlugin = posthtmlPostcss(
-    [
-      tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
-      resolveCalc !== false && postcssCalc(resolveCalc),
-      removeDuplicateSelectors(),
-      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
-      ...get(config, 'postcss.plugins', []),
-    ],
-    merge(
-      get(config, 'postcss.options', {}),
-      {
-        from: config.cwd || './',
-        parser: postcssSafeParser
-      }
-    )
-  )
-
   /**
    * Define PostHTML options by merging user-provided ones
    * on top of a default configuration.
@@ -106,18 +72,17 @@ export async function process(html = '', config = {}) {
 
   return posthtml([
     ...beforePlugins,
-    envTags(config.env),
-    envAttributes(config.env),
-    expandLinkTag(),
-    postcssPlugin,
+    compileCss(config),
     fetchPlugin,
     components(componentsConfig),
+    fetchPlugin,
     expandLinkTag(),
-    postcssPlugin,
     envTags(config.env),
     envAttributes(config.env),
-    lowerCssSyntax(get(config, 'css.lightningcss', {})),
-    get(config, 'css.combineMediaQueries') !== false && combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
+    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

@@ -0,0 +1,133 @@
+import postcss from 'postcss'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import postcssCalc from 'postcss-calc'
+import { transform } from 'lightningcss'
+import tailwindcss from '@tailwindcss/postcss'
+import cssVariables from 'postcss-css-variables'
+import postcssSafeParser from 'postcss-safe-parser'
+import removeDuplicateSelectors from './removeDuplicateSelectors.js'
+import cleanupTailwindArtifacts from './cleanupTailwindArtifacts.js'
+
+const attributes = new Set([
+  'raw',
+  'plain',
+  'as-is',
+  'uncompiled',
+  'unprocessed',
+])
+
+// export attributes
+export const validAttributeNames = attributes
+
+/**
+ * PostHTML plugin to process Tailwind CSS within style tags.
+ *
+ * This plugin processes CSS content in `<style>` tags and
+ * compiles it with PostCSS. `<style>` tags marked as
+ * `no-process` will be skipped.
+ */
+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 => attributes.has(attr))) {
+            return node
+          }
+
+          const css = Array.isArray(node.content)
+            ? node.content.join('')
+            : node.content
+
+          const promise = processCss(css, config)
+            .then(processedCss => {
+              node.content = [processedCss]
+            })
+            .catch(error => {
+              console.warn('Error processing CSS in style tag:', error.message)
+            })
+
+          stylePromises.push(promise)
+        }
+
+        return node
+      })
+
+      Promise.all(stylePromises)
+        .then(() => resolve(tree))
+        .catch(reject)
+    })
+  }
+}
+
+async function processCss(css, config) {
+  /**
+   * PostCSS pipeline. Plugins defined and added here
+   * will apply to all `<style>` tags in the HTML,
+   * unless marked to be excluded.
+   */
+  const resolveCSSProps = get(config, 'css.resolveProps')
+  const resolveCalc = get(config, 'css.resolveCalc') !== false
+    ? get(config, 'css.resolveCalc', { precision: 2 })
+    : false
+
+  const lightningCssOptions = merge(
+    get(config, 'css.lightning', {}),
+    {
+      targets: {
+        ie: 1,
+      },
+    }
+  )
+
+  try {
+    const processor = postcss([
+      tailwindcss(get(config, 'css.tailwind', {})),
+      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCalc !== false && postcssCalc(resolveCalc),
+      removeDuplicateSelectors(),
+      cleanupTailwindArtifacts(get(config, 'css.cleanup', {})),
+      ...get(config, 'postcss.plugins', []),
+    ].filter(Boolean))
+
+    const result = await processor.process(css, merge(
+      get(config, 'postcss.options', {}),
+      {
+        from: config.cwd || './',
+        parser: postcssSafeParser
+      }
+    ))
+
+    /**
+     * Lightning CSS processing
+     *
+     * We use this to lower the modern Tailwind CSS 4 syntax
+     * to be more email-friendly.
+     */
+
+    if (result.css?.trim()) {
+      try {
+        const { code } = transform(
+          merge(
+            lightningCssOptions,
+            {
+              code: Buffer.from(result.css)
+            }
+          )
+        )
+
+        return code.toString()
+      } catch (error) {
+        console.warn('Failed to lower syntax with Lightning CSS:', error.message)
+      }
+    }
+
+    return result.css
+  } catch (error) {
+    console.warn('Error compiling CSS:', error.message)
+    return css
+  }
+}

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

package/src/posthtml/plugins/lowerCssSyntax.js

@@ -1,43 +0,0 @@
-import { defu as merge } from 'defu'
-import { transform } from 'lightningcss'
-
-const plugin = (options = {}) => tree => {
-  options = merge(options, {
-    targets: options.targets ? {} : {
-      ie: 1,
-    },
-  })
-
-  const process = node => {
-    // Check if this is a style tag with content
-    if (node.tag === 'style' && node.content && Array.isArray(node.content)) {
-      // Get the CSS content from the style tag
-      const cssContent = node.content.join('')
-
-      if (cssContent.trim()) {
-        try {
-          const { code } = transform(
-            merge(
-              options,
-              {
-                code: Buffer.from(cssContent)
-              }
-            )
-          )
-
-          // Replace the content with processed CSS
-          node.content = [code.toString()]
-        } catch (error) {
-          // If processing fails, leave the content unchanged
-          console.warn('Failed to process media queries:', error.message)
-        }
-      }
-    }
-
-    return node
-  }
-
-  return tree.walk(process)
-}
-
-export default plugin