feat(css): add and drop CSS vendor prefixes for the browserslist target - #21721

…rough a join

Three defects in the prefixing pass, and the switch that turns it off:

- a browserslist entry the prefix tables cannot resolve (`op_mini`, `and_uc`,
  `ie_mob`, a version that does not parse) read as a browser needing nothing,
  so a prefix it still needs was dropped. Removal now asks that every selected
  browser be one the tables cover; adding is unchanged. An empty selection is
  no target at all rather than one that needs no prefix;
- an at-rule offered for joining described its block with the unprefixed
  declaration texts, so joining two `@media` blocks put back a prefix the
  first had dropped and lost the ones it had added;
- the generator counted support behind a flag as support, which moved a
  construct's unprefixed arrival earlier than a page can rely on.

`optimization.minimize.css.vendorPrefixes: false` turns the whole pass off; the
browserslist selection is then not resolved for it at all.

…gn prefixing with lightningcss

Prefixing now decides for the same browsers lightningcss does. It skips a
browserslist name no compat dataset covers (`op_mini`, `and_uc`, `and_qq`,
`baidu`, `kaios`, `bb`) rather than letting it block every removal, reads
`ie_mob` through IE's windows — Windows Phone's Trident on the desktop version
line, which is how lightningcss carries it — and prefixes for no one when a
selection resolves to no browser at all. A prefixed rule its unprefixed twin
follows is dropped: the writer already holds one top-level rule back so the next
can join onto it, and that is the order every stylesheet writes the pair in.
animate.css minifies to 22,946 bytes for a browserslist target, from 68,935.

Three costs the printer paid per rule and no longer does:

- the joinable-selector shape test ran for every qualified rule, though only a
  rule whose block another prints identically is ever asked. It is answered on
  demand now and remembered, taking ~80 ms of a ~3.7 s pass to ~7 ms;
- the selector-list canonicalization walked the list twice, and split it a
  character at a time through `charAt`;
- each prefix decision built its cache key by concatenation, one string per
  declaration; the memo is per table now.

…far off

Three things the prefixing pass left to lightningcss:

- a selector list was left alone, since an engine drops a whole list over one
  selector it cannot parse. Each copy now carries one spelling and only the
  selectors that need it, which is that rule kept rather than avoided —
  `input::placeholder,textarea::placeholder` prefixes as two lists and its
  original, where lightningcss splits it into six single-selector rules;
- prefixing ran on top-level rules only, because one flat sibling set cannot
  tell a nested `@keyframes` from the top-level one of the same name. Each
  block keeps its own set now, dropped as the block finishes, so a rule inside
  `@media` or under another rule is prefixed against its own scope;
- a prefixed rule was dropped only where its unprefixed twin had already been
  seen, or stood immediately after. The writer can take a piece back once a
  later one overrides it — how a repeated declaration is dropped — so such a
  rule is emitted as a piece of its own and taken back from wherever the twin
  turns up, with the source mapping anchored to it.

`PrintContext.takeRetractable` is that last one: `take` for a node a later
sibling may still make dead, recording the mapping against the piece so
`retract` takes both back.

…ts own way

The prefix tables carried a prefix, so a legacy spelling that is a rename rather
than a prefix was out of reach and a value's spelling had nowhere to live. Both
are now read from BCD:

- a selector's table holds the whole spelling, which `alternative_name` states
  where `prefix` cannot — `:is()` was `:-webkit-any()`, `:fullscreen`
  `:-webkit-full-screen`, `::file-selector-button` `::-webkit-file-upload-button`.
  A spelling two names claim is dropped from the rename side: BCD gives
  `:-moz-placeholder` to `::placeholder` as its prefix and to
  `:placeholder-shown` as a rename, and only the first is what the engine did
  with it. A copy is one engine's, so a list wanting two names of one engine
  stays one copy;
