Convert Tailwind CSS classes into Tailwind elm-css Functions

tailwind-string-to-elm.js

// Usage:
// node tailwind-string-to-elm.js flex hover:mt-3 mt-2 sm:mt-0 sm:pt-1 md:w-auto
// node tailwind-string-to-elm.js flex md:w-auto | pbcopy
//
// Script will throw if there ia an unrecognised pseudo=class eg. invalid:border-red-500

const [nodeCmd, scriptFile, ...classes] = process.argv;

const twElm = {
  base: [],
  // pseudo classes
  focus: [],
  hover: [],
  // breakpoints pseudo classes
  sm: [],
  md: [],
  lg: [],
  xl: [],
  xxl: []
};

classes.forEach((classString) => {
  const [pseudoClass, className] = classString.split(':');
  if (className == null) {
    twElm.base.push(toElmTw(pseudoClass));
  } else {
    // This will throw undefined when pseudoClass is not found
    twElm[pseudoClass].push(toElmTw(className));
  }
});

const flattenArray = [twElm.base.join('\n,')];
['focus', 'hover'].forEach((pseudoClass) => {
  if (twElm[pseudoClass].length > 0) {
    flattenArray.push(
      `Css.${pseudoClass} \n[` + twElm[pseudoClass].join('\n,') + '\n]'
    );
  }
});
['sm', 'md', 'lg', 'xl', 'xxl'].forEach((breakpoint) => {
  if (twElm[breakpoint].length > 0) {
    flattenArray.push(
      `Bp.${breakpoint} \n[` + twElm[breakpoint].join('\n,') + '\n]'
    );
  }
});

console.log('[\n' + flattenArray.join('\n,') + '\n]');

function toElmTw(className) {
  return `Tw.${className.replace(/-/g, '_')}`;
}