Skip to content

:-webkit-any(:lang(...)) and :-moz-any(:lang(...)) rules dropped when targets are set #1211

@gavgrego

Description

@gavgrego

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions