fix: preserve light-dark in custom properties

src/context.rs

@@ -182,6 +182,21 @@ impl<'i, 'o> PropertyHandlerContext<'i, 'o> {
     }
   }
 
+  pub fn remove_conditional_property(&mut self, property_id: &crate::properties::PropertyId) {
+    for entry in &mut self.supports {
+      let declarations = if self.is_important {
+        &mut entry.important_declarations
+      } else {
+        &mut entry.declarations
+      };
+      declarations.retain(|property| property.property_id() != *property_id);
+    }
+
+    self
+      .supports
+      .retain(|entry| !entry.declarations.is_empty() || !entry.important_declarations.is_empty());
+  }
+
   pub fn add_unparsed_fallbacks(&mut self, unparsed: &mut UnparsedProperty<'i>) {
     if self.context != DeclarationContext::StyleRule && self.context != DeclarationContext::StyleAttribute {
       return;

src/declaration.rs

@@ -626,6 +626,7 @@ impl<'i> DeclarationHandler<'i> {
           if self.decls[*index] == *property {
             return true;
           }
+          context.remove_conditional_property(&PropertyId::Custom(custom.name.clone()));
           let mut custom = custom.clone();
           self.add_conditional_fallbacks(&mut custom, context);
           self.decls[*index] = Property::Custom(custom);
@@ -679,6 +680,7 @@ impl<'i> DeclarationHandler<'i> {
     context: &mut PropertyHandlerContext<'i, '_>,
   ) {
     if context.context != DeclarationContext::Keyframes {
+      let light_dark_fallbacks = custom.value.get_light_dark_fallbacks(context.targets);
       let fallbacks = custom.value.get_fallbacks(context.targets);
       for (condition, fallback) in fallbacks {
         context.add_conditional_property(
@@ -689,6 +691,16 @@ impl<'i> DeclarationHandler<'i> {
           }),
         );
       }
+
+      for (condition, fallback) in light_dark_fallbacks {
+        context.add_conditional_property(
+          condition,
+          Property::Custom(CustomProperty {
+            name: custom.name.clone(),
+            value: fallback,
+          }),
+        );
+      }
     }
   }
 

src/lib.rs

@@ -30108,6 +30108,46 @@ mod tests {
     "#,
       "@property --property-name{syntax:\"<color>\";inherits:true;initial-value:#00f}.foo{color:var(--property-name)}",
     );
+    prefix_test(
+      r#"
+      @property --theme {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: light-dark(white, black);
+      }
+      "#,
+      indoc! { r#"
+      @property --theme {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: light-dark(#fff, #000);
+      }
+      "#},
+      Browsers {
+        chrome: Some(90 << 16),
+        ..Browsers::default()
+      },
+    );
+    nesting_test_with_targets(
+      r#"
+      @property --theme {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: light-dark(white, black);
+      }
+      "#,
+      indoc! { r#"
+      @property --theme {
+        syntax: "<color>";
+        inherits: true;
+        initial-value: light-dark(#fff, #000);
+      }
+      "#},
+      Targets {
+        include: Features::LightDark,
+        ..Targets::default()
+      },
+    );
 
     test(
       r#"
@@ -31349,6 +31389,174 @@ mod tests {
         ..Browsers::default()
       },
     );
+    prefix_test(
+      r#"
+      :root {
+        --background: light-dark(white, black);
+        --text: light-dark(black, white);
+      }
+
+      p {
+        color: var(--text);
+        background: var(--background);
+        color-scheme: dark;
+      }
+      "#,
+      indoc! { r#"
+      :root {
+        --background: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+        --text: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
+      }
+
+      @supports (color: light-dark(#000, #fff)) {
+        :root {
+          --background: light-dark(#fff, #000);
+          --text: light-dark(#000, #fff);
+        }
+      }
+
+      p {
+        color: var(--text);
+        background: var(--background);
+        --lightningcss-light: ;
+        --lightningcss-dark: initial;
+        color-scheme: dark;
+      }
+      "#},
+      Browsers {
+        chrome: Some(90 << 16),
+        ..Browsers::default()
+      },
+    );
+    prefix_test(
+      ".foo { --theme: light-dark(var(--light), var(--dark)); }",
+      indoc! { r#"
+      .foo {
+        --theme: var(--lightningcss-light, var(--light)) var(--lightningcss-dark, var(--dark));
+      }
+
+      @supports (color: light-dark(#000, #fff)) {
+        .foo {
+          --theme: light-dark(var(--light), var(--dark));
+        }
+      }
+      "#},
+      Browsers {
+        chrome: Some(90 << 16),
+        ..Browsers::default()
+      },
+    );
+    prefix_test(
+      ".foo { --theme: light-dark(white, black); --theme: red; }",
+      indoc! { r#"
+      .foo {
+        --theme: red;
+      }
+      "#},
+      Browsers {
+        chrome: Some(90 << 16),
+        ..Browsers::default()
+      },
+    );
+    prefix_test(
+      ".foo { --theme: red; --theme: light-dark(white, black); }",
+      indoc! { r#"
+      .foo {
+        --theme: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+      }
+
+      @supports (color: light-dark(#000, #fff)) {
+        .foo {
+          --theme: light-dark(#fff, #000);
+        }
+      }
+      "#},
+      Browsers {
+        chrome: Some(90 << 16),
+        ..Browsers::default()
+      },
+    );
+    nesting_test_with_targets(
+      ".foo { --theme: light-dark(white, black); color: light-dark(white, black); }",
+      indoc! { r#"
+      .foo {
+        --theme: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+        color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+      }
+
+      @supports (color: light-dark(#000, #fff)) {
+        .foo {
+          --theme: light-dark(#fff, #000);
+        }
+      }
+      "#},
+      Targets {
+        include: Features::LightDark,
+        ..Targets::default()
+      },
+    );
+    nesting_test_with_targets(
+      ".foo { --theme: light-dark(lab(0% 0 0), lab(100% 0 0)); }",
+      indoc! { r#"
+      .foo {
+        --theme: var(--lightningcss-light, #000) var(--lightningcss-dark, #fff);
+      }
+
+      @supports (color: lab(0% 0 0)) {
+        .foo {
+          --theme: var(--lightningcss-light, lab(0% 0 0)) var(--lightningcss-dark, lab(100% 0 0));
+        }
+      }
+
+      @supports (color: light-dark(#000, #fff)) {
+        .foo {
+          --theme: light-dark(#000, #fff);
+        }
+      }
+
+      @supports (color: light-dark(#000, #fff)) and (color: lab(0% 0 0)) {
+        .foo {
+          --theme: light-dark(lab(0% 0 0), lab(100% 0 0));
+        }
+      }
+      "#},
+      Targets {
+        browsers: Some(Browsers {
+          chrome: Some(90 << 16),
+          ..Browsers::default()
+        }),
+        include: Features::LightDark | Features::LabColors,
+        ..Targets::default()
+      },
+    );
+    nesting_test_with_targets(
+      ".foo { --theme: light-dark(lab(0% 0 0), lab(100% 0 0)); --theme: red; }",
+      indoc! { r#"
+      .foo {
+        --theme: red;
+      }
+      "#},
+      Targets {
+        browsers: Some(Browsers {
+          chrome: Some(90 << 16),
+          ..Browsers::default()
+        }),
+        include: Features::LightDark | Features::LabColors,
+        ..Targets::default()
+      },
+    );
+    nesting_test_with_targets(
+      ".foo { --theme: light-dark(white, black); }",
+      indoc! { r#"
+      .foo {
+        --theme: light-dark(#fff, #000);
+      }
+      "#},
+      Targets {
+        exclude: Features::LightDark,
+        ..Targets::default()
+      },
+    );
     prefix_test(
       ".foo { color: rgb(from light-dark(yellow, red) r g b / 10%); }",
       indoc! { r#"
@@ -31614,6 +31822,67 @@ mod tests {
       },
     );
 
+    nesting_test_with_targets(
+      r#"
+      @supports (--theme: light-dark(red, blue)) {
+        .foo {
+          color: light-dark(white, black);
+        }
+      }
+      "#,
+      indoc! {r#"
+      @supports (--theme: light-dark(red, blue)) {
+        .foo {
+          color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+        }
+      }
+      "#},
+      Targets {
+        include: Features::LightDark,
+        ..Targets::default()
+      },
+    );
+    nesting_test_with_targets(
+      r#"
+      @supports (color: var(--theme, light-dark(red, blue))) {
+        .foo {
+          color: light-dark(white, black);
+        }
+      }
+      "#,
+      indoc! {r#"
+      @supports (color: var(--theme, light-dark(red, blue))) {
+        .foo {
+          color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+        }
+      }
+      "#},
+      Targets {
+        include: Features::LightDark,
+        ..Targets::default()
+      },
+    );
+    nesting_test_with_targets(
+      r#"
+      @supports (color: attr(data-theme type(<color>), light-dark(red, blue))) {
+        .foo {
+          color: light-dark(white, black);
+        }
+      }
+      "#,
+      indoc! {r#"
+      @supports (color: attr(data-theme type(<color>), light-dark(red, blue))) {
+        .foo {
+          color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #000);
+        }
+      }
+      "#},
+      Targets {
+        include: Features::LightDark,
+        ..Targets::default()
+      },
+    );
+
     // NOTE: fallback for lab is not necessary
     prefix_test(
       r#"

src/printer.rs

@@ -5,7 +5,7 @@ use crate::dependencies::{Dependency, DependencyOptions};
 use crate::error::{Error, ErrorLocation, PrinterError, PrinterErrorKind};
 use crate::rules::{Location, StyleContext};
 use crate::selector::SelectorList;
-use crate::targets::{Targets, TargetsWithSupportsScope};
+use crate::targets::{Features, Targets, TargetsWithSupportsScope};
 use crate::vendor_prefix::VendorPrefix;
 use cssparser::{serialize_identifier, serialize_name};
 #[cfg(feature = "sourcemap")]
@@ -408,6 +408,19 @@ impl<'a, 'c, W: std::fmt::Write + Sized> Printer<'a, 'c, W> {
     res
   }
 
+  pub(crate) fn with_feature_disabled<T, U, F: FnOnce(&mut Printer<'a, 'c, W>) -> Result<T, U>>(
+    &mut self,
+    feature: Features,
+    f: F,
+  ) -> Result<T, U> {
+    let targets = self.targets.current;
+    self.targets.current.include.remove(feature);
+    self.targets.current.exclude.insert(feature);
+    let res = f(self);
+    self.targets.current = targets;
+    res
+  }
+
   pub(crate) fn context(&self) -> Option<&'a StyleContext<'a, 'c>> {
     self.context.clone()
   }