@maizzle/framework 6.0.0-14 → 6.0.0-15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-14",
+  "version": "6.0.0-15",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -71,6 +71,7 @@
     "ora": "^8.1.0",
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
+    "postcss-calc": "^10.1.1",
     "postcss-custom-properties": "^14.0.6",
     "postcss-safe-parser": "^7.0.0",
     "postcss-sort-media-queries": "^5.2.0",

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

@@ -65,6 +65,10 @@ 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.
+   *
+   * @param {string} css CSS content to process
+   * @param {Object} config Maizzle configuration object
+   * @returns {Promise<string>} Processed CSS string
    */
   let resolveCSSProps = get(config, 'css.resolveProps')
   if (resolveCSSProps !== false) {
@@ -91,7 +95,7 @@ async function processCss(css, config) {
     ].filter(Boolean)).process(css, merge(
       get(config, 'postcss.options', {}),
       {
-        from: config.cwd || './',
+        from: get(config, 'cwd', './'),
         parser: postcssSafeParser
       }
     ))
@@ -107,10 +111,10 @@ async function processCss(css, config) {
       try {
         const { code } = transform(
           merge(
-            lightningCssOptions,
             {
               code: Buffer.from(result.css)
-            }
+            },
+            lightningCssOptions,
           )
         )
 

package/src/transformers/inline.js

@@ -2,6 +2,7 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
+import postcssCalc from 'postcss-calc'
 import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
@@ -10,6 +11,7 @@ import { match } from 'posthtml/lib/api.js'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
+import customProperties from 'postcss-custom-properties'
 import { useAttributeSizes } from './useAttributeSizes.js'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
@@ -134,6 +136,7 @@ export async function inline(html = '', options = {}) {
 
   const preservedAtRules = get(options, 'preservedAtRules', ['media'])
   const selectors = new Set()
+  const rootSelectorCss = new Set()
 
   inlined_tree.match({ tag: 'style' }, node => {
     // If this is an embedded style tag, exit early
@@ -177,6 +180,10 @@ export async function inline(html = '', options = {}) {
       // Create a set of selectors
       const { selector } = rule
 
+      if (selector.includes(':root')) {
+        rootSelectorCss.add(rule.toString())
+      }
+
       // Add the selector to the set as long as it's not a pseudo selector
       if (!/.+[^\\\s]::?\w+/.test(selector)) {
         selectors.add({
@@ -189,7 +196,6 @@ export async function inline(html = '', options = {}) {
         options.safelist.add(selector)
       }
 
-
       if (options.removeInlinedSelectors) {
         // Remove the rule in the <style> tag as long as it's not a preserved class
         if (!options.safelist.has(selector) && !combinedRegex.test(selector)) {
@@ -288,6 +294,46 @@ export async function inline(html = '', options = {}) {
     } catch { }
   })
 
+  /**
+   * Find all elements with non-empty `style` attributes and
+   * process their values with PostCSS.
+   *
+   * We do this in order to compile CSS variables and calc()
+   * functions that may have been inlined by Juice.
+   */
+  for (const el of $('[style]')) {
+    const styleAttr = $(el).attr('style')
+    if (!styleAttr || styleAttr.trim() === '') {
+      continue
+    }
+
+    const processedCss = postcss([
+      customProperties({ preserve: false }),
+      postcssCalc(),
+      {
+        postcssPlugin: 'remove-root-selectors',
+        Rule(rule) {
+          // Split comma-separated selectors and filter out :root
+          const selectors = rule.selector.split(',').map(s => s.trim());
+          const filteredSelectors = selectors.filter(s => !s.startsWith(':root'));
+
+          if (filteredSelectors.length === 0) {
+            // Remove the entire rule if all selectors were :root
+            rule.remove();
+          } else if (filteredSelectors.length < selectors.length) {
+            // Update the selector if some (but not all) were :root
+            rule.selector = filteredSelectors.join(', ');
+          }
+        }
+      }
+    ]).process(`${[...rootSelectorCss].join('\n')} ${styleAttr}`, {
+      from: undefined,
+      parser: safeParser,
+    }).css
+
+    $(el).attr('style', processedCss.trim())
+  }
+
   const optimized_tree = parse($.html(), posthtmlOptions)
   optimized_tree.match = match
 

package/types/config.d.ts

@@ -242,6 +242,24 @@ export default interface Config {
      * ```
      */
     combineMediaQueries?: PostCSSSortMediaQueriesOptions;
+
+    /**
+     * `replaceCssProperties` Transformer.
+     *
+     * Define a mapping object of which CSS properties to replace with what strings.
+     *
+     * @default {'text-decoration-line': 'text-decoration'}
+     *
+     * @example
+     * ```
+     * export default {
+     *   css: {
+     *     replaceCssProperties: {
+     *       'text-decoration-line': 'text-decoration',
+     *       'margin': 'Margin',
+     *     }
+     */
+    replaceCssProperties?: Record<string, string>;
   }
 
   /**

package/types/css/inline.d.ts

@@ -215,4 +215,22 @@ export default interface InlineCSSConfig {
    * ```
   */
   safelist?: string[];
+
+  /**
+   * Preserved CSS at-rules.
+   *
+   * These will not be removed as part of the CSS inlining process.
+   *
+   * @default ['media']
+   *
+   * @example
+   * ```
+   * export default {
+   *   css: {
+   *     preservedAtRules: ['media', 'supports'],
+   *   }
+   * }
+   * ```
+   */
+  preservedAtRules?: string[];
 }