Skip to content

Fix Inset.toString() shortest-form serialization#1744

Open
durvesh1992 wants to merge 1 commit into
facebook:mainfrom
durvesh1992:fix/inset-tostring-serialization
Open

Fix Inset.toString() shortest-form serialization#1744
durvesh1992 wants to merge 1 commit into
facebook:mainfrom
durvesh1992:fix/inset-tostring-serialization

Conversation

@durvesh1992

Copy link
Copy Markdown

Summary

Inset.toString() (in @stylexjs/style-value-parser) aims to emit the shortest valid inset() form, but had three defects (the method had no prior toString() test coverage):

  1. 1-value collapse never fired. The all-sides-equal check compared left === roundround is the border-radius value, handled separately via roundStr and usually null — instead of left === top. So inset(10px) serialized as inset(10px 10px).
  2. 3-value branch keyed on the wrong sides. It used top === bottom instead of left === right (the condition the 3-value form actually requires), so a 3-value input round-tripped to 4 values, and an asymmetric case like inset(10px 20px 10px 40px) could drop the left value.
  3. Stray trailing space. The 4-value branch emitted inset(10px 20px 30px 40px ) (space before )).

Test plan

Added a round-trip test in basic-shape.js covering the 1/2/3/4-value and round forms (fails before, passes after). Full package suite green:

yarn --cwd packages/style-value-parser jest
# Tests: 325 passed

Inset.toString() had three defects that produced non-minimal or invalid
output (it had no prior toString test coverage):

- The 1-value collapse compared `left === round` (the border-radius
  value, handled separately and usually null) instead of `left === top`,
  so it never fired: inset(10px) serialized as 'inset(10px 10px)'.
- The 3-value branch keyed on `top === bottom` instead of `left ===
  right`, so a 3-value input round-tripped to 4 values and an asymmetric
  case like inset(10px 20px 10px 40px) could drop the left value.
- The 4-value branch emitted a stray space before the closing paren
  ('inset(10px 20px 30px 40px )').

Adds a round-trip test covering the 1/2/3/4-value and round forms.
@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 27, 2026
@vercel

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
stylex Skipped Skipped Jun 27, 2026 5:38am

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant