Computed properties not working

alitaheri / jss-rtl

Flip styles using rtl-css-js

MIT License

83 stars 5 forks source link

Computed properties not working #14

Closed guilleasz closed 3 years ago

guilleasz commented 3 years ago

Expected behavior:

The rtl plugin should switch the styles.

Describe the bug:

The rtl plugin doesn't switch all the styles.

const useStyles = createUseStyles({
  myButton1: {
    paddingLeft: "16px" ✅
  },
  myButton2: {
    paddingRight: ({ isMobile }) => (isMobile ? 0 : "26px") ❌
  },
  myLabel: props => ({
    paddingRight: "8px" ✅
  })
});

Codesandbox link:

https://codesandbox.io/s/react-jss-playground-37lqs

alitaheri commented 3 years ago

This is probably an issue or "design-decision" related to rtl-css-js. This library simply passes the objects to that library to perform the conversions.

IIIristraM commented 3 years ago

Hello, please reopen the issue.

There is a cycle with this answer https://github.com/kentcdodds/rtl-css-js/issues/53 )
It seems like problem is in jss-rtl, cause it doesn't handle such cases at all. As far as I understand computed styles applied here. jss-rtl doesn't implement onUpdate hook. Neither style argument nor rule.toJSON does not return result for computed properties