Implement StyleX transform scaffold with stylis parsing#1
Closed
Implement StyleX transform scaffold with stylis parsing#1
Conversation
skovhus
force-pushed
the
codex/plan-migration-from-styled-components-to-stylex
branch
from
3306242 to
6de6fee
Compare
skovhus
deleted the
codex/plan-migration-from-styled-components-to-stylex
branch
skovhus
pushed a commit
that referenced
this pull request
Feb 21, 2026
… :is(*) workaround Addresses review comments: - Issue #1/#4: Use the regex capture group to distinguish + from ~ combinator, emit an info-level warning for & + & (adjacent becomes general sibling in StyleX) - Issue #3: Add TODO to remove :is(*) workaround when StyleX Babel plugin supports no-arg siblingBefore() calls - Issue #2: Skipped — ComputedKeyEntry upstream type already uses unknown, so tightening helper params would create a mismatch without upstream changes https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
skovhus
added a commit
that referenced
this pull request
Feb 23, 2026
* feat: support self-referencing sibling selectors (& + & and & ~ &)
Transform CSS sibling combinators to StyleX relational selector APIs:
- `& + &` (adjacent sibling) → `stylex.when.siblingBefore(":is(*)")`
- `& ~ &` (general sibling) → `stylex.when.anySibling(":is(*)")`
Reuses existing `perPropComputedMedia` mechanism for computed style keys
and `ancestorSelectorParents` to add `stylex.defaultMarker()` to components.
Promoted 7 test cases from _unimplemented to supported:
- selector-sibling, selector-adjacentSiblingDestructure, selector-generalSibling
- selector-siblingBaseAfter, selector-siblingMedia
- selector-siblingMarkerScoping, selector-siblingInterpolated
https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
* fix: use siblingBefore() for both & + & and & ~ & selectors
stylex.when.anySibling() matches both directions (uses :has()),
while CSS ~ is forward-only. This caused the first element to
incorrectly receive sibling styles.
siblingBefore() is forward-only ("style me when a sibling before me
has the marker"), which correctly leaves the first element unstyled
— matching CSS ~ semantics. Both & + & and & ~ & now map to
siblingBefore().
Also removes the ESLint no-lookahead-selectors override since
anySibling() is no longer used.
https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
* docs: document known semantic broadenings for sibling selectors
1. siblingBefore() emits `~ *` (general sibling), not `+ *` (adjacent) —
StyleX has no adjacent-sibling API.
2. defaultMarker() is file-global, not component-scoped — defineMarker()
needed for strict scoping.
https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
* fix: emit info warning for & + & semantic broadening and add TODO for :is(*) workaround
Addresses review comments:
- Issue #1/#4: Use the regex capture group to distinguish + from ~ combinator,
emit an info-level warning for & + & (adjacent becomes general sibling in StyleX)
- Issue #3: Add TODO to remove :is(*) workaround when StyleX Babel plugin supports
no-arg siblingBefore() calls
- Issue #2: Skipped — ComputedKeyEntry upstream type already uses unknown, so
tightening helper params would create a mismatch without upstream changes
https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
* refactor: apply code quality improvements from PR #212
1. Replace processSiblingDeclarations() + addSiblingComputedEntry() with
processDeclarationsIntoBucket() + getOrCreateComputedMediaEntry().
The shared helper also handles cssHelperPropValues defaults which the
old code missed (used styleObj[prop] ?? null instead).
2. Extract getOrCreateComputedMediaEntry() to deduplicate the get-or-create
+ default-value logic between resolvedSelectorMedia and sibling handling.
3. Extract getStyleArgKey() and hasStyleArgKey() in style-merger.ts to
centralise the MemberExpression pattern check (was inlined 3 times).
4. Add stylesIdentifier parameter to postProcessTransformedAst() and pass
it through the pipeline, replacing hardcoded "styles" references.
Add "unresolved interpolation in sibling selector" warning type.
All PR #210 features preserved: both & + & and & ~ & support, @media
nesting inside sibling selectors, info warning for adjacent broadening.
https://claude.ai/code/session_01VK1biH425fiXkEFzaqnZ4L
---------
Co-authored-by: Claude <noreply@anthropic.com>
cursor Bot
pushed a commit
that referenced
this pull request
Feb 27, 2026
Finding #1 (MODERATE): canSafelyInline and resolvePerSiteProps missed JSXSelfClosingElement nodes (<Foo />) — consumed props on self-closing elements were not checked for safety or variant creation. Fixed by extracting findAllJsxSites() helper that searches both JSXElement and JSXSelfClosingElement, used by all JSX scanning functions. Finding #2 (MODERATE): attrsAsTag (.attrs({ as: SomeComponent })) was not checked — component-ref overrides were silently ignored. Fixed by bailing extractStaticPropsFromAttrs when attrsAsTag is set. Finding #3 (MODERATE): $-prefixed non-consumed transient props would leak to the DOM in the wrapper path for inlined intrinsic elements. Fixed by setting shouldForwardProp.dropPrefix to "$" in applyResolution. Finding #4 (LOW): findVaryingProps had an always-true condition (!allSame || hasAnyValue where hasAnyValue was guaranteed true). Simplified: track all consumed props present at any JSX site. Finding #5 (LOW): Covered by Finding #3's dropPrefix fix. Finding #6 (LOW): Inaccurate comment in applyResolution. Updated. Finding #7 (LOW): Static property inheritance lost for resolved components. Fixed by saving originalBaseIdent before overwriting base. Added 3 regression tests: - attrsAsTag component ref bail - self-closing element with dynamic consumed prop (canSafelyInline) - self-closing element with static consumed prop (variant creation) Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Testing
Codex Task