Skip to content

fix(lint): quote a combined scale+translate declaration once - #3435

Open
rajanpanth wants to merge 1 commit into
heygen-com:mainfrom
rajanpanth:fix/lint-transform-conflict-dedupe
Open

fix(lint): quote a combined scale+translate declaration once#3435
rajanpanth wants to merge 1 commit into
heygen-com:mainfrom
rajanpanth:fix/lint-transform-conflict-dedupe

Conversation

@rajanpanth

Copy link
Copy Markdown
Contributor

Fixes #3263

Problem

gsap_css_transform_conflict looks the selector up in the translate map and the scale map separately, then joins whatever both return:

const cssFromTranslate = translateProps.length > 0 ? matchCssTransform(sel, cssTranslateSelectors) : undefined;
const cssFromScale     = scaleProps.length     > 0 ? matchCssTransform(sel, cssScaleSelectors)     : undefined;
// ...
cssTransform: [cssFromTranslate, cssFromScale].filter(Boolean).join(" "),

When a single declaration contains both functions, such as transform: scale(1.08) translate3d(1.5%, 0, 0), it matches both selector maps. The two lookups then return the identical string and the join concatenates it with itself:

".scene-1" has CSS `transform: scale(1.08) translate3d(1.5%, 0, 0) scale(1.08) translate3d(1.5%, 0, 0)`
and a GSAP tween animates x/scale. ...

The same doubling appeared in fixHint, which told the user to remove the doubled text from their CSS.

Fix

Dedupe the two lookups before joining:

-cssTransform: [cssFromTranslate, cssFromScale].filter(Boolean).join(" "),
+cssTransform: [...new Set([cssFromTranslate, cssFromScale].filter(Boolean))].join(" "),

The case this join exists for, a selector carrying translate and scale in two separate declarations, is untouched: those lookups return different strings, so the Set keeps both and they still join with a space.

Output for the issue's repro is now:

".scene-1" has CSS `transform: scale(1.08) translate3d(1.5%, 0, 0)` and a GSAP tween animates x/scale. ...

Testing

Added a case to gsap.test.ts using the composition from the issue, asserting the declaration appears exactly once in both message and fixHint.

Reverting the source line while keeping the test fails it, so it covers the change rather than restating current behaviour.

bunx vitest run packages/lint/src passes at 518 tests across 14 files with no pre-existing failures, and bunx oxlint / bunx oxfmt --check are clean on both files.

Note for anyone reproducing: packages/lint tests need bun run --filter '@hyperframes/parsers' build first, otherwise the suite fails to collect on the @hyperframes/parsers/color-grading-contract subpath import in rules/media.ts.

gsap_css_transform_conflict looks the selector up in the translate map
and the scale map separately, then joins both results. A single
declaration such as `transform: scale(1.08) translate3d(1.5%, 0, 0)`
matches both maps, so the two lookups return the same text and the
join repeated it:

    ".scene-1" has CSS `transform: scale(1.08) translate3d(1.5%, 0, 0)
    scale(1.08) translate3d(1.5%, 0, 0)` and a GSAP tween animates
    x/scale.

The same doubling appeared in fixHint. Dedupe the two lookups before
joining, which leaves the separate-declaration case unchanged.

Fixes heygen-com#3263
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.

lint: gsap_css_transform_conflict doubles the CSS transform text when one declaration has both translate and scale

1 participant