Add composable transform utilities

scripts/rebuildFixtures.js

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import postcss from 'postcss'
+import tailwind from '..'
+
+function build({ from, to, config }) {
+  return new Promise((resolve, reject) => {
+    console.log(`Processing ./${from}...`)
+
+    fs.readFile(`./${from}`, (err, css) => {
+      if (err) throw err
+
+      return postcss([tailwind(config)])
+        .process(css, {
+          from: undefined,
+        })
+        .then(result => {
+          fs.writeFileSync(`./${to}`, result.css)
+          return result
+        })
+        .then(resolve)
+        .catch(error => {
+          console.log(error)
+          reject()
+        })
+    })
+  })
+}
+
+console.info('\nRebuilding fixtures...\n')
+
+Promise.all([
+  build({
+    from: '__tests__/fixtures/tailwind-input.css',
+    to: '__tests__/fixtures/tailwind-output.css',
+    config: {},
+  }),
+  build({
+    from: '__tests__/fixtures/tailwind-input.css',
+    to: '__tests__/fixtures/tailwind-output-important.css',
+    config: { important: true },
+  }),
+]).then(() => {
+  console.log('\nFinished rebuilding fixtures.')
+  console.log(
+    '\nPlease triple check that the fixture output matches what you expect before committing this change.'
+  )
+})

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,9 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('scale', [
+    ['scale', ['--transform-scale-x', '--transform-scale-y']],
+    ['scale-x', ['--transform-scale-x']],
+    ['scale-y', ['--transform-scale-y']],
+  ])
+}

src/plugins/transform.js

@@ -0,0 +1,24 @@
+export default function() {
+  return function({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.transform': {
+          '--transform-scale-x': '1',
+          '--transform-scale-y': '1',
+          '--transform-rotate': '0',
+          '--transform-translate-x': '0',
+          '--transform-translate-y': '0',
+          transform: [
+            'scaleX(var(--transform-scale-x))',
+            'scaleY(var(--transform-scale-y))',
+            'rotate(var(--transform-rotate))',
+            'translateX(var(--transform-translate-x))',
+            'translateY(var(--transform-translate-y))',
+          ].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('transformOrigin', [['origin', ['transformOrigin']]])
+}

src/plugins/translate.js

@@ -0,0 +1,8 @@
+import createUtilityPlugin from '../util/createUtilityPlugin'
+
+export default function() {
+  return createUtilityPlugin('translate', [
+    ['translate-x', ['--transform-translate-x']],
+    ['translate-y', ['--transform-translate-y']],
+  ])
+}

src/util/createUtilityPlugin.js

@@ -0,0 +1,31 @@
+import fromPairs from 'lodash/fromPairs'
+import toPairs from 'lodash/toPairs'
+import castArray from 'lodash/castArray'
+
+function className(classPrefix, key) {
+  if (key === 'default') {
+    return classPrefix
+  }
+
+  if (key.startsWith('-')) {
+    return `-${classPrefix}${key}`
+  }
+
+  return `${classPrefix}-${key}`
+}
+
+export default function createUtilityPlugin(themeKey, utilityVariations) {
+  return function({ e, addUtilities, variants, theme }) {
+    const utilities = utilityVariations.map(([classPrefix, properties]) => {
+      return fromPairs(
+        toPairs(theme(themeKey)).map(([key, value]) => {
+          return [
+            `.${e(className(classPrefix, key))}`,
+            fromPairs(castArray(properties).map(property => [property, value])),
+          ]
+        })
+      )
+    })
+    return addUtilities(utilities, variants(themeKey))
+  }
+}

stubs/defaultConfig.stub.js

@@ -234,21 +234,8 @@ module.exports = {
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: [
-        'Georgia',
-        'Cambria',
-        '"Times New Roman"',
-        'Times',
-        'serif',
-      ],
-      mono: [
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        '"Liberation Mono"',
-        '"Courier New"',
-        'monospace',
-      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
     },
     fontSize: {
       xs: '0.75rem',
@@ -417,6 +404,46 @@ 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',
+      '50': '.5',
+      '75': '.75',
+      '90': '.9',
+      '95': '.95',
+      '100': '1',
+      '105': '1.05',
+      '110': '1.1',
+      '125': '1.25',
+      '150': '1.5',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '0': '0',
+      '45': '45deg',
+      '90': '90deg',
+      '180': '180deg',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '-full': '-100%',
+      '-1/2': '-50%',
+      '1/2': '50%',
+      full: '100%',
+    }),
   },
   variants: {
     accessibility: ['responsive', 'focus'],
@@ -485,6 +512,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: [],

yarn.lock

@@ -1851,9 +1851,9 @@ eslint-visitor-keys@^1.1.0:
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
 eslint@^6.0.1:
-  version "6.7.2"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.7.2.tgz#c17707ca4ad7b2d8af986a33feba71e18a9fecd1"
-  integrity sha512-qMlSWJaCSxDFr8fBPvJM9kJwbazrhNcBU3+DszDW1OlEwKBBRWsJc7NJFelvwQpanHCR14cOLD41x8Eqvo3Nng==
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.10.0"