Skip to content

fix(minify): preserve 3d transform semantics during minification#1157

Open
zalishchuk wants to merge 2 commits intoparcel-bundler:masterfrom
zalishchuk:fix/preserve-3d-transforms
Open

fix(minify): preserve 3d transform semantics during minification#1157
zalishchuk wants to merge 2 commits intoparcel-bundler:masterfrom
zalishchuk:fix/preserve-3d-transforms

Conversation

@zalishchuk
Copy link

@zalishchuk zalishchuk commented Feb 21, 2026

Adjust transform minification so we keep 3D transforms as 3D instead of rewriting them into 2D forms.

The motivation is practical: some of these rewrites are mathematically equivalent, but they are not always behavior-equivalent in browsers (especially around compositing/layer promotion in Safari).

Output Changes

  • translate3d(..., ..., 0) is no longer lowered to translate(...) / translateY(...).
  • scale3d(..., ..., 1) is no longer lowered to scale(...) / scaleX(...) / scaleY(...).
  • scale3d(1,1,z) now canonicalizes to scaleZ(z) (including scale3d(1,1,1) -> scaleZ(1)), which keeps transforms in the 3D family.
  • rotateZ(...) stays rotateZ(...) (not rotate(...)).
  • rotate3d(0,0,1,a) now normalizes to rotateZ(a) (still 3D).
  • translate3d(0,0,0) now normalizes to translateZ(0) (same family as translate3d(0,0,z) -> translateZ(z)).
  • Updated docs to reflect the new transform minification behavior.

Example

/* before -> after */
transform: translate3d(2px,0,0);    /* translate3d(2px,0,0) */
transform: translate3d(0,2px,0);    /* translate3d(0,2px,0) */
transform: translate3d(2px,3px,0);  /* translate3d(2px,3px,0) */
transform: translate3d(0,0,0);      /* translateZ(0) */
transform: translate3d(0,0,2px);    /* translateZ(2px) */

transform: scale3d(2,1,1);          /* scale3d(2,1,1) */
transform: scale3d(1,2,1);          /* scale3d(1,2,1) */
transform: scale3d(2,2,1);          /* scale3d(2,2,1) */
transform: scale3d(1,1,2);          /* scaleZ(2) */
transform: scale3d(1,1,1);          /* scaleZ(1) */

transform: rotateZ(20deg);          /* rotateZ(20deg) */
transform: rotate3d(0,0,1,20deg);   /* rotateZ(20deg) */

Related Issues

".foo{transform:translateZ(0)}",
);
minify_test(
".foo { transform: translate3d(2px, 3px, 0px)",
Copy link
Contributor

Choose a reason for hiding this comment

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

I believe the original test case here is missing a closing curly brace } at the end.

Copy link
Author

Choose a reason for hiding this comment

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

Absolutely, this pattern has been part of the surrounding transform minify tests and wasn’t introduced by this PR. Honestly, I'm not quite sure why this pattern exists.

Copy link
Contributor

Choose a reason for hiding this comment

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

I suspect this is a typo.

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