- `PREFIXED_VALUES` holds a property's own keyword values, read only where the
  property's value-definition syntax names the keyword — which is what tells a
  value (`display.flex`) from a context BCD files the same way
  (`align-self.grid_context`) and from a function whose older spelling took its
  arguments differently (`image-set()`). An engine the property's own prefix
  already covers is not filed twice (`-ms-touch-action` is not also
  `touch-action:-ms-manipulation`), and IE's `-ms-grid` is excluded in the
  generator with its reason: that spelling selects the 2011 grid, whose tracks
  are their own prefixed properties.

An alternative-name entry no longer counts as unprefixed support either, which
had been moving a construct's unprefixed arrival earlier than it happened.

`convertLengthUnits` was read after the work it decides: every dimension token
lowercased its unit, looked it up in the whole conversion table and parsed its
number before a length was handed back untouched. The parse now points at the
table its options allow — without the option the length units are simply not in
it — so 21269 of the 21661 dimensions in bootstrap, uikit, semantic-ui,
fontawesome and animate.css together cost one lookup that misses instead.

The media-range collapse read the at-rule's name twice, each a slice of the
source, before testing whether the target reads range syntax at all. It reads
the name once, after that test.

…'s name only where it could matter

Three callers ask for the same browserslist target — the default-target probe,
the target's own properties, and the CSS minifier's browser list — and each read
the config file and ran the queries again: 16.3 ms for the first, 0.01 ms once
the selection is held. It is held for exactly as long as browserslist holds its
own config and query caches, and not held at all under
`BROWSERSLIST_DISABLE_CACHE`. The list now comes back as the same array, which
the minifier reads to skip re-joining the selection into a memo key per asset.

The prefix pass read every declaration's name — a scan to the `:`, a slice and a
lowercase — to decide that almost none of them could be prefixed. The names some
engine spells its own way are a set of shapes, one bit per length under the two
letters a name starts with, so `content`, `opacity` and `margin-left` are
answered from their first two characters and their length. Over bootstrap,
uikit, semantic-ui, fontawesome and animate.css together that is 12161 names
read of 24593 declarations, where the names that must be read are 8620; the
read itself no longer re-scans for the `:` its caller has already found, and
`_printedProperty` falls from ~55 ms of a ~3.9 s pass to ~16 ms.

Checked against autoprefixer over every construct the tables carry, the windows
ran past the point the spelling stopped working: a spelling's own
`version_removed` was ignored, so it was kept alive until the unprefixed form
arrived. What that emitted:

- `-o-animation`, `-o-keyframes`, `-o-transform`, `-o-object-fit` for Opera 15
  to 29, which is Blink and never read the Presto prefix;
- `-moz-outline` for Firefox 3.6 to 87, gone from the engine since 3.6 — BCD
  dates the unprefixed arrival at 88, where the property grew to follow
  `border-radius`;
- `-webkit-alt` for Safari 18, `-ms-ime-mode` and `::-ms-browse` for Chromium
  Edge, `-webkit-box-lines` and `-webkit-box-flex-group` for Chrome 67 and
  after, `-moz-user-modify` for Firefox 132 and after.

`-ms-order` is excluded in the generator with its reason: IE 10's flexbox renamed
its properties rather than prefixing them, so the spelling was `-ms-flex-order`
and the one BCD files as a prefix on `order` was never read by anything.

Two rules also meet far more often than they join, and each meeting cut both
preludes and both blocks out of their rules to answer that — 25544 pieces of
string over the five stylesheets measured. They are compared where they stand
now, and `_joinRuleEntries` falls from ~78 ms of the pass to ~57 ms.

A copy held every selector of the list that wanted that engine's prefix, and two
names of one engine did not arrive together: `::-webkit-input-placeholder` is
Chrome 6 and `:-webkit-full-screen` is Chrome 15, so
`input::placeholder,:fullscreen{}` printed a copy that Chrome 6 through 14 —
browsers a target may well select — read as nothing at all.

