Using standard css media query breaks responsive values when setting a same value set for breakpoints

[lionmat]

Describe the bug I am new to Theme UI so, I am not sure if this is a bug or specification. When using standard css media query in sx prop and setting a same value set for breakpoints, I found out responsive values doesn't work properly.

For example,

in src/gatsby-plugin-theme-ui/index.js

import { merge } from "theme-ui"
import { tailwind } from "@theme-ui/presets"

const theme = merge(tailwind, {
  breakpoints: ['640px', '768px', '1024px', '1280px'], 
})
export default theme

in src/components/test.js

      <div
        sx={{
          width: "100%",
          background: ["blue", "green", "pink", "yellow", "black"],
          "@media screen and (min-width: 1024px)": {
            textAlign: "center",
          },
        }}
      >
        Test
      </div>

In this settings, "yellow" background will be skipped.("pink" continues until "black")

Expected behavior I was expecting to both works properly. In above setting, "yellow" should be applied.

Additional context This is happened when setting an exactly same value set for breakpoints (one of '640px', '768px', '1024px', '1280px')

So, If I set, for example
@media screen and (min-width: 1000px)" It works well.

Also, If I comment out css media query, It works well too.

I wish I could fix the code, but I don't understand the inside code well, so I'll report it first. Thanks

[lachlanjc]

Hey @lionmat! You’ve got 4 breakpoints in that example but then are setting 5 values to the breakpoints. There may be a bug in our handling of an edge case like that, but you should only be using as many responsive values as you have breakpoints. (You can set as many breakpoints as you like.)

[lionmat]

@lachlanjc Thanks for your comment.

I thought Responsive values will be set something like this, am I wrong ? <----blue---> 640px <--- green ---> 768px <---- pink -----> 1024px <---yellow---> 1280px <----black ---->

OK, I changed the code and tried again.

          background: ["blue", "green", "pink", "yellow"],
          "@media screen and (min-width: 1024px)": {
             textAlign: "center",
          },

Even if I set like this, textAlign: "center" works but bg never changes to yellow.

[benface]

There may be a bug in our handling of an edge case like that, but you should only be using as many responsive values as you have breakpoints.

Hmm, are you sure? If you have only one breakpoint, surely you can specify two values: one for below and one for above the breakpoint?