vite-awesome-svg-loader 1.3.5 → 1.4.0

package/index.d.ts

@@ -48,6 +48,19 @@ export interface SvgLoaderOptions {
      * This also can be done in an import: `import imageSrc from "./path/to/image.svg?preserve-line-width"`.
      */
     preserveLineWidthList: (string | RegExp)[];
+    /**
+     * A list of files or directories to disable preserving line width of. Overrides {@link preserveLineWidthList}.
+     */
+    skipPreserveLineWidthList: (string | RegExp)[];
+    /**
+     * A list of CSS selectors to disable {@link preserveLineWidthList} for. Use it to leave specific elements stroke
+     * width as-is.
+     *
+     * Can be a list of selectors or selectors-per-files specifiers.
+     *
+     * Unlike {@link skipSetCurrentColorSelectors} and {@link skipTransformsSelectors}, doesn't impact build performance.
+     */
+    skipPreserveLineWidthSelectors: (string | SelectorsPerFiles)[];
     /**
      * A list of files or directories to replace fill, stroke and `<stop>` colors to `currentColor` of, i.e.:
      *
@@ -65,6 +78,39 @@ export interface SvgLoaderOptions {
      * This also can be done in an import: `import imageSrc from "./path/to/image.svg?set-current-color"`.
      */
     setCurrentColorList: (string | RegExp)[];
+    /**
+     * A list of files or directories to disable setting current color of. Overrides {@link setCurrentColorList}.
+     */
+    skipSetCurrentColorList: (string | RegExp)[];
+    /**
+     * A list of CSS selectors to disable {@link setCurrentColorList} for. Use it to leave specific elements colors as-is.
+     *
+     * Can be a list of selectors or selectors-per-files specifiers.
+     *
+     * **You probably don't need this option.**
+     *
+     * For example, if you're creating multi-colored icons, consider following:
+     *
+     * 1. Using SVG-symbols
+     * 1. Add data-attributes for different colors: `data-color-primary`, `data-color-secondary` or whatever fits your
+     * needs.
+     * 1. Colorize icon with CSS:
+     *
+     * ```css
+     * svg *[data-color-primary] {
+     *   color: var(--icon-color-primary);
+     * }
+     *
+     * svg *[data-color-secondary] {
+     *   color: var(--icon-color-secondary);
+     * }
+     * ```
+     *
+     * This way you'll get full extensibility.
+     *
+     * **Heavy usage may significantly slow down build time.** Limit selectors to specific files to improve performance.
+     */
+    skipSetCurrentColorSelectors: (string | SelectorsPerFiles)[];
     /**
      * A list of files to skip while transforming.
      *
@@ -74,6 +120,17 @@ export interface SvgLoaderOptions {
      * SVGO is still applied to the added files.
      */
     skipTransformsList: (string | RegExp)[];
+    /**
+     * A list of CSS selectors to disable all transforms for. Use it to leave specific elements as-is.
+     *
+     * Can be a list of selectors or selectors-per-files specifiers.
+     *
+     * You probably don't need this option. Try rethinking how you manage your assets (see example at
+     * {@link skipSetCurrentColorSelectors}). This option is for some very obscure edge cases only.
+     *
+     * **Heavy usage may significantly slow down build time.** Limit selectors to specific files to improve performance.
+     */
+    skipTransformsSelectors: (string | SelectorsPerFiles)[];
     /**
      * A list of files to skip loading of. Useful for passing original files to another loader.
      *
@@ -106,6 +163,19 @@ export interface SvgLoaderOptions {
      */
     defaultImport: ImportType;
 }
