wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fix incorrect syntax for translate-z's @property definition (#13327)

Browse source 
* fix incorrect syntax for `translate-z`

This used to be `<length-percentage>`, but we dropped percentage support
because it's not valid in #13321 and I forgot about this one.

* update changelog
This commit is contained in:
Robin Malfait 2024-03-22 19:49:46 +01:00 • committed by GitHub
parent 0f69d4fe6e
commit fcdb3279ea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 70 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321))
- Remove percentage values for `translate-z` utilities ([#13321](https://github.com/tailwindlabs/tailwindcss/pull/13321), [#13327](https://github.com/tailwindlabs/tailwindcss/pull/13327))
## [4.0.0-alpha.10] - 2024-03-19

2
packages/tailwindcss/src/index.test.ts
View file

@ -230,7 +230,7 @@ describe('@apply', () => {
}
@property --tw-translate-z {
syntax: "<length-percentage>";
syntax: "<length>";
inherits: false;
initial-value: 0;
}"

134
packages/tailwindcss/src/utilities.test.ts
View file

@ -2485,7 +2485,7 @@ test('translate', () => {
}
@property --tw-translate-z {
syntax: "<length-percentage>";
syntax: "<length>";
inherits: false;
initial-value: 0;
}"
@ -2496,88 +2496,88 @@ test('translate', () => {
test('translate-x', () => {
expect(run(['translate-x-full', '-translate-x-full', 'translate-x-px', '-translate-x-[--value]']))
.toMatchInlineSnapshot(`
".-translate-x-\\[--value\\] {
--tw-translate-x: calc(var(--value) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
".-translate-x-\\[--value\\] {
--tw-translate-x: calc(var(--value) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-full {
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-full {
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-full {
--tw-translate-x: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-full {
--tw-translate-x: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-px {
--tw-translate-x: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-px {
--tw-translate-x: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@property --tw-translate-x {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-x {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}"
`)
@property --tw-translate-z {
syntax: "<length>";
inherits: false;
initial-value: 0;
}"
`)
expect(run(['translate-x'])).toEqual('')
})
test('translate-y', () => {
expect(run(['translate-y-full', '-translate-y-full', 'translate-y-px', '-translate-y-[--value]']))
.toMatchInlineSnapshot(`
".-translate-y-\\[--value\\] {
--tw-translate-y: calc(var(--value) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
".-translate-y-\\[--value\\] {
--tw-translate-y: calc(var(--value) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-full {
--tw-translate-y: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-full {
--tw-translate-y: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-full {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-full {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-px {
--tw-translate-y: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-px {
--tw-translate-y: 1px;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@property --tw-translate-x {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-x {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0;
}"
`)
@property --tw-translate-z {
syntax: "<length>";
inherits: false;
initial-value: 0;
}"
`)
expect(run(['translate-y'])).toEqual('')
})
@ -2606,7 +2606,7 @@ test('translate-z', () => {
}
@property --tw-translate-z {
syntax: "<length-percentage>";
syntax: "<length>";
inherits: false;
initial-value: 0;
}"
@ -2635,7 +2635,7 @@ test('translate-3d', () => {
}
@property --tw-translate-z {
syntax: "<length-percentage>";
syntax: "<length>";
inherits: false;
initial-value: 0;
}"

2
packages/tailwindcss/src/utilities.ts
View file

@ -1216,7 +1216,7 @@ export function createUtilities(theme: Theme) {
atRoot([
property('--tw-translate-x', '0', '<length-percentage>'),
property('--tw-translate-y', '0', '<length-percentage>'),
property('--tw-translate-z', '0', '<length-percentage>'),
property('--tw-translate-z', '0', '<length>'),
])
/**