logical border-radius removed when :where is present

[mischnic]

When transpiling

.btn1 {
    :where(&) {
      width: unset;
    }
    border-start-start-radius: var(--join-ss, var(--radius-field));
 }


.btn2 {
    border-start-start-radius: var(--join-ss, var(--radius-field));
    border-end-end-radius: var(--join-ee, var(--radius-field));
 }

to Chrome 80, the radius styles in .btn1 are completely removed, while the ones in .btn2 are correctly transpiled.

Playground

Output:

:where(.btn1) {
  width: unset;
}



.btn2:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-left-radius: var(--join-ss, var(--radius-field));
  border-bottom-right-radius: var(--join-ee, var(--radius-field));
}

.btn2:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  border-top-left-radius: var(--join-ss, var(--radius-field));
  border-bottom-right-radius: var(--join-ee, var(--radius-field));
}

.btn2:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--join-ss, var(--radius-field));
  border-bottom-left-radius: var(--join-ee, var(--radius-field));
}

.btn2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  border-top-right-radius: var(--join-ss, var(--radius-field));
  border-bottom-left-radius: var(--join-ee, var(--radius-field));
}

This happens when using Tailwind + daisyUI: https://github.com/vercel/next.js/issues/81763

[saadeghi]

Workaround:
Update Browserlist target so Lightning CSS won't polyfill those styles.
Add "browserslist": "> 1%" to package.json using this command:

npm pkg set browserslist="> 1%"