Add first pass of transform utilities

Author: adamwathan

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

src/plugins/rotate.js

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

src/plugins/scale.js

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

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

src/plugins/transformOrigin.js

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

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

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

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