vite-awesome-svg-loader 1.3.5 → 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.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,34 @@ 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,
+        !shouldPreserveLineWidth
+      );
+      const skipSetCurrentColorSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipSetCurrentColorSelectors,
+        !shouldSetCurrentColor
+      );
+      const skipTransformsSelectors = selectorsToList(
+        relPathWithSlash,
+        mergedOptions.skipTransformsSelectors,
+        shouldSkipTransforms
+      );
+      const nodesWithOrigColors = [];
       let joinedParamsStr = "";
       for (const param of [shouldSkipTransforms, shouldPreserveLineWidth, shouldSetCurrentColor]) {
         joinedParamsStr += param ? "1" : "0";
@@ -159,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: [
@@ -173,14 +196,30 @@ function viteAwesomeSvgLoader(options = {}) {
           {
             name: "awesome-svg-loader",
             fn: () => {
+              if (didTransform) {
+                return null;
+              }
+              didTransform = true;
               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 +236,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 +262,54 @@ 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, returnEmptyList) {
+  const resolvedSelectors = [];
+  if (returnEmptyList) {
+    return 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 +360,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 +389,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,19 +398,74 @@ 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]) {
+    // 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;
       }
-      const identifier = (_b = (_a = node.value) == null ? void 0 : _a.children) == null ? void 0 : _b.first;
+      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;
+        }
+      }
+      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]) {
-        node.value = csstree.parse("currentColor", { context: "value" });
+      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);