@iconify/tools 2.2.6 → 3.0.0-beta.2

package/lib/svg/parse-style.mjs

@@ -2,134 +2,296 @@ import { parseInlineStyle } from '../css/parse.mjs';
 import { tokensToString } from '../css/parser/export.mjs';
 import { getTokens } from '../css/parser/tokens.mjs';
 import { tokensTree } from '../css/parser/tree.mjs';
-import { parseSVG } from './parse.mjs';
+import { parseSVG, parseSVGSync } from './parse.mjs';
 import '../css/parser/error.mjs';
 import '../css/parser/strings.mjs';
 import '../css/parser/text.mjs';
 
-async function parseSVGStyle(svg, callback) {
-  return parseSVG(svg, async (item) => {
-    const tagName = item.tagName;
-    const $element = item.$element;
-    if (tagName === "style") {
-      const content = $element.text();
-      if (typeof content !== "string") {
-        $element.remove();
-        return;
+function parseItem(item, callback, done) {
+  const tagName = item.tagName;
+  const $element = item.$element;
+  function parseStyleItem(done2) {
+    const content = $element.text();
+    if (typeof content !== "string") {
+      $element.remove();
+      return done2();
+    }
+    const tokens = getTokens(content);
+    if (!(tokens instanceof Array)) {
+      throw new Error("Error parsing style");
+    }
+    let changed2 = false;
+    const selectorStart = [];
+    let newTokens = [];
+    const parsedTokens = () => {
+      if (changed2) {
+        const tree = tokensTree(
+          newTokens.filter((token) => token !== null)
+        );
+        if (!tree.length) {
+          $element.remove();
+        } else {
+          const newContent = tokensToString(tree);
+          item.$element.text("\n" + newContent);
+        }
       }
-      const tokens = getTokens(content);
-      if (!(tokens instanceof Array)) {
-        throw new Error("Error parsing style");
+      done2();
+    };
+    const nextToken = () => {
+      const token = tokens.shift();
+      if (token === void 0) {
+        return parsedTokens();
       }
-      let changed2 = false;
-      const selectorStart = [];
-      const newTokens = [];
-      for (let i = 0; i < tokens.length; i++) {
-        const token = tokens[i];
-        switch (token.type) {
-          case "selector":
-          case "at-rule":
-            selectorStart.push(newTokens.length);
-            break;
-          case "close":
-            selectorStart.pop();
-            break;
-        }
-        if (token.type !== "rule") {
+      switch (token.type) {
+        case "selector":
+          selectorStart.push(newTokens.length);
           newTokens.push(token);
-          continue;
-        }
-        const value = token.value;
-        const selectorTokens = selectorStart.map((index) => newTokens[index]).filter((item2) => item2 !== null);
-        let result = callback({
-          type: "global",
-          prop: token.prop,
-          value,
-          token,
-          selectorTokens,
-          selectors: selectorTokens.reduce(
-            (prev, current) => {
-              switch (current.type) {
-                case "selector": {
-                  return prev.concat(current.selectors);
+          return nextToken();
+        case "close":
+          selectorStart.pop();
+          newTokens.push(token);
+          return nextToken();
+        case "at-rule": {
+          selectorStart.push(newTokens.length);
+          const prop = token.rule;
+          const value = token.value;
+          const isAnimation = prop === "keyframes" || prop.slice(0, 1) === "-" && prop.split("-").pop() === "keyframes";
+          const childTokens = [];
+          const animationRules = /* @__PURE__ */ Object.create(null);
+          let depth = 1;
+          let index = 0;
+          let isFrom = false;
+          while (depth > 0) {
+            const childToken = tokens[index];
+            index++;
+            if (!childToken) {
+              throw new Error("Something went wrong parsing CSS");
+            }
+            childTokens.push(childToken);
+            switch (childToken.type) {
+              case "close": {
+                depth--;
+                isFrom = false;
+                break;
+              }
+              case "selector": {
+                depth++;
+                if (isAnimation) {
+                  const rule = childToken.code;
+                  if (rule === "from" || rule === "0%") {
+                    isFrom = true;
+                  }
                 }
+                break;
               }
-              return prev;
+              case "at-rule": {
+                depth++;
+                if (isAnimation) {
+                  throw new Error(
+                    "Nested at-rule in keyframes ???"
+                  );
+                }
+                break;
+              }
+              case "rule": {
+                if (isAnimation && isFrom) {
+                  animationRules[childToken.prop] = childToken.value;
+                }
+                break;
+              }
+            }
+          }
+          const skipCount = childTokens.length;
+          callback(
+            isAnimation ? {
+              type: "keyframes",
+              prop,
+              value,
+              token,
+              childTokens,
+              from: animationRules,
+              prevTokens: newTokens,
+              nextTokens: tokens.slice(0)
+            } : {
+              type: "at-rule",
+              prop,
+              value,
+              token,
+              childTokens,
+              prevTokens: newTokens,
+              nextTokens: tokens.slice(0)
             },
-            []
-          ),
-          prevTokens: newTokens,
-          nextTokens: tokens.slice(i + 1)
-        });
-        if (result instanceof Promise) {
-          result = await result;
+            (result) => {
+              if (result !== void 0) {
+                if (isAnimation) {
+                  if (result !== value) {
+                    changed2 = true;
+                    token.value = result;
+                  }
+                  newTokens.push(token);
+                  for (let i = 0; i < skipCount; i++) {
+                    tokens.shift();
+                  }
+                  newTokens = newTokens.concat(childTokens);
+                } else {
+                  if (result !== value) {
+                    throw new Error(
+                      "Changing value for at-rule is not supported"
+                    );
+                  }
+                  newTokens.push(token);
+                }
+              } else {
+                changed2 = true;
+                for (let i = 0; i < skipCount; i++) {
+                  tokens.shift();
+                }
+              }
+              nextToken();
+            }
+          );
+          return;
         }
-        if (result !== void 0) {
-          if (result !== value) {
-            changed2 = true;
-            token.value = result;
-          }
-          newTokens.push(token);
-        } else {
-          changed2 = true;
+        case "rule": {
+          const value = token.value;
+          const selectorTokens = selectorStart.map((index) => newTokens[index]).filter((item2) => item2 !== null);
+          callback(
+            {
+              type: "global",
+              prop: token.prop,
+              value,
+              token,
+              selectorTokens,
+              selectors: selectorTokens.reduce(
+                (prev, current) => {
+                  switch (current.type) {
+                    case "selector": {
+                      return prev.concat(
+                        current.selectors
+                      );
+                    }
+                  }
+                  return prev;
+                },
+                []
+              ),
+              prevTokens: newTokens,
+              nextTokens: tokens.slice(0)
+            },
+            (result) => {
+              if (result !== void 0) {
+                if (result !== value) {
+                  changed2 = true;
+                  token.value = result;
+                }
+                newTokens.push(token);
+              } else {
+                changed2 = true;
+              }
+              nextToken();
+            }
+          );
+          return;
         }
       }
-      if (!changed2) {
-        return;
-      }
-      const tree = tokensTree(
-        newTokens.filter((token) => token !== null)
-      );
-      if (!tree.length) {
-        $element.remove();
-        return;
+    };
+    nextToken();
+  }
+  if (tagName === "style") {
+    return parseStyleItem(done);
+  }
+  const attribs = item.element.attribs;
+  if (attribs.style === void 0) {
+    return done();
+  }
+  const parsedStyle = parseInlineStyle(attribs.style);
+  if (parsedStyle === null) {
+    $element.removeAttr("style");
+    return done();
+  }
+  const propsQueue = Object.keys(parsedStyle);
+  let changed = false;
+  const parsedProps = () => {
+    if (changed) {
+      const newStyle = Object.keys(parsedStyle).map((key) => key + ":" + parsedStyle[key] + ";").join("");
+      if (!newStyle.length) {
+        $element.removeAttr("style");
+      } else {
+        $element.attr("style", newStyle);
       }
-      const newContent = tokensToString(tree);
-      item.$element.text(newContent);
-      return;
     }
-    const attribs = item.element.attribs;
-    if (attribs.style === void 0) {
-      return;
+    done();
+  };
+  const nextProp = () => {
+    const prop = propsQueue.shift();
+    if (prop === void 0) {
+      return parsedProps();
     }
-    const parsedStyle = parseInlineStyle(attribs.style);
-    if (parsedStyle === null) {
-      $element.removeAttr("style");
-      return;
-    }
-    const props = Object.keys(parsedStyle);
-    let changed = false;
-    for (let i = 0; i < props.length; i++) {
-      const prop = props[i];
-      const value = parsedStyle[prop];
-      let result = callback({
+    const value = parsedStyle[prop];
+    callback(
+      {
         type: "inline",
         prop,
         value,
         item
-      });
-      if (result instanceof Promise) {
-        result = await result;
+      },
+      (result) => {
+        if (result !== value) {
+          changed = true;
+          if (result === void 0) {
+            delete parsedStyle[prop];
+          } else {
+            parsedStyle[prop] = result;
+          }
+        }
+        nextProp();
       }
-      if (result !== value) {
-        changed = true;
-        if (result === void 0) {
-          delete parsedStyle[prop];
-        } else {
-          parsedStyle[prop] = result;
+    );
+  };
+  nextProp();
+}
+async function parseSVGStyle(svg, callback) {
+  return parseSVG(svg, (item) => {
+    return new Promise((fulfill, reject) => {
+      try {
+        parseItem(
+          item,
+          (styleItem, done) => {
+            try {
+              const result = callback(styleItem);
+              if (result instanceof Promise) {
+                result.then(done).catch(reject);
+              } else {
+                done(result);
+              }
+            } catch (err) {
+              reject(err);
+            }
+          },
+          fulfill
+        );
+      } catch (err) {
+        reject(err);
+      }
+    });
+  });
+}
+function parseSVGStyleSync(svg, callback) {
+  let isSync = true;
+  parseSVGSync(svg, (item) => {
+    parseItem(
+      item,
+      (styleItem, done) => {
+        done(callback(styleItem));
+      },
+      () => {
+        if (!isSync) {
+          throw new Error("parseSVGStyleSync callback was async");
         }
       }
-    }
-    if (!changed) {
-      return;
-    }
-    const newStyle = Object.keys(parsedStyle).map((key) => key + ":" + parsedStyle[key] + ";").join("");
-    if (!newStyle.length) {
-      $element.removeAttr("style");
-    } else {
-      $element.attr("style", newStyle);
-    }
+    );
   });
+  isSync = false;
 }
 
-export { parseSVGStyle };
+export { parseSVGStyle, parseSVGStyleSync };

package/lib/svg/parse.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-async function parseSVG(svg, callback) {
-  async function checkNode(element, parents) {
+function parse(svg, callback, done) {
+  function checkNode(element, parents, done2) {
     if (element.type !== "tag") {
-      return;
+      return done2();
     }
     const $element = cheerio(element);
     const tagName = element.tagName;
@@ -16,25 +16,63 @@ async function parseSVG(svg, callback) {
       testChildren: true,
       removeNode: false
     };
-    const result = callback(item);
-    if (result instanceof Promise) {
-      await result;
-    }
-    const newParents = parents.slice(0);
-    newParents.unshift(item);
-    if (tagName !== "style" && item.testChildren && !item.removeNode) {
-      const children = $element.children().toArray();
-      for (let i = 0; i < children.length; i++) {
-        await checkNode(children[i], newParents);
+    callback(item, () => {
+      const newParents = parents.slice(0);
+      newParents.unshift(item);
+      let queue = [];
+      if (tagName !== "style" && item.testChildren && !item.removeNode) {
+        const children = $element.children().toArray();
+        queue = children.slice(0);
       }
-    }
-    if (item.removeNode) {
-      $element.remove();
-    }
+      const next = () => {
+        const queueItem = queue.shift();
+        if (!queueItem) {
+          if (item.removeNode) {
+            $element.remove();
+          }
+          return done2();
+        }
+        checkNode(queueItem, newParents, next);
+      };
+      next();
+    });
   }
   const cheerio = svg.$svg;
   const $root = svg.$svg(":root");
-  await checkNode($root.get(0), []);
+  checkNode($root.get(0), [], done);
+}
+function parseSVG(svg, callback) {
+  return new Promise((fulfill, reject) => {
+    parse(
+      svg,
+      (item, next) => {
+        const result = callback(item);
+        if (result instanceof Promise) {
+          result.then(next).catch(reject);
+        } else {
+          next();
+        }
+      },
+      fulfill
+    );
+  });
+}
+function parseSVGSync(svg, callback) {
+  let isSync = true;
+  parse(
+    svg,
+    (item, next) => {
+      callback(item);
+      next();
+    },
+    () => {
+      if (!isSync) {
+        throw new Error("parseSVGSync callback was async");
+      }
+    }
+  );
+  isSync = false;
 }
 
 exports.parseSVG = parseSVG;
+exports.parseSVGSync = parseSVGSync;

package/lib/svg/parse.d.ts

@@ -18,7 +18,9 @@ interface ParseSVGCallbackItem {
 /**
  * Callback function
  */
-type ParseSVGCallback = (item: ParseSVGCallbackItem) => void | Promise<void>;
+type Callback<T> = (item: ParseSVGCallbackItem) => T;
+type ParseSVGCallback = Callback<void | Promise<void>>;
+type ParseSVGCallbackSync = Callback<void>;
 /**
  * Parse SVG
  *
@@ -26,5 +28,9 @@ type ParseSVGCallback = (item: ParseSVGCallbackItem) => void | Promise<void>;
  * Callback can be asynchronous.
  */
 declare function parseSVG(svg: SVG, callback: ParseSVGCallback): Promise<void>;
+/**
+ * Sync version
+ */
+declare function parseSVGSync(svg: SVG, callback: ParseSVGCallbackSync): void;
 
-export { ParseSVGCallback, ParseSVGCallbackItem, parseSVG };
+export { ParseSVGCallback, ParseSVGCallbackItem, ParseSVGCallbackSync, parseSVG, parseSVGSync };

package/lib/svg/parse.mjs

@@ -1,7 +1,7 @@
-async function parseSVG(svg, callback) {
-  async function checkNode(element, parents) {
+function parse(svg, callback, done) {
+  function checkNode(element, parents, done2) {
     if (element.type !== "tag") {
-      return;
+      return done2();
     }
     const $element = cheerio(element);
     const tagName = element.tagName;
@@ -14,25 +14,62 @@ async function parseSVG(svg, callback) {
       testChildren: true,
       removeNode: false
     };
-    const result = callback(item);
-    if (result instanceof Promise) {
-      await result;
-    }
-    const newParents = parents.slice(0);
-    newParents.unshift(item);
-    if (tagName !== "style" && item.testChildren && !item.removeNode) {
-      const children = $element.children().toArray();
-      for (let i = 0; i < children.length; i++) {
-        await checkNode(children[i], newParents);
+    callback(item, () => {
+      const newParents = parents.slice(0);
+      newParents.unshift(item);
+      let queue = [];
+      if (tagName !== "style" && item.testChildren && !item.removeNode) {
+        const children = $element.children().toArray();
+        queue = children.slice(0);
       }
-    }
-    if (item.removeNode) {
-      $element.remove();
-    }
+      const next = () => {
+        const queueItem = queue.shift();
+        if (!queueItem) {
+          if (item.removeNode) {
+            $element.remove();
+          }
+          return done2();
+        }
+        checkNode(queueItem, newParents, next);
+      };
+      next();
+    });
   }
   const cheerio = svg.$svg;
   const $root = svg.$svg(":root");
-  await checkNode($root.get(0), []);
+  checkNode($root.get(0), [], done);
+}
+function parseSVG(svg, callback) {
+  return new Promise((fulfill, reject) => {
+    parse(
+      svg,
+      (item, next) => {
+        const result = callback(item);
+        if (result instanceof Promise) {
+          result.then(next).catch(reject);
+        } else {
+          next();
+        }
+      },
+      fulfill
+    );
+  });
+}
+function parseSVGSync(svg, callback) {
+  let isSync = true;
+  parse(
+    svg,
+    (item, next) => {
+      callback(item);
+      next();
+    },
+    () => {
+      if (!isSync) {
+        throw new Error("parseSVGSync callback was async");
+      }
+    }
+  );
+  isSync = false;
 }
 
-export { parseSVG };
+export { parseSVG, parseSVGSync };

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "Collection of functions for cleaning up and parsing SVG for Iconify project",
   "author": "Vjacheslav Trushkin",
-  "version": "2.2.6",
+  "version": "3.0.0-beta.2",
   "license": "MIT",
   "bugs": "https://github.com/iconify/tools/issues",
   "homepage": "https://github.com/iconify/tools",
@@ -16,35 +16,33 @@
   "types": "./lib/index.d.ts",
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^2.1.4",
+    "@iconify/utils": "^2.1.5",
     "@types/cheerio": "^0.22.31",
-    "@types/node-fetch": "^2.6.2",
     "@types/tar": "^6.1.4",
     "cheerio": "^1.0.0-rc.12",
     "extract-zip": "^2.0.1",
     "local-pkg": "^0.4.3",
-    "node-fetch": "^2.6.9",
     "pathe": "^1.1.0",
     "svgo": "^3.0.2",
     "tar": "^6.1.13"
   },
   "devDependencies": {
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.0",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.11",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jasmine": "^4.1.3",
     "eslint-plugin-prettier": "^4.2.1",
-    "jasmine": "^4.5.0",
-    "jest": "^29.4.3",
-    "prettier": "^2.8.4",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.9.5",
-    "unbuild": "^1.1.2"
+    "jasmine": "^4.6.0",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.7",
+    "rimraf": "^5.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4",
+    "unbuild": "^1.2.1"
   },
   "exports": {
     "./*": "./*",