S2 TableView emits invalid empty :has() selector

[dannyisbad]

General summary

@react-spectrum/s2 has a malformed TableView style condition in selectAllCheckboxColumn.paddingEnd:

paddingStart: {
  default: 0,
  ':has([slot="selection"])': 16
},
paddingEnd: {
  default: 0,
  ':has(slot="selection")': 8
}

The paddingEnd selector is missing the attribute-selector brackets. The style compiler emits this in dist/private/TableView.css:

.R3n0jFt16:has() {
  padding-inline-end: 8px;
}

The typo is present in the pristine npm tarball for stable 1.6.0, the latest nightly 3.0.0-nightly-1062d083a-260814, and current main:
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/s2/src/TableView.tsx#L1140-L1148

Expected behavior

The source should use ':has([slot="selection"])': 8, and the generated CSS should contain :has([slot="selection"]). The select-all checkbox column should receive 8px of inline-end padding.

Current behavior

:has() is invalid CSS. Chrome drops the entire rule, so the padding remains 0px. A Vite production build that includes TableView also reports:

[esbuild css minify] Unexpected ")"
<stdin>:1967:17:
1967 │ .R3n0jFt16:has() {

Direct Chrome check:

CSS.supports('selector(:has())')                    // false
CSS.supports('selector(:has([slot="selection"]))') // true

Adding each rule through a <style> element produces zero CSS rules and 0px padding for the malformed selector, versus one CSS rule and 8px padding for the corrected selector.

Possible solution

Change:

':has(slot="selection")': 8

to:

':has([slot="selection"])': 8

A generated-CSS parse check or a check rejecting empty relational pseudo-classes would prevent this class of packaging regression.

Context

This causes a production-build warning and silently removes the intended end padding from S2 TableView's select-all checkbox column. The malformed source appears to have been introduced in PR #9862.

Steps to reproduce

1. Run npm pack @react-spectrum/s2@1.6.0.
2. Inspect package/src/TableView.tsx around selectAllCheckboxColumn in the tarball.
3. Inspect package/dist/private/TableView.css; it contains .R3n0jFt16:has().
4. Import and render S2 TableView in a Vite app, then run a minified production build. The CSS minifier reports the error above.
5. In Chrome, inspect the select-all checkbox column. The inline-end padding rule is absent because the browser discarded it.

Environment

• Package: @react-spectrum/s2@1.6.0
• Also reproduced: 3.0.0-nightly-1062d083a-260814
• Browser: Chrome
• Build tool: Vite 7.3.6 / esbuild CSS minifier
• OS: macOS

[snowystinger]

Looks like it's related to this lightning css bug parcel-bundler/lightningcss#1239
I've submitted a PR to parcel-bundler/lightningcss#1309 fix it upstream so it can't happen again.

Thanks for reporting!