css: Recursively minify calc()

[jvoisin]

Miniflux has css code like this:

translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));

it's currently minimized like this:

translate:-50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2))

and could be minimized further like this:

translate:-50% calc(-100% - calc(var(--padding-size)*2) - calc(var(--border-size)*2))}

[tdewolff]

Are you sure that is correct? I recall that the calc function requires spaces around the operators.

[jvoisin]

It's a bit more subtle:

The + and - operators must be surrounded by whitespace. For instance, calc(50% -8px) will be parsed as "a percentage followed by a negative length" — which is an invalid expression — while calc(50% - 8px) is "a percentage followed by a subtraction operator and a length". Likewise, calc(8px + -50%) is treated as "a length followed by an addition operator and a negative percentage".

The * and / operators do not require whitespace, but adding it for consistency is recommended.

It is permitted to nest calc() functions, in which case, the inner ones are treated as simple parentheses.

For lengths, you can't use 0 to mean 0px (or another length unit); instead, you must use the version with the unit: margin-top: calc(0px + 20px); is valid, while margin-top: calc(0 + 20px); is invalid.

Current implementations require that for the * and / operators, one of the operands has to be unitless. For /, the right operand must be unitless. For example font-size: calc(1.25rem / 1.25) is valid but font-size: calc(1.25rem / 125%) is invalid.

[tdewolff]

Great find! In fact, since nested calc is treated as parenthesis, we can do even better:

translate:-50% calc(-100% - (var(--padding-size)*2) - (var(--border-size)*2))}

And assuming operator precedence as it is in math:

translate:-50% calc(-100% - var(--padding-size)*2 - var(--border-size)*2)}