Read back through a real engine, one selector it cannot parse loses the whole
list, whatever else is in it: an unknown pseudo-class, another engine's pseudo,
an unknown unprefixed one. The one exception is an unknown `-webkit-`
pseudo-element, which Blink parses and never matches.

A copy now carries one spelling, so the selectors sharing it share the versions
it arrived in; a list wanting two prints as two copies. Selectors that take the
same spelling still travel together, which is what keeps a list's copy one rule
rather than one per selector.

… the property it was filed under

Where autoprefixer and lightningcss both add a spelling and webpack did not, they
were right: BCD files `-webkit-max-content` under `width` and not under `height`,
though it is the same value read by the same parser — and `block-size` is
`<'width'>` itself. Properties whose syntax expands to the same keywords are one
value grammar now, and a spelling any of them records belongs to all: every
sizing property carries `-webkit-`/`-moz-` for `min-content`, `max-content` and
`fit-content`, and `overflow-block` / `overflow-inline` carry `clip`'s.

That sharing is also what made `-webkit-fill-available` reach `width`, so it is
excluded with its reason: it is WebKit's `stretch`, filling the container where
`fit-content` shrinks to the content, and BCD files it under both. Neither
autoprefixer nor lightningcss reaches for it there.

A spelling the property itself carries is still dropped before the sharing rather
than after, so `-ms-touch-action` cannot travel to the rest of its grammar as a
value.

Nothing the two of them agree on is left: 136 of 188 constructs now print
identically to autoprefixer, and what it still adds is the IE 10 flexbox renames
(different values, so a copy would be wrong) and prefixes BCD dates at the same
version as the unprefixed form.

…hat reads them

Every `-webkit-` spelling the tables carry was put to a current Blink: of the 99
we emit it parses 82, and each of the 17 it does not is one WebKit kept and Blink
never had or has since dropped — `-webkit-backdrop-filter`, `-webkit-hyphens`,
`-webkit-text-decoration-color`, the 2009 `box-*` pair. Nothing we emit is
invented.

The other direction found real gaps. Blink parses `-webkit-column-gap`,
`-webkit-columns`, `-webkit-column-span` and `-webkit-shape-outside`, caniuse
says which versions had to have them, and BCD either records nothing at all or
dates the prefix at the version the unprefixed form arrived — 46 versions after
Chrome first read multi-column. They are stated in the generator now, widening
what BCD gives rather than replacing it, and generation fails once BCD covers an
entry so that none of them lingers unread. Every window is closed history: the
last browser needing any of them shipped in 2017.

`-webkit-column-fill` and `-moz-column-span` are left out with the rest: caniuse
marks a whole feature prefixed for a browser, and Firefox never read
`-moz-column-span` — it had no `column-span` at all until 71.

A prefixed rule an unprefixed twin makes dead weight was only dropped at the
top level, where the writer can take the piece back out of the output. Nested,
its text was already on its way into the parent's body, so the twin could not
reach it and the rule survived. The block's sibling state now holds it as the
node its parent skips while assembling, and a streamed block writes it as a
piece of its own, so both paths drop it wherever the twin stands.

…fixed

BCD states a vendor spelling two ways: a prefix on the name, and — where the
engine renamed the property instead — an `alternative_name`. Only the first was
read for properties, so `-webkit-margin-start`, `-webkit-mask-box-image` and the
rest were never written, though both autoprefixer and lightningcss write them.

Renames now come from BCD like every other spelling, minus the two whose values
do not carry over: `-webkit-font-smoothing` and `-moz-osx-font-smoothing` are a
different property under a similar name, and `-webkit-text-combine` reads
`horizontal` where the standard property reads `all`.

IE 10's flexbox renames are stated instead, since BCD records them unevenly and
in one case wrongly (`-ms-order`, which nothing read). Only the five whose values
IE 10 takes unchanged: `-ms-flex-align` and its three siblings rename their
keywords too, which is a value rewrite rather than a spelling.

