Playground repro
When targets are set, lightningcss drops rules whose selectors use :-webkit-any(:lang(...)) and :-moz-any(:lang(...)), apparently treating them as fully equivalent to :is(:lang(...)). They are not equivalent — the vendor-prefixed forms exist for older Safari/Firefox versions that support :matches() / :any but not :is(), and Tailwind v4 emits all three precisely so logical-property utilities work in those browsers.
@layer utilities {
.tw\:pe-12:not(:-webkit-any(:lang(ar),:lang(he),:lang(fa))) { padding-right: 3rem !important }
.tw\:pe-12:not(:-moz-any(:lang(ar),:lang(he),:lang(fa))) { padding-right: 3rem !important }
.tw\:pe-12:not(:is(:lang(ar),:lang(he),:lang(fa))) { padding-right: 3rem !important }
.tw\:pe-12:-webkit-any(:lang(ar),:lang(he),:lang(fa)) { padding-left: 3rem !important }
.tw\:pe-12:-moz-any(:lang(ar),:lang(he),:lang(fa)) { padding-left: 3rem !important }
.tw\:pe-12:is(:lang(ar),:lang(he),:lang(fa)) { padding-left: 3rem !important }
}
With targets: { chrome: 100 }, the two RTL rules using :-webkit-any and :-moz-any are removed from the output:
@layer utilities{.tw\:pe-12:not(:-webkit-any(:lang(ar),:lang(he),:lang(fa))){padding-right:3rem!important}.tw\:pe-12:not(:-moz-any(:lang(ar),:lang(he),:lang(fa))){padding-right:3rem!important}.tw\:pe-12:not(:is(:lang(ar),:lang(he),:lang(fa))){padding-right:3rem!important}.tw\:pe-12:is(:lang(ar),:lang(he),:lang(fa)){padding-left:3rem!important}}
Removing targets from the call preserves all six rules. The bug fires for any sufficiently modern target (e.g. chrome 100 reproduces it; chrome 80 does not).
This is the exact pattern Tailwind CSS v4 emits for logical-property utilities (ps-*, pe-*, ms-*, me-*, start-*, end-*, border-s-*, border-e-*) so they flip direction in RTL languages across browsers. Dropping the prefixed forms silently breaks RTL flipping in older Safari/Firefox versions even when those browsers are still in the target range.
Tested on lightningcss 1.32.0.
Playground repro
When
targetsare set, lightningcss drops rules whose selectors use:-webkit-any(:lang(...))and:-moz-any(:lang(...)), apparently treating them as fully equivalent to:is(:lang(...)). They are not equivalent — the vendor-prefixed forms exist for older Safari/Firefox versions that support:matches()/:anybut not:is(), and Tailwind v4 emits all three precisely so logical-property utilities work in those browsers.With
targets: { chrome: 100 }, the two RTL rules using:-webkit-anyand:-moz-anyare removed from the output:Removing
targetsfrom the call preserves all six rules. The bug fires for any sufficiently modern target (e.g.chrome 100reproduces it;chrome 80does not).This is the exact pattern Tailwind CSS v4 emits for logical-property utilities (
ps-*,pe-*,ms-*,me-*,start-*,end-*,border-s-*,border-e-*) so they flip direction in RTL languages across browsers. Dropping the prefixed forms silently breaks RTL flipping in older Safari/Firefox versions even when those browsers are still in the target range.Tested on lightningcss 1.32.0.