backdropFilter token generated by lightningcss is invalid

[schardev]

Description

Setting backdropFilter: 'auto' without lightingcss emits proper css with prefixed and non-prefixed token:

  .backdrop_auto {
    backdrop-filter: var(--backdrop-blur,) var(--backdrop-brightness,)
      var(--backdrop-contrast,) var(--backdrop-grayscale,)
      var(--backdrop-hue-rotate,) var(--backdrop-invert,)
      var(--backdrop-opacity,) var(--backdrop-saturate,) var(--backdrop-sepia,);
    -webkit-backdrop-filter: var(--backdrop-blur,) var(--backdrop-brightness,)
      var(--backdrop-contrast,) var(--backdrop-grayscale,)
      var(--backdrop-hue-rotate,) var(--backdrop-invert,)
      var(--backdrop-opacity,) var(--backdrop-saturate,) var(--backdrop-sepia,);
  }

After setting lightningcss to true it only emits -webkit prefix-ed declaration:

@layer utilities {
  .backdrop_sm {
    -webkit-backdrop-filter: var(--backdrop-blur,) var(--backdrop-brightness,)
      var(--backdrop-contrast,) var(--backdrop-grayscale,)
      var(--backdrop-hue-rotate,) var(--backdrop-invert,)
      var(--backdrop-opacity,) var(--backdrop-saturate,) var(--backdrop-sepia,);  }
}

[see also: #2329]

Link to Reproduction

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

Steps to reproduce

No response

JS Framework

React

Panda CSS Version

0.37.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[boar-is]

Related LightningCSS issue: parcel-bundler/lightningcss#695

[heycassidy]

Is there any workaround for this? Right now it seems the only way to avoid this is to not use lightningcss