@iconify/tools 2.0.9 → 2.0.13

package/lib/optimise/global-style.mjs

@@ -0,0 +1,129 @@
+// src/optimise/global-style.ts
+import "../svg/data/attributes.mjs";
+import { allValidTags, animateTags } from "../svg/data/tags.mjs";
+import { parseSVG } from "../svg/parse.mjs";
+import { parseSVGStyle } from "../svg/parse-style.mjs";
+function getClassList(value) {
+  return value == null ? void 0 : value.split(/\s+/);
+}
+var tempDataAttrbiute = "data-gstyle-temp";
+async function cleanupGlobalStyle(svg) {
+  const backup = svg.toString();
+  let containsTempAttr = false;
+  const animatedClasses = new Set();
+  await parseSVG(svg, (item) => {
+    if (!animateTags.has(item.tagName)) {
+      return;
+    }
+    const $element = item.$element;
+    if ($element.attr("attributeName") !== "class") {
+      return;
+    }
+    ["from", "to", "values"].forEach((attr) => {
+      const value = $element.attr(attr);
+      if (typeof value !== "string") {
+        return;
+      }
+      value.split(";").forEach((item2) => {
+        getClassList(item2).forEach((className) => {
+          animatedClasses.add(className);
+        });
+      });
+    });
+  });
+  try {
+    await parseSVGStyle(svg, async (styleItem) => {
+      var _a;
+      const returnValue = styleItem.value;
+      if (styleItem.type !== "global") {
+        return returnValue;
+      }
+      if (styleItem.selectors.length !== 1 || styleItem.selectorTokens.length !== 1) {
+        return returnValue;
+      }
+      const selectorToken = styleItem.selectorTokens[0];
+      if (selectorToken.type !== "selector") {
+        return returnValue;
+      }
+      const selector = styleItem.selectors[0];
+      const firstChar = selector.charAt(0);
+      let matchType;
+      if (firstChar === ".") {
+        matchType = "class";
+      } else if (firstChar === "#") {
+        matchType = "id";
+      } else if (allValidTags.has(selector)) {
+        matchType = "tag";
+      } else {
+        return returnValue;
+      }
+      const valueMatch = matchType === "tag" ? selector : selector.slice(1);
+      if (matchType === "class" && animatedClasses.has(valueMatch)) {
+        return returnValue;
+      }
+      const isMatch = (tagName, $element) => {
+        switch (matchType) {
+          case "id":
+            return $element.attr("id") === valueMatch;
+          case "tag":
+            return tagName === valueMatch;
+          case "class": {
+            const className = $element.attr("class");
+            if (!className || getClassList(className).indexOf(valueMatch) === -1) {
+              return false;
+            }
+          }
+        }
+        return true;
+      };
+      await parseSVG(svg, (svgItem) => {
+        var _a2;
+        const tagName = svgItem.tagName;
+        const $element = svgItem.$element;
+        if (!isMatch(tagName, $element)) {
+          return;
+        }
+        const addedAttributes = new Set((_a2 = $element.attr(tempDataAttrbiute)) == null ? void 0 : _a2.split(/\s+/));
+        const prop = styleItem.prop;
+        if ($element.attr(prop) !== void 0) {
+          if (addedAttributes.has(prop)) {
+            throw new Error("Duplicate attribute");
+          }
+        }
+        $element.attr(prop, styleItem.value);
+        addedAttributes.add(prop);
+        $element.attr(tempDataAttrbiute, Array.from(addedAttributes).join(" "));
+        containsTempAttr = true;
+      });
+      if (matchType === "class" && ((_a = styleItem.nextTokens[0]) == null ? void 0 : _a.type) === "close") {
+        await parseSVG(svg, (svgItem) => {
+          const $element = svgItem.$element;
+          if (!isMatch("", $element)) {
+            return;
+          }
+          const classList = getClassList($element.attr("class"));
+          if (!classList) {
+            return;
+          }
+          const filtered = classList.filter((item) => item !== valueMatch);
+          if (!filtered.length) {
+            $element.removeAttr("class");
+          } else {
+            $element.attr("class", filtered.join(" "));
+          }
+        });
+      }
+      return;
+    });
+    if (containsTempAttr) {
+      await parseSVG(svg, (item) => {
+        item.$element.removeAttr(tempDataAttrbiute);
+      });
+    }
+  } catch (err) {
+    svg.load(backup);
+  }
+}
+export {
+  cleanupGlobalStyle
+};

