@maizzle/framework 6.0.0-11 → 6.0.0-13

package/CHANGELOG.md

@@ -4,6 +4,27 @@ 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-13] - 2025-07-17
+
+### Added
+
+- feat: replace css properties transformer 8e9b6af
+
+### Fixed
+
+- fix: default posthtml options for the prettify transformer a5916ec
+- fix: ensure user posthtml options are used by all transformers 2fa7e1c
+
+### Changed
+
+- refactor: cache posthtml options in inliner 173aa3f
+
+## [6.0.0-12] - 2025-07-17
+
+### Fixed
+
+- fix: @​container class safelisting b4d02f1
+
 ## [6.0.0-11] - 2025-07-16
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "6.0.0-11",
+  "version": "6.0.0-13",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",

package/src/transformers/addAttributes.js

@@ -1,6 +1,7 @@
 import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
 import addAttributesPlugin from 'posthtml-extra-attributes'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(attributes = {}) {
   const defaultAttributes = {
@@ -24,6 +25,6 @@ export async function addAttributes(html = '', attributes = {}, posthtmlOptions
   return posthtml([
     posthtmlPlugin(attributes)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/attributeToStyle.js

@@ -4,6 +4,7 @@ import keys from 'lodash-es/keys.js'
 import forEach from 'lodash-es/forEach.js'
 import parseAttrs from 'posthtml-attrs-parser'
 import intersection from 'lodash-es/intersection.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (attributes = []) => tree => {
   if (!Array.isArray(attributes)) {
@@ -85,6 +86,6 @@ export async function attributeToStyle(html = '', attributes = [], posthtmlOptio
   return posthtml([
     posthtmlPlugin(attributes)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/baseUrl.js

@@ -8,9 +8,7 @@ import { parser as parse } from 'posthtml-parser'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 import baseUrl, { parseSrcset, stringifySrcset, defaultTags } from 'posthtml-base-url'
 
-const posthtmlOptions = getPosthtmlOptions()
-
-const posthtmlPlugin = url => tree => {
+const posthtmlPlugin = (url, posthtmlOptions = {}) => tree => {
   // Handle `baseURL` as a string
   if (typeof url === 'string' && url.length > 0) {
     const html = rewriteVMLs(render(tree), url)
@@ -48,11 +46,13 @@ const posthtmlPlugin = url => tree => {
 
 export default posthtmlPlugin
 
-export async function addBaseUrl(html = '', options = {}, posthtmlOpts = {}) {
+export async function addBaseUrl(html = '', options = {}, posthtmlOptions = {}) {
+  posthtmlOptions = getPosthtmlOptions(posthtmlOptions)
+
   return posthtml([
-    posthtmlPlugin(options)
+    posthtmlPlugin(options, posthtmlOptions)
   ])
-    .process(html, getPosthtmlOptions(posthtmlOpts))
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }
 

package/src/transformers/filters/index.js

@@ -2,6 +2,7 @@ import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
 import posthtmlContent from 'posthtml-content'
 import { filters as defaultFilters } from './defaultFilters.js'
+import { getPosthtmlOptions } from '../../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(filters = {}) {
   filters = merge(defaultFilters, filters)
@@ -13,6 +14,6 @@ export async function filters(html = '', filters = {}, posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin(filters)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/index.js

@@ -21,6 +21,7 @@ import safeClassNames from './safeClassNames.js'
 import replaceStrings from './replaceStrings.js'
 import attributeToStyle from './attributeToStyle.js'
 import removeAttributes from './removeAttributes.js'
+import replaceCssProperties from './replaceCssProperties.js'
 
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
@@ -37,7 +38,7 @@ import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 export async function run(html = '', config = {}) {
   const posthtmlPlugins = []
 
-  const posthtmlConfig = getPosthtmlOptions(get(config, 'posthtml.options', {}))
+  const posthtmlOptions = getPosthtmlOptions(get(config, 'posthtml.options', {}))
 
   /**
    * 1. Core transformers
@@ -60,7 +61,16 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 3. Filters
+   * 3. Replace CSS properties
+   *
+   * Replaces CSS properties based on a custom mapping.
+   */
+  if (get(config, 'css.replaceProperties') !== false) {
+    posthtmlPlugins.push(replaceCssProperties(config))
+  }
+
+  /**
+   * 4. Filters
    *
    * Filters are always applied, unless explicitly disabled.
    */
@@ -71,7 +81,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 4. Markdown
+   * 5. Markdown
    *
    * Convert Markdown to HTML with markdown-it, unless explicitly disabled.
    */
@@ -82,7 +92,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 5. Prevent widow words
+   * 6. Prevent widow words
    *
    * Enabled by default, will prevent widow words in elements
    * wrapped with a `prevent-widows` attribute.
@@ -94,7 +104,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 6. Attribute to `style`
+   * 7. Attribute to `style`
    *
    * Duplicate HTML attributes to inline CSS.
    */
@@ -105,23 +115,24 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 7. Inline CSS
+   * 8. Inline CSS
    *
    * Inline CSS into HTML.
    */
   if (get(config, 'css.inline')) {
-    posthtmlPlugins.push(inlineCSS(
-      merge(
-        get(config, 'css.inline', {}),
-        {
-          removeInlinedSelectors: true,
-        }
+    posthtmlPlugins.push(
+      inlineCSS(
+        merge(
+          get(config, 'css.inline', {}),
+          { removeInlinedSelectors: true },
+        ),
+        posthtmlOptions
       )
-    ))
+    )
   }
 
   /**
-   * 8. Remove attributes
+   * 9. Remove attributes
    *
    * Remove attributes from HTML tags
    * If `undefined`, removes empty `style` and `class` attributes
@@ -130,13 +141,13 @@ export async function run(html = '', config = {}) {
     posthtmlPlugins.push(
       removeAttributes(
         get(config, 'attributes.remove', []),
-        posthtmlConfig
+        posthtmlOptions
       )
     )
   }
 
   /**
-   * 9. Shorthand CSS
+   * 10. Shorthand CSS
    *
    * Convert longhand CSS properties to shorthand in `style` attributes.
    */
@@ -147,7 +158,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 10. Add attributes
+   * 11. Add attributes
    *
    * Add attributes to HTML tags.
    */
@@ -158,19 +169,19 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 11. Base URL
+   * 12. Base URL
    *
    * Add a base URL to relative paths.
    */
   const baseConfig = get(config, 'baseURL', get(config, 'baseUrl'))
   if (baseConfig) {
     posthtmlPlugins.push(
-      baseUrl(baseConfig)
+      baseUrl(baseConfig, posthtmlOptions)
     )
   }
 
   /**
-   * 12. URL parameters
+   * 13. URL parameters
    *
    * Add parameters to URLs.
    */
@@ -181,7 +192,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 13. Six-digit HEX
+   * 14. Six-digit HEX
    *
    * Enabled by default, converts three-digit HEX colors to six-digit.
    */
@@ -192,7 +203,7 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 14. PostHTML MSO
+   * 15. PostHTML MSO
    *
    * Enabled by default, simplifies writing MSO conditionals for Outlook.
    */
@@ -203,23 +214,25 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 15. Purge CSS
+   * 16. Purge CSS
    *
    * Remove unused CSS, uglify classes etc.
    */
   if (get(config, 'css.purge')) {
-    posthtmlPlugins.push(purge(config.css.purge))
+    posthtmlPlugins.push(
+      purge(config.css.purge, posthtmlOptions)
+    )
   }
 
   /**
-   * 16. <template> tags
+   * 17. <template> tags
    *
    * Replace <template> tags with their content.
    */
   posthtmlPlugins.push(templateTag())
 
   /**
-   * 17. Replace strings
+   * 18. Replace strings
    *
    * Replace strings through regular expressions.
    */
@@ -230,29 +243,29 @@ export async function run(html = '', config = {}) {
   }
 
   /**
-   * 18. Prettify
+   * 19. Prettify
    *
    * Pretty-print HTML using js-beautify.
    */
   if (get(config, 'prettify')) {
     posthtmlPlugins.push(
-      prettify(get(config, 'prettify', {}))
+      prettify(get(config, 'prettify', {}), posthtmlOptions)
     )
   }
 
   /**
-   * 19. Minify
+   * 20. Minify
    *
    * Minify HTML using html-crush.
    */
   if (get(config, 'minify')) {
     posthtmlPlugins.push(
-      minify(get(config, 'minify', {}))
+      minify(get(config, 'minify', {}), posthtmlOptions)
     )
   }
 
   return posthtml(posthtmlPlugins)
-    .process(html, posthtmlConfig)
+    .process(html, posthtmlOptions)
     .then(result => ({
       html: result.html,
     }))

package/src/transformers/inline.js

@@ -18,8 +18,8 @@ import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
  * @param {*} options `css.inline` object from config
  * @returns {Function} PostHTML tree
  */
-export default (options = {}) => tree => {
-  return inline(render(tree), options).then(html => parse(html, getPosthtmlOptions()))
+export default (options = {}, posthtmlOptions = {}) => tree => {
+  return inline(render(tree), options).then(html => parse(html, posthtmlOptions))
 }
 
 /**
@@ -35,6 +35,8 @@ export async function inline(html = '', options = {}) {
     return html
   }
 
+  const posthtmlOptions = getPosthtmlOptions()
+
   const removeStyleTags = get(options, 'removeStyleTags', false)
   const css = get(options, 'customCSS', false)
 
@@ -62,7 +64,7 @@ export async function inline(html = '', options = {}) {
       'lang', // Fenced code blocks
       'ShadowHTML', // Superhuman
       'spark', // Spark
-      'at-', // Safe class names for container queries
+      '.at-', // Safe class names for container queries
     ],
   ])
 
@@ -85,7 +87,7 @@ export async function inline(html = '', options = {}) {
    * If customCSS is passed, inline that CSS specifically
    * Otherwise, use Juice's default inlining
    */
-  const tree = parse(html, getPosthtmlOptions())
+  const tree = parse(html, posthtmlOptions)
   tree.match = match
 
   /**
@@ -127,7 +129,7 @@ export async function inline(html = '', options = {}) {
   * Remove inlined selectors from the HTML
  *
  */
-  const inlined_tree = parse(inlined_html, getPosthtmlOptions())
+  const inlined_tree = parse(inlined_html, posthtmlOptions)
   inlined_tree.match = match
 
   const preservedAtRules = get(options, 'preservedAtRules', ['media'])
@@ -286,7 +288,7 @@ export async function inline(html = '', options = {}) {
     } catch { }
   })
 
-  const optimized_tree = parse($.html(), getPosthtmlOptions())
+  const optimized_tree = parse($.html(), posthtmlOptions)
   optimized_tree.match = match
 
   /**

package/src/transformers/markdown.js

@@ -1,6 +1,17 @@
 import posthtml from 'posthtml'
-import md from 'posthtml-markdownit'
+import markdownIt from 'posthtml-markdownit'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
+/**
+ * Markdown transformer for PostHTML.
+ *
+ * Exported only for the Maizzle API - internally we use `posthtml-markdownit` directly.
+ *
+ * @param {String} input Markdown input string
+ * @param {Object} options Options for `posthtml-markdownit`
+ * @param {Object} posthtmlOptions PostHTML options
+ * @returns {Promise<string>} Processed HTML string
+ */
 export async function markdown(input = '', options = {}, posthtmlOptions = {}) {
   /**
    * If no input is provided, return an empty string.
@@ -10,17 +21,16 @@ export async function markdown(input = '', options = {}, posthtmlOptions = {}) {
   }
 
   /**
-   * Automatically wrap in <md> tag, unless manual mode is enabled.
-   *
-   * With manual mode, user must wrap the input in a <md> tag.
+   * Automatically wrap in <md> tag, unless `manual` mode is enabled.
+   * In `manual` mode, user must wrap the input in a <md> tag.
    *
    * https://github.com/posthtml/posthtml-markdownit#usage
    */
   input = options.manual ? input : `<md>${input}</md>`
 
   return posthtml([
-    md(options)
+    markdownIt(options)
   ])
-    .process(input, posthtmlOptions)
+    .process(input, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/minify.js

@@ -5,22 +5,23 @@ import { render } from 'posthtml-render'
 import { parser as parse } from 'posthtml-parser'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
-const posthtmlPlugin = (options = {}) => tree => {
+const posthtmlPlugin = (options = {}, posthtmlOptions = {}) => tree => {
   options = merge(options, {
     removeLineBreaks: true,
   })
 
-  const posthtmlConfig = getPosthtmlOptions()
   const { result: html } = crush(render(tree), options)
 
-  return parse(html, posthtmlConfig)
+  return parse(html, posthtmlOptions)
 }
 
 export default posthtmlPlugin
 
 export async function minify(html = '', options = {}, posthtmlOptions = {}) {
+  posthtmlOptions = getPosthtmlOptions(posthtmlOptions)
+
   return posthtml([
-    posthtmlPlugin(options)
+    posthtmlPlugin(options, posthtmlOptions),
   ])
     .process(html, posthtmlOptions)
     .then(result => result.html)

package/src/transformers/posthtmlMso.js

@@ -1,5 +1,6 @@
 import posthtml from 'posthtml'
 import posthtmlMso from 'posthtml-mso'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(options = {}) {
   return posthtmlMso(options)
@@ -9,6 +10,6 @@ export async function useMso(html = '', options = {}, posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/prettify.js

@@ -5,7 +5,7 @@ import { render } from 'posthtml-render'
 import { parser as parse } from 'posthtml-parser'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
-const posthtmlPlugin = (options = {}) => tree => {
+const posthtmlPlugin = (options = {}, posthtmlOptions = {}) => tree => {
   const defaultConfig = {
     space_around_combinator: true, // Preserve space around CSS selector combinators
     newline_between_rules: false, // Remove empty lines between CSS rules
@@ -15,14 +15,16 @@ const posthtmlPlugin = (options = {}) => tree => {
 
   const config = merge(options, defaultConfig)
 
-  return parse(pretty(render(tree), config), getPosthtmlOptions())
+  return parse(pretty(render(tree), config), posthtmlOptions)
 }
 
 export default posthtmlPlugin
 
 export async function prettify(html = '', options = {}, posthtmlOptions = {}) {
+  posthtmlOptions = getPosthtmlOptions(posthtmlOptions)
+
   return posthtml([
-    posthtmlPlugin(options)
+    posthtmlPlugin(options, posthtmlOptions)
   ])
     .process(html, posthtmlOptions)
     .then(result => result.html)

package/src/transformers/preventWidows.js

@@ -1,6 +1,7 @@
 import posthtml from 'posthtml'
-import posthtmlWidows from 'posthtml-widows'
 import { defu as merge } from 'defu'
+import posthtmlWidows from 'posthtml-widows'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(options = {}) {
   options = merge(options, {
@@ -32,6 +33,6 @@ export async function preventWidows(html = '', options = {}, posthtmlOptions = {
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/purge.js

@@ -6,7 +6,7 @@ import { render } from 'posthtml-render'
 import { parser as parse } from 'posthtml-parser'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
-const posthtmlPlugin = options => tree => {
+const posthtmlPlugin = (options = {}, posthtmlOptions = {}) => tree => {
   const defaultSafelist = [
     '*body*', // Gmail
     '*gmail*', // Gmail
@@ -26,7 +26,7 @@ const posthtmlPlugin = options => tree => {
     '*lang*', // Fenced code blocks
     '*ShadowHTML*', // Superhuman
     '*spark*', // Spark
-    '*at-*', // Safe class names for container queries
+    '.at-*', // Safe class names for container queries
   ]
 
   const defaultOptions = {
@@ -39,17 +39,18 @@ const posthtmlPlugin = options => tree => {
 
   options = merge(options, defaultOptions)
 
-  const posthtmlConfig = getPosthtmlOptions()
   const { result: html } = comb(render(tree), options)
 
-  return parse(html, posthtmlConfig)
+  return parse(html, posthtmlOptions)
 }
 
 export default posthtmlPlugin
 
 export async function purge(html = '', pluginOptions = {}, posthtmlOptions = {}) {
+  posthtmlOptions = getPosthtmlOptions(posthtmlOptions)
+
   return posthtml([
-    posthtmlPlugin(pluginOptions)
+    posthtmlPlugin(pluginOptions, posthtmlOptions)
   ])
     .process(html, posthtmlOptions)
     .then(result => result.html)

package/src/transformers/removeAttributes.js

@@ -47,9 +47,11 @@ const posthtmlPlugin = (attributes = [], posthtmlOptions = {}) => tree => {
 export default posthtmlPlugin
 
 export async function removeAttributes(html = '', attributes = [], posthtmlOptions = {}) {
+  posthtmlOptions = getPosthtmlOptions(posthtmlOptions)
+
   return posthtml([
-    posthtmlPlugin(attributes, getPosthtmlOptions(posthtmlOptions))
+    posthtmlPlugin(attributes, posthtmlOptions)
   ])
-    .process(html, getPosthtmlOptions())
+    .process(html, posthtmlOptions)
     .then(result => result.html)
 }

package/src/transformers/replaceCssProperties.js

@@ -0,0 +1,55 @@
+import postcss from 'postcss'
+import get from 'lodash-es/get.js'
+import { defu as merge } from 'defu'
+import postcssSafeParser from 'postcss-safe-parser'
+
+export default (maizzleConfig => tree => {
+  const process = node => {
+    if (node?.tag !== 'style') {
+      return node
+    }
+
+    const replacements = get(maizzleConfig, 'css.replaceProperties', {})
+
+    if (Object.keys(replacements).length === 0) {
+      return node
+    }
+
+    const css = Array.isArray(node.content) ? node.content.join('') : node.content
+
+    postcss([
+      postcssPlugin({
+        properties: replacements,
+      }),
+    ]).process(css, merge(
+      get(maizzleConfig, 'postcss.options', {}),
+      {
+        from: undefined,
+        parser: postcssSafeParser
+      }
+    )).then( result => {
+      node.content = result.css
+    })
+
+    return node
+  }
+
+  return tree.walk(process)
+})
+
+const postcssPlugin = (opts = {}) => {
+  opts = merge(opts, {
+    properties: {
+      'text-decoration-line': 'text-decoration',
+    }
+  })
+
+  return {
+    postcssPlugin: 'postcss-replace-properties',
+    Declaration(decl) {
+      if (Object.hasOwn(opts.properties, decl.prop)) {
+        decl.prop = opts.properties[decl.prop]
+      }
+    },
+  }
+}

package/src/transformers/replaceStrings.js

@@ -32,6 +32,6 @@ export async function replaceStrings(html = '', replacements = {}, posthtmlOptio
   return posthtml([
     posthtmlPlugin(replacements)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/safeClassNames.js

@@ -1,6 +1,7 @@
 import posthtml from 'posthtml'
 import { defu as merge } from 'defu'
 import posthtmlSafeClassNames from 'posthtml-safe-class-names'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(options = {}) {
   // If options is boolean, convert to object
@@ -24,6 +25,6 @@ export async function safeClassNames(html = '', options = {}, posthtmlOptions =
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/shorthandCss.js

@@ -1,4 +1,5 @@
 import posthtml from 'posthtml'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 import posthtmlMergeLonghand from 'posthtml-postcss-merge-longhand'
 
 export default function posthtmlPlugin(options = {}) {
@@ -15,6 +16,6 @@ export async function shorthandCSS(html = '', options = {}, posthtmlOptions = {}
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/sixHex.js

@@ -1,5 +1,6 @@
 import posthtml from 'posthtml'
 import { conv } from 'color-shorthand-hex-to-six-digit'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = () => tree => {
   const targets = new Set(['bgcolor', 'color'])
@@ -25,6 +26,6 @@ export async function sixHEX(html = '', posthtmlOptions = {}) {
   return posthtml([
     posthtmlPlugin()
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/urlParameters.js

@@ -1,6 +1,7 @@
 import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
 import urlParameters from 'posthtml-url-parameters'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 export default function posthtmlPlugin(options = {}) {
   const { _options, ...parameters } = options
@@ -15,6 +16,6 @@ export async function addURLParams(html = '', options = {}, posthtmlOptions = {}
   return posthtml([
     posthtmlPlugin(options)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }

package/src/transformers/useAttributeSizes.js

@@ -1,6 +1,7 @@
 import postcss from 'postcss'
 import posthtml from 'posthtml'
 import get from 'lodash-es/get.js'
+import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
 const posthtmlPlugin = (mappings = {}) => tree => {
   if (!Object.keys(mappings).length) {
@@ -58,6 +59,6 @@ export async function useAttributeSizes(html = '', mappings = {}, posthtmlOption
   return posthtml([
     posthtmlPlugin(mappings)
   ])
-    .process(html, posthtmlOptions)
+    .process(html, getPosthtmlOptions(posthtmlOptions))
     .then(result => result.html)
 }