product-ride/styled-wind

Height dynamic property is using values from width

Closed this issue · 5 comments

shashank-bairy commented

Describe the bug
Height dynamic property class is using width's values.
For example: .h-screen is parsed as height: 100vw.

Expected behavior
.h-screen is parsed as height: 100vh

Screenshots
h

Solution
It should be this.config.theme.height instead of this.config.theme.width .
height

Desktop (please complete the following information):

  • OS: Manjaro
  • Browser: Brave
  • Version: v0.0.0-beta.10
shashank-bairy commented

@vilvaathibanpb I'll be making PR for the same

vilvaathibanpb commented

Sure @BA1RY go ahead please

ameerthehacker commented

@BA1RY good find

shashank-bairy commented

Posting this from chat for reference here
I tried making the change I mentioned above. It broke the height property. Test case for .h-10/12 resulted in height: undefined as there is no class in tailwind for the same. .h-5/6 also resulted in undefined but it has a tailwind class. It's mostly because we haven't defined values for height property. Should we manually define those values in the config files or is there any other method for this?

width property style definition
image

height property style definition
image

shashank-bairy commented

Hi @vilvaathibanpb @ameerthehacker I've made a PR. New additional spacing values and few additional normal/min/max height/width classes from latest tailwind have been added. Added a few tests also. Please have a look at it. Thanks 😄