Fallback styles don't work as I expected

[osdiab]

Description

This wasn't anywhere I could find in the docs, but it does seem to generally work how I think they would based on vanilla-extract, so maybe I don't understand the logic.

If I do this:

import { css } from 'styled-system/css'

export const App = () => {
  return (
    <>
      <button
        className={css({
          bg: 'red.400',
          height: ['dvh', '100vh']
        })}
      >
        Hello world
      </button>
    </>
  )
}

I'd expect that the height would be 1dvh, but then fall back to 100vh if dvh isn't supported. Unfortunately, what actually seems to happen is that the 100vh is being wrapped in a media query, whereas dvh isn't, and the style becomes 100vh probably due to specificity.

Not what I expected.

Link to Reproduction

https://play.panda-css.com/Pj3J55HixH

Steps to reproduce

1. Look at the repro and the resulting styles

JS Framework

N/A, but I use NextJS with TypeScript

Panda CSS Version

0.5.0

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[segunadebayo]

The array syntax is an alternative syntax for responsive styles inherited from Chakra's API. It's not for fallback styles.

To support that, I recommend creating a variable in the global CSS file along the lines of

:root {
  --dvh: 100vh
}

@supports (height: 100dvh){
 :root {
    --dvh: 100dvh
 }
}

and use that in your code.

[osdiab]

makes sense and thanks for the workaround!

Would be cool if there were some built-in convenient way to pass multiple values as fallbacks like in vanilla-extract, but for now this will do the job.

[punkpeye]

Related question #2992