8000 Fix incorrect syntax for `translate-z`'s `@property` definition (#13327) · siberfx/tailwindcss@fcdb327 · GitHub
Skip to content

Commit fcdb327

Browse files
RobinMalfaitRobinMalfait
authored
Fix incorrect syntax for translate-z's @property definition (tailwindlabs#13327)
* fix incorrect syntax for `translate-z` This used to be `<length-percentage>`, but we dropped percentage support because it's not valid in tailwindlabs#13321 and I forgot about this one. * update changelog
1 parent 0f69d4f commit fcdb327

File tree

4 files changed

+70
-70
lines changed

4 files changed

+70
-70
lines changed

‎CHANGELOG.md‎

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

1414
### Fixed
1515

16-
- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321))
16+
- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321), [#13327](https://github.com/tailwindlabs/tailwindcss/pull/13327))
1717

1818
## [4.0.0-alpha.10] - 2024-03-19
1919

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ describe('@apply', () => {
230230
}
231231
232232
@property --tw-translate-z {
233-
syntax: "<length-percentage>";
233+
syntax: "<length>";
234234
inherits: false;
235235
initial-value: 0;
236236
}"

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

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2485,7 +2485,7 @@ test('translate', () => {
24852485
}
24862486
24872487
@property --tw-translate-z {
2488-
syntax: "<length-percentage>";
2488+
syntax: "<length>";
24892489
inherits: false;
24902490
initial-value: 0;
24912491
}"
@@ -2496,88 +2496,88 @@ test('translate', () => {
24962496
test('translate-x', () => {
24972497
expect(run(['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[--value]']))
24982498
.toMatchInlineSnapshot(`
2499-
".-translate-x-\\[--value\\] {
2500-
--tw-translate-x: calc(var(--value) * -1);
2501-
translate: var(--tw-translate-x) var(--tw-translate-y);
2502-
}
2499+
".-translate-x-\\[--value\\] {
2500+
--tw-translate-x: calc(var(--value) * -1);
2501+
translate: var(--tw-translate-x) var(--tw-translate-y);
2502+
}
25032503
2504-
.-translate-x-full {
2505-
--tw-translate-x: -100%;
2506-
translate: var(--tw-translate-x) var(--tw-translate-y);
2507-
}
2504+
.-translate-x-full {
2505+
--tw-translate-x: -100%;
2506+
translate: var(--tw-translate-x) var(--tw-translate-y);
2507+
}
25082508
2509-
.translate-x-full {
2510-
--tw-translate-x: 100%;
2511-
translate: var(--tw-translate-x) var(--tw-translate-y);
2512-
}
2509+
.translate-x-full {
2510+
--tw-translate-x: 100%;
2511+
translate: var(--tw-translate-x) var(--tw-translate-y);
2512+
}
25132513
2514-
.translate-x-px {
2515-
--tw-translate-x: 1px;
2516-
translate: var(--tw-translate-x) var(--tw-translate-y);
2517-
}
2514+
.translate-x-px {
2515+
--tw-translate-x: 1px;
2516+
translate: var(--tw-translate-x) var(--tw-translate-y);
2517+
}
25182518
2519-
@property --tw-translate-x {
2520-
syntax: "<length-percentage>";
2521-
inherits: false;
2522-
initial-value: 0;
2523-
}
2519+
@property --tw-translate-x {
2520+
syntax: "<length-percentage>";
2521+
inherits: false;
2522+
initial-value: 0;
2523+
}
25242524
2525-
@property --tw-translate-y {
2526-
syntax: "<length-percentage>";
2527-
inherits: false;
2528-
initial-value: 0;
2529-
}
2525+
@property --tw-translate-y {
2526+
syntax: "<length-percentage>";
2527+
inherits: false;
2528+
initial-value: 0;
2529+
}
25302530
2531-
@property --tw-translate-z {
2532-
syntax: "<length-percentage>";
2533-
inherits: false;
2534-
initial-value: 0;
2535-
}"
2536-
`)
2531+
@property --tw-translate-z {
2532+
syntax: "<length>";
2533+
inherits: false;
2534+
initial-value: 0;
2535+
}"
2536+
`)
25372537
expect(run(['translate-x'])).toEqual('')
25382538
})
25392539

25402540
test('translate-y', () => {
25412541
expect(run(['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[--value]']))
25422542
.toMatchInlineSnapshot(`
2543-
".-translate-y-\\[--value\\] {
2544-
--tw-translate-y: calc(var(--value) * -1);
2545-
translate: var(--tw-translate-x) var(--tw-translate-y);
2546-
}
2543+
".-translate-y-\\[--value\\] {
2544+
--tw-translate-y: calc(var(--value) * -1);
2545+
translate: var(--tw-translate-x) var(--tw-translate-y);
2546+
}
25472547
2548-
.-translate-y-full {
2549-
--tw-translate-y: -100%;
2550-
translate: var(--tw-translate-x) var(--tw-translate-y);
2551-
}
2548+
.-translate-y-full {
2549+
--tw-translate-y: -100%;
2550+
translate: var(--tw-translate-x) var(--tw-translate-y);
2551+
}
25522552
2553-
.translate-y-full {
2554-
--tw-translate-y: 100%;
2555-
translate: var(--tw-translate-x) var(--tw-translate-y);
2556-
}
2553+ 8096
.translate-y-full {
2554+
--tw-translate-y: 100%;
2555+
translate: var(--tw-translate-x) var(--tw-translate-y);
2556+
}
25572557
2558-
.translate-y-px {
2559-
--tw-translate-y: 1px;
2560-
translate: var(--tw-translate-x) var(--tw-translate-y);
2561-
}
2558+
.translate-y-px {
2559+
--tw-translate-y: 1px;
2560+
translate: var(--tw-translate-x) var(--tw-translate-y);
2561+
}
25622562
2563-
@property --tw-translate-x {
2564-
syntax: "<length-percentage>";
2565-
inherits: false;
2566-
initial-value: 0;
2567-
}
2563+
@property --tw-translate-x {
2564+
syntax: "<length-percentage>";
2565+
inherits: false;
2566+
initial-value: 0;
2567+
}
25682568
2569-
@property --tw-translate-y {
2570-
syntax: "<length-percentage>";
2571-
inherits: false;
2572-
initial-value: 0;
2573-
}
2569+
@property --tw-translate-y {
2570+
syntax: "<length-percentage>";
2571+
inherits: false;
2572+
initial-value: 0;
2573+
}
25742574
2575-
@property --tw-translate-z {
2576-
syntax: "<length-percentage>";
2577-
inherits: false;
2578-
initial-value: 0;
2579-
}"
2580-
`)
2575+
@property --tw-translate-z {
2576+
syntax: "<length>";
2577+
inherits: false;
2578+
initial-value: 0;
2579+
}"
2580+
`)
25812581
expect(run(['translate-y'])).toEqual('')
25822582
})
25832583

@@ -2606,7 +2606,7 @@ test('translate-z', () => {
26062606
}
26072607
26082608
@property --tw-translate-z {
2609-
syntax: "<length-percentage>";
2609+
syntax: "<length>";
26102610
inherits: false;
26112611
initial-value: 0;
26122612
}"
@@ -2635,7 +2635,7 @@ test('translate-3d', () => {
26352635
}
26362636
26372637
@property --tw-translate-z {
2638-
syntax: "<length-percentage>";
2638+
syntax: "<length>";
26392639
inherits: false;
26402640
initial-value: 0;
26412641
}"

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1216,7 +1216,7 @@ export function createUtilities(theme: Theme) {
12161216
atRoot([
12171217
property('--tw-translate-x', '0', '<length-percentage>'),
12181218
property('--tw-translate-y', '0', '<length-percentage>'),
1219-
property('--tw-translate-z', '0', '<length-percentage>'),
1219+
property('--tw-translate-z', '0', '<length>'),
12201220
])
12211221

12221222
/**

0 commit comments

Comments
 (0)