Skip to content

Commit 8fc4447

Browse files
adamwathanadamwathan
committed
Merge branch 'benface-skew'
2 parents 5ee1eb4 + a33c1a6 commit 8fc4447

File tree

6 files changed

+82
-46
lines changed

6 files changed

+82
-46
lines changed

‎__tests__/fixtures/tailwind-output-important.css

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8786,12 +8786,14 @@ video {
87868786
}
87878787

87888788
.transform {
8789-
--transform-scale-x: 1 !important;
8790-
--transform-scale-y: 1 !important;
8791-
--transform-rotate: 0 !important;
87928789
--transform-translate-x: 0 !important;
87938790
--transform-translate-y: 0 !important;
8794-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
8791+
--transform-rotate: 0 !important;
8792+
--transform-skew-x: 0 !important;
8793+
--transform-skew-y: 0 !important;
8794+
--transform-scale-x: 1 !important;
8795+
--transform-scale-y: 1 !important;
8796+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
87958797
}
87968798

87978799
.transform-none {
@@ -18479,12 +18481,14 @@ video {
1847918481
}
1848018482

1848118483
.sm\:transform {
18482-
--transform-scale-x: 1 !important;
18483-
--transform-scale-y: 1 !important;
18484-
--transform-rotate: 0 !important;
1848518484
--transform-translate-x: 0 !important;
1848618485
--transform-translate-y: 0 !important;
18487-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
18486+
--transform-rotate: 0 !important;
18487+
--transform-skew-x: 0 !important;
18488+
--transform-skew-y: 0 !important;
18489+
--transform-scale-x: 1 !important;
18490+
--transform-scale-y: 1 !important;
18491+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
1848818492
}
1848918493

1849018494
.sm\:transform-none {
@@ -28173,12 +28177,14 @@ video {
2817328177
}
2817428178

2817528179
.md\:transform {
28176-
--transform-scale-x: 1 !important;
28177-
--transform-scale-y: 1 !important;
28178-
--transform-rotate: 0 !important;
2817928180
--transform-translate-x: 0 !important;
2818028181
--transform-translate-y: 0 !important;
28181-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
28182+
--transform-rotate: 0 !important;
28183+
--transform-skew-x: 0 !important;
28184+
--transform-skew-y: 0 !important;
28185+
--transform-scale-x: 1 !important;
28186+
--transform-scale-y: 1 !important;
28187+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
2818228188
}
2818328189

2818428190
.md\:transform-none {
@@ -37867,12 +37873,14 @@ video {
3786737873
}
3786837874

3786937875
.lg\:transform {
37870-
--transform-scale-x: 1 !important;
37871-
--transform-scale-y: 1 !important;
37872-
--transform-rotate: 0 !important;
3787337876
--transform-translate-x: 0 !important;
3787437877
--transform-translate-y: 0 !important;
37875-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
37878+
--transform-rotate: 0 !important;
37879+
--transform-skew-x: 0 !important;
37880+
--transform-skew-y: 0 !important;
37881+
--transform-scale-x: 1 !important;
37882+
--transform-scale-y: 1 !important;
37883+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
3787637884
}
3787737885

3787837886
.lg\:transform-none {
@@ -47561,12 +47569,14 @@ video {
4756147569
}
4756247570

4756347571
.xl\:transform {
47564-
--transform-scale-x: 1 !important;
47565-
--transform-scale-y: 1 !important;
47566-
--transform-rotate: 0 !important;
4756747572
--transform-translate-x: 0 !important;
4756847573
--transform-translate-y: 0 !important;
47569-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
47574+
--transform-rotate: 0 !important;
47575+
--transform-skew-x: 0 !important;
47576+
--transform-skew-y: 0 !important;
47577+
--transform-scale-x: 1 !important;
47578+
--transform-scale-y: 1 !important;
47579+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) !important;
4757047580
}
4757147581

4757247582
.xl\:transform-none {

‎__tests__/fixtures/tailwind-output.css

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8786,12 +8786,14 @@ video {
87868786
}
87878787

87888788
.transform {
8789-
--transform-scale-x: 1;
8790-
--transform-scale-y: 1;
8791-
--transform-rotate: 0;
87928789
--transform-translate-x: 0;
87938790
--transform-translate-y: 0;
8794-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
8791+
--transform-rotate: 0;
8792+
--transform-skew-x: 0;
8793+
--transform-skew-y: 0;
8794+
--transform-scale-x: 1;
8795+
--transform-scale-y: 1;
8796+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
87958797
}
87968798

87978799
.transform-none {
@@ -18479,12 +18481,14 @@ video {
1847918481
}
1848018482

1848118483
.sm\:transform {
18482-
--transform-scale-x: 1;
18483-
--transform-scale-y: 1;
18484-
--transform-rotate: 0;
1848518484
--transform-translate-x: 0;
1848618485
--transform-translate-y: 0;
18487-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
18486+
--transform-rotate: 0;
18487+
--transform-skew-x: 0;
18488+
--transform-skew-y: 0;
18489+
--transform-scale-x: 1;
18490+
--transform-scale-y: 1;
18491+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
1848818492
}
1848918493

1849018494
.sm\:transform-none {
@@ -28173,12 +28177,14 @@ video {
2817328177
}
2817428178

2817528179
.md\:transform {
28176-
--transform-scale-x: 1;
28177-
--transform-scale-y: 1;
28178-
--transform-rotate: 0;
2817928180
--transform-translate-x: 0;
2818028181
--transform-translate-y: 0;
28181-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
28182+
--transform-rotate: 0;
28183+
--transform-skew-x: 0;
28184+
--transform-skew-y: 0;
28185+
--transform-scale-x: 1;
28186+
--transform-scale-y: 1;
28187+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
2818228188
}
2818328189

2818428190
.md\:transform-none {
@@ -37867,12 +37873,14 @@ video {
3786737873
}
3786837874

3786937875
.lg\:transform {
37870-
--transform-scale-x: 1;
37871-
--transform-scale-y: 1;
37872-
--transform-rotate: 0;
3787337876
--transform-translate-x: 0;
3787437877
--transform-translate-y: 0;
37875-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
37878+
--transform-rotate: 0;
37879+
--transform-skew-x: 0;
37880+
--transform-skew-y: 0;
37881+
--transform-scale-x: 1;
37882+
--transform-scale-y: 1;
37883+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
3787637884
}
3787737885

3787837886
.lg\:transform-none {
@@ -47561,12 +47569,14 @@ video {
4756147569
}
4756247570

4756347571
.xl\:transform {
47564-
--transform-scale-x: 1;
47565-
--transform-scale-y: 1;
47566-
--transform-rotate: 0;
4756747572
--transform-translate-x: 0;
4756847573
--transform-translate-y: 0;
47569-
transform: scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
47574+
--transform-rotate: 0;
47575+
--transform-skew-x: 0;
47576+
--transform-skew-y: 0;
47577+
--transform-scale-x: 1;
47578+
--transform-scale-y: 1;
47579+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
4757047580
}
4757147581

4757247582
.xl\:transform-none {

‎src/corePlugins.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ import transformOrigin from './plugins/transformOrigin'
7474
import scale from './plugins/scale'
7575
import rotate from './plugins/rotate'
7676
import translate from './plugins/translate'
77+
import skew from './plugins/skew'
7778
import gap from './plugins/gap'
7879
import columnGap from './plugins/columnGap'
7980
import rowGap from './plugins/rowGap'
@@ -179,5 +180,6 @@ export default function({ corePlugins: corePluginConfig }) {
179180
scale,
180181
rotate,
181182
translate,
183+
skew,
182184
})
183185
}

‎src/plugins/skew.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import createUtilityPlugin from '../util/createUtilityPlugin'
2+
3+
export default function() {
4+
return createUtilityPlugin('skew', [
5+
['skew-x', ['--transform-skew-x']],
6+
['skew-y', ['--transform-skew-y']],
7+
])
8+
}

‎src/plugins/transform.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@ export default function() {
33
addUtilities(
44
{
55
'.transform': {
6-
'--transform-scale-x': '1',
7-
'--transform-scale-y': '1',
8-
'--transform-rotate': '0',
96
'--transform-translate-x': '0',
107
'--transform-translate-y': '0',
8+
'--transform-rotate': '0',
9+
'--transform-skew-x': '0',
10+
'--transform-skew-y': '0',
11+
'--transform-scale-x': '1',
12+
'--transform-scale-y': '1',
1113
transform: [
12-
'scaleX(var(--transform-scale-x))',
13-
'scaleY(var(--transform-scale-y))',
14-
'rotate(var(--transform-rotate))',
1514
'translateX(var(--transform-translate-x))',
1615
'translateY(var(--transform-translate-y))',
16+
'rotate(var(--transform-rotate))',
17+
'skewX(var(--transform-skew-x))',
18+
'skewY(var(--transform-skew-y))',
19+
'scaleX(var(--transform-scale-x))',
20+
'scaleY(var(--transform-scale-y))',
1721
].join(' '),
1822
},
1923
'.transform-none': { transform: 'none' },

‎stubs/defaultConfig.stub.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,6 +524,7 @@ module.exports = {
524524
'1/2': '50%',
525525
full: '100%',
526526
}),
527+
skew: {},
527528
},
528529
variants: {
529530
accessibility: ['responsive', 'focus'],
@@ -612,6 +613,7 @@ module.exports = {
612613
scale: ['responsive', 'hover', 'focus'],
613614
rotate: ['responsive', 'hover', 'focus'],
614615
translate: ['responsive', 'hover', 'focus'],
616+
skew: ['responsive', 'hover', 'focus'],
615617
},
616618
corePlugins: {},
617619
plugins: [],

0 commit comments

Comments
 (0)