@maizzle/framework 5.2.1 → 6.0.0-0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maizzle/framework",
-  "version": "5.2.1",
+  "version": "6.0.0-0",
   "description": "Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -51,6 +51,7 @@
   ],
   "dependencies": {
     "@maizzle/cli": "^2.0.0",
+    "@tailwindcss/postcss": "^4.1.11",
     "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
     "cli-table3": "^0.6.5",
@@ -70,10 +71,10 @@
     "pathe": "^2.0.0",
     "postcss": "^8.4.49",
     "postcss-calc": "^10.0.2",
-    "postcss-color-functional-notation": "^7.0.10",
     "postcss-css-variables": "^0.19.0",
-    "postcss-import": "^16.1.0",
+    "postcss-lightningcss": "^1.0.1",
     "postcss-safe-parser": "^7.0.0",
+    "postcss-sort-media-queries": "^5.2.0",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.8",
@@ -93,11 +94,11 @@
     "posthtml-widows": "^1.0.0",
     "pretty": "^2.0.0",
     "string-strip-html": "^13.4.8",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.1.11",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.0.5",
+    "@biomejs/biome": "2.1.1",
     "@types/js-beautify": "^1.14.3",
     "@types/markdown-it": "^14.1.2",
     "@vitest/coverage-v8": "^3.0.4",

package/src/posthtml/index.js

@@ -10,14 +10,14 @@ import posthtmlPostcss from 'posthtml-postcss'
 import expandLinkTag from './plugins/expandLinkTag.js'
 import envAttributes from './plugins/envAttributes.js'
 import { getPosthtmlOptions } from './defaultConfig.js'
+import combineMediaQueries from './plugins/combineMediaQueries.js'
 
 // PostCSS
-import tailwindcss from 'tailwindcss'
+import tailwindcss from '@tailwindcss/postcss'
 import postcssCalc from 'postcss-calc'
-import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
-import postcssColorFunctionalNotation from 'postcss-color-functional-notation'
+import postcssLightningCss from 'postcss-lightningcss'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
 
@@ -33,11 +33,18 @@ export async function process(html = '', config = {}) {
 
   const postcssPlugin = posthtmlPostcss(
     [
-      postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
-      postcssColorFunctionalNotation(),
+      postcssLightningCss({
+        lightningcssOptions: {
+          errorRecovery: true,
+          minify: false,
+          targets: {
+            ie: 1,
+          }
+        }
+      }),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
@@ -114,6 +121,7 @@ export async function process(html = '', config = {}) {
     postcssPlugin,
     envTags(config.env),
     envAttributes(config.env),
+    combineMediaQueries(get(config, 'css.combineMediaQueries', { sort: 'mobile-first' })),
     ...get(
       config,
       'posthtml.plugins.after',

package/src/posthtml/plugins/combineMediaQueries.js

@@ -0,0 +1,42 @@
+import postcss from 'postcss'
+import sortMediaQueries from 'postcss-sort-media-queries'
+
+const plugin = (options = {}) => tree => {
+  const process = node => {
+    // Check if this is a style tag with content
+    if (node.tag === 'style' && node.content && Array.isArray(node.content)) {
+      // Get the CSS content from the style tag
+      const cssContent = node.content.join('')
+
+      if (cssContent.trim()) {
+        try {
+          // Create PostCSS processor for combining and sorting media queries
+          const processor = postcss([
+            sortMediaQueries({
+              sort: options.sort || 'mobile-first',
+              ...options
+            })
+          ])
+
+          // Process CSS synchronously
+          const result = processor.process(cssContent, {
+            from: undefined,
+            to: undefined
+          })
+
+          // Replace the content with processed CSS
+          node.content = [result.css]
+        } catch (error) {
+          // If processing fails, leave the content unchanged
+          console.warn('Failed to process media queries:', error.message)
+        }
+      }
+    }
+
+    return node
+  }
+
+  return tree.walk(process)
+}
+
+export default plugin