CSS - Minifier strips unit from 0fr, wich prevents animation to 1fr.

[lgamache-nmedia]

Using version 1.20.4 (Looked at updates since this patch and nothing about this bug)

Describe the bug

The minifier removes the unit "fr" when the value is 0, which should not happen, since it breaks animations between fractions like 0fr to 1fr.

For more context on why one would want to animate from 0fr to 1fr, watch Kevin Powell's video here: https://www.youtube.com/watch?v=B_n4YONte5A

Or look at this codepen: https://codepen.io/kevinpowell/pen/NWOgVga

Steps to recreate

1. Create scss file with a property with value "0fr"

   .foo {
   grid-template-rows: 0fr;
   }

2. Compile file to get a minified css

(NUglify is used from the WebCompiler Microsoft Visual Studio Extension)

Minified output or stack trace

.foo{grid-template-rows:0}

Excepted output code

.foo{grid-template-rows:0fr}

[trullock]

I dont have time right now to look at this but its a pretty easy fix, send a PR

Look in CssParser

Is the issue that fr units shouldnt be reduced to zero, or that grid-template-rows needs the units?

Theres currently IsZeroReducibleProperty(string propertyName), which can be added to. Otherwise it needs supplimenting with the fr unit type non-reducing implementation

[failwyn]

The only usage of the FR unit that I'm aware of is in the grid-template-rows and grid-template-columns properties; since it was already in the dimension types, I handled it there by moving FR to a new case that leaves it as TokenType.Dimension just to intuitively show that it is a known unit and it was intentionally left as TokenType.Dimension. If you prefer, I could delete the case and just add to the comment below where % is explained.