griffel icon indicating copy to clipboard operation
griffel copied to clipboard

`shorthands.flex(1)` should produce `flex: 1 1 0%` instead of `flex: 1 1 0px`

Open stefan-schweiger opened this issue 1 year ago • 2 comments

When you set a css property to flex: 1 in any of the major browsers the result isflex: 1 1 0%. But the griffel shorthand shorthands.flex(1) produces flex: 1 1 0px.

What's maybe even weirder is that the standard actually defines that flex: <positive-number> is the equivalent of flex: <positive-number> 1 0;. But somehow all browser vendors decided that this is just wrong and produce flex: 1 1 0% as mentioned above.

Either way following reality or following the standard griffel produces an incorrect output. Ideally it should follow how the major browser vendors do it to have the same developer experience as specifying flex: 1, because otherwise this can be a real pitfall.

stefan-schweiger avatar Feb 08 '24 10:02 stefan-schweiger