update-iconset.js

#!/usr/bin/env node

const crypto = require('crypto');
const fs = require("fs/promises");
const path = require("path");

const selection = require("../source/icons/selection.json");

const buildBaseRules = (hash) => `
@font-face {
  font-family: 'pirati-ui';
  src:  url('../fonts/pirati-ui.eot?${hash}');
  src:  url('../fonts/pirati-ui.eot?${hash}#iefix') format('embedded-opentype'),
    url('../fonts/pirati-ui.ttf?${hash}') format('truetype'),
    url('../fonts/pirati-ui.woff?${hash}') format('woff'),
    url('../fonts/pirati-ui.svg?${hash}#pirati-ui') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ico--"], [class*=" ico--"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'pirati-ui' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`;

const buildIconRules = (icons) => {
  return icons.map(icon => `.${icon.class}:before { content: "${icon.content}"; }`).join("\n");
}

const getHash = (icons) => {
  return crypto.createHash('md5').update(icons, 'utf8').digest('hex');
}

const buildRuleset = (icons) => {
  const iconRules = buildIconRules(icons);
  const hash = getHash(iconRules);
  const baseRules = buildBaseRules(hash);
  return [baseRules, iconRules].join("\n");
}

const buildPattern = (icons) => {
  const body = icons.map(icon => `
<div class="card">
  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
    <i class="${icon.class}"></i>
  </div>
  <div class="card__body p-2 text-2xs">
    <code>.${icon.class}</code>
  </div>
</div>`).join("\n");
  return `<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">${body}</div>`;
}

async function writeFile(path, content) {
  let filehandle;

  try {
    filehandle = await fs.open(path, "w");
    filehandle.write(content);
  } finally {
    if (filehandle !== undefined)
      await filehandle.close();
  }
}


const prefix = selection.preferences.fontPref.prefix;
const icons = selection.icons.map(icon => {
  const content = `${'\\'}${icon.properties.code.toString(16)}`;
  return icon.properties.name.split(", ").map(iconName => ({
    class: `${prefix}${iconName}`,
    content
  }));
}).flat();

// Write PCSS
writeFile(path.join(path.dirname(__filename), "..", "source", "css", "atoms", "icons.pcss"), buildRuleset(icons));

// Write Pattern Lab pattern
writeFile(path.join(path.dirname(__filename), "..", "source", "_patterns", "00-atoms", "02-icons", "icons.mustache"), buildPattern(icons));