svgo-v2 2.8.0

package/plugins/minifyStyles.js

@@ -0,0 +1,148 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ */
+
+const csso = require('csso');
+
+exports.type = 'visitor';
+exports.name = 'minifyStyles';
+exports.active = true;
+exports.description =
+  'minifies styles and removes unused styles based on usage data';
+
+/**
+ * Minifies styles (<style> element + style attribute) using CSSO
+ *
+ * @author strarsis <strarsis@gmail.com>
+ *
+ * @type {import('../lib/types').Plugin<csso.MinifyOptions & Omit<csso.CompressOptions, 'usage'> & {
+ *   usage?: boolean | {
+ *     force?: boolean,
+ *     ids?: boolean,
+ *     classes?: boolean,
+ *     tags?: boolean
+ *   }
+ * }>}
+ */
+exports.fn = (_root, { usage, ...params }) => {
+  let enableTagsUsage = true;
+  let enableIdsUsage = true;
+  let enableClassesUsage = true;
+  // force to use usage data even if it unsafe (document contains <script> or on* attributes)
+  let forceUsageDeoptimized = false;
+  if (typeof usage === 'boolean') {
+    enableTagsUsage = usage;
+    enableIdsUsage = usage;
+    enableClassesUsage = usage;
+  } else if (usage) {
+    enableTagsUsage = usage.tags == null ? true : usage.tags;
+    enableIdsUsage = usage.ids == null ? true : usage.ids;
+    enableClassesUsage = usage.classes == null ? true : usage.classes;
+    forceUsageDeoptimized = usage.force == null ? false : usage.force;
+  }
+  /**
+   * @type {Array<XastElement>}
+   */
+  const styleElements = [];
+  /**
+   * @type {Array<XastElement>}
+   */
+  const elementsWithStyleAttributes = [];
+  let deoptimized = false;
+  /**
+   * @type {Set<string>}
+   */
+  const tagsUsage = new Set();
+  /**
+   * @type {Set<string>}
+   */
+  const idsUsage = new Set();
+  /**
+   * @type {Set<string>}
+   */
+  const classesUsage = new Set();
+
+  return {
+    element: {
+      enter: (node) => {
+        // detect deoptimisations
+        if (node.name === 'script') {
+          deoptimized = true;
+        }
+        for (const name of Object.keys(node.attributes)) {
+          if (name.startsWith('on')) {
+            deoptimized = true;
+          }
+        }
+        // collect tags, ids and classes usage
+        tagsUsage.add(node.name);
+        if (node.attributes.id != null) {
+          idsUsage.add(node.attributes.id);
+        }
+        if (node.attributes.class != null) {
+          for (const className of node.attributes.class.split(/\s+/)) {
+            classesUsage.add(className);
+          }
+        }
+        // collect style elements or elements with style attribute
+        if (node.name === 'style' && node.children.length !== 0) {
+          styleElements.push(node);
+        } else if (node.attributes.style != null) {
+          elementsWithStyleAttributes.push(node);
+        }
+      },
+    },
+
+    root: {
+      exit: () => {
+        /**
+         * @type {csso.Usage}
+         */
+        const cssoUsage = {};
+        if (deoptimized === false || forceUsageDeoptimized === true) {
+          if (enableTagsUsage && tagsUsage.size !== 0) {
+            cssoUsage.tags = Array.from(tagsUsage);
+          }
+          if (enableIdsUsage && idsUsage.size !== 0) {
+            cssoUsage.ids = Array.from(idsUsage);
+          }
+          if (enableClassesUsage && classesUsage.size !== 0) {
+            cssoUsage.classes = Array.from(classesUsage);
+          }
+        }
+        // minify style elements
+        for (const node of styleElements) {
+          if (
+            node.children[0].type === 'text' ||
+            node.children[0].type === 'cdata'
+          ) {
+            const cssText = node.children[0].value;
+            const minified = csso.minify(cssText, {
+              ...params,
+              usage: cssoUsage,
+            }).css;
+            // preserve cdata if necessary
+            // TODO split cdata -> text optimisation into separate plugin
+            if (cssText.indexOf('>') >= 0 || cssText.indexOf('<') >= 0) {
+              node.children[0].type = 'cdata';
+              node.children[0].value = minified;
+            } else {
+              node.children[0].type = 'text';
+              node.children[0].value = minified;
+            }
+          }
+        }
+        // minify style attributes
+        for (const node of elementsWithStyleAttributes) {
+          // style attribute
+          const elemStyle = node.attributes.style;
+          node.attributes.style = csso.minifyBlock(elemStyle, {
+            ...params,
+          }).css;
+        }
+      },
+    },
+  };
+};

