Custom Vite plugin for transforming SVGs only works in development mode, not in build mode.

[gabrielecirulli]

I'm building an app with SvelteKit, which uses Vite for bundling.

I made a Vite plugin for importing SVG files (using the ?resource query after the file name) which parses the SVG file and turns it into something like this:

export default {
  width: 100,
  height: 100,
  dataUrl: "data:image/svg+xml;charset=utf-8,[...]"
}

The idea is to inline these SVGs into my code and provide some metadata that helps me display them properly. I have valid reasons for not being able to just access the width and height after displaying the SVG image in the browser.

This plugin works perfectly fine in dev mode (i.e. when running vite), however when I build (vite build) and look at the generated files, the SVGs are inlined as data urls instead of as modules within the bundle. My plugin's output appears to be ignored completely.

As an example, here's a snippet from the bundled output:

var yc =
    "data:image/svg+xml,%3csvg%20width='100'%20height='100'[...]"

The SVG has been inlined as raw SVG code urlencoded within a data url rather than my transformed version.

I have tried the following things to no avail:

• Rewrite the transform method of the plugin as a load method instead
• Use a debugger to step through the vite execution and observe the transformation process
  • As far as I can tell my plugin transforms the files correctly and the result does not get overwritten by any other plugin, however the transformed code still doesn't make it into the build.

Config files

My `vite.config.ts`

import { sveltekit } from "@sveltejs/kit/vite";
import { svgResourcePlugin } from "./plugins/svgResourcePlugin";
import { defineConfig } from "vitest/config";

const config = defineConfig({
  plugins: [svgResourcePlugin(), sveltekit()],
  worker: {
    format: "es",
  },
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
});

export default config;

My `svelte.config.js`

SvelteKit is configured with the adapter @sveltejs/adapter-static which generates a static site when building.

import adapter from "@sveltejs/adapter-static";

import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter({
      pages: "build",
      assets: "build",
      fallback: undefined,
      precompress: false,
      strict: true,
    }),
  },
};

export default config;

Plugin code

import { transformWithEsbuild, type Plugin } from "vite";
import { readFileSync } from "fs";
import { XMLParser } from "fast-xml-parser";

export function svgResourcePlugin(options = {}): Plugin {
  const {
    defaultExport = "url",
    svgoConfig,
    expandProps,
    svgo,
    ref,
    memo,
    replaceAttrValues,
    svgProps,
    titleProp,
  } = options;

  const cache = new Map();
  const svgRegex = /\.svg(?:\?(resource|url))?$/;

  return {
    name: "svg-resource",
    async transform(source, id, isBuild) {
      const result = id.match(svgRegex);

      if (result) {
        const type = result[1];

        if ((defaultExport === "url" && typeof type === "undefined") || type === "url") {
          return source;
        }

        if ((defaultExport === "resource" && typeof type === "undefined") || type === "resource") {
          const idWithoutQuery = id.replace(".svg?resource", ".svg");
          let result = cache.get(idWithoutQuery);

          if (!result) {
            const code = readFileSync(idWithoutQuery, "utf-8");

            const parser = new XMLParser({
              ignoreAttributes: false,
              attributeNamePrefix: "",
            });
            const jsonObj = parser.parse(code);

            if (jsonObj && jsonObj.svg) {
              const width = parseInt(jsonObj.svg.width, 10);
              const height = parseInt(jsonObj.svg.height, 10);
              const dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
                Buffer.from(code).toString(),
              )}`;

              result = `export default ${JSON.stringify({
                width,
                height,
                dataURL,
              })};`;
            } else {
              this.error(`Invalid SVG resource file: ${id}`);
            }

            if (isBuild) {
              cache.set(idWithoutQuery, result);
            }
          }

          return result;
        }
      }
    },
  };
}

Any help would be appreciated ❤️

[gabrielecirulli]

While messing around more with the Vite configuration, I noticed that there's a plugins field under worker.

It appears that the plugin must be placed within this field too if I want the worker code to be able to use the plugin. This appears to have fixed my issue.

Here's the updated vite.config.ts:

import { sveltekit } from "@sveltejs/kit/vite";
import { svgResourcePlugin } from "./plugins/svgResourcePlugin";
import { defineConfig } from "vitest/config";

const config = defineConfig({
  plugins: [svgResourcePlugin(), sveltekit()],
  worker: {
    format: "es",
    plugins: [svgResourcePlugin()],
  },
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
});

export default config;