Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove need for transform toggle #4604

Merged
merged 1 commit into from Jun 10, 2021
Merged

Remove need for transform toggle #4604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/corePlugins.js
View file
Open in desktop
@@ -1,8 +1,26 @@
import * as plugins from './plugins/index.js'
import configurePlugins from './util/configurePlugins'

function move(items, item, before) {
if (items.indexOf(item) === -1) {
return items
}

items = [...items]
let fromIndex = items.indexOf(item)
let toIndex = items.indexOf(before)
items.splice(fromIndex, 1)
items.splice(toIndex, 0, item)
return items
}

export default function ({ corePlugins: corePluginConfig }) {
return configurePlugins(corePluginConfig, Object.keys(plugins)).map((pluginName) => {
let pluginOrder = Object.keys(plugins)

pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')

return pluginOrder.map((pluginName) => {
return plugins[pluginName]()
})
}
2 changes: 1 addition & 1 deletion src/plugins/index.js
View file
Open in desktop
Expand Up @@ -33,12 +33,12 @@ export { default as flexGrow } from './flexGrow'
export { default as tableLayout } from './tableLayout'
export { default as borderCollapse } from './borderCollapse'

export { default as transform } from './transform'
export { default as transformOrigin } from './transformOrigin'
export { default as translate } from './translate'
export { default as rotate } from './rotate'
export { default as skew } from './skew'
export { default as scale } from './scale'
export { default as transform } from './transform'

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

Expand Down
10 changes: 9 additions & 1 deletion src/plugins/rotate.js
View file
Open in desktop
@@ -1,5 +1,13 @@
import createUtilityPlugin from '../util/createUtilityPlugin'

export default function () {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('rotate', [
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
])({ config, ...rest })
} else {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
}
}
}
26 changes: 19 additions & 7 deletions src/plugins/scale.js
View file
Open in desktop
@@ -1,11 +1,23 @@
import createUtilityPlugin from '../util/createUtilityPlugin'

export default function () {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],
[
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
],
])({ config, ...rest })
} else {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],
[
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
],
])({ config, ...rest })
}
}
}
23 changes: 17 additions & 6 deletions src/plugins/skew.js
View file
Open in desktop
@@ -1,10 +1,21 @@
import createUtilityPlugin from '../util/createUtilityPlugin'

export default function () {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
],
])({ config, ...rest })
} else {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
],
])({ config, ...rest })
}
}
}
100 changes: 75 additions & 25 deletions src/plugins/transform.js
View file
Open in desktop
@@ -1,16 +1,16 @@
export default function () {
return function ({ addUtilities, variants }) {
addUtilities(
{
'.transform': {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'--tw-transform': [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
Expand All @@ -20,26 +20,76 @@ export default function () {
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
})
addUtilities(
{
'.transform-cpu': {
'--tw-transform': [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--tw-transform': [
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },
},
variants('transform')
)
} else {
addUtilities(
{
'.transform': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },
},
'.transform-none': { transform: 'none' },
},
variants('transform')
)
variants('transform')
)
}
}
}
23 changes: 17 additions & 6 deletions src/plugins/translate.js
View file
Open in desktop
@@ -1,10 +1,21 @@
import createUtilityPlugin from '../util/createUtilityPlugin'

export default function () {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
],
])({ config, ...rest })
} else {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
],
])({ config, ...rest })
}
}
}
10 changes: 6 additions & 4 deletions src/util/createUtilityPlugin.js
View file
Open in desktop
Expand Up @@ -24,10 +24,12 @@ export default function createUtilityPlugin(
group.reduce((obj, [classPrefix, properties]) => {
return Object.assign(obj, {
[classPrefix]: (value) => {
return properties.reduce(
(obj, name) => Object.assign(obj, { [name]: transformValue(value) }),
{}
)
return properties.reduce((obj, name) => {
if (Array.isArray(name)) {
return Object.assign(obj, { [name[0]]: name[1] })
}
return Object.assign(obj, { [name]: transformValue(value) })
}, {})
},
})
}, {}),
Expand Down
12 changes: 12 additions & 0 deletions tests/jit/apply.test.css
View file
Open in desktop
@@ -1,3 +1,15 @@
* {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
Expand Down
18 changes: 18 additions & 0 deletions tests/jit/arbitrary-values.test.css
View file
Open in desktop
@@ -1,3 +1,15 @@
* {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
Expand Down Expand Up @@ -137,21 +149,27 @@
}
.rotate-\[23deg\] {
--tw-rotate: 23deg;
transform: var(--tw-transform);
}
.rotate-\[2\.3rad\] {
--tw-rotate: 2.3rad;
transform: var(--tw-transform);
}
.rotate-\[401grad\] {
--tw-rotate: 401grad;
transform: var(--tw-transform);
}
.rotate-\[1\.5turn\] {
--tw-rotate: 1.5turn;
transform: var(--tw-transform);
}
.skew-x-\[3px\] {
--tw-skew-x: 3px;
transform: var(--tw-transform);
}
.skew-y-\[3px\] {
--tw-skew-y: 3px;
transform: var(--tw-transform);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
Expand Down