JSFiddle - React, Tailwind, and code Playground

Migration - Themes

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

JavaScript

const migrationObject = {
  headingOneFont: 'headingOneFontFamily',
  headingTwoFont: 'headingTwoFontFamily',
  menuTopNavBorder: [
    'menuTopNavBorderColor',
    'menuPushTopNavBorderColor',
    'menuSlideTopNavBorderColor',
    'menuSwipeTopNavBorderColor'
  ],
  primaryButtonBorder: {
    none: 'primaryButtonBorderSides',
    values: [
      'primaryButtonBorderWidth',
      'primaryButtonBorderStyle',
      'primaryButtonBorderColor'
    ]
  },
  secondaryButtonBorder: {
    none: 'secondaryButtonBorderSides',
    values: [
      'secondaryButtonBorderWidth',
      'secondaryButtonBorderStyle',
      'secondaryButtonBorderColor'
    ]
  }
}

const values = {
  headingOneFont: 'Helvetica',
  headingTwoFont: 'Helvetica',
  menuTopNavBorder: 'rgba(127, 127, 127, 0.1)',
  primaryButtonBorder: 'none',
  secondaryButtonBorder: '1px solid rgba(255, 255, 255, 1)'
}

_.forIn(values, (value, key) => {
  if (typeof migrationObject[key] === 'string') {
    values[migrationObject[key]] = value
  }

  if (_.isArray(migrationObject[key])) {
    migrationObject[key].forEach((val) => {
      values[val] = value
    })
  }

  if (_.isPlainObject(migrationObject[key])) {
    if (value === 'none') {
      values[migrationObject[key].none] = value
    } else {
      let borderArray

      if (value.indexOf('rgb') > -1) {
        borderArray = value.match(/\w+(\(.*?\))?/g)
      } else {
        borderArray = value.split(' ')
      }

      migrationObject[key].values.forEach((val, index) => {
        values[val] = borderArray[index]
      })
    }
  }

  delete values[key]
})

console.log(values)

/*
** RESULT WILL BE

value = {
	headingOneFontFamily: "Helvetica"
  headingTwoFontFamily: "Helvetica"
  menuPushTopNavBorderColor: "rgba(127, 127, 127, 0.1)"
  menuSlideTopNavBorderColor: "rgba(127, 127, 127, 0.1)"
  menuSwipeTopNavBorderColor: "rgba(127, 127, 127, 0.1)"
  menuTopNavBorderColor: "rgba(127, 127, 127, 0.1)"
  primaryButtonBorderSides: "none"
 ...