Skip to content

Commit a83b02b

Browse files
thecrypticacethecrypticace
authored
Fix negative rotate utilities (#15044)
This fixes the negative versions of rotate: `-rotate-y-*`, `-rotate-x-*`, and `-rotate-z-*` They were producing CSS like `--tw-rotate-x: calc(rotateX(Xdeg) * -1)` instead of `--tw-rotate-x: rotateX(calc(Xdeg * -1))`. This fixes all of those. The skew utilities have a similar structure but were already handled correctly.
1 parent 7e068ba commit a83b02b

File tree

3 files changed

+137
-52
lines changed

3 files changed

+137
-52
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2424

2525
- Ensure `flex` is suggested ([#15014](https://github.com/tailwindlabs/tailwindcss/pull/15014))
2626
- Improve module resolution for `cjs`-only and `esm`-only plugins ([#15041](https://github.com/tailwindlabs/tailwindcss/pull/15041))
27+
- Fix `-rotate-*` utilities ([#15044](https://github.com/tailwindlabs/tailwindcss/pull/15044))
2728
- _Upgrade (experimental)_: Resolve imports when specifying a CSS entry point on the command-line ([#15010](https://github.com/tailwindlabs/tailwindcss/pull/15010))
2829
- _Upgrade (experimental)_: Resolve nearest Tailwind config file when CSS file does not contain `@config` ([#15001](https://github.com/tailwindlabs/tailwindcss/pull/15001))
2930
- _Upgrade (experimental)_: Improve output when CSS imports can not be found ([#15038](https://github.com/tailwindlabs/tailwindcss/pull/15038))

‎packages/tailwindcss/src/utilities.test.ts

Lines changed: 134 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -4440,7 +4440,7 @@ test('rotate', async () => {
44404440
test('rotate-x', async () => {
44414441
expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(`
44424442
".-rotate-x-45 {
4443-
--tw-rotate-x: calc(rotateX(45deg) * -1);
4443+
--tw-rotate-x: rotateX(calc(45deg * -1));
44444444
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
44454445
}
44464446
@@ -4450,7 +4450,7 @@ test('rotate-x', async () => {
44504450
}
44514451
44524452
.rotate-x-\\[123deg\\] {
4453-
--tw-rotate-x: 123deg;
4453+
--tw-rotate-x: rotateX(123deg);
44544454
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
44554455
}
44564456
@@ -4510,64 +4510,70 @@ test('rotate-x', async () => {
45104510
})
45114511

45124512
test('rotate-y', async () => {
4513-
expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]'])).toMatchInlineSnapshot(`
4514-
".-rotate-y-45 {
4515-
--tw-rotate-y: calc(rotateY(45deg) * -1);
4516-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4517-
}
4513+
expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]']))
4514+
.toMatchInlineSnapshot(`
4515+
".-rotate-y-45 {
4516+
--tw-rotate-y: rotateY(calc(45deg * -1));
4517+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4518+
}
45184519
4519-
.rotate-y-45 {
4520-
--tw-rotate-y: rotateY(45deg);
4521-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4522-
}
4520+
.-rotate-y-\\[123deg\\] {
4521+
--tw-rotate-y: rotateY(calc(123deg * -1));
4522+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4523+
}
45234524
4524-
.rotate-y-\\[123deg\\] {
4525-
--tw-rotate-y: 123deg;
4526-
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4527-
}
4525+
.rotate-y-45 {
4526+
--tw-rotate-y: rotateY(45deg);
4527+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4528+
}
45284529
4529-
@supports (-moz-orient: inline) {
4530-
@layer base {
4531-
*, :before, :after, ::backdrop {
4532-
--tw-rotate-x: rotateX(0);
4533-
--tw-rotate-y: rotateY(0);
4534-
--tw-rotate-z: rotateZ(0);
4535-
--tw-skew-x: skewX(0);
4536-
--tw-skew-y: skewY(0);
4530+
.rotate-y-\\[123deg\\] {
4531+
--tw-rotate-y: rotateY(123deg);
4532+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4533+
}
4534+
4535+
@supports (-moz-orient: inline) {
4536+
@layer base {
4537+
*, :before, :after, ::backdrop {
4538+
--tw-rotate-x: rotateX(0);
4539+
--tw-rotate-y: rotateY(0);
4540+
--tw-rotate-z: rotateZ(0);
4541+
--tw-skew-x: skewX(0);
4542+
--tw-skew-y: skewY(0);
4543+
}
45374544
}
45384545
}
4539-
}
45404546
4541-
@property --tw-rotate-x {
4542-
syntax: "<transform-function>";
4543-
inherits: false;
4544-
initial-value: rotateX(0);
4545-
}
4547+
@property --tw-rotate-x {
4548+
syntax: "<transform-function>";
4549+
inherits: false;
4550+
initial-value: rotateX(0);
4551+
}
45464552
4547-
@property --tw-rotate-y {
4548-
syntax: "<transform-function>";
4549-
inherits: false;
4550-
initial-value: rotateY(0);
4551-
}
4553+
@property --tw-rotate-y {
4554+
syntax: "<transform-function>";
4555+
inherits: false;
4556+
initial-value: rotateY(0);
4557+
}
45524558
4553-
@property --tw-rotate-z {
4554-
syntax: "<transform-function>";
4555-
inherits: false;
4556-
initial-value: rotateZ(0);
4557-
}
4559+
@property --tw-rotate-z {
4560+
syntax: "<transform-function>";
4561+
inherits: false;
4562+
initial-value: rotateZ(0);
4563+
}
45584564
4559-
@property --tw-skew-x {
4560-
syntax: "<transform-function>";
4561-
inherits: false;
4562-
initial-value: skewX(0);
4563-
}
4565+
@property --tw-skew-x {
4566+
syntax: "<transform-function>";
4567+
inherits: false;
4568+
initial-value: skewX(0);
4569+
}
45644570
4565-
@property --tw-skew-y {
4566-
syntax: "<transform-function>";
4567-
inherits: false;
4568-
initial-value: skewY(0);
4569-
}"
4570-
`)
4571+
@property --tw-skew-y {
4572+
syntax: "<transform-function>";
4573+
inherits: false;
4574+
initial-value: skewY(0);
4575+
}"
4576+
`)
45714577
expect(
45724578
await run([
45734579
'rotate-y',
@@ -4581,6 +4587,84 @@ test('rotate-y', async () => {
45814587
).toEqual('')
45824588
})
45834589

4590+
test('rotate-z', async () => {
4591+
expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]']))
4592+
.toMatchInlineSnapshot(`
4593+
".-rotate-z-45 {
4594+
--tw-rotate-z: rotateZ(calc(45deg * -1));
4595+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4596+
}
4597+
4598+
.-rotate-z-\\[123deg\\] {
4599+
--tw-rotate-z: rotateZ(calc(123deg * -1));
4600+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4601+
}
4602+
4603+
.rotate-z-45 {
4604+
--tw-rotate-z: rotateZ(45deg);
4605+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4606+
}
4607+
4608+
.rotate-z-\\[123deg\\] {
4609+
--tw-rotate-z: rotateZ(123deg);
4610+
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
4611+
}
4612+
4613+
@supports (-moz-orient: inline) {
4614+
@layer base {
4615+
*, :before, :after, ::backdrop {
4616+
--tw-rotate-x: rotateX(0);
4617+
--tw-rotate-y: rotateY(0);
4618+
--tw-rotate-z: rotateZ(0);
4619+
--tw-skew-x: skewX(0);
4620+
--tw-skew-y: skewY(0);
4621+
}
4622+
}
4623+
}
4624+
4625+
@property --tw-rotate-x {
4626+
syntax: "<transform-function>";
4627+
inherits: false;
4628+
initial-value: rotateX(0);
4629+
}
4630+
4631+
@property --tw-rotate-y {
4632+
syntax: "<transform-function>";
4633+
inherits: false;
4634+
initial-value: rotateY(0);
4635+
}
4636+
4637+
@property --tw-rotate-z {
4638+
syntax: "<transform-function>";
4639+
inherits: false;
4640+
initial-value: rotateZ(0);
4641+
}
4642+
4643+
@property --tw-skew-x {
4644+
syntax: "<transform-function>";
4645+
inherits: false;
4646+
initial-value: skewX(0);
4647+
}
4648+
4649+
@property --tw-skew-y {
4650+
syntax: "<transform-function>";
4651+
inherits: false;
4652+
initial-value: skewY(0);
4653+
}"
4654+
`)
4655+
expect(
4656+
await run([
4657+
'rotate-z',
4658+
'rotate-z--1',
4659+
'-rotate-z',
4660+
'rotate-z-potato',
4661+
'rotate-z-45/foo',
4662+
'-rotate-z-45/foo',
4663+
'rotate-z-[123deg]/foo',
4664+
]),
4665+
).toEqual('')
4666+
})
4667+
45844668
test('skew', async () => {
45854669
expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
45864670
".-skew-6 {

‎packages/tailwindcss/src/utilities.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1330,11 +1330,11 @@ export function createUtilities(theme: Theme) {
13301330
themeKeys: ['--rotate'],
13311331
handleBareValue: ({ value }) => {
13321332
if (!isPositiveInteger(value)) return null
1333-
return `rotate${axis.toUpperCase()}(${value}deg)`
1333+
return `${value}deg`
13341334
},
13351335
handle: (value) => [
13361336
transformProperties(),
1337-
decl(`--tw-rotate-${axis}`, value),
1337+
decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`),
13381338
decl('transform', transformValue),
13391339
],
13401340
})

0 commit comments

Comments
 (0)