Skip to content

Commit a3cedf2

Browse files
RobinMalfaitRobinMalfait
authored
Improve transform, transform-cpu and transform-gpu utilities (#13290)
* fix `transform-gpu` translate syntax * move `skewX` and `skewY` functions into the variable * use `transform-[…]` with arbitrary values as-is This will not have any fallbacks to the `skewX` or `skewY` functions. The arbitrary values will be the only value that's used. * use `--tw-skew-{x,y}` variables in `transform-cpu` and `transform-gpu` * update tests * drop `skewX` and `skewY` functions because they are embedded in the `--tw-skew-x` and `--tw-skew-y` CSS variables * drop `transform-cpu` and `transform-gpu` * add `translate-none`, `transform-none`, `rotate-none` and `scale-none` * ensure `transform` creates a stacking context * use `<transform-function>` instead of `<angle>` * re-add `transform-gpu` * drop the `,`, because `--tw-skew-x` and `--tw-skew-y` will always be defined by the `@property` * `translate(0)` is not necessary because `--tw-skew-{x,y}` will always be defined * add skew variables to `transform-gpu` Otherwise skew's will be gone * re-add `transform-cpu`
1 parent 6a6186c commit a3cedf2

File tree

3 files changed

+71
-72
lines changed

3 files changed

+71
-72
lines changed

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1313,6 +1313,7 @@ exports[`getClassList 1`] = `
13131313
"rotate-45",
13141314
"rotate-6",
13151315
"rotate-90",
1316+
"rotate-none",
13161317
"rotate-x-0",
13171318
"rotate-x-1",
13181319
"rotate-x-12",
@@ -1420,6 +1421,7 @@ exports[`getClassList 1`] = `
14201421
"scale-75",
14211422
"scale-90",
14221423
"scale-95",
1424+
"scale-none",
14231425
"scale-x-0",
14241426
"scale-x-100",
14251427
"scale-x-105",
@@ -1708,6 +1710,7 @@ exports[`getClassList 1`] = `
17081710
"translate-3d",
17091711
"translate-4",
17101712
"translate-full",
1713+
"translate-none",
17111714
"translate-x-0.5",
17121715
"translate-x-1",
17131716
"translate-x-3",

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

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2711,33 +2711,33 @@ test('rotate-y', () => {
27112711
test('skew', () => {
27122712
expect(run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
27132713
".-skew-6 {
2714-
--tw-skew-x: calc(6deg * -1);
2715-
--tw-skew-y: calc(6deg * -1);
2716-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2714+
--tw-skew-x: skewX(calc(6deg * -1));
2715+
--tw-skew-y: skewY(calc(6deg * -1));
2716+
transform: var(--tw-skew-x) var(--tw-skew-y);
27172717
}
27182718
27192719
.skew-6 {
2720-
--tw-skew-x: 6deg;
2721-
--tw-skew-y: 6deg;
2722-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2720+
--tw-skew-x: skewX(6deg);
2721+
--tw-skew-y: skewY(6deg);
2722+
transform: var(--tw-skew-x) var(--tw-skew-y);
27232723
}
27242724
27252725
.skew-\\[123deg\\] {
2726-
--tw-skew-x: 123deg;
2727-
--tw-skew-y: 123deg;
2728-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2726+
--tw-skew-x: skewX(123deg);
2727+
--tw-skew-y: skewY(123deg);
2728+
transform: var(--tw-skew-x) var(--tw-skew-y);
27292729
}
27302730
27312731
@property --tw-skew-x {
2732-
syntax: "<angle>";
2732+
syntax: "<transform-function>";
27332733
inherits: false;
2734-
initial-value: 0deg;
2734+
initial-value: skewX(0);
27352735
}
27362736
27372737
@property --tw-skew-y {
2738-
syntax: "<angle>";
2738+
syntax: "<transform-function>";
27392739
inherits: false;
2740-
initial-value: 0deg;
2740+
initial-value: skewY(0);
27412741
}"
27422742
`)
27432743
expect(run(['skew', 'skew-unknown'])).toEqual('')
@@ -2746,30 +2746,30 @@ test('skew', () => {
27462746
test('skew-x', () => {
27472747
expect(run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
27482748
".-skew-x-6 {
2749-
--tw-skew-x: calc(6deg * -1);
2750-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2749+
--tw-skew-x: skewX(calc(6deg * -1));
2750+
transform: var(--tw-skew-x) var(--tw-skew-y);
27512751
}
27522752
27532753
.skew-x-6 {
2754-
--tw-skew-x: 6deg;
2755-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2754+
--tw-skew-x: skewX(6deg);
2755+
transform: var(--tw-skew-x) var(--tw-skew-y);
27562756
}
27572757
27582758
.skew-x-\\[123deg\\] {
2759-
--tw-skew-x: 123deg;
2760-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2759+
--tw-skew-x: skewX(123deg);
2760+
transform: var(--tw-skew-x) var(--tw-skew-y);
27612761
}
27622762
27632763
@property --tw-skew-x {
2764-
syntax: "<angle>";
2764+
syntax: "<transform-function>";
27652765
inherits: false;
2766-
initial-value: 0deg;
2766+
initial-value: skewX(0);
27672767
}
27682768
27692769
@property --tw-skew-y {
2770-
syntax: "<angle>";
2770+
syntax: "<transform-function>";
27712771
inherits: false;
2772-
initial-value: 0deg;
2772+
initial-value: skewY(0);
27732773
}"
27742774
`)
27752775
expect(run(['skew-x', 'skew-x-unknown'])).toEqual('')
@@ -2778,30 +2778,30 @@ test('skew-x', () => {
27782778
test('skew-y', () => {
27792779
expect(run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
27802780
".-skew-y-6 {
2781-
--tw-skew-y: calc(6deg * -1);
2782-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2781+
--tw-skew-y: skewY(calc(6deg * -1));
2782+
transform: var(--tw-skew-x) var(--tw-skew-y);
27832783
}
27842784
27852785
.skew-y-6 {
2786-
--tw-skew-y: 6deg;
2787-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2786+
--tw-skew-y: skewY(6deg);
2787+
transform: var(--tw-skew-x) var(--tw-skew-y);
27882788
}
27892789
27902790
.skew-y-\\[123deg\\] {
2791-
--tw-skew-y: 123deg;
2792-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
2791+
--tw-skew-y: skewY(123deg);
2792+
transform: var(--tw-skew-x) var(--tw-skew-y);
27932793
}
27942794
27952795
@property --tw-skew-x {
2796-
syntax: "<angle>";
2796+
syntax: "<transform-function>";
27972797
inherits: false;
2798-
initial-value: 0deg;
2798+
initial-value: skewX(0);
27992799
}
28002800
28012801
@property --tw-skew-y {
2802-
syntax: "<angle>";
2802+
syntax: "<transform-function>";
28032803
inherits: false;
2804-
initial-value: 0deg;
2804+
initial-value: skewY(0);
28052805
}"
28062806
`)
28072807
expect(run(['skew-y', 'skew-y-unknown'])).toEqual('')
@@ -3034,36 +3034,36 @@ test('transform', () => {
30343034
'transform-[scaleZ(2)_rotateY(45deg)]',
30353035
]),
30363036
).toMatchInlineSnapshot(`
3037-
".transform-none {
3038-
transform: none;
3039-
}
3040-
3041-
.transform {
3042-
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
3037+
".transform {
3038+
transform: var(--tw-skew-x) var(--tw-skew-y);
30433039
}
30443040
30453041
.transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] {
3046-
transform: scaleZ(2) rotateY(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
3042+
transform: scaleZ(2)rotateY(45deg);
30473043
}
30483044
30493045
.transform-cpu {
3050-
transform: translate(0);
3046+
transform: var(--tw-skew-x) var(--tw-skew-y);
30513047
}
30523048
30533049
.transform-gpu {
3054-
transform: translate(0, 0, 0);
3050+
transform: translateZ(0) var(--tw-skew-x) var(--tw-skew-y);
3051+
}
3052+
3053+
.transform-none {
3054+
transform: none;
30553055
}
30563056
30573057
@property --tw-skew-x {
3058-
syntax: "<angle>";
3058+
syntax: "<transform-function>";
30593059
inherits: false;
3060-
initial-value: 0deg;
3060+
initial-value: skewX(0);
30613061
}
30623062
30633063
@property --tw-skew-y {
3064-
syntax: "<angle>";
3064+
syntax: "<transform-function>";
30653065
inherits: false;
3066-
initial-value: 0deg;
3066+
initial-value: skewY(0);
30673067
}"
30683068
`)
30693069
expect(

‎packages/tailwindcss/src/utilities.ts

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1213,6 +1213,7 @@ export function createUtilities(theme: Theme) {
12131213
/**
12141214
* @css `translate`
12151215
*/
1216+
staticUtility('translate-none', [['translate', 'none']])
12161217
utilities.static('translate-full', (candidate) => {
12171218
let value = candidate.negative ? '-100%' : '100%'
12181219

@@ -1280,6 +1281,7 @@ export function createUtilities(theme: Theme) {
12801281
* `rotate-[x_45deg]` => `rotate: x 45deg`
12811282
* `rotate-[1_2_3_45deg]` => `rotate: 1 2 3 45deg`
12821283
*/
1284+
staticUtility('rotate-none', [['rotate', 'none']])
12831285
utilities.functional('rotate', (candidate) => {
12841286
if (!candidate.value) return
12851287
let value
@@ -1331,7 +1333,10 @@ export function createUtilities(theme: Theme) {
13311333
}
13321334

13331335
let skewProperties = () =>
1334-
atRoot([property('--tw-skew-x', '0deg', '<angle>'), property('--tw-skew-y', '0deg', '<angle>')])
1336+
atRoot([
1337+
property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
1338+
property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
1339+
])
13351340

13361341
/**
13371342
* @css `transform`
@@ -1346,9 +1351,9 @@ export function createUtilities(theme: Theme) {
13461351
},
13471352
handle: (value) => [
13481353
skewProperties(),
1349-
decl('--tw-skew-x', value),
1350-
decl('--tw-skew-y', value),
1351-
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
1354+
decl('--tw-skew-x', `skewX(${value})`),
1355+
decl('--tw-skew-y', `skewY(${value})`),
1356+
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
13521357
],
13531358
})
13541359

@@ -1365,8 +1370,8 @@ export function createUtilities(theme: Theme) {
13651370
},
13661371
handle: (value) => [
13671372
skewProperties(),
1368-
decl('--tw-skew-x', value),
1369-
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
1373+
decl('--tw-skew-x', `skewX(${value})`),
1374+
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
13701375
],
13711376
})
13721377

@@ -1383,8 +1388,8 @@ export function createUtilities(theme: Theme) {
13831388
},
13841389
handle: (value) => [
13851390
skewProperties(),
1386-
decl('--tw-skew-y', value),
1387-
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
1391+
decl('--tw-skew-y', `skewY(${value})`),
1392+
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
13881393
],
13891394
})
13901395

@@ -1422,6 +1427,7 @@ export function createUtilities(theme: Theme) {
14221427
/**
14231428
* @css `scale`
14241429
*/
1430+
staticUtility('scale-none', [['scale', 'none']])
14251431
utilities.functional('scale', (candidate) => {
14261432
if (!candidate.value) return
14271433
let value
@@ -1506,20 +1512,15 @@ export function createUtilities(theme: Theme) {
15061512
utilities.functional('transform', (candidate) => {
15071513
if (candidate.negative) return
15081514

1509-
let value = 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'
1515+
let value: string | null = null
15101516
if (!candidate.value) {
1511-
// Supported as a legacy value for its stacking context
1517+
value = 'var(--tw-skew-x) var(--tw-skew-y)'
15121518
} else if (candidate.value.kind === 'arbitrary') {
1513-
// Since skew-x and skew-y are implemented using `transform`, we preserve
1514-
// them even if an arbitrary transform is provided. Transform functions
1515-
// are applied right to left, so we put them at the end so they are
1516-
// applied before other transforms, similar to other specific transform
1517-
// properties.
1518-
//
1519-
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform#values
1520-
value = `${candidate.value.value} ${value}`
1519+
value = candidate.value.value
15211520
}
15221521

1522+
if (value === null) return
1523+
15231524
return [skewProperties(), decl('transform', value)]
15241525
})
15251526
suggest('transform', () => [
@@ -1528,14 +1529,9 @@ export function createUtilities(theme: Theme) {
15281529
},
15291530
])
15301531

1531-
staticUtility('transform-cpu', [['transform', 'translate(0,0)']])
1532-
staticUtility('transform-gpu', [['transform', 'translate(0,0,0)']])
1533-
staticUtility('transform-none', [
1534-
['translate', 'none'],
1535-
['rotate', 'none'],
1536-
['scale', 'none'],
1537-
['transform', 'none'],
1538-
])
1532+
staticUtility('transform-cpu', [['transform', 'var(--tw-skew-x) var(--tw-skew-y)']])
1533+
staticUtility('transform-gpu', [['transform', 'translateZ(0) var(--tw-skew-x) var(--tw-skew-y)']])
1534+
staticUtility('transform-none', [['transform', 'none']])
15391535

15401536
/**
15411537
* @css `transform-style`

0 commit comments

Comments
 (0)