Closed SpicyPete closed 3 years ago
@gregberge I don't know if it'll help but you can reproduce on your playground by modifying line 25 my={15}
fails to convert to rem
(it converts to 15px
), where your default my={20}
correctly converts to 5rem
.
Some values are correctly converted to rems, some aren't. π€·ββοΈ
Hope this helpsβ¦
π₯ Regression Report
After upgrading from 2.5.0 to 3.0.1, all of my unitless elements are no longer being converted to
rem
, but rather get rendered as their unitless value, which leads to a broken layout.Last working version
Worked up to version: 2.5.0
Stopped working in version: 3.0.1
To Reproduce
Add
rpxTransformers
to your theme object.note -
rpxTransformers
is now imported from@xstyled/styled-components
instead of@xstyled/system
as before. Didn't see this documented in the migration guide, but this page indicate this change.The same issue persists importing this either way.
Create a component using this feature, example.
Expected behavior
gap: 8
maps to the default themesize
key, and works as expected (2 rem).gap: 120
doesn't map to a theme value, so I expect it to be converted to therem
equivalent, but it comes out asgap: 120
, which is an invalid value.grid-template-columns
uses a size from my theme, but the value does not get converted to it'srem
equivalent (7.5rem), but instead comes out as...grid-template-columns: repeat( auto-fit,minmax(288,1fr) );
Put in
height
for the example, which also doesn't convert.height: 5000;
vs the expectedheight: 312.5rem;
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard
Paste the results here: