Skip to content

Commit 640ecf6

Browse files
thecrypticacethecrypticace
authored
Use long form <length> | <percentage> syntax for properties (tailwindlabs#13660)
* Use longform length + percentage syntax for properties Using properties that declare the shorthand syntax `<length-percentage>` has a bug where two properties side-by-side e.g. `var(—foo)var(—bar)` invalidate the property value when it should not. Switching the `@property` definition to use the long form syntax `<length> | <percentage>` fixes this. * Update changelog * Update tests
1 parent 1124d1d commit 640ecf6

File tree

4 files changed

+27
-26
lines changed

4 files changed

+27
-26
lines changed

‎CHANGELOG.md‎

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

1212
- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
1313
- Support negative values for `{col,row}-{start,end}` utilities ([#13780](https://github.com/tailwindlabs/tailwindcss/pull/13780))
14+
- Use long form `<length> | <percentage>` syntax for properties ([#13660](https://github.com/tailwindlabs/tailwindcss/pull/13660))
1415

1516
### Added
1617

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,13 +228,13 @@ describe('@apply', () => {
228228
}
229229
230230
@property --tw-translate-x {
231-
syntax: "<length-percentage>";
231+
syntax: "<length> | <percentage>";
232232
inherits: false;
233233
initial-value: 0;
234234
}
235235
236236
@property --tw-translate-y {
237-
syntax: "<length-percentage>";
237+
syntax: "<length> | <percentage>";
238238
inherits: false;
239239
initial-value: 0;
240240
}

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2528,13 +2528,13 @@ test('translate', () => {
25282528
}
25292529
25302530
@property --tw-translate-x {
2531-
syntax: "<length-percentage>";
2531+
syntax: "<length> | <percentage>";
25322532
inherits: false;
25332533
initial-value: 0;
25342534
}
25352535
25362536
@property --tw-translate-y {
2537-
syntax: "<length-percentage>";
2537+
syntax: "<length> | <percentage>";
25382538
inherits: false;
25392539
initial-value: 0;
25402540
}
@@ -2582,13 +2582,13 @@ test('translate-x', () => {
25822582
}
25832583
25842584
@property --tw-translate-x {
2585-
syntax: "<length-percentage>";
2585+
syntax: "<length> | <percentage>";
25862586
inherits: false;
25872587
initial-value: 0;
25882588
}
25892589
25902590
@property --tw-translate-y {
2591-
syntax: "<length-percentage>";
2591+
syntax: "<length> | <percentage>";
25922592
inherits: false;
25932593
initial-value: 0;
25942594
}
@@ -2636,13 +2636,13 @@ test('translate-y', () => {
26362636
}
26372637
26382638
@property --tw-translate-x {
2639-
syntax: "<length-percentage>";
2639+
syntax: "<length> | <percentage>";
26402640
inherits: false;
26412641
initial-value: 0;
26422642
}
26432643
26442644
@property --tw-translate-y {
2645-
syntax: "<length-percentage>";
2645+
syntax: "<length> | <percentage>";
26462646
inherits: false;
26472647
initial-value: 0;
26482648
}
@@ -2679,13 +2679,13 @@ test('translate-z', () => {
26792679
}
26802680
26812681
@property --tw-translate-x {
2682-
syntax: "<length-percentage>";
2682+
syntax: "<length> | <percentage>";
26832683
inherits: false;
26842684
initial-value: 0;
26852685
}
26862686
26872687
@property --tw-translate-y {
2688-
syntax: "<length-percentage>";
2688+
syntax: "<length> | <percentage>";
26892689
inherits: false;
26902690
initial-value: 0;
26912691
}
@@ -2718,13 +2718,13 @@ test('translate-3d', () => {
27182718
}
27192719
27202720
@property --tw-translate-x {
2721-
syntax: "<length-percentage>";
2721+
syntax: "<length> | <percentage>";
27222722
inherits: false;
27232723
initial-value: 0;
27242724
}
27252725
27262726
@property --tw-translate-y {
2727-
syntax: "<length-percentage>";
2727+
syntax: "<length> | <percentage>";
27282728
inherits: false;
27292729
initial-value: 0;
27302730
}
@@ -8209,19 +8209,19 @@ test('from', () => {
82098209
}
82108210
82118211
@property --tw-gradient-from-position {
8212-
syntax: "<length-percentage>";
8212+
syntax: "<length> | <percentage>";
82138213
inherits: false;
82148214
initial-value: 0%;
82158215
}
82168216
82178217
@property --tw-gradient-via-position {
8218-
syntax: "<length-percentage>";
8218+
syntax: "<length> | <percentage>";
82198219
inherits: false;
82208220
initial-value: 50%;
82218221
}
82228222
82238223
@property --tw-gradient-to-position {
8224-
syntax: "<length-percentage>";
8224+
syntax: "<length> | <percentage>";
82258225
inherits: false;
82268226
initial-value: 100%;
82278227
}"
@@ -8446,19 +8446,19 @@ test('via', () => {
84468446
}
84478447
84488448
@property --tw-gradient-from-position {
8449-
syntax: "<length-percentage>";
8449+
syntax: "<length> | <percentage>";
84508450
inherits: false;
84518451
initial-value: 0%;
84528452
}
84538453
84548454
@property --tw-gradient-via-position {
8455-
syntax: "<length-percentage>";
8455+
syntax: "<length> | <percentage>";
84568456
inherits: false;
84578457
initial-value: 50%;
84588458
}
84598459
84608460
@property --tw-gradient-to-position {
8461-
syntax: "<length-percentage>";
8461+
syntax: "<length> | <percentage>";
84628462
inherits: false;
84638463
initial-value: 100%;
84648464
}"
@@ -8671,19 +8671,19 @@ test('to', () => {
86718671
}
86728672
86738673
@property --tw-gradient-from-position {
8674-
syntax: "<length-percentage>";
8674+
syntax: "<length> | <percentage>";
86758675
inherits: false;
86768676
initial-value: 0%;
86778677
}
86788678
86798679
@property --tw-gradient-via-position {
8680-
syntax: "<length-percentage>";
8680+
syntax: "<length> | <percentage>";
86818681
inherits: false;
86828682
initial-value: 50%;
86838683
}
86848684
86858685
@property --tw-gradient-to-position {
8686-
syntax: "<length-percentage>";
8686+
syntax: "<length> | <percentage>";
86878687
inherits: false;
86888688
initial-value: 100%;
86898689
}"

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1222,8 +1222,8 @@ export function createUtilities(theme: Theme) {
12221222

12231223
let translateProperties = () =>
12241224
atRoot([
1225-
property('--tw-translate-x', '0', '<length-percentage>'),
1226-
property('--tw-translate-y', '0', '<length-percentage>'),
1225+
property('--tw-translate-x', '0', '<length> | <percentage>'),
1226+
property('--tw-translate-y', '0', '<length> | <percentage>'),
12271227
property('--tw-translate-z', '0', '<length>'),
12281228
])
12291229

@@ -2579,9 +2579,9 @@ export function createUtilities(theme: Theme) {
25792579
property('--tw-gradient-to', 'transparent', '<color>'),
25802580
property('--tw-gradient-stops'),
25812581
property('--tw-gradient-via-stops'),
2582-
property('--tw-gradient-from-position', '0%', '<length-percentage>'),
2583-
property('--tw-gradient-via-position', '50%', '<length-percentage>'),
2584-
property('--tw-gradient-to-position', '100%', '<length-percentage>'),
2582+
property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
2583+
property('--tw-gradient-via-position', '50%', '<length> | <percentage>'),
2584+
property('--tw-gradient-to-position', '100%', '<length> | <percentage>'),
25852585
])
25862586
}
25872587

0 commit comments

Comments
 (0)