svgo-v2 2.8.0

package/lib/css-tools.js

@@ -0,0 +1,239 @@
+'use strict';
+
+var csstree = require('css-tree-v2'),
+  List = csstree.List,
+  stable = require('stable'),
+  specificity = require('csso/lib/restructure/prepare/specificity');
+
+/**
+ * Flatten a CSS AST to a selectors list.
+ *
+ * @param {import('css-tree-v2').CssNode} cssAst css-tree-v2 AST to flatten
+ * @return {Array} selectors
+ */
+function flattenToSelectors(cssAst) {
+  var selectors = [];
+
+  csstree.walk(cssAst, {
+    visit: 'Rule',
+    enter: function (node) {
+      if (node.type !== 'Rule') {
+        return;
+      }
+
+      var atrule = this.atrule;
+      var rule = node;
+
+      node.prelude.children.each(function (selectorNode, selectorItem) {
+        var selector = {
+          item: selectorItem,
+          atrule: atrule,
+          rule: rule,
+          pseudos: /** @type {{item: any; list: any[]}[]} */ ([]),
+        };
+
+        selectorNode.children.each(function (
+          selectorChildNode,
+          selectorChildItem,
+          selectorChildList
+        ) {
+          if (
+            selectorChildNode.type === 'PseudoClassSelector' ||
+            selectorChildNode.type === 'PseudoElementSelector'
+          ) {
+            selector.pseudos.push({
+              item: selectorChildItem,
+              list: selectorChildList,
+            });
+          }
+        });
+
+        selectors.push(selector);
+      });
+    },
+  });
+
+  return selectors;
+}
+
+/**
+ * Filter selectors by Media Query.
+ *
+ * @param {Array} selectors to filter
+ * @param {Array} useMqs Array with strings of media queries that should pass (<name> <expression>)
+ * @return {Array} Filtered selectors that match the passed media queries
+ */
+function filterByMqs(selectors, useMqs) {
+  return selectors.filter(function (selector) {
+    if (selector.atrule === null) {
+      return ~useMqs.indexOf('');
+    }
+
+    var mqName = selector.atrule.name;
+    var mqStr = mqName;
+    if (
+      selector.atrule.expression &&
+      selector.atrule.expression.children.first().type === 'MediaQueryList'
+    ) {
+      var mqExpr = csstree.generate(selector.atrule.expression);
+      mqStr = [mqName, mqExpr].join(' ');
+    }
+
+    return ~useMqs.indexOf(mqStr);
+  });
+}
+
+/**
+ * Filter selectors by the pseudo-elements and/or -classes they contain.
+ *
+ * @param {Array} selectors to filter
+ * @param {Array} usePseudos Array with strings of single or sequence of pseudo-elements and/or -classes that should pass
+ * @return {Array} Filtered selectors that match the passed pseudo-elements and/or -classes
+ */
+function filterByPseudos(selectors, usePseudos) {
+  return selectors.filter(function (selector) {
+    var pseudoSelectorsStr = csstree.generate({
+      type: 'Selector',
+      children: new List().fromArray(
+        selector.pseudos.map(function (pseudo) {
+          return pseudo.item.data;
+        })
+      ),
+    });
+    return ~usePseudos.indexOf(pseudoSelectorsStr);
+  });
+}
+
+/**
+ * Remove pseudo-elements and/or -classes from the selectors for proper matching.
+ *
+ * @param {Array} selectors to clean
+ * @return {void}
+ */
+function cleanPseudos(selectors) {
+  selectors.forEach(function (selector) {
+    selector.pseudos.forEach(function (pseudo) {
+      pseudo.list.remove(pseudo.item);
+    });
+  });
+}
+
+/**
+ * Compares two selector specificities.
+ * extracted from https://github.com/keeganstreet/specificity/blob/master/specificity.js#L211
+ *
+ * @param {Array} aSpecificity Specificity of selector A
+ * @param {Array} bSpecificity Specificity of selector B
+ * @return {number} Score of selector specificity A compared to selector specificity B
+ */
+function compareSpecificity(aSpecificity, bSpecificity) {
+  for (var i = 0; i < 4; i += 1) {
+    if (aSpecificity[i] < bSpecificity[i]) {
+      return -1;
+    } else if (aSpecificity[i] > bSpecificity[i]) {
+      return 1;
+    }
+  }
+
+  return 0;
+}
+
+/**
+ * Compare two simple selectors.
+ *
+ * @param {Object} aSimpleSelectorNode Simple selector A
+ * @param {Object} bSimpleSelectorNode Simple selector B
+ * @return {number} Score of selector A compared to selector B
+ */
+function compareSimpleSelectorNode(aSimpleSelectorNode, bSimpleSelectorNode) {
+  var aSpecificity = specificity(aSimpleSelectorNode),
+    bSpecificity = specificity(bSimpleSelectorNode);
+  return compareSpecificity(aSpecificity, bSpecificity);
+}
+
+function _bySelectorSpecificity(selectorA, selectorB) {
+  return compareSimpleSelectorNode(selectorA.item.data, selectorB.item.data);
+}
+
+/**
+ * Sort selectors stably by their specificity.
+ *
+ * @param {Array} selectors to be sorted
+ * @return {Array} Stable sorted selectors
+ */
+function sortSelectors(selectors) {
+  return stable(selectors, _bySelectorSpecificity);
+}
+
+/**
+ * Convert a css-tree-v2 AST style declaration to CSSStyleDeclaration property.
+ *
+ * @param {import('css-tree-v2').CssNode} declaration css-tree-v2 style declaration
+ * @return {Object} CSSStyleDeclaration property
+ */
+function csstreeToStyleDeclaration(declaration) {
+  var propertyName = declaration.property,
+    propertyValue = csstree.generate(declaration.value),
+    propertyPriority = declaration.important ? 'important' : '';
+  return {
+    name: propertyName,
+    value: propertyValue,
+    priority: propertyPriority,
+  };
+}
+
+/**
+ * Gets the CSS string of a style element
+ *
+ * @param {Object} elem style element
+ * @return {string} CSS string or empty array if no styles are set
+ */
+function getCssStr(elem) {
+  if (
+    elem.children.length > 0 &&
+    (elem.children[0].type === 'text' || elem.children[0].type === 'cdata')
+  ) {
+    return elem.children[0].value;
+  }
+  return '';
+}
+
+/**
+ * Sets the CSS string of a style element
+ *
+ * @param {Object} elem style element
+ * @param {string} css string to be set
+ * @return {string} reference to field with CSS
+ */
+function setCssStr(elem, css) {
+  if (elem.children.length === 0) {
+    elem.children.push({
+      type: 'text',
+      value: '',
+    });
+  }
+
+  if (elem.children[0].type !== 'text' && elem.children[0].type !== 'cdata') {
+    return css;
+  }
+
+  elem.children[0].value = css;
+
+  return css;
+}
+
+module.exports.flattenToSelectors = flattenToSelectors;
+
+module.exports.filterByMqs = filterByMqs;
+module.exports.filterByPseudos = filterByPseudos;
+module.exports.cleanPseudos = cleanPseudos;
+
+module.exports.compareSpecificity = compareSpecificity;
+module.exports.compareSimpleSelectorNode = compareSimpleSelectorNode;
+
+module.exports.sortSelectors = sortSelectors;
+
+module.exports.csstreeToStyleDeclaration = csstreeToStyleDeclaration;
+
+module.exports.getCssStr = getCssStr;
+module.exports.setCssStr = setCssStr;

