stylex

stylex copied to clipboard

Describe the issue

flexBasis: '0%' is compiled to flex-basis: 0px, which is not equivalent

Expected behavior

flexBasis: '0%' to be compiled to flex-basis: 0%

Steps to reproduce

const stylex.create({
  container: {
    flexBasis: '0%',
  },
});

Test case

No response

Additional comments

No response

In the meantime, I use flexBasis: '0.0%', which is compiled correctly.

How are 0% and 0px different in practice? Can you try using a non-zero value and see that it works as expected?

We have a value minification process that tries to avoid having multiple variants of equivalent values. e.g. we want to avoid 0 and 0px and 0% to all be in the CSS bundle, so we try to normalize them to the same format when it doesn't change behaviour.

That's an excellent question. I don't know how they are different in practice. But they are, and my code works with '0%' and does not work with '0px' :x

I will try to make a reproducible example.

Here it is:

https://codepen.io/opascal/pen/MWRwNpb

CSS, switch lines 36 and 37, you will see that flex-basis: 0% differs from flex-basis: 0px.

Thanks for the example. While, this is a convincing argument for making a change, I did want to point something out.

If you read about flex-basis on MDN, you'll see that if you use a percentage value, it calculates the actual size based on the size of the containing element. In your example, the container doesn't have an explicit height and instead gets it's height from the flex child itself. If you set an explicit height, then 0% does behave the same as 0 and 0px.

So, at least in your example, flex-basis: 0% is having no effect at all since the percentage value cannot be resolved.

I'm convinced I need to make a change to match the behavior of CSS, but it is important to know that whenever 0% behaves differently than 0 or 0px, it is likely not being used at all.

@nmn I believe this can be closed as well 😄

Thanks for the example. While, this is a convincing argument for making a change, I did want to point something out.

If you read about flex-basis on MDN, you'll see that if you use a percentage value, it calculates the actual size based on the size of the containing element. In your example, the container doesn't have an explicit height and instead gets it's height from the flex child itself. If you set an explicit height, then 0% does behave the same as 0 and 0px.

So, at least in your example, flex-basis: 0% is having no effect at all since the percentage value cannot be resolved.

I'm convinced I need to make a change to match the behavior of CSS, but it is important to know that whenever 0% behaves differently than 0 or 0px, it is likely not being used at all.

I found a similar situation from here. 0% means auto if the parent element has no explicit value. https://stackoverflow.com/questions/63475073/css-flex-basis-0-has-different-behaviour-to-flex-basis-0px