@iconify/tools 2.0.8 → 2.0.12

package/lib/svg/cleanup/attribs.mjs

@@ -2,11 +2,14 @@
 import {
   badAttributes,
   badAttributePrefixes,
-  badSoftwareAttributes
+  badSoftwareAttributes,
+  tagSpecificPresentationalAttributes
 } from "../data/attributes.mjs";
+import { defsTag } from "../data/tags.mjs";
 import { parseSVG } from "../parse.mjs";
 async function removeBadAttributes(svg) {
   await parseSVG(svg, (item) => {
+    const tagName = item.tagName;
     const attribs = item.element.attribs;
     const $element = item.$element;
     Object.keys(attribs).forEach((attr) => {
@@ -14,6 +17,10 @@ async function removeBadAttributes(svg) {
         $element.removeAttr(attr);
         return;
       }
+      if (defsTag.has(tagName) && !tagSpecificPresentationalAttributes[tagName].has(attr)) {
+        $element.removeAttr(attr);
+        return;
+      }
       const nsParts = attr.split(":");
       if (nsParts.length > 1) {
         const namespace = nsParts.shift();

package/lib/svg/cleanup/bad-tags.d.ts

@@ -1,4 +1,4 @@
-import type { SVG } from '..';
+import type { SVG } from '../../svg';
 /**
  * Test for bag tags
  */

package/lib/svg/cleanup/bad-tags.js

@@ -13,8 +13,6 @@ requiredParentTags.set(new Set(['feMerge']), tags_1.feMergeChildTags);
 requiredParentTags.set(tags_1.feLightningTags, tags_1.feLightningChildTags);
 // Filter tags must be children of <filter>
 requiredParentTags.set(tags_1.filterTag, tags_1.filterChildTags);
-// Tags that must be inside <defs>: gradients, <pattern>, <marker>
-requiredParentTags.set(tags_1.defsTag, tags_1.tagsInsideDefs);
 // <stop> must be inside gradient
 requiredParentTags.set(tags_1.gradientTags, tags_1.gradientChildTags);
 // <mpath> must be inside <animateMotion>

package/lib/svg/cleanup/bad-tags.mjs

@@ -4,7 +4,6 @@ import {
   allValidTags,
   animateMotionChildTags,
   badTags,
-  defsTag,
   feComponentTransferChildTag,
   feLightningChildTags,
   feLightningTags,
@@ -13,7 +12,6 @@ import {
   filterTag,
   gradientChildTags,
   gradientTags,
-  tagsInsideDefs,
   unsupportedTags
 } from "../data/tags.mjs";
 var requiredParentTags = new Map();
@@ -21,7 +19,6 @@ requiredParentTags.set(new Set(["feComponentTransfer"]), feComponentTransferChil
 requiredParentTags.set(new Set(["feMerge"]), feMergeChildTags);
 requiredParentTags.set(feLightningTags, feLightningChildTags);
 requiredParentTags.set(filterTag, filterChildTags);
-requiredParentTags.set(defsTag, tagsInsideDefs);
 requiredParentTags.set(gradientTags, gradientChildTags);
 requiredParentTags.set(new Set(["animateMotion"]), animateMotionChildTags);
 async function checkBadTags(svg) {

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

@@ -1,4 +1,4 @@
-import type { SVG } from '..';
+import type { SVG } from '../../svg';
 /**
  * Expand inline style
  */

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

@@ -1,4 +1,4 @@
-import type { SVG } from '..';
+import type { SVG } from '../../svg';
 /**
  * Clean up SVG
  */

package/lib/svg/cleanup/root-svg.js

@@ -77,7 +77,7 @@ async function cleanupSVGRoot(svg) {
             $root.removeAttr(attr);
             return;
         }
-        console.log(`Removing unexpected attribute on SVG: ${attr}`);
+        console.warn(`Removing unexpected attribute on SVG: ${attr}`);
         $root.removeAttr(attr);
     });
     if (Object.keys(moveToChildren).length) {
@@ -93,7 +93,9 @@ async function cleanupSVGRoot(svg) {
                 return;
             }
             const tagName = child.tagName;
-            if (tagName === 'style' || tags_1.maskAndSymbolTags.has(tagName)) {
+            if (tagName === 'style' ||
+                tags_1.reusableElementsWithPalette.has(tagName) ||
+                tags_1.maskTags.has(tagName)) {
                 // Do not wrap these elements
                 return;
             }

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

@@ -9,7 +9,7 @@ import {
   tagSpecificNonPresentationalAttributes,
   tagSpecificPresentationalAttributes
 } from "../data/attributes.mjs";
-import { maskAndSymbolTags } from "../data/tags.mjs";
+import { maskTags, reusableElementsWithPalette } from "../data/tags.mjs";
 async function cleanupSVGRoot(svg) {
   const cheerio = svg.$svg;
   const $root = svg.$svg(":root");
@@ -60,7 +60,7 @@ async function cleanupSVGRoot(svg) {
       $root.removeAttr(attr);
       return;
     }
-    console.log(`Removing unexpected attribute on SVG: ${attr}`);
+    console.warn(`Removing unexpected attribute on SVG: ${attr}`);
     $root.removeAttr(attr);
   });
   if (Object.keys(moveToChildren).length) {
@@ -75,7 +75,7 @@ async function cleanupSVGRoot(svg) {
         return;
       }
       const tagName2 = child.tagName;
-      if (tagName2 === "style" || maskAndSymbolTags.has(tagName2)) {
+      if (tagName2 === "style" || reusableElementsWithPalette.has(tagName2) || maskTags.has(tagName2)) {
         return;
       }
       $child.appendTo($wrapper);

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

@@ -1,4 +1,4 @@
-import type { SVG } from '..';
+import type { SVG } from '../../svg';
 /**
  * Expand inline style
  */

package/lib/svg/data/attributes.js

@@ -221,7 +221,7 @@ exports.tagSpecificPresentationalAttributes = {
     svg: new Set(['width', 'height', ...exports.presentationalAttributes]),
     // Defnitions, containers and masks
     clipPath: new Set([...exports.presentationalAttributes]),
-    defs: new Set([...exports.presentationalAttributes]),
+    defs: new Set([]),
     g: new Set([...exports.presentationalAttributes]),
     mask: new Set(['x', 'y', 'width', 'height', ...exports.presentationalAttributes]),
     symbol: new Set(['x', 'y', 'width', 'height', ...exports.presentationalAttributes]),

package/lib/svg/data/attributes.mjs

@@ -156,7 +156,7 @@ var tagSpecificAnimatedAttributes = {
 var tagSpecificPresentationalAttributes = {
   svg: new Set(["width", "height", ...presentationalAttributes]),
   clipPath: new Set([...presentationalAttributes]),
-  defs: new Set([...presentationalAttributes]),
+  defs: new Set([]),
   g: new Set([...presentationalAttributes]),
   mask: new Set(["x", "y", "width", "height", ...presentationalAttributes]),
   symbol: new Set(["x", "y", "width", "height", ...presentationalAttributes]),

package/lib/svg/data/tags.d.ts

@@ -29,9 +29,13 @@ export declare const styleTag: Set<string>;
  */
 export declare const defsTag: Set<string>;
 /**
- * Masks: colors are ignored, child elements must have id
+ * Masks: colors are ignored, elements must have id
  */
-export declare const maskAndSymbolTags: Set<string>;
+export declare const maskTags: Set<string>;
+/**
+ * Symbol
+ */
+export declare const symbolTag: Set<string>;
 /**
  * SVG shapes
  */
@@ -45,7 +49,7 @@ export declare const useTag: Set<string>;
  */
 export declare const groupTag: Set<string>;
 /**
- * Marker, must be inside <defs>
+ * Marker, should be inside <defs>
  */
 export declare const markerTag: Set<string>;
 /**
@@ -54,7 +58,7 @@ export declare const markerTag: Set<string>;
 export declare const animateTags: Set<string>;
 export declare const animateMotionChildTags: Set<string>;
 /**
- * Gradients, must be inside <defs>
+ * Gradients, should be inside <defs>
  */
 export declare const gradientTags: Set<string>;
 /**
@@ -62,7 +66,7 @@ export declare const gradientTags: Set<string>;
  */
 export declare const gradientChildTags: Set<string>;
 /**
- * Pattern, must be inside <defs>
+ * Pattern, should be inside <defs>
  */
 export declare const patternTag: Set<string>;
 /**
@@ -76,9 +80,13 @@ export declare const feLightningChildTags: Set<string>;
 export declare const feMergeChildTags: Set<string>;
 /***** Combination of tags *****/
 /**
- * Tags that can be used only inside <defs>
+ * Reusable elements that use colors
+ *
+ * Most are used via color attributes like `fill`
+ * Some are used via custom attributes like `marker-start`
+ * Filter is used via `filter`
  */
-export declare const tagsInsideDefs: Set<string>;
+export declare const reusableElementsWithPalette: Set<string>;
 /**
  * All supported tags
  */

package/lib/svg/data/tags.js

@@ -4,7 +4,7 @@
  * Icons cannot have anything that requires external resources, anything that renders inconsistently.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.allValidTags = exports.tagsInsideDefs = exports.feMergeChildTags = exports.feLightningChildTags = exports.feComponentTransferChildTag = exports.filterChildTags = exports.feLightningTags = exports.filterTag = exports.patternTag = exports.gradientChildTags = exports.gradientTags = exports.animateMotionChildTags = exports.animateTags = exports.markerTag = exports.groupTag = exports.useTag = exports.shapeTags = exports.maskAndSymbolTags = exports.defsTag = exports.styleTag = exports.unsupportedTags = exports.badTags = void 0;
+exports.allValidTags = exports.reusableElementsWithPalette = exports.feMergeChildTags = exports.feLightningChildTags = exports.feComponentTransferChildTag = exports.filterChildTags = exports.feLightningTags = exports.filterTag = exports.patternTag = exports.gradientChildTags = exports.gradientTags = exports.animateMotionChildTags = exports.animateTags = exports.markerTag = exports.groupTag = exports.useTag = exports.shapeTags = exports.symbolTag = exports.maskTags = exports.defsTag = exports.styleTag = exports.unsupportedTags = exports.badTags = void 0;
 /**
  * Bad tags
  *
@@ -57,9 +57,13 @@ exports.styleTag = new Set(['style']);
  */
 exports.defsTag = new Set(['defs']);
 /**
- * Masks: colors are ignored, child elements must have id
+ * Masks: colors are ignored, elements must have id
  */
-exports.maskAndSymbolTags = new Set(['clipPath', 'mask', 'symbol']);
+exports.maskTags = new Set(['clipPath', 'mask']);
+/**
+ * Symbol
+ */
+exports.symbolTag = new Set(['symbol']);
 /**
  * SVG shapes
  */
@@ -81,7 +85,7 @@ exports.useTag = new Set(['use']);
  */
 exports.groupTag = new Set(['g']);
 /**
- * Marker, must be inside <defs>
+ * Marker, should be inside <defs>
  */
 exports.markerTag = new Set(['marker']);
 /**
@@ -96,7 +100,7 @@ exports.animateTags = new Set([
 ]);
 exports.animateMotionChildTags = new Set(['mpath']);
 /**
- * Gradients, must be inside <defs>
+ * Gradients, should be inside <defs>
  */
 exports.gradientTags = new Set(['linearGradient', 'radialGradient']);
 /**
@@ -104,7 +108,7 @@ exports.gradientTags = new Set(['linearGradient', 'radialGradient']);
  */
 exports.gradientChildTags = new Set(['stop']);
 /**
- * Pattern, must be inside <defs>
+ * Pattern, should be inside <defs>
  */
 exports.patternTag = new Set(['pattern']);
 /**
@@ -146,12 +150,18 @@ exports.feLightningChildTags = new Set([
 exports.feMergeChildTags = new Set(['feMergeNode']);
 /***** Combination of tags *****/
 /**
- * Tags that can be used only inside <defs>
+ * Reusable elements that use colors
+ *
+ * Most are used via color attributes like `fill`
+ * Some are used via custom attributes like `marker-start`
+ * Filter is used via `filter`
  */
-exports.tagsInsideDefs = new Set([
+exports.reusableElementsWithPalette = new Set([
     ...exports.gradientTags,
     ...exports.patternTag,
     ...exports.markerTag,
+    ...exports.symbolTag,
+    ...exports.filterTag,
 ]);
 /**
  * All supported tags
@@ -159,7 +169,8 @@ exports.tagsInsideDefs = new Set([
 exports.allValidTags = new Set([
     ...exports.styleTag,
     ...exports.defsTag,
-    ...exports.maskAndSymbolTags,
+    ...exports.maskTags,
+    ...exports.symbolTag,
     ...exports.shapeTags,
     ...exports.useTag,
     ...exports.groupTag,

package/lib/svg/data/tags.mjs

@@ -22,7 +22,8 @@ var badTags = new Set([
 var unsupportedTags = new Set(["metadata", "desc", "title"]);
 var styleTag = new Set(["style"]);
 var defsTag = new Set(["defs"]);
-var maskAndSymbolTags = new Set(["clipPath", "mask", "symbol"]);
+var maskTags = new Set(["clipPath", "mask"]);
+var symbolTag = new Set(["symbol"]);
 var shapeTags = new Set([
   "circle",
   "ellipse",
@@ -80,15 +81,18 @@ var feLightningChildTags = new Set([
   "feDistantLight"
 ]);
 var feMergeChildTags = new Set(["feMergeNode"]);
-var tagsInsideDefs = new Set([
+var reusableElementsWithPalette = new Set([
   ...gradientTags,
   ...patternTag,
-  ...markerTag
+  ...markerTag,
+  ...symbolTag,
+  ...filterTag
 ]);
 var allValidTags = new Set([
   ...styleTag,
   ...defsTag,
-  ...maskAndSymbolTags,
+  ...maskTags,
+  ...symbolTag,
   ...shapeTags,
   ...useTag,
   ...groupTag,
@@ -120,11 +124,12 @@ export {
   gradientTags,
   groupTag,
   markerTag,
-  maskAndSymbolTags,
+  maskTags,
   patternTag,
+  reusableElementsWithPalette,
   shapeTags,
   styleTag,
-  tagsInsideDefs,
+  symbolTag,
   unsupportedTags,
   useTag
 };

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

@@ -1,4 +1,5 @@
 import type { SVG } from '.';
+import type { CSSRuleToken, CSSToken } from '../css/parser/types';
 import { ParseSVGCallbackItem } from './parse';
 /**
  * Item in callback
@@ -13,6 +14,11 @@ interface ParseSVGStyleCallbackItemInline extends ParseSVGStyleCallbackItemCommo
 }
 interface ParseSVGStyleCallbackItemGlobal extends ParseSVGStyleCallbackItemCommon {
     type: 'global';
+    token: CSSRuleToken;
+    selectors: string[];
+    selectorTokens: CSSToken[];
+    prevTokens: (CSSToken | null)[];
+    nextTokens: CSSToken[];
 }
 export declare type ParseSVGStyleCallbackItem = ParseSVGStyleCallbackItemInline | ParseSVGStyleCallbackItemGlobal;
 /**
@@ -23,12 +29,6 @@ export declare type ParseSVGStyleCallbackResult = string | undefined;
  * Callback function
  */
 export declare type ParseSVGStyleCallback = (item: ParseSVGStyleCallbackItem) => ParseSVGStyleCallbackResult | Promise<ParseSVGStyleCallbackResult>;
-/**
- * Options
- */
-interface ParseSVGStyleOptions {
-    skipMasks?: boolean;
-}
 /**
  * Parse styles in SVG
  *
@@ -36,5 +36,5 @@ interface ParseSVGStyleOptions {
  * Callback should return new value (string) or undefined to remove rule.
  * Callback can be asynchronous.
  */
-export declare function parseSVGStyle(svg: SVG, callback: ParseSVGStyleCallback, options?: ParseSVGStyleOptions): Promise<void>;
+export declare function parseSVGStyle(svg: SVG, callback: ParseSVGStyleCallback): Promise<void>;
 export {};

package/lib/svg/parse-style.js

@@ -5,7 +5,6 @@ const parse_1 = require("../css/parse");
 const export_1 = require("../css/parser/export");
 const tokens_1 = require("../css/parser/tokens");
 const tree_1 = require("../css/parser/tree");
-const tags_1 = require("./data/tags");
 const parse_2 = require("./parse");
 /**
  * Parse styles in SVG
@@ -14,7 +13,7 @@ const parse_2 = require("./parse");
  * Callback should return new value (string) or undefined to remove rule.
  * Callback can be asynchronous.
  */
-async function parseSVGStyle(svg, callback, options = {}) {
+async function parseSVGStyle(svg, callback) {
     return (0, parse_2.parseSVG)(svg, async (item) => {
         const tagName = item.tagName;
         const $element = item.$element;
@@ -32,18 +31,43 @@ async function parseSVGStyle(svg, callback, options = {}) {
             }
             // Parse all tokens
             let changed = 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') {
                     newTokens.push(token);
                     continue;
                 }
                 const value = token.value;
+                const selectorTokens = selectorStart
+                    .map((index) => newTokens[index])
+                    .filter((item) => item !== 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 prev;
+                    }, []),
+                    prevTokens: newTokens,
+                    nextTokens: tokens.slice(i + 1),
                 });
                 if (result instanceof Promise) {
                     result = await result;
@@ -64,7 +88,7 @@ async function parseSVGStyle(svg, callback, options = {}) {
                 return;
             }
             // Update style
-            const tree = (0, tree_1.tokensTree)(newTokens);
+            const tree = (0, tree_1.tokensTree)(newTokens.filter((token) => token !== null));
             if (!tree.length) {
                 // Empty
                 $element.remove();
@@ -74,10 +98,6 @@ async function parseSVGStyle(svg, callback, options = {}) {
             item.$element.text(newContent);
             return;
         }
-        // Skip masks
-        if (options.skipMasks && tags_1.maskAndSymbolTags.has(tagName)) {
-            return;
-        }
         // Parse style
         const attribs = item.element.attribs;
         if (attribs.style === void 0) {

package/lib/svg/parse-style.mjs

@@ -3,9 +3,8 @@ 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 { maskAndSymbolTags } from "./data/tags.mjs";
 import { parseSVG } from "./parse.mjs";
-async function parseSVGStyle(svg, callback, options = {}) {
+async function parseSVGStyle(svg, callback) {
   return parseSVG(svg, async (item) => {
     const tagName = item.tagName;
     const $element = item.$element;
@@ -20,18 +19,41 @@ async function parseSVGStyle(svg, callback, options = {}) {
         throw new Error("Error parsing style");
       }
       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") {
           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
+          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(i + 1)
         });
         if (result instanceof Promise) {
           result = await result;
@@ -49,7 +71,7 @@ async function parseSVGStyle(svg, callback, options = {}) {
       if (!changed2) {
         return;
       }
-      const tree = tokensTree(newTokens);
+      const tree = tokensTree(newTokens.filter((token) => token !== null));
       if (!tree.length) {
         $element.remove();
         return;
@@ -58,9 +80,6 @@ async function parseSVGStyle(svg, callback, options = {}) {
       item.$element.text(newContent);
       return;
     }
-    if (options.skipMasks && maskAndSymbolTags.has(tagName)) {
-      return;
-    }
     const attribs = item.element.attribs;
     if (attribs.style === void 0) {
       return;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@iconify/tools",
 	"description": "Collection of functions for cleaning up and parsing SVG for Iconify project",
 	"author": "Vjacheslav Trushkin",
-	"version": "2.0.8",
+	"version": "2.0.12",
 	"license": "MIT",
 	"bugs": "https://github.com/iconify/tools/issues",
 	"homepage": "https://github.com/iconify/tools",
@@ -22,7 +22,7 @@
 		"test": "npm run test:jest && npm run test:jasmine"
 	},
 	"dependencies": {
-		"@iconify/utils": "^1.0.21",
+		"@iconify/utils": "^1.0.23",
 		"@types/cheerio": "^0.22.30",
 		"@types/node-fetch": "^2.5.12",
 		"@types/svgo": "^2.6.0",
@@ -312,6 +312,10 @@
 			"require": "./lib/optimise/flags.js",
 			"import": "./lib/optimise/flags.mjs"
 		},
+		"./lib/optimise/global-style": {
+			"require": "./lib/optimise/global-style.js",
+			"import": "./lib/optimise/global-style.mjs"
+		},
 		"./lib/optimise/scale": {
 			"require": "./lib/optimise/scale.js",
 			"import": "./lib/optimise/scale.mjs"
@@ -320,6 +324,18 @@
 			"require": "./lib/optimise/svgo.js",
 			"import": "./lib/optimise/svgo.mjs"
 		},
+		"./lib/svg/analyse": {
+			"require": "./lib/svg/analyse.js",
+			"import": "./lib/svg/analyse.mjs"
+		},
+		"./lib/svg/analyse/error": {
+			"require": "./lib/svg/analyse/error.js",
+			"import": "./lib/svg/analyse/error.mjs"
+		},
+		"./lib/svg/analyse/types": {
+			"require": "./lib/svg/analyse/types.js",
+			"import": "./lib/svg/analyse/types.mjs"
+		},
 		"./lib/svg/cleanup": {
 			"require": "./lib/svg/cleanup.js",
 			"import": "./lib/svg/cleanup.mjs"