package/lib/parser.js

@@ -0,0 +1,259 @@
+'use strict';
+
+/**
+ * @typedef {import('./types').XastNode} XastNode
+ * @typedef {import('./types').XastInstruction} XastInstruction
+ * @typedef {import('./types').XastDoctype} XastDoctype
+ * @typedef {import('./types').XastComment} XastComment
+ * @typedef {import('./types').XastRoot} XastRoot
+ * @typedef {import('./types').XastElement} XastElement
+ * @typedef {import('./types').XastCdata} XastCdata
+ * @typedef {import('./types').XastText} XastText
+ * @typedef {import('./types').XastParent} XastParent
+ */
+
+// @ts-ignore sax will be replaced with something else later
+const SAX = require('@trysound/sax');
+const JSAPI = require('./svgo/jsAPI.js');
+const { textElems } = require('../plugins/_collections.js');
+
+class SvgoParserError extends Error {
+  /**
+   * @param message {string}
+   * @param line {number}
+   * @param column {number}
+   * @param source {string}
+   * @param file {void | string}
+   */
+  constructor(message, line, column, source, file) {
+    super(message);
+    this.name = 'SvgoParserError';
+    this.message = `${file || '<input>'}:${line}:${column}: ${message}`;
+    this.reason = message;
+    this.line = line;
+    this.column = column;
+    this.source = source;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SvgoParserError);
+    }
+  }
+  toString() {
+    const lines = this.source.split(/\r?\n/);
+    const startLine = Math.max(this.line - 3, 0);
+    const endLine = Math.min(this.line + 2, lines.length);
+    const lineNumberWidth = String(endLine).length;
+    const startColumn = Math.max(this.column - 54, 0);
+    const endColumn = Math.max(this.column + 20, 80);
+    const code = lines
+      .slice(startLine, endLine)
+      .map((line, index) => {
+        const lineSlice = line.slice(startColumn, endColumn);
+        let ellipsisPrefix = '';
+        let ellipsisSuffix = '';
+        if (startColumn !== 0) {
+          ellipsisPrefix = startColumn > line.length - 1 ? ' ' : '…';
+        }
+        if (endColumn < line.length - 1) {
+          ellipsisSuffix = '…';
+        }
+        const number = startLine + 1 + index;
+        const gutter = ` ${number.toString().padStart(lineNumberWidth)} | `;
+        if (number === this.line) {
+          const gutterSpacing = gutter.replace(/[^|]/g, ' ');
+          const lineSpacing = (
+            ellipsisPrefix + line.slice(startColumn, this.column - 1)
+          ).replace(/[^\t]/g, ' ');
+          const spacing = gutterSpacing + lineSpacing;
+          return `>${gutter}${ellipsisPrefix}${lineSlice}${ellipsisSuffix}\n ${spacing}^`;
+        }
+        return ` ${gutter}${ellipsisPrefix}${lineSlice}${ellipsisSuffix}`;
+      })
+      .join('\n');
+    return `${this.name}: ${this.message}\n\n${code}\n`;
+  }
+}
+
+const entityDeclaration = /<!ENTITY\s+(\S+)\s+(?:'([^']+)'|"([^"]+)")\s*>/g;
+
+const config = {
+  strict: true,
+  trim: false,
+  normalize: false,
+  lowercase: true,
+  xmlns: true,
+  position: true,
+};
+
+/**
+ * Convert SVG (XML) string to SVG-as-JS object.
+ *
+ * @type {(data: string, from?: string) => XastRoot}
+ */
+const parseSvg = (data, from) => {
+  const sax = SAX.parser(config.strict, config);
+  /**
+   * @type {XastRoot}
+   */
+  const root = new JSAPI({ type: 'root', children: [] });
+  /**
+   * @type {XastParent}
+   */
+  let current = root;
+  /**
+   * @type {Array<XastParent>}
+   */
+  const stack = [root];
+
+  /**
+   * @type {<T extends XastNode>(node: T) => T}
+   */
+  const pushToContent = (node) => {
+    const wrapped = new JSAPI(node, current);
+    current.children.push(wrapped);
+    return wrapped;
+  };
+
+  /**
+   * @type {(doctype: string) => void}
+   */
+  sax.ondoctype = (doctype) => {
+    /**
+     * @type {XastDoctype}
+     */
+    const node = {
+      type: 'doctype',
+      // TODO parse doctype for name, public and system to match xast
+      name: 'svg',
+      data: {
+        doctype,
+      },
+    };
+    pushToContent(node);
+    const subsetStart = doctype.indexOf('[');
+    if (subsetStart >= 0) {
+      entityDeclaration.lastIndex = subsetStart;
+      let entityMatch = entityDeclaration.exec(data);
+      while (entityMatch != null) {
+        sax.ENTITIES[entityMatch[1]] = entityMatch[2] || entityMatch[3];
+        entityMatch = entityDeclaration.exec(data);
+      }
+    }
+  };
+
+  /**
+   * @type {(data: { name: string, body: string }) => void}
+   */
+  sax.onprocessinginstruction = (data) => {
+    /**
+     * @type {XastInstruction}
+     */
+    const node = {
+      type: 'instruction',
+      name: data.name,
+      value: data.body,
+    };
+    pushToContent(node);
+  };
+
+  /**
+   * @type {(comment: string) => void}
+   */
+  sax.oncomment = (comment) => {
+    /**
+     * @type {XastComment}
+     */
+    const node = {
+      type: 'comment',
+      value: comment.trim(),
+    };
+    pushToContent(node);
+  };
+
+  /**
+   * @type {(cdata: string) => void}
+   */
+  sax.oncdata = (cdata) => {
+    /**
+     * @type {XastCdata}
+     */
+    const node = {
+      type: 'cdata',
+      value: cdata,
+    };
+    pushToContent(node);
+  };
+
+  /**
+   * @type {(data: { name: string, attributes: Record<string, { value: string }>}) => void}
+   */
+  sax.onopentag = (data) => {
+    /**
+     * @type {XastElement}
+     */
+    let element = {
+      type: 'element',
+      name: data.name,
+      attributes: {},
+      children: [],
+    };
+    for (const [name, attr] of Object.entries(data.attributes)) {
+      element.attributes[name] = attr.value;
+    }
+    element = pushToContent(element);
+    current = element;
+    stack.push(element);
+  };
+
+  /**
+   * @type {(text: string) => void}
+   */
+  sax.ontext = (text) => {
+    if (current.type === 'element') {
+      // prevent trimming of meaningful whitespace inside textual tags
+      if (textElems.includes(current.name)) {
+        /**
+         * @type {XastText}
+         */
+        const node = {
+          type: 'text',
+          value: text,
+        };
+        pushToContent(node);
+      } else if (/\S/.test(text)) {
+        /**
+         * @type {XastText}
+         */
+        const node = {
+          type: 'text',
+          value: text.trim(),
+        };
+        pushToContent(node);
+      }
+    }
+  };
+
+  sax.onclosetag = () => {
+    stack.pop();
+    current = stack[stack.length - 1];
+  };
+
+  /**
+   * @type {(e: any) => void}
+   */
+  sax.onerror = (e) => {
+    const error = new SvgoParserError(
+      e.reason,
+      e.line + 1,
+      e.column,
+      data,
+      from
+    );
+    if (e.message.indexOf('Unexpected end') === -1) {
+      throw error;
+    }
+  };
+
+  sax.write(data).close();
+  return root;
+};
+exports.parseSvg = parseSvg;