JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

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

JavaScript

const migrationMapping = {
  bodyFontFamily: 'quickTextFontFamily',
  bodyBackground: 'quickBackground',
  bodyTextColor: 'quickTextColor',
  headingOneFont: 'headingOneFontFamily',
  headingTwoFont: 'headingTwoFontFamily',
  headingThreeFont: 'headingThreeFontFamily',
  headingFourFont: 'headingFourFontFamily',
  headingFiveFont: 'headingFiveFontFamily',
  headingSixFont: 'headingSixFontFamily',
  menuTopNavBorder: [
    'menuTopNavBorderColor',
    'menuPushTopNavBorderColor',
    'menuSlideTopNavBorderColor',
    'menuSwipeTopNavBorderColor',
  ],
  listIconColor: [
    'listSmallIconColor',
    'listLargeIconColor',
  ],
  accordionBorder: {
    none: 'accordionBorderColor',
    values: [
      'accordionBorderWidth',
      'accordionBorderStyle',
      'accordionBorderColor',
    ],
  },
  primaryButtonColor: {
    keep: true,
    values: [
      'highlightColor',
    ],
  },
  primaryButtonBorder: {
    none: 'primaryButtonBorderSides',
    values: [
      'primaryButtonBorderWidth',
      'primaryButtonBorderStyle',
      'primaryButtonBorderColor',
    ],
  },
  primaryButtonHoverBorder: {
    none: 'primaryButtonHoverBorderSides',
    values: [
      'primaryButtonHoverBorderWidth',
      'primaryButtonHoverBorderStyle',
      'primaryButtonHoverBorderColor',
    ],
  },
  secondaryButtonColor: {
    keep: true,
    values: [
      'secondaryColor',
    ],
  },
  secondaryButtonBorder: {
    none: 'secondaryButtonBorderSides',
    values: [
      'secondaryButtonBorderWidth',
      'secondaryButtonBorderStyle',
      'secondaryButtonBorderColor',
    ],
  },
  secondaryButtonHoverBorder: {
    none: 'secondaryButtonHoverBorderSides',
    values: [
      'secondaryButtonHoverBorderWidth',
      'secondaryButtonHoverBorderStyle',
      'secondaryButtonHoverBorderColor',
    ],
  },
  directoryListBorderColor: {
    none: 'directoryListBorderColor',
    values: [
      'directoryListBorderWidth',
      'directoryListBorderStyle',
     ...