svg-join.js

#!/usr/bin/env node
'use strict';

/* eslint "object-property-newline": 0 */
/* eslint "camelcase": 0 */

const fs = require('fs-extra');
const glob = require('glob-promise');
const xmldoc = require('xmldoc');
const path = require('path');

const addPX = x => (isFinite(x) ? x + 'px' : x);
const parseUnit = (value = '') => value.replace(/[\d.\s]/g, '');

function errOut(fname, message) {
  console.error(`File: ${fname}\n${message}`);
}

function lookslike(src, trg, filter = []) {
  if (filter.length === 0) filter = Object.keys(src);
  return filter.every(x => src[x] && src[x] === trg[x]);
}

function equals(src, trg) {
  const filter = Object.keys(src);
  return (
    filter.length === Object.keys(trg).length &&
    filter.every(x => src[x] === trg[x])
  );
}

// obj - object, filter - array or object
function deletelike(obj, filter) {
  if (!Array.isArray(filter)) filter = Object.keys(filter);
  filter.forEach(x => delete obj[x]);
}

function CSS_escape(str) {
  return str
    .replace(/([!#$%&()*+,.\\/;<=>?@[\]^`{|}~])/g, '\\$1')
    .replace(/:/g, '\\3A ');
}

function style_keys(str) {
  let items = str.match(/\s?[\w-]+:.*?(;|$)/g);
  return items.map(x => x.split(':')[0].trim());
}

// names - array, attr - object
function style_format(names, attr) {
  let pad = '  ';
  let head = '.' + names.join(',\n.') + ' {\n';
  let body = Object.keys(attr)
    .map(x => `${pad}${x}: ${attr[x]};\n`)
    .join('');
  return head + body + '}\n';
}

// style - array, attr - object
function wipe_style_format(style, attr) {
  return style_format(
    style.map(x => {
      deletelike(x.attr, attr);
      return x.name;
    }),
    attr
  );
}

console.log(
  `SVG-Join ${
    require('./package.json').version
  } Join svg files in symbol collection.`
);
const argv = require('yargs')
  .options({
    s: {
      alias: 'source',
      type: 'string',
      demand: true,
      describe: 'the source directory with filename mask in glob format',
    },
    o: {
      alias: 'output',
      type: 'string',
      default: '.',
      describe: 'the output directory',
    },
    n: {
      alias: 'name',
      type: 'string',
      default: 'svg-bundle',
      describe: 'file name (without ext.) for bundles (SVG & CSS)',
    },
    cssName: {
      type: 'string',
      describe: 'file name (with ext.) for CSS bundle (if different)',
    },
    p: {
      alias: 'prefix',
      type: 'string',
      default: 'svg_',
      describe: 'prefix for CSS selectors',
    },
    m: {
      alias: 'mono',
      type: 'boolean',
      default: false,
      describe: 'extract presentation attributes from single-styled SVG to CSS',
    },
    calcSide: {
      type: 'boolean',
      default: false,
      describe: 'calculate omitted side from viewBox values',
    },
  })
  .example(
    'svg-join -s "./svg/*.svg" -o ./public -n mybundle',
    'Will create mybundle.svg and mybundle.css in public folder.'
  )
  .example('svg-join -s "/your/path/**/*.svg"', 'Find SVG files in subfolders.')
  .strict().argv;

const svgout = path.join(argv.output, argv.name + '.svg');
const cssout = path.join(argv.output, argv.cssName || argv.name + '.css');
const header = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
`;
const preserve = new Set(['viewbox', 'preserveaspectratio']);
const presentation = new Set([
  'alignment-baseline',
  'baseline-shift',
  'clip',
  'clip-path',
  'clip-rule',
  'color',
  'color-interpolation',
  'color-interpolation-filters',
  'color-profile',
  'color-rendering',
  'cursor',
  'direction',
  'display',
  'dominant-baseline',
  'enable-background',
  'fill',
  'fill-opacity',
  'fill-rule',
  'filter',
  'flood-color',
  'flood-opacity',
  'font-family',
  'font-size',
  'font-size-adjust',
  'font-stretch',
  'font-style',
  'font-variant',
  'font-weight',
  'glyph-orientation-horizontal',
  'glyph-orientation-vertical',
  'image-rendering',
  'kerning',
  'letter-spacing',
  'lighting-color',
  'marker-end',
  'marker-mid',
  'marker-start',
  'mask',
  'opacity',
  'overflow',
  'pointer-events',
  'shape-rendering',
  'stop-color',
  'stop-opacity',
  'stroke',
  'stroke-dasharray',
  'stroke-dashoffset',
  'stroke-linecap',
  'stroke-linejoin',
  'stroke-miterlimit',
  'stroke-opacity',
  'stroke-width',
  'text-anchor',
  'text-decoration',
  'text-rendering',
  'unicode-bidi',
  'visibility',
  'word-spacing',
  'writing-mode',
]);
const units = new Set(['em', 'rem', 'px']);
const round = new Set(['px']);
const encoding = 'utf8';
let symbols = [];
let total = 0;
let processed = 0;

async function main() {
  const file = fs.createWriteStream(svgout, { defaultEncoding: encoding });
  file.write(header);
  const globFiles = await glob(argv.source, { nocase: true });
  const fnames = globFiles.filter(x => x !== svgout);
  fnames.sort();

  for (let i = 0; i < fnames.length; i++) {
    const fname = fnames[i];
    total++;
    try {
      const body = await fs.readFile(fname, encoding);
      try {
        const doc = new xmldoc.XmlDocument(body);
        if (doc.name.toLowerCase() !== 'svg') {
          throw new Error('Error! The root element must be SVG.');
        }

        let width = 'auto';
        let height = 'auto';
        if (doc.attr.viewBox) {
          let vbox = doc.attr.viewBox.split(/\s+/);
          if (vbox.length === 4) {
            width = +vbox[2] - vbox[0];
            height = +vbox[3] - vbox[1];

            if (argv.calcSide) {
              let w = parseFloat(doc.attr.width);
              let wu = parseUnit(doc.attr.width);
              let h = parseFloat(doc.attr.height);
              let hu = parseUnit(doc.attr.height);
              if (!!w && units.has(wu) && !h) {
                h = (height / width) * w;
                h = round.has(wu) ? Math.round(h) : h.toFixed(4);
                doc.attr.height = h + wu;
              } else if (!!h && units.has(hu) && !w) {
                w = (width / height) * h;
                w = round.has(hu) ? Math.round(w) : w.toFixed(4);
                doc.attr.width = w + hu;
              }
            }
          }
        }
        const rule = {
          attr: {
            width: addPX(doc.attr.width || width),
            height: addPX(doc.attr.height || height),
          },
        };

        doc.name = 'symbol';
        Object.keys(doc.attr).forEach(x => {
          if (!preserve.has(x.toLowerCase())) delete doc.attr[x];
        });
        doc.attr.id = path
          .basename(fname, path.extname(fname))
          .replace(/\s/g, '_')
          .replace(/['"]/g, '');
        rule.name = argv.prefix + CSS_escape(doc.attr.id);

        if (argv.mono) {
          const styled_children = doc.children.filter(x => {
            let keys = Object.keys(x.attr);
            if (x.attr.style) keys = keys.concat(style_keys(x.attr.style));
            return keys.some(y => presentation.has(y));
          });
          if (styled_children.length === 1) {
            Object.keys(styled_children[0].attr)
              .filter(x => presentation.has(x))
              .forEach(y => {
                rule.attr[y] = styled_children[0].attr[y];
                delete styled_children[0].attr[y];
              });
          }
        }

        symbols.push(rule);
        processed++;
        await file.write(doc.toString({ compressed: true }) + '\n');
      } catch (e) {
        errOut(fname, e.message);
      }
    } catch (e) {
      console.error(e.message);
    }
  }

  file.end('</svg>');
  // create and optimize css
  let style = '';
  const wh = ['width', 'height'];
  symbols.forEach((symb, index) => {
    if (Object.keys(symb.attr).length === 0) return;
    const rest_symbols = symbols.slice(index);
    let attrs = Object.assign({}, symb.attr);
    let same_size = rest_symbols.filter(x => lookslike(attrs, x.attr, wh));
    let same_style = rest_symbols.filter(x => lookslike(attrs, x.attr));
    if (same_size.length > same_style.length) {
      same_size = same_size.map(x => {
        deletelike(x.attr, wh);
        return x.name;
      });
      let { width, height } = attrs;
      style += style_format(same_size, { width, height });
      if (Object.keys(symb.attr).length > 0) {
        attrs = Object.assign({}, symb.attr);
        same_style = rest_symbols.filter(x => equals(attrs, x.attr));
        style += wipe_style_format(same_style, attrs);
      }
    } else {
      style += wipe_style_format(same_style, attrs);
    }
  });
  await fs.writeFile(cssout, style, encoding);
  console.log(`Successfully processed files: ${processed}/${total}.`);
}
main();