package/plugins/moveElemsAttrsToGroup.js

@@ -0,0 +1,130 @@
+'use strict';
+
+const { visit } = require('../lib/xast.js');
+const { inheritableAttrs, pathElems } = require('./_collections.js');
+
+exports.type = 'visitor';
+exports.name = 'moveElemsAttrsToGroup';
+exports.active = true;
+exports.description = 'Move common attributes of group children to the group';
+
+/**
+ * Move common attributes of group children to the group
+ *
+ * @example
+ * <g attr1="val1">
+ *     <g attr2="val2">
+ *         text
+ *     </g>
+ *     <circle attr2="val2" attr3="val3"/>
+ * </g>
+ *              ⬇
+ * <g attr1="val1" attr2="val2">
+ *     <g>
+ *         text
+ *     </g>
+ *    <circle attr3="val3"/>
+ * </g>
+ *
+ * @author Kir Belevich
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ */
+exports.fn = (root) => {
+  // find if any style element is present
+  let deoptimizedWithStyles = false;
+  visit(root, {
+    element: {
+      enter: (node) => {
+        if (node.name === 'style') {
+          deoptimizedWithStyles = true;
+        }
+      },
+    },
+  });
+
+  return {
+    element: {
+      exit: (node) => {
+        // process only groups with more than 1 children
+        if (node.name !== 'g' || node.children.length <= 1) {
+          return;
+        }
+
+        // deoptimize the plugin when style elements are present
+        // selectors may rely on id, classes or tag names
+        if (deoptimizedWithStyles) {
+          return;
+        }
+
+        /**
+         * find common attributes in group children
+         * @type {Map<string, string>}
+         */
+        const commonAttributes = new Map();
+        let initial = true;
+        let everyChildIsPath = true;
+        for (const child of node.children) {
+          if (child.type === 'element') {
+            if (pathElems.includes(child.name) === false) {
+              everyChildIsPath = false;
+            }
+            if (initial) {
+              initial = false;
+              // collect all inheritable attributes from first child element
+              for (const [name, value] of Object.entries(child.attributes)) {
+                // consider only inheritable attributes
+                if (inheritableAttrs.includes(name)) {
+                  commonAttributes.set(name, value);
+                }
+              }
+            } else {
+              // exclude uncommon attributes from initial list
+              for (const [name, value] of commonAttributes) {
+                if (child.attributes[name] !== value) {
+                  commonAttributes.delete(name);
+                }
+              }
+            }
+          }
+        }
+
+        // preserve transform on children when group has clip-path or mask
+        if (
+          node.attributes['clip-path'] != null ||
+          node.attributes.mask != null
+        ) {
+          commonAttributes.delete('transform');
+        }
+
+        // preserve transform when all children are paths
+        // so the transform could be applied to path data by other plugins
+        if (everyChildIsPath) {
+          commonAttributes.delete('transform');
+        }
+
+        // add common children attributes to group
+        for (const [name, value] of commonAttributes) {
+          if (name === 'transform') {
+            if (node.attributes.transform != null) {
+              node.attributes.transform = `${node.attributes.transform} ${value}`;
+            } else {
+              node.attributes.transform = value;
+            }
+          } else {
+            node.attributes[name] = value;
+          }
+        }
+
+        // delete common attributes from children
+        for (const child of node.children) {
+          if (child.type === 'element') {
+            for (const [name] of commonAttributes) {
+              delete child.attributes[name];
+            }
+          }
+        }
+      },
+    },
+  };
+};

