Skip to content

logical border-radius removed when :where is present #1049

@mischnic

Description

@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: vercel/next.js#81763

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions