Skip to content

fix(lint): deduplicate CSS transform text in gsap_css_transform_conflict finding - #3284

Open
santhiprakash wants to merge 1 commit into
heygen-com:mainfrom
santhiprakash:fix/gsap-lint-dedup-transform
Open

fix(lint): deduplicate CSS transform text in gsap_css_transform_conflict finding#3284
santhiprakash wants to merge 1 commit into
heygen-com:mainfrom
santhiprakash:fix/gsap-lint-dedup-transform

Conversation

@santhiprakash

Copy link
Copy Markdown
Contributor

Problem

In the gsap_css_transform_conflict lint rule, when a single CSS
transform declaration contains both translate and scale functions
(e.g. transform: scale(1.08) translate3d(1.5%, 0, 0)), the rule
stores the same transformVal in both cssTranslateSelectors and
cssScaleSelectors for the same selector. The finding message and
fixHint then concatenate the identical string via
[cssFromTranslate, cssFromScale].filter(Boolean).join(" "), producing
doubled text like:

".scene-1" has CSS transform: scale(1.08) translate3d(1.5%, 0, 0) scale(1.08) translate3d(1.5%, 0, 0)

instead of the correct:

".scene-1" has CSS transform: scale(1.08) translate3d(1.5%, 0, 0)

Root cause: gsap.ts line ~1356 — the join has no deduplication,
so when both maps resolve to the same value for the same selector, it
appears twice.

Triage / Root cause

packages/lint/src/rules/gsap.tsgsap_css_transform_conflict rule
handler. The two regex tests (/translate/i and /scale/i) both match
the same combined declaration, so both cssTranslateSelectors and
cssScaleSelectors store the identical transformVal. The downstream
.filter(Boolean).join(" ") then doubles it.

Fix

  • Deduplicate [cssFromTranslate, cssFromScale] via new Set() before
    joining into cssTransform.
  • This is a no-op when the two values are different (separate
    translate-only and scale-only CSS declarations for the same selector)
    and corrects the doubling when they are identical.
  • Added a regression test to the existing "combined CSS transform
    conflicts with multiple GSAP properties" test case that asserts the
    message and fixHint do not contain the doubled transform text.

Verification

bun test packages/lint/src/rules/gsap.test.ts

162 tests pass (0 fail). The new assertion confirms no doubling:

expect(msg).not.toContain("translateX(-50%) scale(0.8) translateX(-50%) scale(0.8)");
expect(hint).not.toContain("translateX(-50%) scale(0.8) translateX(-50%) scale(0.8)");

Notes / Risks

  • Minimal change — only affects the string construction path, not the
    conflict detection logic itself.
  • No existing behavior changes for the common case where translate-only
    and scale-only CSS rules are separate (the new Set() is a no-op
    when parts contain different values).

Closes #3263

…ict message

- Problem: when a single CSS transform declaration contains both
  translate and scale (e.g. transform: scale(1.08) translate3d(...)),
  both cssTranslateSelectors and cssScaleSelectors store the same
  transformVal for the same selector. The finding message and fixHint
  then concatenate the identical string, producing doubled text.
- Fix: deduplicate the [cssFromTranslate, cssFromScale] parts via
  new Set() before joining. This is a no-op when the values differ
  (separate translate-only and scale-only declarations) and corrects
  the doubling when they are identical.
- Verification: bun test packages/lint/src/rules/gsap.test.ts —
  162 tests pass including a new regression test that asserts the
  message and fixHint do not contain doubled transform text.
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