package/lib/svg/analyse/error.d.ts

@@ -0,0 +1,5 @@
+import type { ExtendedTagElement } from './types';
+/**
+ * Get tag for error message
+ */
+export declare function analyseTagError(element: ExtendedTagElement): string;

package/lib/svg/analyse/error.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyseTagError = void 0;
+/**
+ * Get tag for error message
+ */
+function analyseTagError(element) {
+    let result = '<' + element.tagName;
+    if (element._id) {
+        result += ' id="' + element._id + '"';
+    }
+    const attribs = element.attribs;
+    if (attribs['d']) {
+        const value = attribs['d'];
+        result +=
+            ' d="' +
+                (value.length > 16 ? value.slice(0, 12) + '...' : value) +
+                '"';
+    }
+    return result + '>';
+}
+exports.analyseTagError = analyseTagError;

package/lib/svg/analyse/error.mjs

@@ -0,0 +1,16 @@
+// src/svg/analyse/error.ts
+function analyseTagError(element) {
+  let result = "<" + element.tagName;
+  if (element._id) {
+    result += ' id="' + element._id + '"';
+  }
+  const attribs = element.attribs;
+  if (attribs["d"]) {
+    const value = attribs["d"];
+    result += ' d="' + (value.length > 16 ? value.slice(0, 12) + "..." : value) + '"';
+  }
+  return result + ">";
+}
+export {
+  analyseTagError
+};

package/lib/svg/analyse/types.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="cheerio" />
+/**
+ * Options
+ */
+export interface AnalyseSVGStructureOptions {
+    fixErrors?: boolean;
+}
+/**
+ * Extended properties for element
+ */
+/**
+ * Link to element
+ */
+export interface LinkToElementWithID {
+    id: string;
+    usedAsMask: boolean;
+    usedByIndex: number;
+}
+/**
+ * How element is used by parent elements
+ */
+export interface ExtendedTagElementUses {
+    _usedAsMask: boolean;
+    _usedAsPaint: boolean;
+}
+/**
+ * Definition: mask, clip path, symbol, etc...
+ */
+interface ReusableElement {
+    id: string;
+    isMask: boolean;
+    index: number;
+}
+/**
+ * Element with id
+ *
+ * Similar to ReusableElement, but not necessary a definition - any element with id. Also contains list of child elements
+ */
+export interface ElementWithID {
+    id: string;
+    isMask: boolean;
+    indexes: Set<number>;
+}
+/**
+ * Parent and child elements. Unlike standard tree, this tree is for elements that inherit attributes from parent element
+ */
+interface ExtendedTagElementRelations {
+    _parentElement?: number;
+    _childElements?: number[];
+}
+/**
+ * Extended tag
+ */
+export interface ExtendedTagElement extends cheerio.TagElement, ExtendedTagElementUses, ExtendedTagElementRelations {
+    _index: number;
+    _id?: string;
+    _belongsTo?: ElementWithID[];
+    _reusableElement?: ReusableElement;
+    _linksTo?: LinkToElementWithID[];
+}
+/**
+ * Additional stuff for <svg>
+ */
+export interface ExtendedRootTagElement extends ExtendedTagElement {
+    _parsed?: boolean;
+}
+/**
+ * Tree
+ */
+export interface ElementsTreeItem {
+    index: number;
+    usedAsMask: boolean;
+    parent?: ElementsTreeItem;
+    children: ElementsTreeItem[];
+}
+/**
+ * Elements map
+ */
+export declare type ElementsMap = Map<number, ExtendedTagElement>;
+/**
+ * Result
+ */
+export interface AnalyseSVGStructureResult {
+    elements: ElementsMap;
+    ids: Record<string, number>;
+    links: LinkToElementWithID[];
+    tree: ElementsTreeItem;
+}
+export {};

