createUtilityPlugin.js

import identity from 'lodash/identity'
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, 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))
  }
}