vite-awesome-svg-loader 1.4.0 → 1.4.1

package/README.md

@@ -99,14 +99,40 @@ viteAwesomeSvgLoader({
   // A list of files or directories to preserve line width of.
   preserveLineWidthList: [/config-demo\/preserve-line-width\//, /config-demo\/all\//],
 
+  // A list of files to skip while preserving line width. Overrides preserveLineWidthList.
+  skipPreserveLineWidthList: [/line-width-not-preserved\.svg/],
+
   // A list of files or directories to preserve color of
   setCurrentColorList: [/config-demo\/set-current-color\//, /config-demo\/all\//],
 
-  // A list of files to skip while transforming
-  skipTransformsList: [/skip-transforms\.svg/],
+  // A list of files to skip while replacing colors. Overrides setCurrentColorList.
+  skipSetCurrentColorList: [/colors-not-preserved\.svg/],
+
+  // A list of files to skip while transforming. File skip-transforms.svg is present in every directory.
+  skipTransformsList: [/skip-transforms\.svg/, /ignore-elements-orig\.svg/],
 
-  // A list of files to skip loading of
+  // A list of files to skip loading of. File skip-loading.svg is present in every directory.
   skipFilesList: [/skip-loading\.svg/],
+
+  // A list of selectors to skip while preserving line width
+  skipPreserveLineWidthSelectors: [
+    // It can be a list of CSS selectors like this one. Every element in every file will be checked against it.
+    '*[data-original-line-width="true"], *[data-original-line-width="true"] *',
+
+    // Or it can be configured on per-file basis:
+    {
+      files: [/ignore-elements\.svg/, /some-other-file\.svg/],
+      selectors: ['*[data-original-line-width="true"], *[data-original-line-width="true"] *'],
+    },
+  ],
+
+  // These two options are not recommended due to architectural and performance considerations (see JSDoc):
+
+  // A list of selectors to skip while replacing colors. Same format as above.
+  skipSetCurrentColorSelectors: ['*[data-original-color="true"], *[data-original-color="true"] *'],
+
+  // A list of selectors to skip while transforming. Same format as above.
+  skipTransformsSelectors: ['*[data-no-transforms="true"], *[data-no-transforms="true"] *'],
 }),
 ```
 

package/index.js

@@ -156,13 +156,19 @@ function viteAwesomeSvgLoader(options = {}) {
       const shouldSetCurrentColor = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipSetCurrentColorList);
       const skipPreserveLineWidthSelectors = selectorsToList(
         relPathWithSlash,
-        mergedOptions.skipPreserveLineWidthSelectors
+        mergedOptions.skipPreserveLineWidthSelectors,
+        !shouldPreserveLineWidth
       );
       const skipSetCurrentColorSelectors = selectorsToList(
         relPathWithSlash,
-        mergedOptions.skipSetCurrentColorSelectors
+        mergedOptions.skipSetCurrentColorSelectors,
+        !shouldSetCurrentColor
+      );
+      const skipTransformsSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipTransformsSelectors,
+        shouldSkipTransforms
       );
-      const skipTransformsSelectors = selectorsToList(relPathWithSlash, mergedOptions.skipTransformsSelectors);
       const nodesWithOrigColors = [];
       let joinedParamsStr = "";
       for (const param of [shouldSkipTransforms, shouldPreserveLineWidth, shouldSetCurrentColor]) {
@@ -175,6 +181,7 @@ function viteAwesomeSvgLoader(options = {}) {
       const fullPath = root + relPathWithSlash;
       let code = import_fs_extra.default.readFileSync(fullPath).toString();
       let isFillSetOnRoot = false;
+      let didTransform = false;
       code = (0, import_svgo.optimize)(code, {
         multipass: true,
         plugins: [
@@ -189,6 +196,10 @@ function viteAwesomeSvgLoader(options = {}) {
           {
             name: "awesome-svg-loader",
             fn: () => {
+              if (didTransform) {
+                return null;
+              }
+              didTransform = true;
               return {
                 root: {
                   enter: (root2) => {
@@ -275,8 +286,11 @@ function matchesPath(relPathWithSlash, matchers) {
   }
   return false;
 }
-function selectorsToList(relPathWithSlash, selectors) {
+function selectorsToList(relPathWithSlash, selectors, returnEmptyList) {
   const resolvedSelectors = [];
+  if (returnEmptyList) {
+    return resolvedSelectors;
+  }
   for (const selector of selectors) {
     if (typeof selector === "string") {
       resolvedSelectors.push(selector);
@@ -389,65 +403,70 @@ function setCurrentColorCss(css, nodesWithOrigColors, isInline = false) {
   let currentColorSelectors = [];
   let didSplitSelectors = false;
   const ast = csstree.parse(css, { context });
-  csstree.walk(ast, function(node) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (node.__SKIP_SVG_LOADER__ || ((_a = this.rule) == null ? void 0 : _a.__SKIP_SVG_LOADER__)) {
-      return;
-    }
-    if (shouldPreserveColors) {
-      if (node.type === "SelectorList") {
-        origColorSelectors = [];
-        currentColorSelectors = [];
-        didSplitSelectors = false;
+  csstree.walk(ast, {
+    // Ignore because of broken types in csstree:
+    // @ts-ignore
+    visit: shouldPreserveColors ? void 0 : "Declaration",
+    enter: function(node) {
+      var _a, _b, _c, _d, _e, _f, _g;
+      if (node.__SKIP_SVG_LOADER__ || ((_a = this.rule) == null ? void 0 : _a.__SKIP_SVG_LOADER__)) {
         return;
       }
-      if (node.type === "Selector") {
-        const selector = csstree.generate(node);
-        let isOrigColor = false;
-        for (const svgNode of nodesWithOrigColors) {
-          if ((0, import_xast.matches)(svgNode, selector)) {
-            isOrigColor = true;
-            node.__ORIG_COLOR__ = true;
-            break;
+      if (shouldPreserveColors) {
+        if (node.type === "SelectorList") {
+          origColorSelectors = [];
+          currentColorSelectors = [];
+          didSplitSelectors = false;
+          return;
+        }
+        if (node.type === "Selector") {
+          const selector = csstree.generate(node);
+          let isOrigColor = false;
+          for (const svgNode of nodesWithOrigColors) {
+            if ((0, import_xast.matches)(svgNode, selector)) {
+              isOrigColor = true;
+              node.__ORIG_COLOR__ = true;
+              break;
+            }
           }
+          (isOrigColor ? origColorSelectors : currentColorSelectors).push(selector);
+          return;
         }
-        (isOrigColor ? origColorSelectors : currentColorSelectors).push(selector);
+      }
+      if (node.type !== "Declaration" || !COLOR_ATTRS_TO_REPLACE[node.property]) {
         return;
       }
+      const identifier = (_c = (_b = node.value) == null ? void 0 : _b.children) == null ? void 0 : _c.first;
+      const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
+      if (!color || IGNORE_COLORS[color]) {
+        return;
+      }
+      if (shouldPreserveColors && !didSplitSelectors && ((_d = this.rule) == null ? void 0 : _d.prelude.type) === "SelectorList") {
+        const origColorsRule = csstree.clone(this.rule);
+        origColorsRule.__SKIP_SVG_LOADER__ = true;
+        const origColorsSelectors = new csstree.List();
+        const selectors = this.rule.prelude.children;
+        selectors.forEach((node2, listItem) => {
+          if (node2.__ORIG_COLOR__) {
+            selectors.remove(listItem);
+            origColorsSelectors.push(node2);
+          }
+        });
+        origColorsRule.prelude.children = origColorsSelectors;
+        const parent = ((_f = (_e = this.atrule) == null ? void 0 : _e.block) == null ? void 0 : _f.children) || ((_g = this.stylesheet) == null ? void 0 : _g.children);
+        let insertBefore;
+        parent == null ? void 0 : parent.some((rule, listItem) => {
+          if (rule === this.rule) {
+            insertBefore = listItem;
+            return true;
+          }
+          return false;
+        });
+        insertBefore ? parent == null ? void 0 : parent.insertData(origColorsRule, insertBefore) : parent == null ? void 0 : parent.push(origColorsRule);
+        didSplitSelectors = true;
+      }
+      node.value = csstree.parse("currentColor", { context: "value" });
     }
-    if (node.type !== "Declaration" || !COLOR_ATTRS_TO_REPLACE[node.property]) {
-      return;
-    }
-    const identifier = (_c = (_b = node.value) == null ? void 0 : _b.children) == null ? void 0 : _c.first;
-    const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
-    if (!color || IGNORE_COLORS[color]) {
-      return;
-    }
-    if (shouldPreserveColors && !didSplitSelectors && ((_d = this.rule) == null ? void 0 : _d.prelude.type) === "SelectorList") {
-      const origColorsRule = csstree.clone(this.rule);
-      origColorsRule.__SKIP_SVG_LOADER__ = true;
-      const origColorsSelectors = new csstree.List();
-      const selectors = this.rule.prelude.children;
-      selectors.forEach((node2, listItem) => {
-        if (node2.__ORIG_COLOR__) {
-          selectors.remove(listItem);
-          origColorsSelectors.push(node2);
-        }
-      });
-      origColorsRule.prelude.children = origColorsSelectors;
-      const parent = ((_f = (_e = this.atrule) == null ? void 0 : _e.block) == null ? void 0 : _f.children) || ((_g = this.stylesheet) == null ? void 0 : _g.children);
-      let insertBefore;
-      parent == null ? void 0 : parent.some((rule, listItem) => {
-        if (rule === this.rule) {
-          insertBefore = listItem;
-          return true;
-        }
-        return false;
-      });
-      insertBefore ? parent == null ? void 0 : parent.insertData(origColorsRule, insertBefore) : parent == null ? void 0 : parent.push(origColorsRule);
-      didSplitSelectors = true;
-    }
-    node.value = csstree.parse("currentColor", { context: "value" });
   });
   return csstree.generate(ast);
 }

package/index.mjs

@@ -125,13 +125,19 @@ function viteAwesomeSvgLoader(options = {}) {
       const shouldSetCurrentColor = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipSetCurrentColorList);
       const skipPreserveLineWidthSelectors = selectorsToList(
         relPathWithSlash,
-        mergedOptions.skipPreserveLineWidthSelectors
+        mergedOptions.skipPreserveLineWidthSelectors,
+        !shouldPreserveLineWidth
       );
       const skipSetCurrentColorSelectors = selectorsToList(
         relPathWithSlash,
-        mergedOptions.skipSetCurrentColorSelectors
+        mergedOptions.skipSetCurrentColorSelectors,
+        !shouldSetCurrentColor
+      );
+      const skipTransformsSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipTransformsSelectors,
+        shouldSkipTransforms
       );
-      const skipTransformsSelectors = selectorsToList(relPathWithSlash, mergedOptions.skipTransformsSelectors);
       const nodesWithOrigColors = [];
       let joinedParamsStr = "";
       for (const param of [shouldSkipTransforms, shouldPreserveLineWidth, shouldSetCurrentColor]) {
@@ -144,6 +150,7 @@ function viteAwesomeSvgLoader(options = {}) {
       const fullPath = root + relPathWithSlash;
       let code = fs.readFileSync(fullPath).toString();
       let isFillSetOnRoot = false;
+      let didTransform = false;
       code = optimize(code, {
         multipass: true,
         plugins: [
@@ -158,6 +165,10 @@ function viteAwesomeSvgLoader(options = {}) {
           {
             name: "awesome-svg-loader",
             fn: () => {
+              if (didTransform) {
+                return null;
+              }
+              didTransform = true;
               return {
                 root: {
                   enter: (root2) => {
@@ -244,8 +255,11 @@ function matchesPath(relPathWithSlash, matchers) {
   }
   return false;
 }
-function selectorsToList(relPathWithSlash, selectors) {
+function selectorsToList(relPathWithSlash, selectors, returnEmptyList) {
   const resolvedSelectors = [];
+  if (returnEmptyList) {
+    return resolvedSelectors;
+  }
   for (const selector of selectors) {
     if (typeof selector === "string") {
       resolvedSelectors.push(selector);
@@ -358,65 +372,70 @@ function setCurrentColorCss(css, nodesWithOrigColors, isInline = false) {
   let currentColorSelectors = [];
   let didSplitSelectors = false;
   const ast = csstree.parse(css, { context });
-  csstree.walk(ast, function(node) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    if (node.__SKIP_SVG_LOADER__ || ((_a = this.rule) == null ? void 0 : _a.__SKIP_SVG_LOADER__)) {
-      return;
-    }
-    if (shouldPreserveColors) {
-      if (node.type === "SelectorList") {
-        origColorSelectors = [];
-        currentColorSelectors = [];
-        didSplitSelectors = false;
+  csstree.walk(ast, {
+    // Ignore because of broken types in csstree:
+    // @ts-ignore
+    visit: shouldPreserveColors ? void 0 : "Declaration",
+    enter: function(node) {
+      var _a, _b, _c, _d, _e, _f, _g;
+      if (node.__SKIP_SVG_LOADER__ || ((_a = this.rule) == null ? void 0 : _a.__SKIP_SVG_LOADER__)) {
         return;
       }
-      if (node.type === "Selector") {
-        const selector = csstree.generate(node);
-        let isOrigColor = false;
-        for (const svgNode of nodesWithOrigColors) {
-          if (matchesSelector(svgNode, selector)) {
-            isOrigColor = true;
-            node.__ORIG_COLOR__ = true;
-            break;
+      if (shouldPreserveColors) {
+        if (node.type === "SelectorList") {
+          origColorSelectors = [];
+          currentColorSelectors = [];
+          didSplitSelectors = false;
+          return;
+        }
+        if (node.type === "Selector") {
+          const selector = csstree.generate(node);
+          let isOrigColor = false;
+          for (const svgNode of nodesWithOrigColors) {
+            if (matchesSelector(svgNode, selector)) {
+              isOrigColor = true;
+              node.__ORIG_COLOR__ = true;
+              break;
+            }
           }
+          (isOrigColor ? origColorSelectors : currentColorSelectors).push(selector);
+          return;
         }
-        (isOrigColor ? origColorSelectors : currentColorSelectors).push(selector);
+      }
+      if (node.type !== "Declaration" || !COLOR_ATTRS_TO_REPLACE[node.property]) {
         return;
       }
+      const identifier = (_c = (_b = node.value) == null ? void 0 : _b.children) == null ? void 0 : _c.first;
+      const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
+      if (!color || IGNORE_COLORS[color]) {
+        return;
+      }
+      if (shouldPreserveColors && !didSplitSelectors && ((_d = this.rule) == null ? void 0 : _d.prelude.type) === "SelectorList") {
+        const origColorsRule = csstree.clone(this.rule);
+        origColorsRule.__SKIP_SVG_LOADER__ = true;
+        const origColorsSelectors = new csstree.List();
+        const selectors = this.rule.prelude.children;
+        selectors.forEach((node2, listItem) => {
+          if (node2.__ORIG_COLOR__) {
+            selectors.remove(listItem);
+            origColorsSelectors.push(node2);
+          }
+        });
+        origColorsRule.prelude.children = origColorsSelectors;
+        const parent = ((_f = (_e = this.atrule) == null ? void 0 : _e.block) == null ? void 0 : _f.children) || ((_g = this.stylesheet) == null ? void 0 : _g.children);
+        let insertBefore;
+        parent == null ? void 0 : parent.some((rule, listItem) => {
+          if (rule === this.rule) {
+            insertBefore = listItem;
+            return true;
+          }
+          return false;
+        });
+        insertBefore ? parent == null ? void 0 : parent.insertData(origColorsRule, insertBefore) : parent == null ? void 0 : parent.push(origColorsRule);
+        didSplitSelectors = true;
+      }
+      node.value = csstree.parse("currentColor", { context: "value" });
     }
-    if (node.type !== "Declaration" || !COLOR_ATTRS_TO_REPLACE[node.property]) {
-      return;
-    }
-    const identifier = (_c = (_b = node.value) == null ? void 0 : _b.children) == null ? void 0 : _c.first;
-    const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
-    if (!color || IGNORE_COLORS[color]) {
-      return;
-    }
-    if (shouldPreserveColors && !didSplitSelectors && ((_d = this.rule) == null ? void 0 : _d.prelude.type) === "SelectorList") {
-      const origColorsRule = csstree.clone(this.rule);
-      origColorsRule.__SKIP_SVG_LOADER__ = true;
-      const origColorsSelectors = new csstree.List();
-      const selectors = this.rule.prelude.children;
-      selectors.forEach((node2, listItem) => {
-        if (node2.__ORIG_COLOR__) {
-          selectors.remove(listItem);
-          origColorsSelectors.push(node2);
-        }
-      });
-      origColorsRule.prelude.children = origColorsSelectors;
-      const parent = ((_f = (_e = this.atrule) == null ? void 0 : _e.block) == null ? void 0 : _f.children) || ((_g = this.stylesheet) == null ? void 0 : _g.children);
-      let insertBefore;
-      parent == null ? void 0 : parent.some((rule, listItem) => {
-        if (rule === this.rule) {
-          insertBefore = listItem;
-          return true;
-        }
-        return false;
-      });
-      insertBefore ? parent == null ? void 0 : parent.insertData(origColorsRule, insertBefore) : parent == null ? void 0 : parent.push(origColorsRule);
-      didSplitSelectors = true;
-    }
-    node.value = csstree.parse("currentColor", { context: "value" });
   });
   return csstree.generate(ast);
 }

package/package.json

@@ -27,7 +27,7 @@
     "vite-awesome-svg-loader",
     "svgo"
   ],
-  "version": "1.4.0",
+  "version": "1.4.1",
   "homepage": "https://github.com/matafokka/vite-awesome-svg-loader",
   "repository": "https://github.com/matafokka/vite-awesome-svg-loader",
   "license": "LGPL-2.1-or-later",