Skip to content

Commit 12cd6e6

Browse files
benfacebenface
committed
Add skew plugin + change order of transform functions (apply translate last)
1 parent 63b5cc2 commit 12cd6e6

File tree

6 files changed

+70
-34
lines changed

6 files changed

+70
-34
lines changed

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

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8443,12 +8443,14 @@ video {
84438443
}
84448444

84458445
.transform {
8446+
--transform-translate-x: 0 !important;
8447+
--transform-translate-y: 0 !important;
84468448
--transform-scale-x: 1 !important;
84478449
--transform-scale-y: 1 !important;
84488450
--transform-rotate: 0 !important;
8449-
--transform-translate-x: 0 !important;
8450-
--transform-translate-y: 0 !important;
8451-
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;
8451+
--transform-skew-x: 0 !important;
8452+
--transform-skew-y: 0 !important;
8453+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
84528454
}
84538455

84548456
.transform-none {
@@ -17793,12 +17795,14 @@ video {
1779317795
}
1779417796

1779517797
.sm\:transform {
17798+
--transform-translate-x: 0 !important;
17799+
--transform-translate-y: 0 !important;
1779617800
--transform-scale-x: 1 !important;
1779717801
--transform-scale-y: 1 !important;
1779817802
--transform-rotate: 0 !important;
17799-
--transform-translate-x: 0 !important;
17800-
--transform-translate-y: 0 !important;
17801-
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;
17803+
--transform-skew-x: 0 !important;
17804+
--transform-skew-y: 0 !important;
17805+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
1780217806
}
1780317807

1780417808
.sm\:transform-none {
@@ -27144,12 +27148,14 @@ video {
2714427148
}
2714527149

2714627150
.md\:transform {
27151+
--transform-translate-x: 0 !important;
27152+
--transform-translate-y: 0 !important;
2714727153
--transform-scale-x: 1 !important;
2714827154
--transform-scale-y: 1 !important;
2714927155
--transform-rotate: 0 !important;
27150-
--transform-translate-x: 0 !important;
27151-
--transform-translate-y: 0 !important;
27152-
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;
27156+
--transform-skew-x: 0 !important;
27157+
--transform-skew-y: 0 !important;
27158+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
2715327159
}
2715427160

2715527161
.md\:transform-none {
@@ -36495,12 +36501,14 @@ video {
3649536501
}
3649636502

3649736503
.lg\:transform {
36504+
--transform-translate-x: 0 !important;
36505+
--transform-translate-y: 0 !important;
3649836506
--transform-scale-x: 1 !important;
3649936507
--transform-scale-y: 1 !important;
3650036508
--transform-rotate: 0 !important;
36501-
--transform-translate-x: 0 !important;
36502-
--transform-translate-y: 0 !important;
36503-
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;
36509+
--transform-skew-x: 0 !important;
36510+
--transform-skew-y: 0 !important;
36511+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
3650436512
}
3650536513

3650636514
.lg\:transform-none {
@@ -45846,12 +45854,14 @@ video {
4584645854
}
4584745855

4584845856
.xl\:transform {
45857+
--transform-translate-x: 0 !important;
45858+
--transform-translate-y: 0 !important;
4584945859
--transform-scale-x: 1 !important;
4585045860
--transform-scale-y: 1 !important;
4585145861
--transform-rotate: 0 !important;
45852-
--transform-translate-x: 0 !important;
45853-
--transform-translate-y: 0 !important;
45854-
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;
45862+
--transform-skew-x: 0 !important;
45863+
--transform-skew-y: 0 !important;
45864+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) !important;
4585545865
}
4585645866

4585745867
.xl\:transform-none {

‎__tests__/fixtures/tailwind-output.css

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8443,12 +8443,14 @@ video {
84438443
}
84448444

84458445
.transform {
8446+
--transform-translate-x: 0;
8447+
--transform-translate-y: 0;
84468448
--transform-scale-x: 1;
84478449
--transform-scale-y: 1;
84488450
--transform-rotate: 0;
8449-
--transform-translate-x: 0;
8450-
--transform-translate-y: 0;
8451-
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));
8451+
--transform-skew-x: 0;
8452+
--transform-skew-y: 0;
8453+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
84528454
}
84538455

84548456
.transform-none {
@@ -17793,12 +17795,14 @@ video {
1779317795
}
1779417796

1779517797
.sm\:transform {
17798+
--transform-translate-x: 0;
17799+
--transform-translate-y: 0;
1779617800
--transform-scale-x: 1;
1779717801
--transform-scale-y: 1;
1779817802
--transform-rotate: 0;
17799-
--transform-translate-x: 0;
17800-
--transform-translate-y: 0;
17801-
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));
17803+
--transform-skew-x: 0;
17804+
--transform-skew-y: 0;
17805+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
1780217806
}
1780317807

1780417808
.sm\:transform-none {
@@ -27144,12 +27148,14 @@ video {
2714427148
}
2714527149

2714627150
.md\:transform {
27151+
--transform-translate-x: 0;
27152+
--transform-translate-y: 0;
2714727153
--transform-scale-x: 1;
2714827154
--transform-scale-y: 1;
2714927155
--transform-rotate: 0;
27150-
--transform-translate-x: 0;
27151-
--transform-translate-y: 0;
27152-
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));
27156+
--transform-skew-x: 0;
27157+
--transform-skew-y: 0;
27158+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
2715327159
}
2715427160

