Replaces tailwind 0.x color CSS classes with 1.0 names

tailwind-1-color-update.js

const fs = require('fs');
const path = require('path');

/**
 * Replaces tailwind 0.x color CSS classes with 1.0 names
 * E.g. "bg-grey-light" is replaced with "bg-gray-400"
 *
 * This is a "dumb" replacement that searches for string patterns across the
 * specified files,
 *
 * Usage
 * node tailwind-1-color-update.js directory extensions
 *
 * Example
 * node tailwind-1-color-update.js src/ js,jsx,html
 */


if (process.argv.length !== 4) {
  throw new Error('Please specify both a directory and file extensions');
}

const directoryToTransform = process.argv[2];
const fileExtensionsToInclude = process.argv[3].split(',').map(ext => `.${ext}`);

if (directoryToTransform.length <= 0) {
  throw new Error('Please specify a directory to transform');
}

if (fileExtensionsToInclude.length <= 0) {
  throw new Error('Please specify at least one file extension');
}

function buildReplacementsList() {
  let colorReplacements = {
      'black': 'gray-900',
      'grey-darkest': 'gray-800',
      'grey-darker': 'gray-700',
      'grey-dark': 'gray-600',
      'grey': 'gray-500',
      'grey-light': 'gray-400',
      'grey-lighter': 'gray-200',
      'grey-lightest': 'gray-100'
  };

  const colors = ['smoke','red','orange','yellow','green','teal','blue','indigo','purple','pink'];

  colors.forEach(color => {
      colorReplacements[`${color}-darkest`] = `${color}-900`;
      colorReplacements[`${color}-darker`] = `${color}-800`;
      colorReplacements[`${color}-dark`] = `${color}-600`;
      colorReplacements[`${color}`] = `${color}-500`;
      colorReplacements[`${color}-light`] = `${color}-400`;
      colorReplacements[`${color}-lighter`] = `${color}-200`;
      colorReplacements[`${color}-lightest`] = `${color}-100`;
  });

  const colorPrefixes = [
    'text-',
    'border-',
    'bg-'
  ];

  let allReplacements = {};

  Object.keys(colorReplacements).forEach(colorReplacement => {
    colorPrefixes.forEach(prefix => {
      allReplacements[prefix + colorReplacement] = prefix + colorReplacements[colorReplacement];
    });
  });

  return allReplacements;
}

function gatherFilesList(dir) {
  const result = [];
  const files = [dir];
  do {
    const filepath = files.pop();
    const stat = fs.lstatSync(filepath);
    if (stat.isDirectory()) {
      fs
        .readdirSync(filepath)
        .forEach(f => files.push(path.join(filepath, f)));
    } else if (stat.isFile()) {
      const extension = path.extname(filepath);

      if (fileExtensionsToInclude.indexOf(extension) !== -1) {
        result.push(path.relative(dir, filepath));
      }
    }
  } while (files.length !== 0);

  return result;
}

function performReplacement(dir) {
  const replacements = buildReplacementsList();

  gatherFilesList(dir).forEach(filename => {
    const fullPath = path.resolve(directoryToTransform + filename);

    fs.readFile(fullPath, 'utf8', (err, data) => {
      console.log(fullPath);

      if (err) {
        return console.log(err);
      }

      const replacedData = performReplacements(data, replacements);

      fs.writeFile(fullPath, replacedData, 'utf8', function (err) {
         if (err) {
          return console.log(err);
        }
      });
    });
  })
}

function performReplacements(str, replacements) {
  Object.keys(replacements).forEach(search => {
    const regex = new RegExp(`${search}(?!(-|[a-z]))`, 'gm');
    str = str.replace(regex, replacements[search]);
  })

  return str;
};

performReplacement(directoryToTransform);