+/**
+ * CSS selector per file or files
+ */
+export interface SelectorsPerFiles {
+    /**
+     * List of filenames and/or paths matchers
+     */
+    files: (string | RegExp)[];
+    /**
+     * List of selectors
+     */
+    selectors: string[];
+}
 /**
  * A Vite plugin that:
  *
@@ -115,8 +185,11 @@ export interface SvgLoaderOptions {
  *    1. Source code data URI: `import imageSrcDataUri from "./path/to/image.svg?source-data-uri"`.
  *    1. Source code Base64: `import imageBase64 from "./path/to/image.svg?base64"`.
  *    1. Source code Base64 data URI: `import imageBase64DataUri from "./path/to/image.svg?base64-data-uri"`.
- * 1. Can preserve line width (make icons and line art have same line width when scaling): `import imageSrc from "./path/to/image.svg?preserve-line-width"`. See also: {@link SvgLoaderOptions.preserveLineWidthList}.
- * 1. Can replace colors with `currentColor`: `import imageSrc from "./path/to/image.svg?set-current-color"`. See also: {@link SvgLoaderOptions.setCurrentColorList}.
+ * 1. Can preserve line width (make icons and line art have same line width when scaling):
+ * `import imageSrc from "./path/to/image.svg?preserve-line-width"`.
+ * See also: {@link SvgLoaderOptions.preserveLineWidthList}.
+ * 1. Can replace colors with `currentColor`: `import imageSrc from "./path/to/image.svg?set-current-color"`.
+ * See also: {@link SvgLoaderOptions.setCurrentColorList}.
  * 1. Will minimize your SVGs using [SVGO](https://github.com/svg/svgo).
  *
  * Parameters can be chained with an `&` symbol like in a normal URL:
@@ -147,7 +220,8 @@ export interface SvgLoaderOptions {
  * import image from "./path/to/image.svg?skip-awesome-svg-loader";
  * ```
  *
- * You can set filenames and regexes in {@link SvgLoaderOptions}, so you don't have to write such long urls for every import.
+ * You can set filenames and regexes in {@link SvgLoaderOptions}, so you don't have to write such long urls for every
+ * import.
  *
  * @param options Plugin options
  */

package/index.js

@@ -42,22 +42,28 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   viteAwesomeSvgLoader: () => viteAwesomeSvgLoader
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_fs_extra = __toESM(require("fs-extra"));
 var import_path = __toESM(require("path"));
 var import_svgo = require("svgo");
+var import_xast = require("svgo/lib/xast.js");
 var csstree = __toESM(require("css-tree"));
 var import_imurmurhash = __toESM(require("imurmurhash"));
 var IMPORT_TYPES = ["url", "source", "source-data-uri", "base64", "base64-data-uri"];
 var DEFAULT_OPTIONS = {
   tempDir: ".temp",
   preserveLineWidthList: [],
+  skipPreserveLineWidthList: [],
+  skipPreserveLineWidthSelectors: [],
   setCurrentColorList: [],
+  skipSetCurrentColorList: [],
+  skipSetCurrentColorSelectors: [],
   skipTransformsList: [],
+  skipTransformsSelectors: [],
   skipFilesList: [],
   defaultImport: "source"
 };