2715527161
.md\:transform-none {
@@ -36495,12 +36501,14 @@ video {
3649536501
}
3649636502

3649736503
.lg\:transform {
36504+
--transform-translate-x: 0;
36505+
--transform-translate-y: 0;
3649836506
--transform-scale-x: 1;
3649936507
--transform-scale-y: 1;
3650036508
--transform-rotate: 0;
36501-
--transform-translate-x: 0;
36502-
--transform-translate-y: 0;
36503-
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));
36509+
--transform-skew-x: 0;
36510+
--transform-skew-y: 0;
36511+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
3650436512
}
3650536513

3650636514
.lg\:transform-none {
@@ -45846,12 +45854,14 @@ video {
4584645854
}
4584745855

4584845856
.xl\:transform {
45857+
--transform-translate-x: 0;
45858+
--transform-translate-y: 0;
4584945859
--transform-scale-x: 1;
4585045860
--transform-scale-y: 1;
4585145861
--transform-rotate: 0;
45852-
--transform-translate-x: 0;
45853-
--transform-translate-y: 0;
45854-
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));
45862+
--transform-skew-x: 0;
45863+
--transform-skew-y: 0;
45864+
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y));
4585545865
}
4585645866

4585745867
.xl\:transform-none {

‎src/corePlugins.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ import transformOrigin from './plugins/transformOrigin'
7373
import scale from './plugins/scale'
7474
import rotate from './plugins/rotate'
7575
import translate from './plugins/translate'
76+
import skew from './plugins/skew'
7677

7778
import configurePlugins from './util/configurePlugins'
7879

@@ -153,5 +154,6 @@ export default function({ corePlugins: corePluginConfig }) {
153154
scale,
154155
rotate,
155156
translate,
157+
skew,
156158
})
157159
}

‎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: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@ export default function() {
33
addUtilities(
44
{
55
'.transform': {
6+
'--transform-translate-x': '0',
7+
'--transform-translate-y': '0',
68
'--transform-scale-x': '1',
79
'--transform-scale-y': '1',
810
'--transform-rotate': '0',
9-
'--transform-translate-x': '0',
10-
'--transform-translate-y': '0',
11+
'--transform-skew-x': '0',
12+
'--transform-skew-y': '0',
1113
transform: [
14+
'translateX(var(--transform-translate-x))',
15+
'translateY(var(--transform-translate-y))',
1216
'scaleX(var(--transform-scale-x))',
1317
'scaleY(var(--transform-scale-y))',
1418
'rotate(var(--transform-rotate))',
15-
'translateX(var(--transform-translate-x))',
16-
'translateY(var(--transform-translate-y))',
19+
'skewX(var(--transform-skew-x))',
20+
'skewY(var(--transform-skew-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
@@ -450,6 +450,7 @@ module.exports = {
450450
'1/2': '50%',
451451
full: '100%',
452452
}),
453+
skew: {},
453454
},
454455
variants: {
455456
accessibility: ['responsive', 'focus'],
@@ -525,6 +526,7 @@ module.exports = {
525526
scale: ['responsive', 'hover', 'focus'],
526527
rotate: ['responsive', 'hover', 'focus'],
527528
translate: ['responsive', 'hover', 'focus'],
529+
skew: ['responsive', 'hover', 'focus'],
528530
},
529531
corePlugins: {},
530532
plugins: [],

0 commit comments

Comments
 (0)