Skip to content

Commit b86aa5c

Browse files
adamwathanadamwathan
authored
Remove need for transform toggle (#4604)
1 parent 6f1d5f0 commit b86aa5c

30 files changed

+430
-158
lines changed

‎src/corePlugins.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
11
import * as plugins from './plugins/index.js'
22
import configurePlugins from './util/configurePlugins'
33

4+
function move(items, item, before) {
5+
if (items.indexOf(item) === -1) {
6+
return items
7+
}
8+
9+
items = [...items]
10+
let fromIndex = items.indexOf(item)
11+
let toIndex = items.indexOf(before)
12+
items.splice(fromIndex, 1)
13+
items.splice(toIndex, 0, item)
14+
return items
15+
}
16+
417
export default function ({ corePlugins: corePluginConfig }) {
5-
return configurePlugins(corePluginConfig, Object.keys(plugins)).map((pluginName) => {
18+
let pluginOrder = Object.keys(plugins)
19+
20+
pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
21+
pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
22+
23+
return pluginOrder.map((pluginName) => {
624
return plugins[pluginName]()
725
})
826
}

‎src/plugins/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ export { default as flexGrow } from './flexGrow'
3333
export { default as tableLayout } from './tableLayout'
3434
export { default as borderCollapse } from './borderCollapse'
3535

36-
export { default as transform } from './transform'
3736
export { default as transformOrigin } from './transformOrigin'
3837
export { default as translate } from './translate'
3938
export { default as rotate } from './rotate'
4039
export { default as skew } from './skew'
4140
export { default as scale } from './scale'
41+
export { default as transform } from './transform'
4242

4343
export { default as animation } from './animation'
4444

‎src/plugins/rotate.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
import createUtilityPlugin from '../util/createUtilityPlugin'
22

33
export default function () {
4-
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])
4+
return function ({ config, ...rest }) {
5+
if (config('mode') === 'jit') {
6+
return createUtilityPlugin('rotate', [
7+
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
8+
])({ config, ...rest })
9+
} else {
10+
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
11+
}
12+
}
513
}

‎src/plugins/scale.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import createUtilityPlugin from '../util/createUtilityPlugin'
22

33
export default function () {
4-
return createUtilityPlugin('scale', [
5-
['scale', ['--tw-scale-x', '--tw-scale-y']],
6-
[
7-
['scale-x', ['--tw-scale-x']],
8-
['scale-y', ['--tw-scale-y']],
9-
],
10-
])
4+
return function ({ config, ...rest }) {
5+
if (config('mode') === 'jit') {
6+
return createUtilityPlugin('scale', [
7+
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
8+
[
9+
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
10+
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
11+
],
12+
])({ config, ...rest })
13+
} else {
14+
return createUtilityPlugin('scale', [
15+
['scale', ['--tw-scale-x', '--tw-scale-y']],
16+
[
17+
['scale-x', ['--tw-scale-x']],
18+
['scale-y', ['--tw-scale-y']],
19+
],
20+
])({ config, ...rest })
21+
}
22+
}
1123
}

‎src/plugins/skew.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import createUtilityPlugin from '../util/createUtilityPlugin'
22

33
export default function () {
4-
return createUtilityPlugin('skew', [
5-
[
6-
['skew-x', ['--tw-skew-x']],
7-
['skew-y', ['--tw-skew-y']],
8-
],
9-
])
4+
return function ({ config, ...rest }) {
5+
if (config('mode') === 'jit') {
6+
return createUtilityPlugin('skew', [
7+
[
8+
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
9+
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
10+
],
11+
])({ config, ...rest })
12+
} else {
13+
return createUtilityPlugin('skew', [
14+
[
15+
['skew-x', ['--tw-skew-x']],
16+
['skew-y', ['--tw-skew-y']],
17+
],
18+
])({ config, ...rest })
19+
}
20+
}
1021
}

‎src/plugins/transform.js

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
export default function () {
2-
return function ({ addUtilities, variants }) {
3-
addUtilities(
4-
{
5-
'.transform': {
2+
return function ({ config, addBase, addUtilities, variants }) {
3+
if (config('mode') === 'jit') {
4+
addBase({
5+
'*': {
66
'--tw-translate-x': '0',
77
'--tw-translate-y': '0',
88
'--tw-rotate': '0',
99
'--tw-skew-x': '0',
1010
'--tw-skew-y': '0',
1111
'--tw-scale-x': '1',
1212
'--tw-scale-y': '1',
13-
transform: [
13+
'--tw-transform': [
1414
'translateX(var(--tw-translate-x))',
1515
'translateY(var(--tw-translate-y))',
1616
'rotate(var(--tw-rotate))',
@@ -20,26 +20,76 @@ export default function () {
2020
'scaleY(var(--tw-scale-y))',
2121
].join(' '),
2222
},
23-
'.transform-gpu': {
24-
'--tw-translate-x': '0',
25-
'--tw-translate-y': '0',
26-
'--tw-rotate': '0',
27-
'--tw-skew-x': '0',
28-
'--tw-skew-y': '0',
29-
'--tw-scale-x': '1',
30-
'--tw-scale-y': '1',
31-
transform: [
32-
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
33-
'rotate(var(--tw-rotate))',
34-
'skewX(var(--tw-skew-x))',
35-
'skewY(var(--tw-skew-y))',
36-
'scaleX(var(--tw-scale-x))',
37-
'scaleY(var(--tw-scale-y))',
38-
].join(' '),
23+
})
24+
addUtilities(
25+
{
26+
'.transform-cpu': {
27+
'--tw-transform': [
28+
'translateX(var(--tw-translate-x))',
29+
'translateY(var(--tw-translate-y))',
30+
'rotate(var(--tw-rotate))',
31+
'skewX(var(--tw-skew-x))',
32+
'skewY(var(--tw-skew-y))',
33+
'scaleX(var(--tw-scale-x))',
34+
'scaleY(var(--tw-scale-y))',
35+
].join(' '),
36+
},
37+
'.transform-gpu': {
38+
'--tw-transform': [
39+
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
40+
'rotate(var(--tw-rotate))',
41+
'skewX(var(--tw-skew-x))',
42+
'skewY(var(--tw-skew-y))',
43+
'scaleX(var(--tw-scale-x))',
44+
'scaleY(var(--tw-scale-y))',
45+
].join(' '),
46+
},
47+
'.transform-none': { transform: 'none' },
48+
},
49+
variants('transform')
50+
)
51+
} else {
52+
addUtilities(
53+
{
54+
'.transform': {
55+
'--tw-translate-x': '0',
56+
'--tw-translate-y': '0',
57+
'--tw-rotate': '0',
58+
'--tw-skew-x': '0',
59+
'--tw-skew-y': '0',
60+
'--tw-scale-x': '1',
61+
'--tw-scale-y': '1',
62+
transform: [
63+
'translateX(var(--tw-translate-x))',
64+
'translateY(var(--tw-translate-y))',
65+
'rotate(var(--tw-rotate))',
66+
'skewX(var(--tw-skew-x))',
67+
'skewY(var(--tw-skew-y))',
68+
'scaleX(var(--tw-scale-x))',
69+
'scaleY(var(--tw-scale-y))',
70+
].join(' '),
71+
},
72+
'.transform-gpu': {
73+
'--tw-translate-x': '0',
74+
'--tw-translate-y': '0',
75+
'--tw-rotate': '0',
76+
'--tw-skew-x': '0',
77+
'--tw-skew-y': '0',
78+
'--tw-scale-x': '1',
79+
'--tw-scale-y': '1',
80+
transform: [
81+
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
82+
'rotate(var(--tw-rotate))',
83+
'skewX(var(--tw-skew-x))',
84+
'skewY(var(--tw-skew-y))',
85+
'scaleX(var(--tw-scale-x))',
86+
'scaleY(var(--tw-scale-y))',
87+
].join(' '),
88+
},
89+
'.transform-none': { transform: 'none' },
3990
},
40-
'.transform-none': { transform: 'none' },
41-
},
42-
variants('transform')
43-
)
91+
variants('transform')
92+
)
93+
}
4494
}
4595
}

‎src/plugins/translate.js

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import createUtilityPlugin from '../util/createUtilityPlugin'
22

33
export default function () {
4-
return createUtilityPlugin('translate', [
5-
[
6-
['translate-x', ['--tw-translate-x']],
7-
['translate-y', ['--tw-translate-y']],
8-
],
9-
])
4+
return function ({ config, ...rest }) {
5+
if (config('mode') === 'jit') {
6+
return createUtilityPlugin('translate', [
7+
[
8+
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
9+
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
10+
],
11+
])({ config, ...rest })
12+
} else {
13+
return createUtilityPlugin('translate', [
14+
[
15+
['translate-x', ['--tw-translate-x']],
16+
['translate-y', ['--tw-translate-y']],
17+
],
18+
])({ config, ...rest })
19+
}
20+
}
1021
}

‎src/util/createUtilityPlugin.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ export default function createUtilityPlugin(
2424
group.reduce((obj, [classPrefix, properties]) => {
2525
return Object.assign(obj, {
2626
[classPrefix]: (value) => {
27-
return properties.reduce(
28-
(obj, name) => Object.assign(obj, { [name]: transformValue(value) }),
29-
{}
30-
)
27+
return properties.reduce((obj, name) => {
28+
if (Array.isArray(name)) {
29+
return Object.assign(obj, { [name[0]]: name[1] })
30+
}
31+
return Object.assign(obj, { [name]: transformValue(value) })
32+
}, {})
3133
},
3234
})
3335
}, {}),

‎tests/jit/apply.test.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
* {
2+
--tw-translate-x: 0;
3+
--tw-translate-y: 0;
4+
--tw-rotate: 0;
5+
--tw-skew-x: 0;
6+
--tw-skew-y: 0;
7+
--tw-scale-x: 1;
8+
--tw-scale-y: 1;
9+
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
10+
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
11+
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
12+
}
113
*,
214
::before,
315
::after {

‎tests/jit/arbitrary-values.test.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
* {
2+
--tw-translate-x: 0;
3+
--tw-translate-y: 0;
4+
--tw-rotate: 0;
5+
--tw-skew-x: 0;
6+
--tw-skew-y: 0;
7+
--tw-scale-x: 1;
8+
--tw-scale-y: 1;
9+
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
10+
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
11+
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
12+
}
113
*,
214
::before,
315
::after {
@@ -137,21 +149,27 @@
137149
}
138150
.rotate-\[23deg\] {
139151
--tw-rotate: 23deg;
152+
transform: var(--tw-transform);
140153
}
141154
.rotate-\[2\.3rad\] {
142155
--tw-rotate: 2.3rad;
156+
transform: var(--tw-transform);
143157
}
144158
.rotate-\[401grad\] {
145159
--tw-rotate: 401grad;
160+
transform: var(--tw-transform);
146161
}
147162
.rotate-\[1\.5turn\] {
148163
--tw-rotate: 1.5turn;
164+
transform: var(--tw-transform);
149165
}
150166
.skew-x-\[3px\] {
151167
--tw-skew-x: 3px;
168+
transform: var(--tw-transform);
152169
}
153170
.skew-y-\[3px\] {
154171
--tw-skew-y: 3px;
172+
transform: var(--tw-transform);
155173
}
156174
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
157175
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;

0 commit comments

Comments
 (0)