@iconify/tools 2.2.6 → 3.0.0-beta.2

package/lib/svg/parse-style.cjs

@@ -9,129 +9,292 @@ require('../css/parser/error.cjs');
 require('../css/parser/strings.cjs');
 require('../css/parser/text.cjs');
 
-async function parseSVGStyle(svg, callback) {
-  return svg_parse.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 = css_parser_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 = css_parser_tree.tokensTree(
+          newTokens.filter((token) => token !== null)
+        );
+        if (!tree.length) {
+          $element.remove();
+        } else {
+          const newContent = css_parser_export.tokensToString(tree);
+          item.$element.text("\n" + newContent);
+        }
       }
-      const tokens = css_parser_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 = css_parser_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 = css_parse.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 = css_parser_export.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 = css_parse.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 svg_parse.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;
+  svg_parse.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;
 }
 
 exports.parseSVGStyle = parseSVGStyle;
+exports.parseSVGStyleSync = parseSVGStyleSync;

package/lib/svg/parse-style.d.ts

@@ -1,5 +1,5 @@
 import { SVG } from './index.js';
-import { CSSRuleToken, CSSToken } from '../css/parser/types.js';
+import { CSSRuleToken, CSSToken, CSSAtRuleToken } from '../css/parser/types.js';
 import { ParseSVGCallbackItem } from './parse.js';
 import '@iconify/types';
 import '@iconify/utils/lib/customisations/defaults';
@@ -24,7 +24,20 @@ interface ParseSVGStyleCallbackItemGlobal extends ParseSVGStyleCallbackItemCommo
     prevTokens: (CSSToken | null)[];
     nextTokens: CSSToken[];
 }
-type ParseSVGStyleCallbackItem = ParseSVGStyleCallbackItemInline | ParseSVGStyleCallbackItemGlobal;
+interface ParseSVGStyleCallbackItemGlobalAtRule extends ParseSVGStyleCallbackItemCommon {
+    token: CSSAtRuleToken;
+    childTokens: CSSToken[];
+    prevTokens: (CSSToken | null)[];
+    nextTokens: CSSToken[];
+}
+interface ParseSVGStyleCallbackItemGlobalGenericAtRule extends ParseSVGStyleCallbackItemGlobalAtRule {
+    type: 'at-rule';
+}
+interface ParseSVGStyleCallbackItemGlobalKeyframesAtRule extends ParseSVGStyleCallbackItemGlobalAtRule {
+    type: 'keyframes';
+    from: Record<string, string>;
+}
+type ParseSVGStyleCallbackItem = ParseSVGStyleCallbackItemInline | ParseSVGStyleCallbackItemGlobal | ParseSVGStyleCallbackItemGlobalGenericAtRule | ParseSVGStyleCallbackItemGlobalKeyframesAtRule;
 /**
  * Result: undefined to remove item, string to change/keep item
  */
@@ -33,6 +46,7 @@ type ParseSVGStyleCallbackResult = string | undefined;
  * Callback function
  */
 type ParseSVGStyleCallback = (item: ParseSVGStyleCallbackItem) => ParseSVGStyleCallbackResult | Promise<ParseSVGStyleCallbackResult>;
+type ParseSVGStyleCallbackSync = (item: ParseSVGStyleCallbackItem) => ParseSVGStyleCallbackResult;
 /**
  * Parse styles in SVG
  *
@@ -41,5 +55,9 @@ type ParseSVGStyleCallback = (item: ParseSVGStyleCallbackItem) => ParseSVGStyleC
  * Callback can be asynchronous.
  */
 declare function parseSVGStyle(svg: SVG, callback: ParseSVGStyleCallback): Promise<void>;
+/**
+ * Synchronous version
+ */
+declare function parseSVGStyleSync(svg: SVG, callback: ParseSVGStyleCallbackSync): void;
 
-export { ParseSVGStyleCallback, ParseSVGStyleCallbackItem, ParseSVGStyleCallbackResult, parseSVGStyle };
+export { ParseSVGStyleCallback, ParseSVGStyleCallbackItem, ParseSVGStyleCallbackResult, ParseSVGStyleCallbackSync, parseSVGStyle, parseSVGStyleSync };