Allow setting multiple values within a media query or breakpoint

[remyoudemans]

First of all, amazing library! Seems like a vast improvement on react-native's StyleSheet.

I've been trying it out, and it would make media queries and breakpoints way more powerful if you could use them for multiple values instead of just one.

For example right now as far as I can tell I might have to do this.

const styles = StyleSheet.create({
  container: {
    backgroundColor: {
      xs: "red",
      [mq.only.width(400)]: "green",
    },
    marginBottom: {
      xs: 20,
      [mq.only.width(400)]: 40,
    },
    color: {
      xs: "green",
      [mq.only.width(400)]: "red,
    },
  },
});

It would be far more practical to be able to do this:

const styles = StyleSheet.create({
  container: {
    backgroundColor: "red",
    marginBottom: 20,
    color: "green",
    [mq.only.width(400)]: {
       backgroundColor: "green",
       marginBottom: 40,
       color: "red"
    }
  },
});

Please let me know if this is already possible somehow and I missed it!

[jpudysz]

Looks great, but it would be a breaking change ;)

Maybe I can add it in Unistyles 4

[remyoudemans]

Glad to hear you think so!
Is it really a breaking change? I thought since mq.only.width() returns a symbol it's not a breaking change because it can't match any existing keys at that top level.

The same feature for breakpoints would definitely be a breaking change because they just have string names that could conflict, but if we did it only for media queries could it be in 3.x?

[jpudysz]

This change would touch a lot of surfaces:

• C++ parser
• types
• most likely some conversions

It would take me a bit more time to implement and verify that it works. I could only plan such bigger features while rewriting parts for Unistyles 4, since I need to test everything anyway.

Actually, I'm going to rebuild the parser in the near future, as Nitro released a lot of cool features and I’ve learned a lot while developing Uniwind. So it’ll be a win-win for everyone.