diff --git a/defaultTheme.js b/defaultTheme.js index 9c0462bdf..93c5daefb 100644 --- a/defaultTheme.js +++ b/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)', diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js index 8f72408cf..fcabe4a14 100644 --- a/src/plugins/objectPosition.js +++ b/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) } }