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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.0.0-beta.34",
+  "version": "5.0.0-beta.36",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -74,7 +74,7 @@
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.4",
-    "posthtml-component": "^2.0.0",
+    "posthtml-component": "next",
     "posthtml-content": "^2.1.0",
     "posthtml-expressions": "^1.11.4",
     "posthtml-extra-attributes": "^3.1.0",

package/src/server/index.js

@@ -41,6 +41,7 @@ app.use(hmrRoute)
 let viewing = ''
 const spinner = ora()
 let templatePaths = []
+const serverStartTime = Date.now()
 
 function getTemplateFolders(config) {
   return Array.isArray(get(config, 'build.content'))
@@ -62,7 +63,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 +179,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')
 
@@ -390,7 +396,6 @@ export default async (config = {}) => {
   const maxRetries = get(config, 'server.maxRetries', 10)
 
   function startServer(port) {
-    const serverStartTime = Date.now()
     const server = createServer(app)
 
     /**
@@ -411,7 +416,7 @@ export default async (config = {}) => {
       )
 
       spinner.stopAndPersist({
-        text: `${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(Date.now() - serverStartTime)} ms`
+        text: `\n${pico.bgBlue(` Maizzle v${version} `)} ready in ${pico.bold(Date.now() - serverStartTime)} ms`
           + '\n\n'
           + `  → Local:   http://localhost:${port}`
           + '\n'

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
    *