Open dalhaan opened 3 years ago
I also noticed that if I have the size key 3.5
:
const theme = {
sizes: {
3.5: '0.875rem',
},
};
and set the w
& h
utility props to w={3.5} h={3.5}
the width and height both become e
, which is invalid css. I feel that this may be related. If it's not it should be another issue.
I have also added this example to the Code Sandbox linked in the original issue.
Hi Greg,
We encounter the same case using CSS properties in a styled component, with padding declaration in our side.
https://codesandbox.io/s/young-sea-peeur?file=/src/App.js
padding-top: 1;
padding-left: 0.5;
outputs:
padding-top: 0.25rem;
padding-left: 0.5px;
Note that reverting from 3.1.2
to 3.1.0
resolve it for us in our project.
This is not the case in the Codesandbox linked upper: it need to use 2.5.0
to fix
Any progress on this bug?
What if you make the key a string instead? Wondering if thereβs some floating point stuff happening that is breaking comparison
π Bug Report
Incorrect sizes are given when using size keys that have decimal places when using
w
andh
utility props. Instead of the setting the width or height value to the value defined in the theme, it sets the value to the key as a pixel value.This issue doesn't seem to arise when referencing size keys that do not have decimals.
To Reproduce
Steps to reproduce the behavior:
w
orh
utility prop. For example:Expected behavior
I expected the div to have a width and height of 3.125rem instead of 12.5px.
Link to repl or repo
Code Sandbox: https://codesandbox.io/s/xstyled-v2-playground-forked-iu87j?file=/src/App.js