diff --git a/src/corePlugins.js b/src/corePlugins.js index b0bf35235..ce71b7f51 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -66,6 +66,11 @@ import whitespace from './plugins/whitespace' import wordBreak from './plugins/wordBreak' import width from './plugins/width' import zIndex from './plugins/zIndex' +import transform from './plugins/transform' +import transformOrigin from './plugins/transformOrigin' +import scale from './plugins/scale' +import rotate from './plugins/rotate' +import translate from './plugins/translate' import configurePlugins from './util/configurePlugins' @@ -139,5 +144,10 @@ export default function({ corePlugins: corePluginConfig }) { wordBreak, width, zIndex, + transform, + transformOrigin, + scale, + rotate, + translate, }) } diff --git a/src/plugins/rotate.js b/src/plugins/rotate.js new file mode 100644 index 000000000..b75ad1ab1 --- /dev/null +++ b/src/plugins/rotate.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('rotate', 'rotate', '--transform-rotate') +} diff --git a/src/plugins/scale.js b/src/plugins/scale.js new file mode 100644 index 000000000..519e82a2c --- /dev/null +++ b/src/plugins/scale.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('scale', 'scale', '--transform-scale') +} diff --git a/src/plugins/transform.js b/src/plugins/transform.js new file mode 100644 index 000000000..f6739a75a --- /dev/null +++ b/src/plugins/transform.js @@ -0,0 +1,18 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.transform': { + transform: [ + 'scale(var(--transform-scale, 1))', + 'rotate(var(--transform-rotate, 0))', + 'translateX(var(--transform-translate-x, 0))', + 'translateY(var(--transform-translate-y, 0))', + ].join(' '), + }, + '.transform-none': { transform: 'none' }, + }, + variants('transform') + ) + } +} diff --git a/src/plugins/transformOrigin.js b/src/plugins/transformOrigin.js new file mode 100644 index 000000000..a1a279d41 --- /dev/null +++ b/src/plugins/transformOrigin.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('origin', 'transformOrigin') +} diff --git a/src/plugins/translate.js b/src/plugins/translate.js new file mode 100644 index 000000000..a45bad16b --- /dev/null +++ b/src/plugins/translate.js @@ -0,0 +1,18 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return function(...args) { + ;[ + createUtilityPlugin( + 'translate-x', + 'translate', + '--transform-translate-x' + ), + createUtilityPlugin( + 'translate-y', + 'translate', + '--transform-translate-y' + ), + ].forEach(f => f(...args)) + } +} diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js new file mode 100644 index 000000000..4b03e7c9a --- /dev/null +++ b/src/util/createUtilityPlugin.js @@ -0,0 +1,31 @@ +import fromPairs from 'lodash/fromPairs' +import toPairs from 'lodash/toPairs' + +function className(classPrefix, key) { + if (key === 'default') { + return classPrefix + } + + if (key.startsWith('-')) { + return `-${classPrefix}${key}` + } + + return `${classPrefix}-${key}` +} + +export default function createUtilityPlugin( + classPrefix, + themeKey, + property = themeKey +) { + return function({ e, addUtilities, variants, theme }) { + return addUtilities( + fromPairs( + toPairs(theme(themeKey)).map(([key, value]) => { + return [`.${e(className(classPrefix, key))}`, { [property]: value }] + }) + ), + variants(themeKey) + ) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 193ab03fe..6e23b6461 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -183,10 +183,14 @@ module.exports = { '8': '8px', }, boxShadow: { - default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', - xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', + default: + '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', + md: + '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', + lg: + '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', + xl: + '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', @@ -234,13 +238,7 @@ module.exports = { '"Segoe UI Symbol"', '"Noto Color Emoji"', ], - serif: [ - 'Georgia', - 'Cambria', - '"Times New Roman"', - 'Times', - 'serif', - ], + serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], mono: [ 'Menlo', 'Monaco', @@ -417,6 +415,51 @@ module.exports = { '40': '40', '50': '50', }, + transformOrigin: { + center: 'center', + top: 'top', + 'top-right': 'top right', + right: 'right', + 'bottom-right': 'bottom right', + bottom: 'bottom', + 'bottom-left': 'bottom left', + left: 'left', + 'top-left': 'top left', + }, + scale: { + '0': '0', + '10': '.1', + '20': '.2', + '30': '.3', + '40': '.4', + '50': '.5', + '60': '.6', + '70': '.7', + '80': '.8', + '90': '.9', + '100': '1', + '110': '1.1', + '120': '1.2', + '130': '1.3', + '140': '1.4', + '150': '1.5', + '160': '1.6', + '170': '1.7', + '180': '1.8', + '190': '1.9', + '200': '2', + }, + rotate: { + '0': '0', + '45': '45deg', + '90': '90deg', + '135': '135deg', + '180': '180deg', + '225': '225deg', + '270': '270deg', + '315': '315deg', + }, + translate: theme => theme('spacing'), }, variants: { accessibility: ['responsive', 'focus'], @@ -485,6 +528,11 @@ module.exports = { width: ['responsive'], wordBreak: ['responsive'], zIndex: ['responsive'], + transform: ['responsive'], + transformOrigin: ['responsive'], + scale: ['responsive', 'hover', 'focus'], + rotate: ['responsive', 'hover', 'focus'], + translate: ['responsive', 'hover', 'focus'], }, corePlugins: {}, plugins: [],