Promote inline style props for direct JSX resolution#393
Draft
Promote inline style props for direct JSX resolution#393
Conversation
Direct JSX usages of imported components (like <Flex>) now promote inline style={{...}} objects into stylex.create entries instead of falling back to mergedSx. Multi-value padding/margin shorthands are expanded to their longhand form so StyleX accepts them.
Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
Contributor
|
Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
Promotion of inline style props now routes static values through cssDeclarationToStylexDeclarations, the authoritative CSS-to-StyleX mapping. This expands every supported shorthand (background, border, padding, margin, …), not just directional ones, and bails out only when the helper cannot fully decompose the shorthand. Promotion is also skipped when the styled decl carries wrapper-scoped artifacts (inlineStyleProps, extraStylexPropsArgs/StyleKeys, conditional styleFnFromProps) since inlining the call site would emit unresolved wrapper-internal identifiers. Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
Adds an explicit set of camelCase CSS properties (PROMOTABLE_STYLE_PROPS) covering the common React inline-style surface (layout, spacing, longhand borders, background longhands, typography, visual effects, transforms, transitions). Promotion bails when the input key—or any expanded longhand—falls outside the allowlist, so unvetted properties stay as inline styles via mergedSx instead of silently emitting unverified StyleX entries. Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
Replaces the curated PROMOTABLE_STYLE_PROPS allowlist (~200 entries) with a small NON_PROMOTABLE_STYLE_PROPS denylist of multi-component shorthands StyleX rejects when given multiple tokens (font, animation, transition, grid, grid-area, grid-template, border-block, border-inline, inset, all). Anything else is allowed through; StyleX's valid-styles plugin and TypeScript types remain the source of truth for typo/unsupported-prop errors. Adds a cross-reference test that keeps the denylist in sync with NOT_APPLICABLE_SHORTHANDS. Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
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
2 participants
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.
Direct JSX usages of imported components (like
<Flex>) now promote inlinestyle={{...}}objects intostylex.createentries on thesxprop instead of falling back tomergedSx. Static values are routed through the authoritativecssDeclarationToStylexDeclarationshelper so any supported shorthand (padding,margin,background,border, …) is expanded into longhands; promotion is gated by a small denylist of multi-component shorthands StyleX rejects (font,animation,transition,grid,inset, …) — anything else is allowed through and StyleX'svalid-styles/TypeScript types remain the source of truth for typo errors. Promotion also bails when the styled decl carries wrapper-scoped artifacts that can't be re-evaluated at the call site.