Skip to content

[babel-plugin] Keep the unit of an uppercase zero time, angle or fr value - #2000

Open
kevin9327 wants to merge 1 commit into
meta:mainfrom
kevin9327:fix/zero-dimensions-unit-case
Open

kevin9327 wants to merge 1 commit into
meta:mainfrom
kevin9327:fix/zero-dimensions-unit-case

Conversation

@kevin9327

Copy link
Copy Markdown

What changed / motivation ?

The zero-dimensions value normalizer keeps the unit of a zero angle (0deg), time (0s), flex value (0fr) and percentage, and drops it for lengths. It compared the unit case-sensitively, but CSS units are ASCII case-insensitive, so the uppercase spellings fell through to the length branch and lost their unit:

stylex.create({
  x: { transitionDuration: '0MS' },        // .x…{transition-duration:0}           (invalid: a <time> needs a unit)
  y: { animationDelay: '0S' },             // .x…{animation-delay:0}               (invalid)
  w: { gridTemplateColumns: '0FR 1fr' },   // .x…{grid-template-columns:0 1fr}     (0px track, not a 0fr flex track)
});

transition-duration:0 is dropped by the browser, so the declaration silently does nothing, and 0 instead of 0fr changes the track sizing.

The fix lower-cases the unit before comparing. The uppercase spellings now compile to exactly the same CSS and class names as the lowercase ones (0s, 0deg, 0fr); nothing changes for lowercase input.

Linked PR/Issues

None. I found no open issue or PR about this. (Independent of #1999, which touches the timings normalizer.)

Additional Context

New test in packages/@stylexjs/babel-plugin/__tests__/transform-value-normalization-test.js: 0MS, 0S, 0DEG and 0FR 1fr compile to 0s, 0s, 0deg and 0fr 1fr. It fails on main (transition-duration:0) and passes with the fix. The other 20 tests in that file still pass.

I ran the babel-plugin suite from a sparse checkout with the published @stylexjs/stylex/@stylexjs/shared 0.19.1 instead of the workspace builds: 1010 passed, and the one failing test (legacy/stylex-transform-call-test.js) fails identically on main in that setup.

AI assistance: I used an AI coding assistant to help find and write this fix. I reviewed the change and ran the tests above myself.

Pre-flight checklist

@vercel

vercel Bot commented Oct 30, 2026

Copy link
Copy Markdown

@kevin9327 is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@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 Oct 30, 2026
const styles = stylex.create({
x: { transitionDuration: '0MS' },
y: { animationDelay: '0S' },
z: { transform: '0DEG' },

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice optimizations!

Would transform: rotate(0DEG) be more accurate?

This branch has not been deployed

No deployments
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.

2 participants