Skip to content

feat: improved serialization of the rotate property#1147

Open
yisibl wants to merge 1 commit intoparcel-bundler:masterfrom
yisibl:fix-rotate-parser
Open

feat: improved serialization of the rotate property#1147
yisibl wants to merge 1 commit intoparcel-bundler:masterfrom
yisibl:fix-rotate-parser

Conversation

@yisibl
Copy link
Contributor

@yisibl yisibl commented Feb 9, 2026

This PR refactors the serialization of the rotate property value according to the CSS Transforms 2 specification.

Previously, rotate: 0deg was incorrectly serialized as rotate: none. The specification clearly states that rotate: 0deg creates a stacking context and containing block, while rotate: none does not.

See Demo: https://codepen.io/yisi/pen/QwEJEmr?editors=0100
image

All three properties accept (and default to) the value none, which produces no transform at all. In particular, this value does not trigger the creation of a stacking context or containing block for all descendants, while all other values (including “identity” transforms like translate: 0px) create a stacking context and containing block for all descendants, per usual for transforms.
https://drafts.csswg.org/css-transforms-2/#valdef-translate-none

This PR fixes this issue and also provides additional compression benefits.

  • minify_test(".foo { rotate: -0deg }", ".foo{rotate:0deg}");
  • minify_test(".foo { rotate: z 10deg }", ".foo{rotate:10deg}");
  • minify_test(".foo { rotate: 0 0 1 10deg }", ".foo{rotate:10deg}");
  • minify_test(".foo { rotate: 10deg 0 0 -1 }", ".foo{rotate:-10deg}");

Fixes: #1136

This PR refactors the serialization of the `rotate` property value according to the CSS Transforms 2 specification.

Previously, `rotate: 0deg` was incorrectly serialized as `rotate: none`. The specification clearly states that `rotate: 0deg` creates a stacking context and containing block, while `rotate: none` does not.

See Demo: https://codepen.io/yisi/pen/QwEJEmr?editors=0100

> All three properties accept (and default to) the value none, which produces no transform at all. In particular, this value does not trigger the creation of a stacking context or containing block for all descendants, while all other values (including “identity” transforms like translate: 0px) create a stacking context and containing block for all descendants, per usual for transforms.
> https://drafts.csswg.org/css-transforms-2/#valdef-translate-none

This PR fixes this issue and also provides additional compression benefits.

- `minify_test(".foo { rotate: -0deg }", ".foo{rotate:0deg}");`
- `minify_test(".foo { rotate: z 10deg }", ".foo{rotate:10deg}");`
- `minify_test(".foo { rotate: 0 0 1 10deg }", ".foo{rotate:10deg}");`
- `minify_test(".foo { rotate: 10deg 0 0 -1 }", ".foo{rotate:-10deg}");`

Fixes: parcel-bundler#1136
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.

1 participant