package/plugins/moveGroupAttrsToElems.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const { pathElems, referencesProps } = require('./_collections.js');
+
+exports.name = 'moveGroupAttrsToElems';
+
+exports.type = 'perItem';
+
+exports.active = true;
+
+exports.description = 'moves some group attributes to the content elements';
+
+const pathElemsWithGroupsAndText = [...pathElems, 'g', 'text'];
+
+/**
+ * Move group attrs to the content elements.
+ *
+ * @example
+ * <g transform="scale(2)">
+ *     <path transform="rotate(45)" d="M0,0 L10,20"/>
+ *     <path transform="translate(10, 20)" d="M0,10 L20,30"/>
+ * </g>
+ *                          ⬇
+ * <g>
+ *     <path transform="scale(2) rotate(45)" d="M0,0 L10,20"/>
+ *     <path transform="scale(2) translate(10, 20)" d="M0,10 L20,30"/>
+ * </g>
+ *
+ * @param {Object} item current iteration item
+ * @return {Boolean} if false, item will be filtered out
+ *
+ * @author Kir Belevich
+ */
+exports.fn = function (item) {
+  // move group transform attr to content's pathElems
+  if (
+    item.type === 'element' &&
+    item.name === 'g' &&
+    item.children.length !== 0 &&
+    item.attributes.transform != null &&
+    Object.entries(item.attributes).some(
+      ([name, value]) =>
+        referencesProps.includes(name) && value.includes('url(')
+    ) === false &&
+    item.children.every(
+      (inner) =>
+        pathElemsWithGroupsAndText.includes(inner.name) &&
+        inner.attributes.id == null
+    )
+  ) {
+    for (const inner of item.children) {
+      const value = item.attributes.transform;
+      if (inner.attributes.transform != null) {
+        inner.attributes.transform = value + ' ' + inner.attributes.transform;
+      } else {
+        inner.attributes.transform = value;
+      }
+    }
+
+    delete item.attributes.transform;
+  }
+};

package/plugins/plugins.js

@@ -0,0 +1,56 @@
+'use strict';
+
+// builtin presets
+exports['preset-default'] = require('./preset-default.js');
+
+// builtin plugins
+exports.addAttributesToSVGElement = require('./addAttributesToSVGElement.js');
+exports.addClassesToSVGElement = require('./addClassesToSVGElement.js');
+exports.cleanupAttrs = require('./cleanupAttrs.js');
+exports.cleanupEnableBackground = require('./cleanupEnableBackground.js');
+exports.cleanupIDs = require('./cleanupIDs.js');
+exports.cleanupListOfValues = require('./cleanupListOfValues.js');
+exports.cleanupNumericValues = require('./cleanupNumericValues.js');
+exports.collapseGroups = require('./collapseGroups.js');
+exports.convertColors = require('./convertColors.js');
+exports.convertEllipseToCircle = require('./convertEllipseToCircle.js');
+exports.convertPathData = require('./convertPathData.js');
+exports.convertShapeToPath = require('./convertShapeToPath.js');
+exports.convertStyleToAttrs = require('./convertStyleToAttrs.js');
+exports.convertTransform = require('./convertTransform.js');
+exports.mergeStyles = require('./mergeStyles.js');
+exports.inlineStyles = require('./inlineStyles.js');
+exports.mergePaths = require('./mergePaths.js');
+exports.minifyStyles = require('./minifyStyles.js');
+exports.moveElemsAttrsToGroup = require('./moveElemsAttrsToGroup.js');
+exports.moveGroupAttrsToElems = require('./moveGroupAttrsToElems.js');
+exports.prefixIds = require('./prefixIds.js');
+exports.removeAttributesBySelector = require('./removeAttributesBySelector.js');
+exports.removeAttrs = require('./removeAttrs.js');
+exports.removeComments = require('./removeComments.js');
+exports.removeDesc = require('./removeDesc.js');
+exports.removeDimensions = require('./removeDimensions.js');
+exports.removeDoctype = require('./removeDoctype.js');
+exports.removeEditorsNSData = require('./removeEditorsNSData.js');
+exports.removeElementsByAttr = require('./removeElementsByAttr.js');
+exports.removeEmptyAttrs = require('./removeEmptyAttrs.js');
+exports.removeEmptyContainers = require('./removeEmptyContainers.js');
+exports.removeEmptyText = require('./removeEmptyText.js');
+exports.removeHiddenElems = require('./removeHiddenElems.js');
+exports.removeMetadata = require('./removeMetadata.js');
+exports.removeNonInheritableGroupAttrs = require('./removeNonInheritableGroupAttrs.js');
+exports.removeOffCanvasPaths = require('./removeOffCanvasPaths.js');
+exports.removeRasterImages = require('./removeRasterImages.js');
+exports.removeScriptElement = require('./removeScriptElement.js');
+exports.removeStyleElement = require('./removeStyleElement.js');
+exports.removeTitle = require('./removeTitle.js');
+exports.removeUnknownsAndDefaults = require('./removeUnknownsAndDefaults.js');
+exports.removeUnusedNS = require('./removeUnusedNS.js');
+exports.removeUselessDefs = require('./removeUselessDefs.js');
+exports.removeUselessStrokeAndFill = require('./removeUselessStrokeAndFill.js');
+exports.removeViewBox = require('./removeViewBox.js');
+exports.removeXMLNS = require('./removeXMLNS.js');
+exports.removeXMLProcInst = require('./removeXMLProcInst.js');
+exports.reusePaths = require('./reusePaths.js');
+exports.sortAttrs = require('./sortAttrs.js');
+exports.sortDefsChildren = require('./sortDefsChildren.js');

