styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 107 forks source link

Fractional keys in the theme are not working #402

Closed herkulano closed 1 year ago

herkulano commented 1 year ago

🐛 Bug Report

I'm trying to use fractional numbers, like 0.5, for the keys in the theme, as is provided in the default template and it doesn't work.

Code

Implementation

const theme = {
  space: {
    3.5: "6rem",
    4.5: "6rem"
  },
  sizes: {
    6.5: "6rem"
  }
};

const StyledBox = styled.div`
  margin: "4.5 3.5";
  padding: "4.5 3.5";
  width: "6.5";
  height: "6.5";
`;

Result

    margin: "4.5 3.5";
    padding: "4.5 3.5";
    width: "6.5";
    height: "6.5";

Expected

    margin: "6rem 6rem";
    padding: "6rem 6rem";
    width: "6rem";
    height: "6rem";

Working example

https://codesandbox.io/s/sad-mendel-6rt4xp?file=/src/App.js

herkulano commented 1 year ago

Duplicate of https://github.com/styled-components/xstyled/issues/294