Skip to content

Fix two correctness bugs in style-value-parser (shorthand hex + border-radius)#1742

Open
durvesh1992 wants to merge 2 commits into
facebook:mainfrom
durvesh1992:fix/style-value-parser-correctness
Open

Fix two correctness bugs in style-value-parser (shorthand hex + border-radius)#1742
durvesh1992 wants to merge 2 commits into
facebook:mainfrom
durvesh1992:fix/style-value-parser-correctness

Conversation

@durvesh1992

Copy link
Copy Markdown

Two small, independent correctness fixes in @stylexjs/style-value-parser, each with a regression test. Both were found by reading the code; the affected APIs currently have little/no test coverage on these paths.

1. HashColor channel getters mishandle 3-digit shorthand hex

HashColor.parser accepts 3-, 6-, and 8-digit hex, but the r/g/b/a getters slice fixed 2-char windows assuming 6/8 digits. For shorthand like #f0a (= #ff00aa → 255/0/170) they returned r=240, g=10, b=NaN.

Fix: a private #expanded() helper doubles each digit of a 3-digit value before slicing; 6/8-digit values are untouched, and the stored value is left intact so toString()/equality semantics are unchanged.

2. border-radius serializer drops asymmetric vertical radii

BorderRadiusShorthand.toString() initialized the vertical group string (sStr) from the horizontal corner values — a copy-paste of the horizontal initializer. The following branches only overwrite sStr when the vertical radii are symmetric, so a fully asymmetric vertical group fell through to the wrong default:

5px / 1px 2px 3px 4px   ->   emitted as   5px / 5px 5px 5px 5px

Fix: initialize sStr from the vertical values (one line).

Test plan

Added regression tests in color-test.js and border-radius.test.js (both fail before the respective fix, pass after). Full package suite green:

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

The HashColor parser accepts 3-, 6-, and 8-digit hex, but the r/g/b/a
getters sliced fixed 2-char windows, assuming 6/8 digits. For shorthand
like '#f0a' (= #ff00aa) this returned r=240, g=10, b=NaN instead of
255/0/170.

Add a private #expanded() helper that doubles each digit of a 3-digit
value before slicing; 6/8-digit values are unchanged. The stored value
is left untouched so toString() and equality semantics are preserved.

Adds a regression test that fails before the change and passes after.
BorderRadiusShorthand.toString() initialized the vertical group string
(sStr) from the horizontal corner values instead of the vertical ones —
a copy-paste of the horizontal initializer. The following branches only
overwrite sStr when the vertical radii are symmetric, so a fully
asymmetric vertical group (e.g. 1px 2px 3px 4px) fell through to the
wrong horizontal-based default, emitting '5px / 5px 5px 5px 5px' instead
of '5px / 1px 2px 3px 4px'.

Initialize sStr from the vertical values. Adds a toString() regression
test (the shorthand toString path previously had no coverage).
@vercel

vercel Bot commented Jun 26, 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 26, 2026 10:56pm

Request Review

@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 26, 2026
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