: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));
}
When transpiling
to Chrome 80, the radius styles in
.btn1are completely removed, while the ones in.btn2are correctly transpiled.Playground
Output:
This happens when using Tailwind + daisyUI: vercel/next.js#81763