@iconify/tools 3.0.0-beta.1 → 3.0.0-beta.2

package/lib/css/parser/export.cjs

@@ -21,7 +21,7 @@ function parseToken(token, compact, depth) {
       return (compact ? "" : tab.repeat(depth)) + token.prop + (compact ? ":" : ": ") + token.value + ";" + (compact ? "" : nl);
     }
     case "at-rule": {
-      content = "@" + token.atRule + joinAtValues(token.atValues, compact);
+      content = `@${token.rule} ${token.value}`.trim();
       break;
     }
     case "selector": {
@@ -33,14 +33,5 @@ function parseToken(token, compact, depth) {
   });
   return (compact ? "" : tab.repeat(depth)) + content + (compact ? "{" : " {" + nl) + children.join("") + (compact ? "}" : tab.repeat(depth) + "}" + nl);
 }
-function joinAtValues(values, compact) {
-  return values.map((item) => {
-    const value = typeof item === "string" ? item : joinAtValues(item, compact);
-    if (value.slice(0, 1) === "(" || value.slice(-1) === ")") {
-      return value;
-    }
-    return "(" + value + ")";
-  }).join(compact ? "," : ", ");
-}
 
 exports.tokensToString = tokensToString;

package/lib/css/parser/export.mjs

@@ -19,7 +19,7 @@ function parseToken(token, compact, depth) {
       return (compact ? "" : tab.repeat(depth)) + token.prop + (compact ? ":" : ": ") + token.value + ";" + (compact ? "" : nl);
     }
     case "at-rule": {
-      content = "@" + token.atRule + joinAtValues(token.atValues, compact);
+      content = `@${token.rule} ${token.value}`.trim();
       break;
     }
     case "selector": {
@@ -31,14 +31,5 @@ function parseToken(token, compact, depth) {
   });
   return (compact ? "" : tab.repeat(depth)) + content + (compact ? "{" : " {" + nl) + children.join("") + (compact ? "}" : tab.repeat(depth) + "}" + nl);
 }
-function joinAtValues(values, compact) {
-  return values.map((item) => {
-    const value = typeof item === "string" ? item : joinAtValues(item, compact);
-    if (value.slice(0, 1) === "(" || value.slice(-1) === ")") {
-      return value;
-    }
-    return "(" + value + ")";
-  }).join(compact ? "," : ", ");
-}
 
 export { tokensToString };

package/lib/css/parser/text.cjs

@@ -81,7 +81,6 @@ function textTokensToRule(tokens) {
   });
   return result.value.length ? result : null;
 }