package/plugins/prefixIds.js

@@ -0,0 +1,241 @@
+'use strict';
+
+const csstree = require('css-tree-v2');
+const { referencesProps } = require('./_collections.js');
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ * @typedef {import('../lib/types').PluginInfo} PluginInfo
+ */
+
+exports.type = 'visitor';
+exports.name = 'prefixIds';
+exports.active = false;
+exports.description = 'prefix IDs';
+
+/**
+ * extract basename from path
+ * @type {(path: string) => string}
+ */
+const getBasename = (path) => {
+  // extract everything after latest slash or backslash
+  const matched = path.match(/[/\\]?([^/\\]+)$/);
+  if (matched) {
+    return matched[1];
+  }
+  return '';
+};
+
+/**
+ * escapes a string for being used as ID
+ * @type {(string: string) => string}
+ */
+const escapeIdentifierName = (str) => {
+  return str.replace(/[. ]/g, '_');
+};
+
+/**
+ * @type {(string: string) => string}
+ */
+const unquote = (string) => {
+  if (
+    (string.startsWith('"') && string.endsWith('"')) ||
+    (string.startsWith("'") && string.endsWith("'"))
+  ) {
+    return string.slice(1, -1);
+  }
+  return string;
+};
+
+/**
+ * prefix an ID
+ * @type {(prefix: string, name: string) => string}
+ */
+const prefixId = (prefix, value) => {
+  if (value.startsWith(prefix)) {
+    return value;
+  }
+  return prefix + value;
+};
+
+/**
+ * prefix an #ID
+ * @type {(prefix: string, name: string) => string | null}
+ */
+const prefixReference = (prefix, value) => {
+  if (value.startsWith('#')) {
+    return '#' + prefixId(prefix, value.slice(1));
+  }
+  return null;
+};
+
+/**
+ * Prefixes identifiers
+ *
+ * @author strarsis <strarsis@gmail.com>
+ *
+ * @type {import('../lib/types').Plugin<{
+ *   prefix?: boolean | string | ((node: XastElement, info: PluginInfo) => string),
+ *   delim?: string,
+ *   prefixIds?: boolean,
+ *   prefixClassNames?: boolean,
+ * }>}
+ */
+exports.fn = (_root, params, info) => {
+  const { delim = '__', prefixIds = true, prefixClassNames = true } = params;
+
+  return {
+    element: {
+      enter: (node) => {
+        /**
+         * prefix, from file name or option
+         * @type {string}
+         */
+        let prefix = 'prefix' + delim;
+        if (typeof params.prefix === 'function') {
+          prefix = params.prefix(node, info) + delim;
+        } else if (typeof params.prefix === 'string') {
+          prefix = params.prefix + delim;
+        } else if (params.prefix === false) {
+          prefix = '';
+        } else if (info.path != null && info.path.length > 0) {
+          prefix = escapeIdentifierName(getBasename(info.path)) + delim;
+        }
+
+        // prefix id/class selectors and url() references in styles
+        if (node.name === 'style') {
+          // skip empty <style/> elements
+          if (node.children.length === 0) {
+            return;
+          }
+
+          // parse styles
+          let cssText = '';
+          if (
+            node.children[0].type === 'text' ||
+            node.children[0].type === 'cdata'
+          ) {
+            cssText = node.children[0].value;
+          }
+          /**
+           * @type {null | csstree.CssNode}
+           */
+          let cssAst = null;
+          try {
+            cssAst = csstree.parse(cssText, {
+              parseValue: true,
+              parseCustomProperty: false,
+            });
+          } catch {
+            return;
+          }
+
+          csstree.walk(cssAst, (node) => {
+            // #ID, .class selectors
+            if (
+              (prefixIds && node.type === 'IdSelector') ||
+              (prefixClassNames && node.type === 'ClassSelector')
+            ) {
+              node.name = prefixId(prefix, node.name);
+              return;
+            }
+            // url(...) references
+            if (
+              node.type === 'Url' &&
+              node.value.value &&
+              node.value.value.length > 0
+            ) {
+              const prefixed = prefixReference(
+                prefix,
+                unquote(node.value.value)
+              );
+              if (prefixed != null) {
+                node.value.value = prefixed;
+              }
+            }
+          });
+
+          // update styles
+          if (
+            node.children[0].type === 'text' ||
+            node.children[0].type === 'cdata'
+          ) {
+            node.children[0].value = csstree.generate(cssAst);
+          }
+          return;
+        }
+
+        // prefix an ID attribute value
+        if (
+          prefixIds &&
+          node.attributes.id != null &&
+          node.attributes.id.length !== 0
+        ) {
+          node.attributes.id = prefixId(prefix, node.attributes.id);
+        }
+
+        // prefix a class attribute value
+        if (
+          prefixClassNames &&
+          node.attributes.class != null &&
+          node.attributes.class.length !== 0
+        ) {
+          node.attributes.class = node.attributes.class
+            .split(/\s+/)
+            .map((name) => prefixId(prefix, name))
+            .join(' ');
+        }
+
+        // prefix a href attribute value
+        // xlink:href is deprecated, must be still supported
+        for (const name of ['href', 'xlink:href']) {
+          if (
+            node.attributes[name] != null &&
+            node.attributes[name].length !== 0
+          ) {
+            const prefixed = prefixReference(prefix, node.attributes[name]);
+            if (prefixed != null) {
+              node.attributes[name] = prefixed;
+            }
+          }
+        }
+
+        // prefix an URL attribute value
+        for (const name of referencesProps) {
+          if (
+            node.attributes[name] != null &&
+            node.attributes[name].length !== 0
+          ) {
+            node.attributes[name] = node.attributes[name].replace(
+              /url\((.*?)\)/gi,
+              (match, url) => {
+                const prefixed = prefixReference(prefix, url);
+                if (prefixed == null) {
+                  return match;
+                }
+                return `url(${prefixed})`;
+              }
+            );
+          }
+        }
+
+        // prefix begin/end attribute value
+        for (const name of ['begin', 'end']) {
+          if (
+            node.attributes[name] != null &&
+            node.attributes[name].length !== 0
+          ) {
+            const parts = node.attributes[name].split(/\s*;\s+/).map((val) => {
+              if (val.endsWith('.end') || val.endsWith('.start')) {
+                const [id, postfix] = val.split('.');
+                return `${prefixId(prefix, id)}.${postfix}`;
+              }
+              return val;
+            });
+            node.attributes[name] = parts.join('; ');
+          }
+        }
+      },
+    },
+  };
+};