preset-base: emit WebKit backdrop-filter before the standard declaration

[BarrieLAJ]

Description

The built-in backdropFilter utility emits the standards declaration before the WebKit fallback:

.example {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

That order is unsafe with Lightning CSS. Lightning CSS treats the declarations as equivalent during optimization and keeps the last one, producing WebKit-only CSS that does not work in current Chromium or Firefox:

.example{-webkit-backdrop-filter:blur(5px)}

This affects Panda consumers using Next.js with Turbopack, which always processes CSS through Lightning CSS. It is also documented in parcel-bundler/lightningcss#695.

Panda version

Reproduced with @pandacss/dev and @pandacss/preset-base 1.11.4.

Reproduction

css({ backdropFilter: 'blur(5px)' })

panda cssgen emits:

.bkdp_blur\\(5px\\) {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

With lightningcss@1.31.1:

import { transform } from 'lightningcss'

const code = Buffer.from(`
.example {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
`)

console.log(transform({ filename: 'input.css', code, minify: true }).code.toString())
// .example{-webkit-backdrop-filter:blur(5px)}

Expected behavior

The prefixed fallback should be emitted first and the standards declaration last:

.example {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

The backdropFilter utility transform in @pandacss/preset-base can accomplish this by reversing the returned property order:

return {
  WebkitBackdropFilter: value,
  backdropFilter: value,
}

This ordering survives Lightning CSS and preserves browser compatibility.

[segunadebayo]

I just pushed a fix for this. We'll release an update shortly.

If the issue persists after upgrading, I'll re-open it.