How to write multiple CSS Properties on JSS-format?

Question

I want to make some workaround for my current work that requires this to implement in order to get the right results on iOS 9.3 and its predecessors.

It requires this line of CSS to be fixed:

.wrapping-element {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

And i want to make it to JSS. My attempt is like this:

const styles = {
  root: {
    display: '-webkit-box',
    display: '-moz-box',
    display: '-ms-flexbox',
    display: '-webkit-flex',
    display: 'flex',
  }
};

But it seems not the right way to do this. Because eslint make this an error because it has multiple key. And because it's an object, only the last key:value is applied. CMIIW

Windbound

Does this help? github.com/cssinjs/jss/issues/22 – Fennell

Answer 1

I was having this problem today myself, and after a bit of digging I discovered that this can be achieved using Fallbacks:

const styles = {
  root: {
    display: 'flex',
    fallbacks: [
      { display: '-webkit-box' },
      { display: '-moz-box' },
      { display: '-ms-flexbox' },
      { display: '-webkit-flex' }
    ]
  }
}

This will output:

.root {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Tenner

Working docs link: cssinjs.org/jss-syntax/?v=v10.4.0#fallbacks – Finance