package/lib/svg/analyse/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/svg/analyse.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from './index';
+import type { AnalyseSVGStructureResult, AnalyseSVGStructureOptions } from './analyse/types';
+/**
+ * Find all IDs, links, which elements use palette, which items aren't used
+ *
+ * Before running this function run cleanup functions to change inline style to attributes and fix attributes
+ */
+export declare function analyseSVGStructure(svg: SVG, options?: AnalyseSVGStructureOptions): Promise<AnalyseSVGStructureResult>;

package/lib/svg/analyse.js

@@ -0,0 +1,352 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyseSVGStructure = void 0;
+const parse_1 = require("./parse");
+const attributes_1 = require("./data/attributes");
+const tags_1 = require("./data/tags");
+const error_1 = require("./analyse/error");
+/**
+ * Find all IDs, links, which elements use palette, which items aren't used
+ *
+ * Before running this function run cleanup functions to change inline style to attributes and fix attributes
+ */
+async function analyseSVGStructure(svg, options = {}) {
+    // Options
+    const fixErrors = options.fixErrors;
+    // Root element
+    let root = svg.$svg(':root').get(0);
+    if (root._parsed) {
+        // Reload to reset custom properties
+        svg.load(svg.toString());
+        root = svg.$svg(':root').get(0);
+    }
+    root._parsed = true;
+    const cheerio = svg.$svg;
+    // List of all elements
+    const elements = new Map();
+    // List of IDs
+    const ids = Object.create(null);
+    // Links
+    let links = [];
+    /**
+     * Found element with id
+     */
+    function addID(element, id) {
+        if (ids[id]) {
+            throw new Error(`Duplicate id "${id}"`);
+        }
+        element._id = id;
+        ids[id] = element._index;
+        return true;
+    }
+    /**
+     * Add _belongsTo
+     */
+    function gotElementWithID(element, id, isMask) {
+        addID(element, id);
+        if (!element._belongsTo) {
+            element._belongsTo = [];
+        }
+        element._belongsTo.push({
+            id,
+            isMask,
+            indexes: new Set([element._index]),
+        });
+        return;
+    }
+    /**
+     * Mark element as reusable, set properties
+     */
+    function gotReusableElement(item, isMask) {
+        const element = item.element;
+        const attribs = element.attribs;
+        const index = element._index;
+        const id = attribs['id'];
+        if (typeof id !== 'string') {
+            const message = `Definition element ${(0, error_1.analyseTagError)(element)} does not have id`;
+            if (fixErrors) {
+                item.removeNode = true;
+                item.testChildren = false;
+                console.warn(message);
+                return false;
+            }
+            throw new Error(message);
+        }
+        if (ids[id] && fixErrors) {
+            console.warn(`Duplicate id "${id}"`);
+            item.removeNode = true;
+            item.testChildren = false;
+            return false;
+        }
+        element._reusableElement = {
+            id,
+            isMask,
+            index,
+        };
+        gotElementWithID(element, id, isMask);
+        return true;
+    }
+    /**
+     * Found element that uses another element
+     */
+    function gotElementReference(item, id, usedAsMask) {
+        const element = item.element;
+        const usedByIndex = element._index;
+        const link = {
+            id,
+            usedByIndex,
+            usedAsMask,
+        };
+        // Add to global list
+        links.push(link);
+        // Add to element and parent elements
+        if (!element._linksTo) {
+            element._linksTo = [];
+        }
+        element._linksTo.push(link);
+    }
+    // Find all reusable elements and all usages
+    let index = 0;
+    await (0, parse_1.parseSVG)(svg, (item) => {
+        var _a;
+        const { tagName, parents } = item;
+        if (tags_1.styleTag.has(tagName)) {
+            item.testChildren = false;
+            return;
+        }
+        const element = item.element;
+        const attribs = element.attribs;
+        // Set index
+        index++;
+        element._index = index;
+        elements.set(index, element);
+        if (!parents.length) {
+            // root <svg>
+            element._usedAsMask = false;
+            element._usedAsPaint = true;
+            return;
+        }
+        element._usedAsMask = false;
+        element._usedAsPaint = false;
+        // Get parent element
+        const parentItem = parents[0];
+        const parentElement = parentItem.element;
+        // Check for mask or clip path
+        if (tags_1.maskTags.has(tagName)) {
+            // Element can only be used as mask or clip path
+            if (!gotReusableElement(item, true)) {
+                return;
+            }
+        }
+        else if (tags_1.reusableElementsWithPalette.has(tagName)) {
+            // Reusable element that uses palette
+            if (!gotReusableElement(item, false)) {
+                return;
+            }
+        }
+        else if (tags_1.defsTag.has(parentItem.tagName)) {
+            // Symbol without <symbol> tag
+            if (!gotReusableElement(item, false)) {
+                return;
+            }
+        }
+        else if (!tags_1.defsTag.has(tagName)) {
+            // Not reusable element, not <defs>. Copy parent stuff
+            element._usedAsMask = parentElement._usedAsMask;
+            element._usedAsPaint = parentElement._usedAsPaint;
+            element._parentElement = parentElement._index;
+            if (!parentElement._childElements) {
+                parentElement._childElements = [];
+            }
+            parentElement._childElements.push(index);
+            // Copy id of reusable element from parent
+            const parentReusableElement = parentElement._reusableElement;
+            if (parentReusableElement) {
+                if (element._reusableElement) {
+                    // Reusable element inside reusable element: should not happen!
+                    throw new Error(`Reusable element ${(0, error_1.analyseTagError)(element)} is inside another reusable element id="${parentReusableElement.id}"`);
+                }
+                element._reusableElement = parentReusableElement;
+            }
+            // Copy all parent ids
+            const parentBelongsTo = parentElement._belongsTo;
+            if (parentBelongsTo) {
+                const list = element._belongsTo || (element._belongsTo = []);
+                parentBelongsTo.forEach((item) => {
+                    item.indexes.add(index);
+                    list.push(item);
+                });
+            }
+            // Check if element has its own id
+            if (element._id === void 0) {
+                const id = attribs['id'];
+                if (typeof id === 'string') {
+                    if (ids[id] && fixErrors) {
+                        console.warn(`Duplicate id "${id}"`);
+                        cheerio(element).removeAttr('id');
+                    }
+                    else {
+                        gotElementWithID(element, id, false);
+                    }
+                }
+            }
+        }
+        // Check if element uses any ID
+        if ((_a = attributes_1.tagSpecificNonPresentationalAttributes[tagName]) === null || _a === void 0 ? void 0 : _a.has('href')) {
+            const href = attribs['href'] || attribs['xlink:href'];
+            if (typeof href === 'string') {
+                if (href.slice(0, 1) !== '#') {
+                    throw new Error(`Invalid link in ${(0, error_1.analyseTagError)(element)}`);
+                }
+                const id = href.slice(1);
+                gotElementReference(item, id, false);
+            }
+        }
+        // Check colors
+        Object.keys(attribs).forEach((attr) => {
+            // Get id
+            let value = attribs[attr];
+            if (value.slice(0, 5).toLowerCase() !== 'url(#') {
+                return;
+            }
+            value = value.slice(5);
+            if (value.slice(-1) !== ')') {
+                return;
+            }
+            const id = value.slice(0, value.length - 1).trim();
+            if (attributes_1.urlPresentationalAttributes.has(attr)) {
+                // Used as mask, clip path or filter
+                gotElementReference(item, id, attr !== 'filter');
+                return;
+            }
+            if (attributes_1.commonColorPresentationalAttributes.has(attr) ||
+                attributes_1.markerAttributes.has(attr)) {
+                // Used as paint
+                gotElementReference(item, id, false);
+                return;
+            }
+        });
+    });
+    // Make sure all required IDs exist
+    links = links.filter((item) => {
+        const id = item.id;
+        if (ids[id]) {
+            return true;
+        }
+        // Attempt to fix error
+        function fix() {
+            const index = item.usedByIndex;
+            const element = elements.get(index);
+            const tagName = element.tagName;
+            function remove() {
+                var _a;
+                const $element = cheerio(element);
+                const parent = element.parent;
+                if (parent) {
+                    if (parent._childElements) {
+                        parent._childElements = parent._childElements.filter((num) => num !== index);
+                    }
+                    (_a = parent._belongsTo) === null || _a === void 0 ? void 0 : _a.forEach((list) => {
+                        list.indexes.delete(index);
+                    });
+                }
+                $element.remove();
+            }
+            // Remove links
+            if (element._linksTo) {
+                element._linksTo = element._linksTo.filter((item) => item.id !== id);
+            }
+            // Remove <use /> without children
+            if (!element.children.length) {
+                if (tags_1.useTag.has(tagName)) {
+                    remove();
+                    return;
+                }
+            }
+            // Remove attributes that use id
+            const matches = new Set(['#' + id, 'url(#' + id + ')']);
+            const attribs = element.attribs;
+            for (const attr in attribs) {
+                if (matches.has(attribs[attr])) {
+                    cheerio(element).removeAttr(attr);
+                }
+            }
+        }
+        const message = `Missing element with id="${id}"`;
+        if (fixErrors) {
+            fix();
+            console.warn(message);
+        }
+        else {
+            throw new Error(message);
+        }
+        return false;
+    });
+    // Check if tree item already has child item
+    function hasChildItem(tree, child, canThrow) {
+        const item = tree.children.find((item) => item.index === child.index &&
+            item.usedAsMask === child.usedAsMask);
+        if (item && canThrow) {
+            throw new Error('Recursion');
+        }
+        return !!item;
+    }
+    // Generate tree
+    const tree = {
+        index: 1,
+        usedAsMask: false,
+        children: [],
+    };
+    function parseTreeItem(tree, usedItems, inMask) {
+        var _a, _b;
+        const element = elements.get(tree.index);
+        // Add usage
+        if (tree.usedAsMask || inMask) {
+            element._usedAsMask = true;
+            inMask = true;
+        }
+        else {
+            element._usedAsPaint = true;
+        }
+        usedItems = usedItems.slice(0);
+        usedItems.push(element._index);
+        // Add all child elements
+        (_a = element._childElements) === null || _a === void 0 ? void 0 : _a.forEach((childIndex) => {
+            if (usedItems.indexOf(childIndex) !== -1) {
+                throw new Error('Recursion');
+            }
+            const childItem = {
+                index: childIndex,
+                usedAsMask: false,
+                children: [],
+                parent: tree,
+            };
+            tree.children.push(childItem);
+            parseTreeItem(childItem, usedItems, inMask);
+        });
+        // Add all links
+        (_b = element._linksTo) === null || _b === void 0 ? void 0 : _b.forEach((link) => {
+            const linkIndex = ids[link.id];
+            const usedAsMask = link.usedAsMask;
+            const childItem = {
+                index: linkIndex,
+                usedAsMask,
+                children: [],
+                parent: tree,
+            };
+            if (hasChildItem(tree, childItem, false)) {
+                return;
+            }
+            tree.children.push(childItem);
+            parseTreeItem(childItem, usedItems, inMask || usedAsMask);
+        });
+    }
+    parseTreeItem(tree, [0], false);
+    return {
+        elements,
+        ids,
+        links,
+        tree,
+    };
+}
+exports.analyseSVGStructure = analyseSVGStructure;