-const nestableAtRules = ["media", "supports"];
 function textTokensToSelector(tokens) {
   const selectors = getSelectors(tokens);
   const code = mergeTextTokens(tokens);
@@ -89,33 +88,15 @@ function textTokensToSelector(tokens) {
   if (!selectors.length) {
     return null;
   }
-  if (selectors[0].charAt(0) === "@") {
-    const atRule = selectors[0].split(/\s+/, 1)[0].slice(1).toLowerCase();
-    selectors[0] = selectors[0].slice(1 + atRule.length).trim();
-    const atValues = selectors;
-    if (nestableAtRules.indexOf(atRule) !== -1) {
-      atValues.forEach((item, index2) => {
-        if (typeof item !== "string" || item.charAt(0) !== "(" || item.charAt(item.length - 1) !== ")") {
-          return;
-        }
-        const list = item.slice(1, -1).split(/\)\s?and\s?\(/i).map((item2) => item2.trim());
-        let match = true;
-        list.forEach((item2) => {
-          if (item2.indexOf("(") !== -1 || item2.indexOf(")") !== -1) {
-            match = false;
-          }
-        });
-        if (match) {
-          atValues[index2] = list;
-        }
-      });
-    }
+  if (code.charAt(0) === "@") {
+    const parts = code.split(/\s+/);
+    const rule = parts.shift().slice(1);
+    const value = parts.join(" ").trim();
     return {
       type: "at-rule",
-      code,
       index,
-      atRule,
-      atValues
+      rule,
+      value
     };
   } else {
     return {

package/lib/css/parser/text.mjs

@@ -79,7 +79,6 @@ function textTokensToRule(tokens) {
   });
   return result.value.length ? result : null;
 }
-const nestableAtRules = ["media", "supports"];
 function textTokensToSelector(tokens) {
   const selectors = getSelectors(tokens);
   const code = mergeTextTokens(tokens);
@@ -87,33 +86,15 @@ function textTokensToSelector(tokens) {
   if (!selectors.length) {
     return null;
   }
-  if (selectors[0].charAt(0) === "@") {
-    const atRule = selectors[0].split(/\s+/, 1)[0].slice(1).toLowerCase();
-    selectors[0] = selectors[0].slice(1 + atRule.length).trim();
-    const atValues = selectors;
-    if (nestableAtRules.indexOf(atRule) !== -1) {
-      atValues.forEach((item, index2) => {
-        if (typeof item !== "string" || item.charAt(0) !== "(" || item.charAt(item.length - 1) !== ")") {
-          return;
-        }
-        const list = item.slice(1, -1).split(/\)\s?and\s?\(/i).map((item2) => item2.trim());
-        let match = true;
-        list.forEach((item2) => {
-          if (item2.indexOf("(") !== -1 || item2.indexOf(")") !== -1) {
-            match = false;
-          }
-        });
-        if (match) {
-          atValues[index2] = list;
-        }
-      });
-    }
+  if (code.charAt(0) === "@") {
+    const parts = code.split(/\s+/);
+    const rule = parts.shift().slice(1);
+    const value = parts.join(" ").trim();
     return {
       type: "at-rule",
-      code,
       index,
-      atRule,
-      atValues
+      rule,
+      value
     };
   } else {
     return {

package/lib/css/parser/types.d.ts

@@ -29,9 +29,8 @@ interface CSSSelectorToken {
 interface CSSAtRuleToken {
     type: 'at-rule';
     index: number;
-    code: string;
-    atRule: string;
-    atValues: CSSATValue[];
+    rule: string;
+    value: string;
 }
 interface CSSCloseToken {
     type: 'close';

package/lib/svg/cleanup/root-style.cjs

@@ -11,16 +11,27 @@ require('../../css/parser/tree.cjs');
 require('../parse.cjs');
 
 function cleanupRootStyle(svg) {
+  const result = {};
   svg_parseStyle.parseSVGStyleSync(svg, (item) => {
-    if (
-      // If global style
-      item.type === "global" && // If selector tokens contain at-rule
-      item.selectorTokens.find((token) => token.type === "at-rule")
-    ) {
-      return;
+    switch (item.type) {
+      case "inline":
+        return item.value;
+      case "global":
+        return item.value;
+      case "at-rule":
+        if (item.prop === "supports") {
+          return item.value;
+        }
+        (result.removedAtRules || (result.removedAtRules = /* @__PURE__ */ new Set())).add(item.prop);
+        return;
+      case "keyframes":
+        (result.animations || (result.animations = /* @__PURE__ */ new Set())).add(
+          item.value
+        );
+        return item.value;
     }
-    return item.value;
   });
+  return result;
 }
 
 exports.cleanupRootStyle = cleanupRootStyle;

package/lib/svg/cleanup/root-style.d.ts

@@ -2,11 +2,15 @@ import { SVG } from '../index.js';
 import '@iconify/types';
 import '@iconify/utils/lib/customisations/defaults';
 
+interface CleanupRootStyleResult {
+    animations?: Set<string>;
+    removedAtRules?: Set<string>;
+}
 /**
  * Clean up root style
  *
  * This function removes all at-rule tokens, such as `@font-face`, `@media`
  */
-declare function cleanupRootStyle(svg: SVG): void;
+declare function cleanupRootStyle(svg: SVG): CleanupRootStyleResult;
 
 export { cleanupRootStyle };

package/lib/svg/cleanup/root-style.mjs

@@ -9,16 +9,27 @@ import '../../css/parser/tree.mjs';
 import '../parse.mjs';
 
 function cleanupRootStyle(svg) {
+  const result = {};
   parseSVGStyleSync(svg, (item) => {
-    if (
-      // If global style
-      item.type === "global" && // If selector tokens contain at-rule
-      item.selectorTokens.find((token) => token.type === "at-rule")
-    ) {
-      return;
+    switch (item.type) {
+      case "inline":
+        return item.value;
+      case "global":
+        return item.value;
+      case "at-rule":
+        if (item.prop === "supports") {
+          return item.value;
+        }
+        (result.removedAtRules || (result.removedAtRules = /* @__PURE__ */ new Set())).add(item.prop);
+        return;
+      case "keyframes":
+        (result.animations || (result.animations = /* @__PURE__ */ new Set())).add(
+          item.value
+        );
+        return item.value;
     }
-    return item.value;
   });
+  return result;
 }
 
 export { cleanupRootStyle };

package/lib/svg/cleanup/svgo-style.cjs

@@ -18,6 +18,9 @@ require('@iconify/utils/lib/svg/id');
 function convertStyleToAttrs(svg) {
   let hasStyle = false;
   svg_parseStyle.parseSVGStyleSync(svg, (item) => {
+    if (item.type !== "inline" && item.type !== "global") {
+      return item.value;
+    }
     const prop = item.prop;
     if (
       // Attributes / properties now allowed

package/lib/svg/cleanup/svgo-style.mjs

@@ -16,6 +16,9 @@ import '@iconify/utils/lib/svg/id';
 function convertStyleToAttrs(svg) {
   let hasStyle = false;
   parseSVGStyleSync(svg, (item) => {
+    if (item.type !== "inline" && item.type !== "global") {
+      return item.value;
+    }
     const prop = item.prop;
     if (
       // Attributes / properties now allowed

package/lib/svg/parse-style.cjs

@@ -24,7 +24,7 @@ function parseItem(item, callback, done) {
     }
     let changed2 = false;
     const selectorStart = [];
-    const newTokens = [];
+    let newTokens = [];
     const parsedTokens = () => {
       if (changed2) {
         const tree = css_parser_tree.tokensTree(
@@ -34,7 +34,7 @@ function parseItem(item, callback, done) {
           $element.remove();
         } else {
           const newContent = css_parser_export.tokensToString(tree);
-          item.$element.text(newContent);
+          item.$element.text("\n" + newContent);
         }
       }
       done2();
@@ -46,53 +46,156 @@ function parseItem(item, callback, done) {
       }
       switch (token.type) {
         case "selector":
-        case "at-rule":
           selectorStart.push(newTokens.length);
-          break;
+          newTokens.push(token);
+          return nextToken();
         case "close":
           selectorStart.pop();
-          break;
-      }
-      if (token.type !== "rule") {
-        newTokens.push(token);
-        return nextToken();
-      }
-      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);
+          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;
+              }
+              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;
               }
-              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();
+          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)
+            },
+            (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;
+        }
+        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;
         }
-      );
+      }
     };
     nextToken();
   }

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
  */

package/lib/svg/parse-style.mjs

@@ -22,7 +22,7 @@ function parseItem(item, callback, done) {
     }
     let changed2 = false;
     const selectorStart = [];
-    const newTokens = [];
+    let newTokens = [];
     const parsedTokens = () => {
       if (changed2) {
         const tree = tokensTree(
@@ -32,7 +32,7 @@ function parseItem(item, callback, done) {
           $element.remove();
         } else {
           const newContent = tokensToString(tree);
-          item.$element.text(newContent);
+          item.$element.text("\n" + newContent);
         }
       }
       done2();
@@ -44,53 +44,156 @@ function parseItem(item, callback, done) {
       }
       switch (token.type) {
         case "selector":
-        case "at-rule":
           selectorStart.push(newTokens.length);
-          break;
+          newTokens.push(token);
+          return nextToken();
         case "close":
           selectorStart.pop();
-          break;
-      }
-      if (token.type !== "rule") {
-        newTokens.push(token);
-        return nextToken();
-      }
-      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);
+          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;
+              }
+              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;
               }
-              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();
+          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)
+            },
+            (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;
+        }
+        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;
         }
-      );
+      }
     };
     nextToken();
   }

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": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "license": "MIT",
   "bugs": "https://github.com/iconify/tools/issues",
   "homepage": "https://github.com/iconify/tools",