Generate non-composable transforms in IE11 target mode

src/plugins/rotate.js

@@ -1,8 +1,14 @@
+import _ from 'lodash'
+
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
   return function({ target, ...args }) {
     if (target('rotate') === 'ie11') {
+      createUtilityPlugin('rotate', [['rotate', ['transform'], value => `rotate(${value})`]])({
+        target,
+        ...args,
+      })
       return
     }
 

src/plugins/scale.js

@@ -3,6 +3,12 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
 export default function() {
   return function({ target, ...args }) {
     if (target('scale') === 'ie11') {
+      createUtilityPlugin('scale', [
+        ['scale', ['transform'], value => `scale(${value})`],
+        ['scale-x', ['transform'], value => `scaleX(${value})`],
+        ['scale-y', ['transform'], value => `scaleY(${value})`],
+      ])({ target, ...args })
+
       return
     }
 

src/plugins/skew.js

@@ -3,6 +3,11 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
 export default function() {
   return function({ target, ...args }) {
     if (target('skew') === 'ie11') {
+      createUtilityPlugin('skew', [
+        ['skew-x', ['transform'], value => `skewX(${value})`],
+        ['skew-y', ['transform'], value => `skewY(${value})`],
+      ])({ target, ...args })
+
       return
     }
 

src/plugins/translate.js

@@ -3,6 +3,11 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
 export default function() {
   return function({ target, ...args }) {
     if (target('translate') === 'ie11') {
+      createUtilityPlugin('translate', [
+        ['translate-x', ['transform'], value => `translateX(${value})`],
+        ['translate-y', ['transform'], value => `translateY(${value})`],
+      ])({ target, ...args })
+
       return
     }
 

src/util/createUtilityPlugin.js

@@ -1,3 +1,4 @@
+import identity from 'lodash/identity'
 import fromPairs from 'lodash/fromPairs'
 import toPairs from 'lodash/toPairs'
 import castArray from 'lodash/castArray'
@@ -16,16 +17,18 @@ function className(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])),
-          ]
-        })
-      )
-    })
+    const utilities = utilityVariations.map(
+      ([classPrefix, properties, transformValue = identity]) => {
+        return fromPairs(
+          toPairs(theme(themeKey)).map(([key, value]) => {
+            return [
+              `.${e(className(classPrefix, key))}`,
+              fromPairs(castArray(properties).map(property => [property, transformValue(value)])),
+            ]
+          })
+        )
+      }
+    )
     return addUtilities(utilities, variants(themeKey))
   }
 }