css variable declaration calc minification

[MoritzLoewenstein]

Currently, the following calc expression will not be minified:

:root {
    --foo: calc(10px + 20px);
}

I know that it would break js code that relies on the computed style value for that property.

I will consider trying to implement this if there is a chance that it will get merged (as an opt-in option),
otherwise feel free to close :)

[devongovett]

It is sorta hard if there are any unknown parameters like variables in there (e.g. calc(10px + var(--foo))). Even simplifying things like calc(10px + 20px + var(--bar)) might be challenging to do right. But for simple cases like the one you posted where all terms are known it could be done. If you're interested in contributing that, you could start in here and add a new handler for "calc" functions:

lightningcss/src/properties/custom.rs

Line 380 in 1203368

Ok(&cssparser::Token::Function(ref f)) => {

From there, it would need to try parsing each possible type that supports calc, e.g. lengths, angles, times, etc. similar to this:

lightningcss/src/properties/custom.rs

Lines 460 to 470 in 1203368

	let value = if let Ok(length) = LengthValue::try_from(token) {
	TokenOrValue::Length(length)
	} else if let Ok(angle) = Angle::try_from(token) {
	TokenOrValue::Angle(angle)
	} else if let Ok(time) = Time::try_from(token) {
	TokenOrValue::Time(time)
	} else if let Ok(resolution) = Resolution::try_from(token) {
	TokenOrValue::Resolution(resolution)
	} else {
	TokenOrValue::Token(token.into())
	};

The difference would be using Length instead of LengthValue since Length supports calc but LengthValue does not. Then the result would just be a simplified value that could be stored as a TokenOrValue::Length etc.

Let me know if you have questions!

[MoritzLoewenstein]

Thanks for the explanation, started the implementation in #526. I will let you know when its ready or if I have questions!