The per-browser prefix list is what a browser's own engine spells, so a spelling
belonging to another engine was never written for it. That is right wherever the
browser's own prefix covers the same versions — Firefox took `-webkit-appearance`
in 49, but `-moz-appearance` already covers every version it needs.

It is wrong where the browser has nothing of its own. Firefox reads
`-webkit-line-clamp` and no `line-clamp` of any spelling, so a build targeting
Firefox wrote no prefix at all — and, worse, dropped the `-webkit-` one an author
had written, leaving a declaration no browser reads.

A browser now falls back to whichever engine's prefix covers its gap when none of
its own does. Derived, not stated: re-deriving every window from BCD by a second
implementation turns up exactly two more, both `line-clamp`. A spelling that is
no engine's at all is still never reached for, so Safari 1.1's `-khtml-opacity`
stays out.

IE Mobile is the one browser BCD does not track, so it reads desktop IE's
windows — the same engine on the same version line, and right wherever the two
shipped the same feature. `text-size-adjust` is where they did not: caniuse has
it prefixed on IE Mobile 10 and 11 and absent from desktop IE altogether, so
nothing derived `-ms-text-size-adjust` and an IE Mobile target got no prefix.

Stated for `ie_mob` alone, so desktop IE now also drops the spelling as dead
rather than leaving it unrecognized. 11 is IE Mobile's last release, so the
window is closed like every other one there.

…he keyword it stood for

BCD files `-webkit-center` as a prefix on `text-align: center`, which it was for
Safari 1.3. The spelling outlived that window and no longer means the same
thing: a current Blink parses both and computes them differently — `-webkit-`
prefixed centers block-level children, the keyword only inline content. So
`text-align:center;text-align:-webkit-center` had its winning declaration
dropped and the box moved. `-webkit-left` and `-webkit-right` are the same.

Found by asking Blink for the computed value of every spelling in the value
table beside the keyword it is filed under: of 105, the engine parses both for
48 and disagrees on exactly these three. The other two it reads differently are
the ordinary case of an engine knowing only the older spelling.

…ko parses

BCD calls `text-size-adjust` unsupported on desktop Firefox, which is a
statement about effect. Gecko's own property database carries
`-moz-text-size-adjust` as a real longhand, ungated, with
`-webkit-text-size-adjust` aliased onto it and no unprefixed spelling at all —
so a Firefox target wrote no prefix and, worse, dropped the `-moz-` one an
author had written, leaving a declaration Gecko cannot parse.

Stated for `firefox` from the version BCD records for Android, whose style
system desktop shares. Open-ended, since Gecko still has no unprefixed spelling,
which `PREFIX_SUPPLEMENT` now allows a window to say.

Checked the whole class rather than the one row: of the 29 constructs Gecko
spells only with a prefix, this was the only one our tables left a Firefox
target without.

…sion

BCD dates Opera's unprefixed arrival earlier than caniuse does, and caniuse is
the only dataset following Presto version by version — which matters because no
Presto build can be run to settle it.

`border-image`: caniuse marks every Presto version that has it at all as needing
the prefix, desktop and mobile alike, so Presto never shipped it unprefixed and
BCD's `opera: 11` cannot be right. `text-overflow`: desktop dropped the prefix at
11 exactly as BCD says, but Opera Mobile kept needing it through 12 and only went
plain at 12.1, four versions past where the derived window ended.

Both were the breaking direction: a stylesheet writing the `-o-` spelling as its
Presto fallback had it dropped, leaving a declaration Presto cannot use.

Found by running the other two minifiers at Presto and Trident targets, which is
the only evidence available for engines that cannot be run: of 44 dead-engine
property spellings, these were the two another tool writes and we did not.

…more constructs

Found by sweeping every version of every browser browserslist knows — 681 of
them — against both other minifiers, rather than sampling a handful of targets.

