Allow users to customize objectPostions

defaultTheme.js

@@ -260,6 +260,17 @@ module.exports = function() {
     padding: theme => theme.spacing,
     margin: theme => ({ auto: 'auto', ...theme.spacing }),
     negativeMargin: theme => theme.spacing,
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
     boxShadow: {
       default: '0 2px 4px 0 rgba(0,0,0,0.10)',
       md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',

src/plugins/objectPosition.js

@@ -1,18 +1,18 @@
-export default function({ variants }) {
-  return function({ addUtilities }) {
-    addUtilities(
-      {
-        '.object-bottom': { 'object-position': 'bottom' },
-        '.object-center': { 'object-position': 'center' },
-        '.object-left': { 'object-position': 'left' },
-        '.object-left-bottom': { 'object-position': 'left bottom' },
-        '.object-left-top': { 'object-position': 'left top' },
-        '.object-right': { 'object-position': 'right' },
-        '.object-right-bottom': { 'object-position': 'right bottom' },
-        '.object-right-top': { 'object-position': 'right top' },
-        '.object-top': { 'object-position': 'top' },
-      },
-      variants
+import _ from 'lodash'
+
+export default function({ values, variants }) {
+  return function({ addUtilities, e }) {
+    const utilities = _.fromPairs(
+      _.map(values, (value, modifier) => {
+        return [
+          `.${e(`object-${modifier}`)}`,
+          {
+            'object-position': value,
+          },
+        ]
+      })
     )
+
+    addUtilities(utilities, variants)
   }
 }