useBreakpointIndex and useResponsiveValue don't handle full @media queries in theme.breakpoints

[hasparus]

useBreakpointIndex and useResponsiveValue don't handle full @media queries in theme.breakpoints.

Thanks for finding this @danimadmolil 🙏.

Discussed in #2195

^{Originally posted by danimadmolil April 7, 2022}
Hellow, i'm new to theme-ui. my project is simple react-app.on index.js i create a theme and use it with ThemeProvider like this:

index.js

const theme = {
 breakpoints: [
    "@media screen and (min-width:300px) and (max-width:499px)",
    "@media screen and (min-width: 500px) and (max-width:899px)",
    "@media screen and (min-width: 900px)",
  ],
} 
<ThemeProvider theme={theme}>
   <App/>
</ThemeProvider>

App.js

import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
function App(){
  const color = useResponsiveValue((theme) => ["red", "blue", "orange"]);
  return <div className="app" style={{backgroundColor:color}}></div>
} 

the result color is always red. i'm not whay it's like that. can any one help me please?
note:if i use breakpoint:['40em','50em','60em'] it work fine but i like to use media queries with condition like (min-width) and (max-width).

[hasparus]

🚀 Issue was released in v0.14.3 🚀

[manwaring]

Not sure if a regression or I'm just misconfiguring but the same issue originally reported is happening for me in v0.16.1

[sbeben]

none of the versions works for me

[hasparus]

@sbeben what's your setup? Framework, package manager version?