better-svelte-email 1.3.3 → 1.4.0

package/dist/render/utils/css/sanitize-declarations.js

@@ -192,29 +192,72 @@ function parseRgbValues(nodes) {
 }
 function transformColorMix(node) {
     // We're expecting the structure to be something like:
-    // color-mix(in oklab, rgb(...) X%, transparent)
+    // color-mix(in oklab, <color> X%, transparent)
     // Check if it ends with transparent
     const lastNode = node.nodes[node.nodes.length - 1];
     if (lastNode?.type !== 'word' || lastNode.value !== 'transparent') {
         return null;
     }
-    // Find the rgb function and percentage
-    let rgbFunc = null;
+    // Find the color (rgb, oklch function, or hex) and percentage
+    let colorFunc = null;
+    let colorHex = null;
     let percentage = null;
     for (const child of node.nodes) {
-        if (child.type === 'function' && child.value === 'rgb') {
-            rgbFunc = child;
+        if (child.type === 'function' && (child.value === 'rgb' || child.value === 'oklch')) {
+            colorFunc = child;
+        }
+        if (child.type === 'word' && child.value.startsWith('#')) {
+            colorHex = child.value;
         }
         if (child.type === 'word' && child.value.endsWith('%')) {
             percentage = parseFloat(child.value) / 100;
         }
     }
-    if (rgbFunc && percentage !== null) {
-        const rgbValues = parseRgbValues(rgbFunc.nodes);
-        if (rgbValues.r !== undefined && rgbValues.g !== undefined && rgbValues.b !== undefined) {
-            return formatRgb(rgbValues.r, rgbValues.g, rgbValues.b, percentage);
+    // Convert color to RGB
+    let rgb = null;
+    if (colorFunc) {
+        if (colorFunc.value === 'rgb') {
+            const rgbValues = parseRgbValues(colorFunc.nodes);
+            if (rgbValues.r !== undefined && rgbValues.g !== undefined && rgbValues.b !== undefined) {
+                rgb = {
+                    r: rgbValues.r,
+                    g: rgbValues.g,
+                    b: rgbValues.b,
+                    a: rgbValues.a
+                };
+            }
+        }
+        else if (colorFunc.value === 'oklch') {
+            const oklchValues = parseOklchValues(colorFunc.nodes);
+            if (oklchValues.l !== undefined &&
+                oklchValues.c !== undefined &&
+                oklchValues.h !== undefined) {
+                const convertedRgb = oklchToRgb({
+                    l: oklchValues.l,
+                    c: oklchValues.c,
+                    h: oklchValues.h
+                });
+                rgb = {
+                    r: convertedRgb.r,
+                    g: convertedRgb.g,
+                    b: convertedRgb.b,
+                    a: oklchValues.a
+                };
+            }
         }
     }
+    else if (colorHex) {
+        rgb = hexToRgb(colorHex);
+    }
+    if (rgb && percentage !== null) {
+        // Blend color with white background (transparent in email context = white)
+        // Formula: final = color * percentage + white * (1 - percentage)
+        const blendedR = rgb.r * percentage + 255 * (1 - percentage);
+        const blendedG = rgb.g * percentage + 255 * (1 - percentage);
+        const blendedB = rgb.b * percentage + 255 * (1 - percentage);
+        // Return solid RGB without alpha (email clients don't support alpha)
+        return formatRgb(blendedR, blendedG, blendedB);
+    }
     return null;
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "better-svelte-email",
 	"description": "Svelte email renderer with Tailwind support",
-	"version": "1.3.3",
+	"version": "1.4.0",
 	"author": "Konixy",
 	"repository": {
 		"type": "git",
@@ -25,8 +25,8 @@
 		"tailwindcss": "^4.1.18"
 	},
 	"optionalDependencies": {
-		"prettier": "^3.8.0",
-		"resend": "^6.7.0",
+		"prettier": "^3.8.1",
+		"resend": "^6.8.0",
 		"shiki": "^3.21.0"
 	},
 	"devDependencies": {
@@ -39,7 +39,7 @@
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/html-to-text": "^9.0.4",
 		"@types/node": "24.10.9",
-		"@vitest/coverage-v8": "^4.0.17",
+		"@vitest/coverage-v8": "^4.0.18",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.14.0",
@@ -48,16 +48,16 @@
 		"mode-watcher": "^1.1.0",
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
-		"publint": "^0.3.16",
+		"publint": "^0.3.17",
 		"rehype-autolink-headings": "^7.1.0",
 		"rehype-slug": "^6.0.0",
-		"svelte": "5.46.4",
+		"svelte": "5.48.0",
 		"svelte-check": "^4.3.5",
 		"tailwindcss-motion": "^1.1.1",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.53.0",
+		"typescript-eslint": "^8.53.1",
 		"vite": "^7.3.1",
-		"vitest": "^4.0.17"
+		"vitest": "^4.0.18"
 	},
 	"exports": {
 		".": {