IE Mobile got none of the 2012 flexbox renames: the stated windows named `ie`
alone, though IE Mobile 10 is the same Trident 6 and caniuse marks it needing
them. Every one of the nine renames was affected on `ie_mob 10`.

Presto shipped `object-fit` and `object-position` as its own extension a year
before BCD dates the prefixed form — caniuse has them from Opera 10.6 and Opera
Mobile 11 — and kept `background-size` prefixed through 10.1 rather than going
plain at 10.

…red helper

Also drops an unreachable null test in _prefixAtRule, moves the CSS Shapes note onto the entry it describes, and trims the comments that ran past two lines.

BCD dates WebKit's unprefixed font-kerning at Safari 9; caniuse dates it a release later on desktop and three years later on iOS. The caniuse feature is this one property, so the gap is a disagreement rather than a wider feature, and a Safari 9 or iOS 9-11 target was left with a spelling it cannot read.

… code

The BROWSER_PREFIXES description had drifted above ENGINE_PREFIXES, ie_mob was still listed as a name the tables cannot answer for, the IE 10 flexbox note counted four entries where five follow, and PREFIX_BROWSERS claimed an unknown browser in a mixed selection blocks removal — it is skipped instead. Moves align-content beside the keyword renames it belongs to.

The generator keeps a prefixed spelling only while it precedes the
unprefixed one, so a browser that lost unprefixed support at an engine
change gets no window at all. Opera 15 became Chromium 28 and needed
`-webkit-` again after Presto 12.1 had shipped these unprefixed; the
test lists those 22 spellings so the gap is a decision rather than an
oversight, and fails if it closes or a second browser joins it.

Non-empty let a window discarded for an unaccounted reason pass; the
totals turn it into a failure.

It asserted the shape of the compat data rather than webpack's behaviour,
and the only gap it found is a browser no target selects.

BCD alone calls the property standard from Firefox 50. Gecko's own property
database spells it `-moz-column-width` through 51 and gains the standard name
in 52 with the rest of multi-column, so 50 and 51 were left a declaration the
parser cannot read.

BCD records `inline-size` and `block-size` as the renames they are and files the
other four as a `-webkit-` prefix on the standard name. No engine's property list
has ever carried `-webkit-max-inline-size`: WebKit and Blink both spell the family
`-webkit-max-logical-width`, carry all six spellings in the same releases and take
the standard names in the same one. Drop the spelling nothing read, and state the
four windows BCD misses.

Opera 15 is Chromium 28, and from there its version line reads what Blink reads.
BCD records that as a prefixed window opening after the unprefixed one, which the
window rule drops as a compatibility alias — right for Gecko taking
`-webkit-transform` in Firefox 49, wrong for a version line that changed engine.
Give those browsers the base engine's windows instead, on their own numbering,
learned from the releases BCD dates against both.

Running the probe in a real Chromium 41, 80 and 141 turned up two things no
dataset records. WebKit named the ruby side and the vertical orientation after
the box rather than the flow and kept those names on the prefixed properties:
every Blink reads `-webkit-ruby-position: before` and no `over`, and
`-webkit-text-orientation: vertical-right` and no `mixed`, so each copy went out
in a spelling nothing has ever parsed. And Blink shipped bidi isolation as one
family while BCD keeps the `-webkit-` window for `isolate` alone, leaving
`isolate-override` and `plaintext` with no spelling a Chromium of that era reads.

BCD dates a `-webkit-` longhand for `border-image-slice` on the old Android
WebView. The WebKit fork WebView ran carries the `-webkit-border-image`
shorthand and no longhand of it, and the name is absent from every other
engine's property list too, so the only window we kept for that property wrote
bytes nothing could read.

BCD records `-webkit-` for the feature; caniuse marks the version prefixed
and resolves the name from a browser-wide `-ms-` default, which is what
autoprefixer and lightningcss write. No engine is reachable to settle which
EdgeHTML parsed, and one extra declaration is cheaper than a single wrong
one losing the property, so both go out for 12-18.