Skip to content

Commit 4db711d

Browse files
philipp-spiessphilipp-spiess
authored
Fix -rotate-* with arbitary values (#18014)
Fixes #18013 ## Test plan See updated unit tests
1 parent 498f9ff commit 4db711d

File tree

3 files changed

+189
-113
lines changed

3 files changed

+189
-113
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
- Ensure that media queries within `::before` and `::after` pseudo selectors create valid CSS rules when building a production build ([#17979](https://github.com/tailwindlabs/tailwindcss/pull/17979))
1616
- `lightningcss` now statically links Visual Studio redistributables ([#17979](https://github.com/tailwindlabs/tailwindcss/pull/17979))
1717
- Ensure that running the Standalone build does not leave temporary files behind ([#17981](https://github.com/tailwindlabs/tailwindcss/pull/17981))
18+
- Fix `-rotate-*` utilities with arbitrary values ([#18014](https://github.com/tailwindlabs/tailwindcss/pull/18014))
1819

1920
### Added
2021

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

+187-112
Original file line numberDiff line numberDiff line change
@@ -4453,24 +4453,45 @@ test('translate-3d', async () => {
44534453
})
44544454

44554455
test('rotate', async () => {
4456-
expect(await run(['rotate-45', '-rotate-45', 'rotate-[123deg]', 'rotate-[0.3_0.7_1_45deg]']))
4457-
.toMatchInlineSnapshot(`
4458-
".-rotate-45 {
4459-
rotate: -45deg;
4460-
}
4456+
expect(
4457+
await run([
4458+
'rotate-45',
4459+
'-rotate-45',
4460+
'rotate-[123deg]',
4461+
'rotate-[0.3_0.7_1_45deg]',
4462+
'rotate-(--var)',
4463+
'-rotate-[123deg]',
4464+
'-rotate-(--var)',
4465+
]),
4466+
).toMatchInlineSnapshot(`
4467+
".-rotate-\\(--var\\) {
4468+
rotate: calc(var(--var) * -1);
4469+
}
44614470

4462-
.rotate-45 {
4463-
rotate: 45deg;
4464-
}
4471+
.-rotate-45 {
4472+
rotate: -45deg;
4473+
}
44654474

4466-
.rotate-\\[0\\.3_0\\.7_1_45deg\\] {
4467-
rotate: .3 .7 1 45deg;
4468-
}
4475+
.-rotate-\\[123deg\\] {
4476+
rotate: -123deg;
4477+
}
44694478

4470-
.rotate-\\[123deg\\] {
4471-
rotate: 123deg;
4472-
}"
4473-
`)
4479+
.rotate-\\(--var\\) {
4480+
rotate: var(--var);
4481+
}
4482+
4483+
.rotate-45 {
4484+
rotate: 45deg;
4485+
}
4486+
4487+
.rotate-\\[0\\.3_0\\.7_1_45deg\\] {
4488+
rotate: .3 .7 1 45deg;
4489+
}
4490+
4491+
.rotate-\\[123deg\\] {
4492+
rotate: 123deg;
4493+
}"
4494+
`)
44744495
expect(
44754496
await run([
44764497
'rotate',
@@ -4486,7 +4507,15 @@ test('rotate', async () => {
44864507
})
44874508

44884509
test('rotate-x', async () => {
4489-
expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(`
4510+
expect(
4511+
await run([
4512+
'rotate-x-45',
4513+
'-rotate-x-45',
4514+
'rotate-x-[123deg]',
4515+
'rotate-x-(--var)',
4516+
'-rotate-x-(--var)',
4517+
]),
4518+
).toMatchInlineSnapshot(`
44904519
"@layer properties {
44914520
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
44924521
*, :before, :after, ::backdrop {
@@ -4499,11 +4528,21 @@ test('rotate-x', async () => {
44994528
}
45004529
}
45014530

4531+
.-rotate-x-\\(--var\\) {
4532+
--tw-rotate-x: rotateX(calc(var(--var) * -1));
4533+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4534+
}
4535+
45024536
.-rotate-x-45 {
45034537
--tw-rotate-x: rotateX(calc(45deg * -1));
45044538
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
45054539
}
45064540

4541+
.rotate-x-\\(--var\\) {
4542+
--tw-rotate-x: rotateX(var(--var));
4543+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4544+
}
4545+
45074546
.rotate-x-45 {
45084547
--tw-rotate-x: rotateX(45deg);
45094548
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
@@ -4553,65 +4592,83 @@ test('rotate-x', async () => {
45534592
})
45544593

45554594
test('rotate-y', async () => {
4556-
expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]']))
4557-
.toMatchInlineSnapshot(`
4558-
"@layer properties {
4559-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4560-
*, :before, :after, ::backdrop {
4561-
--tw-rotate-x: initial;
4562-
--tw-rotate-y: initial;
4563-
--tw-rotate-z: initial;
4564-
--tw-skew-x: initial;
4565-
--tw-skew-y: initial;
4566-
}
4595+
expect(
4596+
await run([
4597+
'rotate-y-45',
4598+
'rotate-y-[123deg]',
4599+
'rotate-y-(--var)',
4600+
'-rotate-y-45',
4601+
'-rotate-y-[123deg]',
4602+
'-rotate-y-(--var)',
4603+
]),
4604+
).toMatchInlineSnapshot(`
4605+
"@layer properties {
4606+
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4607+
*, :before, :after, ::backdrop {
4608+
--tw-rotate-x: initial;
4609+
--tw-rotate-y: initial;
4610+
--tw-rotate-z: initial;
4611+
--tw-skew-x: initial;
4612+
--tw-skew-y: initial;
45674613
}
45684614
}
4615+
}
45694616

4570-
.-rotate-y-45 {
4571-
--tw-rotate-y: rotateY(calc(45deg * -1));
4572-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4573-
}
4617+
.-rotate-y-\\(--var\\) {
4618+
--tw-rotate-y: rotateY(calc(var(--var) * -1));
4619+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4620+
}
45744621

4575-
.-rotate-y-\\[123deg\\] {
4576-
--tw-rotate-y: rotateY(calc(123deg * -1));
4577-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4578-
}
4622+
.-rotate-y-45 {
4623+
--tw-rotate-y: rotateY(calc(45deg * -1));
4624+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4625+
}
45794626

4580-
.rotate-y-45 {
4581-
--tw-rotate-y: rotateY(45deg);
4582-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4583-
}
4627+
.-rotate-y-\\[123deg\\] {
4628+
--tw-rotate-y: rotateY(calc(123deg * -1));
4629+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4630+
}
45844631

4585-
.rotate-y-\\[123deg\\] {
4586-
--tw-rotate-y: rotateY(123deg);
4587-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4588-
}
4632+
.rotate-y-\\(--var\\) {
4633+
--tw-rotate-y: rotateY(var(--var));
4634+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4635+
}
45894636

4590-
@property --tw-rotate-x {
4591-
syntax: "*";
4592-
inherits: false
4593-
}
4637+
.rotate-y-45 {
4638+
--tw-rotate-y: rotateY(45deg);
4639+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4640+
}
45944641

4595-
@property --tw-rotate-y {
4596-
syntax: "*";
4597-
inherits: false
4598-
}
4642+
.rotate-y-\\[123deg\\] {
4643+
--tw-rotate-y: rotateY(123deg);
4644+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4645+
}
45994646

4600-
@property --tw-rotate-z {
4601-
syntax: "*";
4602-
inherits: false
4603-
}
4647+
@property --tw-rotate-x {
4648+
syntax: "*";
4649+
inherits: false
4650+
}
46044651

4605-
@property --tw-skew-x {
4606-
syntax: "*";
4607-
inherits: false
4608-
}
4652+
@property --tw-rotate-y {
4653+
syntax: "*";
4654+
inherits: false
4655+
}
46094656

4610-
@property --tw-skew-y {
4611-
syntax: "*";
4612-
inherits: false
4613-
}"
4614-
`)
4657+
@property --tw-rotate-z {
4658+
syntax: "*";
4659+
inherits: false
4660+
}
4661+
4662+
@property --tw-skew-x {
4663+
syntax: "*";
4664+
inherits: false
4665+
}
4666+
4667+
@property --tw-skew-y {
4668+
syntax: "*";
4669+
inherits: false
4670+
}"
4671+
`)
46154672
expect(
46164673
await run([
46174674
'rotate-y',
@@ -4626,65 +4683,83 @@ test('rotate-y', async () => {
46264683
})
46274684

46284685
test('rotate-z', async () => {
4629-
expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]']))
4630-
.toMatchInlineSnapshot(`
4631-
"@layer properties {
4632-
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4633-
*, :before, :after, ::backdrop {
4634-
--tw-rotate-x: initial;
4635-
--tw-rotate-y: initial;
4636-
--tw-rotate-z: initial;
4637-
--tw-skew-x: initial;
4638-
--tw-skew-y: initial;
4639-
}
4686+
expect(
4687+
await run([
4688+
'rotate-z-45',
4689+
'rotate-z-[123deg]',
4690+
'rotate-z-(--var)',
4691+
'-rotate-z-45',
4692+
'-rotate-z-[123deg]',
4693+
'-rotate-z-(--var)',
4694+
]),
4695+
).toMatchInlineSnapshot(`
4696+
"@layer properties {
4697+
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4698+
*, :before, :after, ::backdrop {
4699+
--tw-rotate-x: initial;
4700+
--tw-rotate-y: initial;
4701+
--tw-rotate-z: initial;
4702+
--tw-skew-x: initial;
4703+
--tw-skew-y: initial;
46404704
}
46414705
}
4706+
}
46424707

4643-
.-rotate-z-45 {
4644-
--tw-rotate-z: rotateZ(calc(45deg * -1));
4645-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4646-
}
4708+
.-rotate-z-\\(--var\\) {
4709+
--tw-rotate-z: rotateZ(calc(var(--var) * -1));
4710+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4711+
}
46474712

4648-
.-rotate-z-\\[123deg\\] {
4649-
--tw-rotate-z: rotateZ(calc(123deg * -1));
4650-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4651-
}
4713+
.-rotate-z-45 {
4714+
--tw-rotate-z: rotateZ(calc(45deg * -1));
4715+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4716+
}
46524717

4653-
.rotate-z-45 {
4654-
--tw-rotate-z: rotateZ(45deg);
4655-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4656-
}
4718+
.-rotate-z-\\[123deg\\] {
4719+
--tw-rotate-z: rotateZ(calc(123deg * -1));
4720+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4721+
}
46574722

4658-
.rotate-z-\\[123deg\\] {
4659-
--tw-rotate-z: rotateZ(123deg);
4660-
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4661-
}
4723+
.rotate-z-\\(--var\\) {
4724+
--tw-rotate-z: rotateZ(var(--var));
4725+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4726+
}
46624727

4663-
@property --tw-rotate-x {
4664-
syntax: "*";
4665-
inherits: false
4666-
}
4728+
.rotate-z-45 {
4729+
--tw-rotate-z: rotateZ(45deg);
4730+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4731+
}
46674732

4668-
@property --tw-rotate-y {
4669-
syntax: "*";
4670-
inherits: false
4671-
}
4733+
.rotate-z-\\[123deg\\] {
4734+
--tw-rotate-z: rotateZ(123deg);
4735+
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
4736+
}
46724737

4673-
@property --tw-rotate-z {
4674-
syntax: "*";
4675-
inherits: false
4676-
}
4738+
@property --tw-rotate-x {
4739+
syntax: "*";
4740+
inherits: false
4741+
}
46774742

4678-
@property --tw-skew-x {
4679-
syntax: "*";
4680-
inherits: false
4681-
}
4743+
@property --tw-rotate-y {
4744+
syntax: "*";
4745+
inherits: false
4746+
}
46824747

4683-
@property --tw-skew-y {
4684-
syntax: "*";
4685-
inherits: false
4686-
}"
4687-
`)
4748+
@property --tw-rotate-z {
4749+
syntax: "*";
4750+
inherits: false
4751+
}
4752+
4753+
@property --tw-skew-x {
4754+
syntax: "*";
4755+
inherits: false
4756+
}
4757+
4758+
@property --tw-skew-y {
4759+
syntax: "*";
4760+
inherits: false
4761+
}"
4762+
`)
46884763
expect(
46894764
await run([
46904765
'rotate-z',

‎packages/tailwindcss/src/utilities.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1388,7 +1388,7 @@ export function createUtilities(theme: Theme) {
13881388
if (type === 'vector') {
13891389
return [decl('rotate', `${value} var(--tw-rotate)`)]
13901390
} else if (type !== 'angle') {
1391-
return [decl('rotate', value)]
1391+
return [decl('rotate', negative ? `calc(${value} * -1)` : value)]
13921392
}
13931393
} else {
13941394
value = theme.resolve(candidate.value.value, ['--rotate'])

0 commit comments

Comments
 (0)