Skip to content

Commit 6b5ac8b

Browse files
committed
Handle light-dark with variables
1 parent 981175b commit 6b5ac8b

File tree

4 files changed

+65
-1
lines changed

4 files changed

+65
-1
lines changed

node/ast.d.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1003,6 +1003,17 @@ export type UnresolvedColor =
10031003
*/
10041004
s: number;
10051005
type: "hsl";
1006+
}
1007+
| {
1008+
/**
1009+
* The dark value.
1010+
*/
1011+
dark: TokenOrValue[];
1012+
/**
1013+
* The light value.
1014+
*/
1015+
light: TokenOrValue[];
1016+
type: "light-dark";
10061017
};
10071018
/**
10081019
* Defines where the class names referenced in the `composes` property are located.

src/bundler.rs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -766,6 +766,10 @@ fn visit_vars<'a, 'b>(
766766
UnresolvedColor::RGB { alpha, .. } | UnresolvedColor::HSL { alpha, .. } => {
767767
stack.push(alpha.0.iter_mut());
768768
}
769+
UnresolvedColor::LightDark { light, dark } => {
770+
stack.push(light.0.iter_mut());
771+
stack.push(dark.0.iter_mut());
772+
}
769773
},
770774
None => {
771775
stack.pop();

src/lib.rs

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27036,5 +27036,17 @@ mod tests {
2703627036
..Browsers::default()
2703727037
}
2703827038
);
27039+
prefix_test(
27040+
".foo { color: light-dark(var(--light), var(--dark)); }",
27041+
indoc! { r#"
27042+
.foo {
27043+
color: var(--lightningcss-light, var(--light)) var(--lightningcss-dark, var(--dark));
27044+
}
27045+
"#},
27046+
Browsers {
27047+
chrome: Some(90 << 16),
27048+
..Browsers::default()
27049+
}
27050+
);
2703927051
}
2704027052
}

src/properties/custom.rs

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -509,7 +509,7 @@ fn try_parse_color_token<'i, 't>(
509509
input: &mut Parser<'i, 't>,
510510
) -> Option<CssColor> {
511511
match_ignore_ascii_case! { &*f,
512-
"rgb" | "rgba" | "hsl" | "hsla" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "color" | "color-mix" => {
512+
"rgb" | "rgba" | "hsl" | "hsla" | "hwb" | "lab" | "lch" | "oklab" | "oklch" | "color" | "color-mix" | "light-dark" => {
513513
let s = input.state();
514514
input.reset(&state);
515515
if let Ok(color) = CssColor::parse(input) {
@@ -1518,6 +1518,14 @@ pub enum UnresolvedColor<'i> {
15181518
#[cfg_attr(feature = "serde", serde(borrow))]
15191519
alpha: TokenList<'i>,
15201520
},
1521+
/// The light-dark() function.
1522+
#[cfg_attr(feature = "serde", serde(rename = "light-dark"))]
1523+
LightDark {
1524+
/// The light value.
1525+
light: TokenList<'i>,
1526+
/// The dark value.
1527+
dark: TokenList<'i>,
1528+
}
15211529
}
15221530

15231531
impl<'i> UnresolvedColor<'i> {
@@ -1550,6 +1558,16 @@ impl<'i> UnresolvedColor<'i> {
15501558
Ok(UnresolvedColor::HSL { h, s, l, alpha })
15511559
})
15521560
},
1561+
"light-dark" => {
1562+
input.parse_nested_block(|input| {
1563+
let light = input.parse_until_before(Delimiter::Comma, |input|
1564+
TokenList::parse(input, options, 0)
1565+
)?;
1566+
input.expect_comma()?;
1567+
let dark = TokenList::parse(input, options, 0)?;
1568+
Ok(UnresolvedColor::LightDark { light, dark })
1569+
})
1570+
},
15531571
_ => Err(input.new_custom_error(ParserError::InvalidValue))
15541572
}
15551573
}
@@ -1612,6 +1630,25 @@ impl<'i> UnresolvedColor<'i> {
16121630
alpha.to_css(dest, is_custom_property)?;
16131631
dest.write_char(')')
16141632
}
1633+
UnresolvedColor::LightDark { light, dark } => {
1634+
if !dest.targets.is_compatible(crate::compat::Feature::LightDark) {
1635+
dest.write_str("var(--lightningcss-light")?;
1636+
dest.delim(',', false)?;
1637+
light.to_css(dest, is_custom_property)?;
1638+
dest.write_char(')')?;
1639+
dest.whitespace()?;
1640+
dest.write_str("var(--lightningcss-dark")?;
1641+
dest.delim(',', false)?;
1642+
dark.to_css(dest, is_custom_property)?;
1643+
return dest.write_char(')')
1644+
}
1645+
1646+
dest.write_str("light-dark(")?;
1647+
light.to_css(dest, is_custom_property)?;
1648+
dest.delim(',', false)?;
1649+
dark.to_css(dest, is_custom_property)?;
1650+
dest.write_char(')')
1651+
}
16151652
}
16161653
}
16171654
}

0 commit comments

Comments
 (0)