Custom media query breakpoints

[gregolai]

Allows consumers to have more control over the media queries that get matched against by allowing custom @media ... queries in place of basic em rule matching. For example, these rules can be used to distinguish touch/mobile devices using pointer: coarse

Media queries can be used in a breakpoints array and matched against:

const theme = {
  breakpoints: ['@media ...', '@media ...']
}

const style = css({
  fontSize: [1, 2, 3]
})(theme)

breakpoints can also be an object with media queries as the keys

const theme = {
  breakpoints: {
    'break-0': '@media ...',
    'break-1': '@media ...',
  }
}

const style = css({
  fontSize: {
    _: 1,
    'break-0': 2,
    'break-1': 3
  }
})(theme)

Both styles above are equivalent to:

{
  fontSize: 1,
  '@media ...': {
    fontSize: 2
  },
  '@media ...': {
    fontSize: 3
  }
}

[aulneau]

This looks great, something our team was actively talking about today!

[jxnblk]

Thanks for putting this together! While this is an interesting idea, I don't know that it fits in well with the core concept of the responsive array prop. I think limiting the media queries to responsive "mobile-first" is really part of the core idea here. Since pointer doesn't signify the width of a viewport (e.g. iPad or Surface vs a phone with a stylus), I'd recommend handling other media queries with the standard syntax rather than conflating it with viewport width. Let me know if that doesn't make sense

[aulneau]

@jxnblk It might be that pointer isn't important or as relevant, but our use case is that we wanted to use min-device-width in place of min-width, which seems more useful.

[jxnblk]

@aulneau I might not understand what you're referring to but isn't that deprecated?

[aulneau]

@jxnblk oh dang you're right! haha. well, I think regardless I'm curious about how to achieve the ability to pass different types of media queries in a scalable, repeatable way with styled-system -- which I think this PR is trying to get at. I don't mean to hijack this PR, so happy to create an issue, too. We explored using @styled-system/css such as

const Boop = styled('div')(
  css({
    px: 6,
    '@media screen... etc': {
      px: 8,
    },
  })
)

[gregolai]

I think limiting the media queries to responsive "mobile-first" is really part of the core idea here. Since pointer doesn't signify the width of a viewport (e.g. iPad or Surface vs a phone with a stylus), I'd recommend handling other media queries with the standard syntax rather than conflating it with viewport width.

So for a little more context, this PR opens up the possibility for a variety of different media queries (such as @media print), not just targeting pointer: fine (mouse) or pointer: coarse (touch), but any other thing that may arrive in the future. There are cases where I need to explicitly target touch devices but not slim browser screens, which pointer: coarse allows me to do. Having key-value maps for these allows ease-of-use on the consumer-end. Please let me know if you have any concerns. Thanks!

[ItsWendell]

Would love to see support for customizing this too, the documentation states that this is actually possible, but right now it isn't.

I'm experimenting with Styled System's responsiveness / breakpoints on Expo (React Native and React Native for Web) by implementing react-native-extended-stylesheet in Styled Components.

Extended Stylesheet doesn't have support for 'screen and' type properties in the media queries, so I need to forcefully remove it now in my styled-components fork, which isn't ideal.

[roginfarrer]

This PR is about a month old now-- @jxnblk do you still have reservations about the intent of this pull request?

This adds some features that I'm looking for, as well.

[gregolai]

@jxnblk Bump. This is a feature my team relies on, so we've been running off a fork for the past 3+ months. Let me know if there are any concerns/fixups I can make to this PR, or if there's a recommended alternative. Thanks!

[gregolai]

@jxnblk Bump. Let me know what I can do to make this merge a reality.

[sampsonjoliver]

Also keen to see this go through

[gregolai]

@jxnblk ^

[gregolai]

@jxnblk