@maizzle/framework 5.0.2 → 5.0.4

package/package.json

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

package/src/transformers/inline.js

@@ -9,7 +9,6 @@ import isEmpty from 'lodash-es/isEmpty.js'
 import safeParser from 'postcss-safe-parser'
 import isObject from 'lodash-es/isObject.js'
 import { parser as parse } from 'posthtml-parser'
-import { parseCSSRule } from '../utils/string.js'
 import { useAttributeSizes } from './useAttributeSizes.js'
 import { getPosthtmlOptions } from '../posthtml/defaultConfig.js'
 
@@ -143,15 +142,18 @@ export async function inline(html = '', options = {}) {
 
     // For each rule in the CSS block we're parsing
     root.walkRules(rule => {
+      // Create a set of selectors
       const { selector } = rule
 
-      selectors.add({
-        name: selector,
-        prop: get(rule.nodes[0], 'prop')
-      })
-
+      // Add the selector to the set as long as it's not a pseudo selector
+      if (!/(^|[^\\])::?[\w-]+/.test(selector)) {
+        selectors.add({
+          name: selector,
+          prop: get(rule.nodes[0], 'prop')
+        })
+      }
       // Preserve pseudo selectors
-      if ([':hover', ':active', ':focus', ':visited', ':link', ':before', ':after'].some(i => selector.includes(i))) {
+      else {
         options.safelist.add(selector)
       }
 
@@ -166,6 +168,13 @@ export async function inline(html = '', options = {}) {
       }
     })
 
+    /**
+     * CSS optimizations
+     *
+     * 1. `preferUnitlessValues` - Replace unit values with `0` where possible
+     * 2. `removeInlinedSelectors` - Remove inlined selectors from the HTML
+     */
+
     // Loop over selectors that we found in the <style> tags
     selectors.forEach(({ name, prop }) => {
       const elements = $(name).get()
@@ -176,11 +185,16 @@ export async function inline(html = '', options = {}) {
         elements.forEach((el) => {
           // Get a `property|value` list from the inline style attribute
           const styleAttr = $(el).attr('style')
-          let inlineStyles = {}
+          const inlineStyles = {}
 
+          // 1. `preferUnitlessValues`
           if (styleAttr) {
-            inlineStyles = styleAttr.split(';').reduce((acc, i) => {
-              let { property, value } = parseCSSRule(i)
+            // Parse the inline styles using postcss
+            const root = postcss.parse(`* { ${styleAttr} }`)
+
+            root.first.each((decl) => {
+              const property = decl.prop
+              let value = decl.value
 
               if (value && options.preferUnitlessValues) {
                 value = value.replace(
@@ -190,11 +204,9 @@ export async function inline(html = '', options = {}) {
               }
 
               if (property) {
-                acc[property] = value
+                inlineStyles[property] = value
               }
-
-              return acc
-            }, {})
+            })
 
             // Update the element's style attribute with the new value
             $(el).attr(
@@ -206,6 +218,7 @@ export async function inline(html = '', options = {}) {
           // Get the classes from the element's class attribute
           const classes = $(el).attr('class')
 
+          // 2. `removeInlinedSelectors`
           if (options.removeInlinedSelectors && classes) {
             const classList = classes.split(' ')
 

package/src/utils/string.js

@@ -174,27 +174,6 @@ export function getFileExtensionsFromPattern(pattern) {
   return ['html'] // No recognizable extension pattern, default to 'html'
 }
 
-export function parseCSSRule(rule) {
-  // Step 1: Trim the input string
-  rule = rule.trim()
-
-  // Step 2: Find the index of the first colon
-  const colonIndex = rule.indexOf(':')
-
-  // Step 3: Extract property and value parts
-  if (colonIndex === -1) {
-    return {
-      property: '',
-      value: ''
-    }
-  }
-
-  const property = rule.slice(0, colonIndex).trim()
-  const value = rule.slice(colonIndex + 1).trim()
-
-  return { property, value }
-}
-
 /**
  * Normalize a string by removing extra whitespace.
  *