Skip to content

Preserve var() in animation shorthand#389

Merged
skovhus merged 2 commits intomainfrom
cursor/preserve-css-var-in-animation-shorthand-3790
Apr 20, 2026
Merged

Preserve var() in animation shorthand#389
skovhus merged 2 commits intomainfrom
cursor/preserve-css-var-in-animation-shorthand-3790

Conversation

@skovhus
Copy link
Copy Markdown
Owner

@skovhus skovhus commented Apr 20, 2026

The animation shorthand parser silently dropped var(...) tokens. Recognise them and bind to the longhand hinted by the var() fallback (e.g. var(--x, 1.5s)animationDuration). When the fallback type cannot be inferred (e.g. var(--anim-token)), bail and leave the shorthand intact rather than coerce it to a time slot — coercing would miscompile cases like ${kf} var(--anim-token) 2s infinite where the variable resolves to a non-time value at runtime.

Open in Web Open in Cursor 

The animation shorthand parser was silently dropping var() function
tokens because they did not match any of the time/timing/direction/
fill-mode/play-state/iteration classifiers. For example,

  animation: shimmer var(--animation-duration, 1.5s) infinite

would lose the var() and emit only animationName + animationIterationCount.

Recognize var() tokens and assign them positionally per CSS shorthand
semantics: bind to the longhand hinted by the var()'s fallback when
possible, otherwise fall back to the next free time slot
(duration first, then delay).

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 20, 2026

PR Preview Action v1.8.1

🚀 View preview at
https://skovhus.github.io/styled-components-to-stylex-codemod/pr-preview/pr-389/

Built to branch gh-pages at 2026-04-20 15:51 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@skovhus skovhus marked this pull request as ready for review April 20, 2026 15:30
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 01989c71f5

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/internal/lower-rules/animation.ts Outdated
Per review: previously, var() tokens with no classifiable fallback
(e.g. `var(--anim-token)`) were coerced into a duration/delay slot.
This silently miscompiles cases like `${kf} var(--anim-token) 2s
infinite` where `--anim-token: ease-in` resolves at runtime — the
browser would treat `2s` as the duration.

Now bail and emit a warning when an animation shorthand contains a
var() whose runtime longhand position cannot be determined statically.
The shorthand is left intact (no transformation), preserving original
semantics. Users can rebind the variable to a specific longhand
(e.g. `animation-duration: var(--x)`) to opt in to transformation.

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>
@skovhus skovhus merged commit dffeeb5 into main Apr 20, 2026
6 checks passed
@skovhus skovhus deleted the cursor/preserve-css-var-in-animation-shorthand-3790 branch April 20, 2026 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants