From a612e1b9e2035463dc6d5a6efbb6f5c97005add3 Mon Sep 17 00:00:00 2001
From: Eliraz Kedmi <elirazk@wix.com>
Date: Wed, 11 Feb 2026 21:57:24 +0200
Subject: [PATCH] Add mix-blend-mode property support

Add typed parsing for the mix-blend-mode CSS property using a BlendMode
enum with all 18 standard blend mode keywords from the CSS Compositing
spec. Previously this property fell through to the generic custom
property handler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib.rs                | 76 +++++++++++++++++++++++++++++++++++++++
 src/properties/effects.rs | 43 ++++++++++++++++++++++
 src/properties/mod.rs     |  3 ++
 3 files changed, 122 insertions(+)

diff --git a/src/lib.rs b/src/lib.rs
index eefef768..64a5e6d8 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -27874,6 +27874,82 @@ mod tests {
     );
   }
 
+  #[test]
+  fn test_mix_blend_mode() {
+    minify_test(
+      ".foo { mix-blend-mode: normal }",
+      ".foo{mix-blend-mode:normal}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: multiply }",
+      ".foo{mix-blend-mode:multiply}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: screen }",
+      ".foo{mix-blend-mode:screen}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: overlay }",
+      ".foo{mix-blend-mode:overlay}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: darken }",
+      ".foo{mix-blend-mode:darken}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: lighten }",
+      ".foo{mix-blend-mode:lighten}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: color-dodge }",
+      ".foo{mix-blend-mode:color-dodge}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: color-burn }",
+      ".foo{mix-blend-mode:color-burn}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: hard-light }",
+      ".foo{mix-blend-mode:hard-light}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: soft-light }",
+      ".foo{mix-blend-mode:soft-light}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: difference }",
+      ".foo{mix-blend-mode:difference}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: exclusion }",
+      ".foo{mix-blend-mode:exclusion}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: hue }",
+      ".foo{mix-blend-mode:hue}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: saturation }",
+      ".foo{mix-blend-mode:saturation}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: color }",
+      ".foo{mix-blend-mode:color}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: luminosity }",
+      ".foo{mix-blend-mode:luminosity}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: plus-darker }",
+      ".foo{mix-blend-mode:plus-darker}",
+    );
+    minify_test(
+      ".foo { mix-blend-mode: plus-lighter }",
+      ".foo{mix-blend-mode:plus-lighter}",
+    );
+  }
+
   #[test]
   fn test_viewport() {
     minify_test(
diff --git a/src/properties/effects.rs b/src/properties/effects.rs
index 1ba69f6a..95d403d4 100644
--- a/src/properties/effects.rs
+++ b/src/properties/effects.rs
@@ -1,5 +1,6 @@
 //! CSS properties related to filters and effects.
 
+use crate::macros::enum_property;
 use crate::error::{ParserError, PrinterError};
 use crate::printer::Printer;
 use crate::targets::{Browsers, Targets};
@@ -410,3 +411,45 @@ impl IsCompatible for FilterList<'_> {
     true
   }
 }
+
+enum_property! {
+  /// A [`<blend-mode>`](https://www.w3.org/TR/compositing-1/#ltblendmodegt) value.
+  pub enum BlendMode {
+    /// The default blend mode; the top layer is drawn over the bottom layer.
+    Normal,
+    /// The source and destination are multiplied.
+    Multiply,
+    /// Multiplies the complements of the backdrop and source, then complements the result.
+    Screen,
+    /// Multiplies or screens, depending on the backdrop color.
+    Overlay,
+    /// Selects the darker of the backdrop and source.
+    Darken,
+    /// Selects the lighter of the backdrop and source.
+    Lighten,
+    /// Brightens the backdrop to reflect the source.
+    ColorDodge,
+    /// Darkens the backdrop to reflect the source.
+    ColorBurn,
+    /// Multiplies or screens, depending on the source color.
+    HardLight,
+    /// Darkens or lightens, depending on the source color.
+    SoftLight,
+    /// Subtracts the darker from the lighter.
+    Difference,
+    /// Similar to difference, but with lower contrast.
+    Exclusion,
+    /// The hue of the source with the saturation and luminosity of the backdrop.
+    Hue,
+    /// The saturation of the source with the hue and luminosity of the backdrop.
+    Saturation,
+    /// The hue and saturation of the source with the luminosity of the backdrop.
+    Color,
+    /// The luminosity of the source with the hue and saturation of the backdrop.
+    Luminosity,
+    /// Adds the source to the backdrop, producing a darker result.
+    PlusDarker,
+    /// Adds the source to the backdrop, producing a lighter result.
+    PlusLighter,
+  }
+}
diff --git a/src/properties/mod.rs b/src/properties/mod.rs
index 54c47548..c39b618b 100644
--- a/src/properties/mod.rs
+++ b/src/properties/mod.rs
@@ -1600,6 +1600,9 @@ define_properties! {
   "filter": Filter(FilterList<'i>, VendorPrefix) / WebKit,
   "backdrop-filter": BackdropFilter(FilterList<'i>, VendorPrefix) / WebKit,
 
+  // https://www.w3.org/TR/compositing-1/
+  "mix-blend-mode": MixBlendMode(BlendMode),
+
   // https://drafts.csswg.org/css2/
   "z-index": ZIndex(position::ZIndex),