archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add first pass of transform utilities

Browse Source
This commit is contained in:
Adam Wathan 2019-12-22 15:25:34 -05:00
parent ecd1d10264
commit 5335df2b2c
8 changed files with 151 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/corePlugins.js
View File

@ -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,
})
}

5
src/plugins/rotate.js Normal file
View File

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('rotate', 'rotate', '--transform-rotate')
}

5
src/plugins/scale.js Normal file
View File

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('scale', 'scale', '--transform-scale')
}

18
src/plugins/transform.js Normal file
View File

@ -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')
)
}
}

5
src/plugins/transformOrigin.js Normal file
View File

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('origin', 'transformOrigin')
}

18
src/plugins/translate.js Normal file
View File

@ -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))
}
}

31
src/util/createUtilityPlugin.js Normal file
View File

@ -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)
)
}
}

70
stubs/defaultConfig.stub.js
View File

@ -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: [],