@@ -136,18 +142,28 @@ function viteAwesomeSvgLoader(options = {}) {
       const query = {};
       for (const pair of queryKVPairs) {
         const [key, value] = pair.split("=");
-        query[key.toLocaleLowerCase()] = value || "1";
+        query[key.toLowerCase()] = value || "1";
       }
-      if (shouldDoThing(relPathWithSlash, query["skip-awesome-svg-loader"], mergedOptions.skipFilesList)) {
+      if (matchesQueryOrList(relPathWithSlash, query["skip-awesome-svg-loader"], mergedOptions.skipFilesList)) {
         return null;
       }
-      const shouldSkipTransforms = shouldDoThing(
+      const shouldSkipTransforms = matchesQueryOrList(
         relPathWithSlash,
         query["skip-transforms"],
         mergedOptions.skipTransformsList
       );
-      const shouldPreserveLineWidth = !shouldSkipTransforms && shouldDoThing(relPathWithSlash, query["preserve-line-width"], mergedOptions.preserveLineWidthList);
-      const shouldSetCurrentColor = !shouldSkipTransforms && shouldDoThing(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList);
+      const shouldPreserveLineWidth = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["preserve-line-width"], mergedOptions.preserveLineWidthList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipPreserveLineWidthList);
+      const shouldSetCurrentColor = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipSetCurrentColorList);
+      const skipPreserveLineWidthSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipPreserveLineWidthSelectors
+      );
+      const skipSetCurrentColorSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipSetCurrentColorSelectors
+      );
+      const skipTransformsSelectors = selectorsToList(relPathWithSlash, mergedOptions.skipTransformsSelectors);
+      const nodesWithOrigColors = [];
       let joinedParamsStr = "";
       for (const param of [shouldSkipTransforms, shouldPreserveLineWidth, shouldSetCurrentColor]) {
         joinedParamsStr += param ? "1" : "0";
@@ -174,13 +190,25 @@ function viteAwesomeSvgLoader(options = {}) {
             name: "awesome-svg-loader",
             fn: () => {
               return {
+                root: {
+                  enter: (root2) => {
+                    for (const selectors of [skipSetCurrentColorSelectors, skipTransformsSelectors]) {
+                      for (const selector of selectors) {
+                        nodesWithOrigColors.push(...(0, import_xast.querySelectorAll)(root2, selector));
+                      }
+                    }
+                  }
+                },
                 element: {
                   enter: (node) => {
-                    if (shouldPreserveLineWidth) {
+                    if (matchesSelectors(node, skipTransformsSelectors)) {
+                      return;
+                    }
+                    if (shouldPreserveLineWidth && !matchesSelectors(node, skipPreserveLineWidthSelectors)) {
                       preserveLineWidth(node, fullPath);
                     }
-                    if (shouldSetCurrentColor) {
-                      isFillSetOnRoot = setCurrentColor(node, isFillSetOnRoot);
+                    if (shouldSetCurrentColor && !matchesSelectors(node, skipSetCurrentColorSelectors)) {
+                      isFillSetOnRoot = setCurrentColor(node, isFillSetOnRoot, nodesWithOrigColors);
                     }
                   }
                 }
@@ -197,13 +225,13 @@ function viteAwesomeSvgLoader(options = {}) {
       }
       switch (importType) {
         case "source":
-          return "export default `" + code.replaceAll("`", "\\`") + "`;";
+          return "export default `" + escapeBackticks(code) + "`;";
         case "source-data-uri":
-          return "export default `data:image/svg+xml," + encodeURIComponent(code.replaceAll("`", "\\`")) + "`;";
+          return "export default `data:image/svg+xml," + encodeURIComponent(code) + "`;";
         case "base64":
-          return "export default `" + toBase64(code).replaceAll("`", "\\`") + "`;";
+          return "export default `" + escapeBackticks(toBase64(code)) + "`;";
         case "base64-data-uri":
-          return "export default `data:image/svg+xml;base64," + encodeURIComponent(toBase64(code)).replaceAll("`", "\\`") + "`;";
+          return "export default `data:image/svg+xml;base64," + encodeURIComponent(toBase64(code)) + "`;";
       }
       if (!isBuildMode) {
         const assetUrl = mergedOptions.tempDir + assetRelPath;
@@ -223,23 +251,51 @@ function toBase64(str) {
   const binString = String.fromCodePoint(...new TextEncoder().encode(str));
   return btoa(binString);
 }
-function shouldDoThing(relPathWithSlash, queryValue, list) {
-  if ((queryValue == null ? void 0 : queryValue.toLocaleLowerCase()) === "false") {
+function escapeBackticks(str) {
+  return str.replaceAll("`", "\\`");
+}
+function matchesQueryOrList(relPathWithSlash, queryValue, matchers) {
+  if ((queryValue == null ? void 0 : queryValue.toLowerCase()) === "false") {
     return false;
   }
   if (queryValue) {
     return true;
   }
+  return matchesPath(relPathWithSlash, matchers);
+}
+function matchesPath(relPathWithSlash, matchers) {
   const filename = import_path.default.basename(relPathWithSlash);
-  for (const entry of list) {
-    for (const name of [filename, relPathWithSlash]) {
-      if (name === entry || entry instanceof RegExp && entry.exec(name)) {
+  const toMatch = [filename, relPathWithSlash];
+  for (const matcher of matchers) {
+    for (const entry of toMatch) {
+      if (entry === matcher || matcher instanceof RegExp && matcher.exec(entry)) {
         return true;
       }
     }
   }
   return false;
 }
+function selectorsToList(relPathWithSlash, selectors) {
+  const resolvedSelectors = [];
+  for (const selector of selectors) {
+    if (typeof selector === "string") {
+      resolvedSelectors.push(selector);
+      continue;
+    }
+    if (matchesPath(relPathWithSlash, selector.files)) {
+      resolvedSelectors.push(...selector.selectors);
+    }
+  }
+  return resolvedSelectors;
+}
+function matchesSelectors(node, selectors) {
+  for (const selector of selectors) {
+    if ((0, import_xast.matches)(node, selector)) {
+      return true;
+    }
+  }
+  return false;
+}
 var TAGS_TO_PRESERVE_LINE_WIDTH_OF = {
   circle: true,
   ellipse: true,
@@ -290,15 +346,15 @@ var IGNORE_COLORS = {
   transparent: true,
   currentColor: true
 };
-function setCurrentColor(node, isFillSetOnRoot) {
-  var _a;
+function setCurrentColor(node, isFillSetOnRoot, nodesWithOrigColors) {
   if (node.name === "style") {
-    const newCss = setCurrentColorCss((_a = node.children[0]) == null ? void 0 : _a.value, false);
+    const firstChild = node.children[0];
+    const newCss = setCurrentColorCss(firstChild == null ? void 0 : firstChild.value, nodesWithOrigColors, false);
     if (newCss) {
-      node.children[0].value = newCss;
+      firstChild.value = newCss;
     }
   } else {
-    const newCss = setCurrentColorCss(node.attributes.style, true);
+    const newCss = setCurrentColorCss(node.attributes.style, nodesWithOrigColors, true);
     if (newCss) {
       node.attributes.style = newCss;
     }
@@ -319,7 +375,7 @@ function setCurrentColor(node, isFillSetOnRoot) {
   }
   return isFillSetOnRoot;
 }
-function setCurrentColorCss(css, isInline = false) {
+function setCurrentColorCss(css, nodesWithOrigColors, isInline = false) {
   if (!css || typeof css !== "string") {
     return "";
   }
@@ -328,20 +384,70 @@ function setCurrentColorCss(css, isInline = false) {
     css = `{${css}}`;
     context = "block";
   }
+  const shouldPreserveColors = !isInline && nodesWithOrigColors.length;
+  let origColorSelectors = [];
+  let currentColorSelectors = [];
+  let didSplitSelectors = false;
   const ast = csstree.parse(css, { context });
-  csstree.walk(ast, {
-    visit: "Declaration",
-    enter: (node) => {
-      var _a, _b;
-      if (!COLOR_ATTRS_TO_REPLACE[node.property]) {
+  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;
         return;
       }
-      const identifier = (_b = (_a = node.value) == null ? void 0 : _a.children) == null ? void 0 : _b.first;
-      const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
-      if (color && !IGNORE_COLORS[color]) {
-        node.value = csstree.parse("currentColor", { context: "value" });
+      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;
       }
     }
+    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

@@ -19,14 +19,20 @@ var __spreadValues = (a, b) => {
 import fs from "fs-extra";
 import path from "path";
 import { optimize } from "svgo";
+import { matches as matchesSelector, querySelectorAll } from "svgo/lib/xast.js";
 import * as csstree from "css-tree";
 import MurmurHash3 from "imurmurhash";
 var IMPORT_TYPES = ["url", "source", "source-data-uri", "base64", "base64-data-uri"];
 var DEFAULT_OPTIONS = {
   tempDir: ".temp",
   preserveLineWidthList: [],
+  skipPreserveLineWidthList: [],
+  skipPreserveLineWidthSelectors: [],
   setCurrentColorList: [],
+  skipSetCurrentColorList: [],
+  skipSetCurrentColorSelectors: [],
   skipTransformsList: [],
+  skipTransformsSelectors: [],
   skipFilesList: [],
   defaultImport: "source"
 };
@@ -105,18 +111,28 @@ function viteAwesomeSvgLoader(options = {}) {
       const query = {};
       for (const pair of queryKVPairs) {
         const [key, value] = pair.split("=");
-        query[key.toLocaleLowerCase()] = value || "1";
+        query[key.toLowerCase()] = value || "1";
       }
-      if (shouldDoThing(relPathWithSlash, query["skip-awesome-svg-loader"], mergedOptions.skipFilesList)) {
+      if (matchesQueryOrList(relPathWithSlash, query["skip-awesome-svg-loader"], mergedOptions.skipFilesList)) {
         return null;
       }
-      const shouldSkipTransforms = shouldDoThing(
+      const shouldSkipTransforms = matchesQueryOrList(
         relPathWithSlash,
         query["skip-transforms"],
         mergedOptions.skipTransformsList
       );
-      const shouldPreserveLineWidth = !shouldSkipTransforms && shouldDoThing(relPathWithSlash, query["preserve-line-width"], mergedOptions.preserveLineWidthList);
-      const shouldSetCurrentColor = !shouldSkipTransforms && shouldDoThing(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList);
+      const shouldPreserveLineWidth = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["preserve-line-width"], mergedOptions.preserveLineWidthList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipPreserveLineWidthList);
+      const shouldSetCurrentColor = !shouldSkipTransforms && matchesQueryOrList(relPathWithSlash, query["set-current-color"], mergedOptions.setCurrentColorList) && !matchesQueryOrList(relPathWithSlash, void 0, mergedOptions.skipSetCurrentColorList);
+      const skipPreserveLineWidthSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipPreserveLineWidthSelectors
+      );
+      const skipSetCurrentColorSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipSetCurrentColorSelectors
+      );
+      const skipTransformsSelectors = selectorsToList(relPathWithSlash, mergedOptions.skipTransformsSelectors);
+      const nodesWithOrigColors = [];
       let joinedParamsStr = "";
       for (const param of [shouldSkipTransforms, shouldPreserveLineWidth, shouldSetCurrentColor]) {
         joinedParamsStr += param ? "1" : "0";
@@ -143,13 +159,25 @@ function viteAwesomeSvgLoader(options = {}) {
             name: "awesome-svg-loader",
             fn: () => {
               return {
+                root: {
+                  enter: (root2) => {
+                    for (const selectors of [skipSetCurrentColorSelectors, skipTransformsSelectors]) {
+                      for (const selector of selectors) {
+                        nodesWithOrigColors.push(...querySelectorAll(root2, selector));
+                      }
+                    }
+                  }
+                },
                 element: {
                   enter: (node) => {
-                    if (shouldPreserveLineWidth) {
+                    if (matchesSelectors(node, skipTransformsSelectors)) {
+                      return;
+                    }
+                    if (shouldPreserveLineWidth && !matchesSelectors(node, skipPreserveLineWidthSelectors)) {
                       preserveLineWidth(node, fullPath);
                     }
-                    if (shouldSetCurrentColor) {
-                      isFillSetOnRoot = setCurrentColor(node, isFillSetOnRoot);
+                    if (shouldSetCurrentColor && !matchesSelectors(node, skipSetCurrentColorSelectors)) {
+                      isFillSetOnRoot = setCurrentColor(node, isFillSetOnRoot, nodesWithOrigColors);
                     }
                   }
                 }
@@ -166,13 +194,13 @@ function viteAwesomeSvgLoader(options = {}) {
       }
       switch (importType) {
         case "source":
-          return "export default `" + code.replaceAll("`", "\\`") + "`;";
+          return "export default `" + escapeBackticks(code) + "`;";
         case "source-data-uri":
-          return "export default `data:image/svg+xml," + encodeURIComponent(code.replaceAll("`", "\\`")) + "`;";
+          return "export default `data:image/svg+xml," + encodeURIComponent(code) + "`;";
         case "base64":
-          return "export default `" + toBase64(code).replaceAll("`", "\\`") + "`;";
+          return "export default `" + escapeBackticks(toBase64(code)) + "`;";
         case "base64-data-uri":
-          return "export default `data:image/svg+xml;base64," + encodeURIComponent(toBase64(code)).replaceAll("`", "\\`") + "`;";
+          return "export default `data:image/svg+xml;base64," + encodeURIComponent(toBase64(code)) + "`;";
       }
       if (!isBuildMode) {
         const assetUrl = mergedOptions.tempDir + assetRelPath;
@@ -192,23 +220,51 @@ function toBase64(str) {
   const binString = String.fromCodePoint(...new TextEncoder().encode(str));
   return btoa(binString);
 }
-function shouldDoThing(relPathWithSlash, queryValue, list) {
-  if ((queryValue == null ? void 0 : queryValue.toLocaleLowerCase()) === "false") {
+function escapeBackticks(str) {
+  return str.replaceAll("`", "\\`");
+}
+function matchesQueryOrList(relPathWithSlash, queryValue, matchers) {
+  if ((queryValue == null ? void 0 : queryValue.toLowerCase()) === "false") {
     return false;
   }
   if (queryValue) {
     return true;
   }
+  return matchesPath(relPathWithSlash, matchers);
+}
+function matchesPath(relPathWithSlash, matchers) {
   const filename = path.basename(relPathWithSlash);
-  for (const entry of list) {
-    for (const name of [filename, relPathWithSlash]) {
-      if (name === entry || entry instanceof RegExp && entry.exec(name)) {
+  const toMatch = [filename, relPathWithSlash];
+  for (const matcher of matchers) {
+    for (const entry of toMatch) {
+      if (entry === matcher || matcher instanceof RegExp && matcher.exec(entry)) {
         return true;
       }
     }
   }
   return false;
 }
+function selectorsToList(relPathWithSlash, selectors) {
+  const resolvedSelectors = [];
+  for (const selector of selectors) {
+    if (typeof selector === "string") {
+      resolvedSelectors.push(selector);
+      continue;
+    }
+    if (matchesPath(relPathWithSlash, selector.files)) {
+      resolvedSelectors.push(...selector.selectors);
+    }
+  }
+  return resolvedSelectors;
+}
+function matchesSelectors(node, selectors) {
+  for (const selector of selectors) {
+    if (matchesSelector(node, selector)) {
+      return true;
+    }
+  }
+  return false;
+}
 var TAGS_TO_PRESERVE_LINE_WIDTH_OF = {
   circle: true,
   ellipse: true,
@@ -259,15 +315,15 @@ var IGNORE_COLORS = {
   transparent: true,
   currentColor: true
 };
-function setCurrentColor(node, isFillSetOnRoot) {
-  var _a;
+function setCurrentColor(node, isFillSetOnRoot, nodesWithOrigColors) {
   if (node.name === "style") {
-    const newCss = setCurrentColorCss((_a = node.children[0]) == null ? void 0 : _a.value, false);
+    const firstChild = node.children[0];
+    const newCss = setCurrentColorCss(firstChild == null ? void 0 : firstChild.value, nodesWithOrigColors, false);
     if (newCss) {
-      node.children[0].value = newCss;
+      firstChild.value = newCss;
     }
   } else {
-    const newCss = setCurrentColorCss(node.attributes.style, true);
+    const newCss = setCurrentColorCss(node.attributes.style, nodesWithOrigColors, true);
     if (newCss) {
       node.attributes.style = newCss;
     }
@@ -288,7 +344,7 @@ function setCurrentColor(node, isFillSetOnRoot) {
   }
   return isFillSetOnRoot;
 }
-function setCurrentColorCss(css, isInline = false) {
+function setCurrentColorCss(css, nodesWithOrigColors, isInline = false) {
   if (!css || typeof css !== "string") {
     return "";
   }
@@ -297,20 +353,70 @@ function setCurrentColorCss(css, isInline = false) {
     css = `{${css}}`;
     context = "block";
   }
+  const shouldPreserveColors = !isInline && nodesWithOrigColors.length;
+  let origColorSelectors = [];
+  let currentColorSelectors = [];
+  let didSplitSelectors = false;
   const ast = csstree.parse(css, { context });
-  csstree.walk(ast, {
-    visit: "Declaration",
-    enter: (node) => {
-      var _a, _b;
-      if (!COLOR_ATTRS_TO_REPLACE[node.property]) {
+  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;
         return;
       }
-      const identifier = (_b = (_a = node.value) == null ? void 0 : _a.children) == null ? void 0 : _b.first;
-      const color = (identifier == null ? void 0 : identifier.value) || (identifier == null ? void 0 : identifier.name);
-      if (color && !IGNORE_COLORS[color]) {
-        node.value = csstree.parse("currentColor", { context: "value" });
+      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;
       }
     }
+    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);
 }