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

package/package.json

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

@@ -62,7 +62,7 @@ async function renderUpdatedFile(file, config) {
     spinner.start('Building...')
 
     /**
-     * Add the current template path to the config
+     * Add current template path info to the config
      *
      * Can be used in events like `beforeRender` to determine
      * which template file is being rendered.
@@ -178,6 +178,11 @@ export default async (config = {}) => {
         // Set the file being viewed
         viewing = filePath
 
+        // Add current template path info to the config
+        config.build.current = {
+          path: path.parse(filePath),
+        }
+
         // Read the file
         const fileContent = await fs.readFile(filePath, 'utf8')
 

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,

package/types/config.d.ts

@@ -12,6 +12,7 @@ import type WidowWordsConfig from './widowWords';
 import type { CoreBeautifyOptions } from 'js-beautify';
 import type { BaseURLConfig } from 'posthtml-base-url';
 import type URLParametersConfig from './urlParameters';
+import type { PostCssCalcOptions } from 'postcss-calc';
 import type { PostHTMLFetchConfig } from 'posthtml-fetch';
 import type { Config as TailwindConfig } from 'tailwindcss';
 import type { PostHTMLComponents } from 'posthtml-component';
@@ -41,7 +42,7 @@ export default interface Config {
      * }
      * ```
      */
-    add?: Record<string, Record<string, string|number>>;
+    add?: Record<string, Record<string, string | number>>;
 
     /**
      * Remove attributes from elements.
@@ -110,6 +111,52 @@ export default interface Config {
      */
     purge?: PurgeCSSConfig;
 
+    /**
+     * Resolve CSS `calc()` expressions to their static values.
+     */
+    resolveCalc?: boolean | PostCssCalcOptions;
+
+    /**
+     * Resolve CSS custom properties to their static values.
+     */
+    resolveProps?: boolean | {
+      /**
+       * Whether to preserve custom properties in the output.
+       *
+       * @default false
+       */
+      preserve?: boolean | 'computed';
+      /**
+       * Define CSS variables that will be added to :root.
+       *
+       * @default {}
+       */
+      variables?: {
+        [key: string]: string | {
+          /**
+           * The value of the CSS variable.
+           */
+          value: string;
+          /**
+           * Whether the variable is !important.
+           */
+          isImportant?: boolean;
+        };
+      };
+      /**
+       * Whether to preserve variables injected via JS with the `variables` option.
+       *
+       * @default true
+       */
+      preserveInjectedVariables?: boolean;
+      /**
+       * Whether to preserve `@media` rules order.
+       *
+       * @default false
+       */
+      preserveAtRulesOrder?: boolean;
+    };
+
     /**
      * Normalize escaped character class names like `\:` or `\/` by replacing them
      * with email-safe alternatives.
@@ -129,40 +176,40 @@ export default interface Config {
     safe?: boolean | Record<string, string>;
 
     /**
-     * Ensure that all your HEX colors inside `bgcolor` and `color` attributes are defined with six digits.
+     * Rewrite longhand CSS inside style attributes with shorthand syntax.
+     * Only works with `margin`, `padding` and `border`, and only when
+     * all sides are specified.
      *
-     * @default true
+     * @default []
      *
      * @example
      * ```
      * export default {
      *   css: {
-     *     sixHex: false,
+     *     shorthand: {
+     *       tags: ['td', 'div'],
+     *     } // or shorthand: true
      *   }
      * }
      * ```
      */
-    sixHex?: boolean;
+    shorthand?: boolean | Record<string, string[]>;
 
     /**
-     * Rewrite longhand CSS inside style attributes with shorthand syntax.
-     * Only works with `margin`, `padding` and `border`, and only when
-     * all sides are specified.
+     * Ensure that all your HEX colors inside `bgcolor` and `color` attributes are defined with six digits.
      *
-     * @default []
+     * @default true
      *
      * @example
      * ```
      * export default {
      *   css: {
-     *     shorthand: {
-     *       tags: ['td', 'div'],
-     *     } // or shorthand: true
+     *     sixHex: false,
      *   }
      * }
      * ```
      */
-    shorthand?: boolean | Record<string, string[]>;
+    sixHex?: boolean;
 
     /**
      * Use a custom Tailwind CSS configuration object.

package/types/css/inline.d.ts

@@ -163,24 +163,6 @@ export default interface InlineCSSConfig {
    */
   customCSS?: string | false;
 
-  /**
-   * Resolve CSS variables and replace them with their values.
-   *
-   * @default true
-   *
-   * @example
-   * ```
-   * export default {
-   *   css: {
-   *     inline: {
-   *       resolveVariables: true
-   *     }
-   *   }
-   * }
-   * ```
-   */
-  resolveVariables?: boolean;
-
   /**
    * Remove inlined CSS selectors from the `<style>` tag.
    *
@@ -198,24 +180,6 @@ export default interface InlineCSSConfig {
    */
   removeInlinedSelectors?: boolean;
 
-  /**
-   * Resolve calc() expressions in CSS to their computed values.
-   *
-   * @default true
-   *
-   * @example
-   * ```
-   * export default {
-   *   css: {
-   *     inline: {
-   *       resolveCalc: true
-   *     }
-   *   }
-   * }
-   * ```
-   */
-  resolveCalc?: boolean;
-
   /**
    * Prefer unitless CSS values
    *