@maizzle/framework 5.0.0-beta.33 → 5.0.0-beta.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.33",
+  "version": "5.0.0-beta.34",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -48,7 +48,6 @@
     "html-emails"
   ],
   "dependencies": {
-    "@csstools/css-calc": "^2.0.1",
     "@maizzle/cli": "next",
     "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
@@ -68,6 +67,7 @@
     "ora": "^8.1.0",
     "pathe": "^1.1.2",
     "postcss": "^8.4.49",
+    "postcss-calc": "^10.0.2",
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",

package/src/posthtml/index.js

@@ -13,6 +13,7 @@ import { getPosthtmlOptions } from './defaultConfig.js'
 
 // PostCSS
 import tailwindcss from 'tailwindcss'
+import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
@@ -20,13 +21,21 @@ import postcssSafeParser from 'postcss-safe-parser'
 import defaultComponentsConfig from './defaultComponentsConfig.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(
     [
       postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCalc !== false && postcssCalc(resolveCalc),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
@@ -38,6 +47,10 @@ export async function process(html = '', config = {}) {
     )
   )
 
+  /**
+   * Define PostHTML options by merging user-provided ones
+   * on top of a default configuration.
+   */
   const posthtmlOptions = getPosthtmlOptions(get(config, 'posthtml.options', {}))
 
   const componentsUserOptions = get(config, 'components', {})

package/src/transformers/inline.js

@@ -2,11 +2,9 @@ import juice from 'juice'
 import postcss from 'postcss'
 import get from 'lodash-es/get.js'
 import has from 'lodash-es/has.js'
-import { defu as merge } from 'defu'
 import * as cheerio from 'cheerio/slim'
 import remove from 'lodash-es/remove.js'
 import { render } from 'posthtml-render'
-import { calc } from '@csstools/css-calc'
 import isEmpty from 'lodash-es/isEmpty.js'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
@@ -30,9 +28,7 @@ export async function inline(html = '', options = {}) {
   const removeStyleTags = get(options, 'removeStyleTags', false)
   const css = get(options, 'customCSS', false)
 
-  options.resolveCSSVariables = get(options, 'resolveCSSVariables', true)
   options.removeInlinedSelectors = get(options, 'removeInlinedSelectors', true)
-  options.resolveCalc = get(options, 'resolveCalc', true)
   options.preferUnitlessValues = get(options, 'preferUnitlessValues', true)
   options.safelist = new Set([
     ...get(options, 'safelist', []),
@@ -147,37 +143,6 @@ export async function inline(html = '', options = {}) {
 
     // For each rule in the CSS block we're parsing
     root.walkRules(rule => {
-      // Keep track of declarations in the rule
-      const declarations = new Set()
-
-      rule.walkDecls(decl => {
-        // Resolve calc() values to static values
-        if (options.resolveCalc) {
-          decl.value = decl.value.includes('calc(') ? calc(decl.value, { precision: 2 }) : decl.value
-        }
-
-        declarations.add(decl)
-      })
-
-      /**
-       * Remove duplicate declarations
-       *
-       * Only do so if the `resolveCSSVariables` option is enabled,
-       * otherwise we'll end up removing all declarations that use CSS variables
-       */
-      if (options.resolveCSSVariables) {
-        Array.from(declarations)
-          /**
-           * Consider only declarations with a value that includes any of the other declarations' property
-           * So a decl like color(var(--text-color)) will be removed if there's a decl with a property of --text-color
-           *  */
-          .filter(decl =>
-            Array.from(declarations).some(otherDecl => decl.value.includes(otherDecl.prop))
-            || decl.prop.startsWith('--')
-          )
-          .map(decl => decl.remove())
-      }
-
       const { selector } = rule
 
       selectors.add({
@@ -186,7 +151,6 @@ export async function inline(html = '', options = {}) {
       })
 
       // Preserve pseudo selectors
-      // TODO: revisit pseudos list
       if ([':hover', ':active', ':focus', ':visited', ':link', ':before', ':after'].some(i => selector.includes(i))) {
         options.safelist.add(selector)
       }
@@ -218,10 +182,6 @@ export async function inline(html = '', options = {}) {
             inlineStyles = styleAttr.split(';').reduce((acc, i) => {
               let { property, value } = parseCSSRule(i)
 
-              if (value && options.resolveCalc) {
-                value = value.includes('calc') ? calc(value, { precision: 2 }) : value
-              }
-
               if (value && options.preferUnitlessValues) {
                 value = value.replace(
                   /\b0(px|rem|em|%|vh|vw|vmin|vmax|in|cm|mm|pt|pc|ex|ch)\b/g,