logical border-radius removed when :where is present #1049
Description
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.
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: vercel/next.js#81763