Always use base64 for inlined SVG [publish]

.github/workflows/publish.yml

@@ -8,8 +8,10 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ contains(github.event.head_commit.message, '[publish]') }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: xhyrom/setup-bun@v1
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.0.25 # https://github.com/oven-sh/bun/issues/8759
       - run: bun install
       - run: bun ci
       - uses: ArnaudBarre/npm-publish@v1

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.7.4
+
+- Always use base64 for inlined SVG to avoid issues when used inside `url()`
+
 ## 0.7.3
 
 - Fix multiple issues with assets handling:

package.json

@@ -2,7 +2,7 @@
   "name": "@arnaud-barre/rds",
   "private": true,
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "license": "MIT",
   "scripts": {
     "dev": "scripts/bundle.ts --dev",

src/server/assets.ts

@@ -1,4 +1,11 @@
 import { readFileSync } from "node:fs";
 import { cache } from "./cache.ts";
+import { type Extension, mimeTypes } from "./mimeTypes.ts";
+import { getExtension } from "./utils.ts";
 
 export const assetsCache = cache("assets", (url) => readFileSync(url));
+
+export const toBase64Url = (resolveUrl: string, content: Buffer) => {
+  const mimeType = mimeTypes[getExtension(resolveUrl) as Extension];
+  return `data:${mimeType};base64,${content.toString("base64")}`;
+};

src/server/build.ts

@@ -3,13 +3,14 @@ import { join } from "node:path";
 import { logEsbuildErrors } from "@arnaud-barre/config-loader";
 import { downwind } from "@arnaud-barre/downwind/esbuild";
 import { build, type BuildResult, type Metafile } from "esbuild";
+import { toBase64Url } from "./assets.ts";
 import { colors } from "./colors.ts";
 import { commandWrapper } from "./commandWrapper.ts";
 import { ENTRY_POINT } from "./consts.ts";
 import { esbuildFilesLoaders } from "./mimeTypes.ts";
 import { stopProfiler } from "./stopProfiler.ts";
 import { svgToJS } from "./svgToJS.ts";
-import { isCSS, readFile } from "./utils.ts";
+import { isCSS } from "./utils.ts";
 
 export const main = commandWrapper(async (config) => {
   if (config.build.emptyOutDir) {
@@ -52,15 +53,21 @@ export const main = commandWrapper(async (config) => {
               };
             });
             pluginBuild.onLoad({ filter: /\.svg$/u }, (args) => {
-              const contents = readFile(args.path);
+              const contents = readFileSync(args.path);
               if (args.namespace === "inline") {
-                return { loader: "dataurl", contents };
+                return {
+                  loader: "js",
+                  contents: `export default "${toBase64Url(
+                    args.path,
+                    contents,
+                  )}"`,
+                };
               }
               if (args.namespace === "url") return { loader: "file", contents };
               return {
                 loader: "js",
                 contents: svgToJS(
-                  contents,
+                  contents.toString(),
                   'import { jsx } from "react/jsx-runtime";',
                   "jsx",
                   'import { forwardRef } from "react";',

src/server/importsTransform.ts

@@ -1,4 +1,4 @@
-import { assetsCache } from "./assets.ts";
+import { assetsCache, toBase64Url } from "./assets.ts";
 import { cache } from "./cache.ts";
 import {
   DEPENDENCY_PREFIX,
@@ -10,17 +10,9 @@ import { dependenciesCache, getDependencyMetadata } from "./dependencies.ts";
 import type { Downwind } from "./downwind.ts";
 import { RDSError } from "./errors.ts";
 import { jsonCache } from "./json.ts";
-import { type Extension, mimeTypes } from "./mimeTypes.ts";
 import type { Scanner } from "./scanner.ts";
 import { svgCache } from "./svg.ts";
-import {
-  getExtension,
-  getHashedUrl,
-  isInnerNode,
-  isJSON,
-  isSVG,
-  run,
-} from "./utils.ts";
+import { getHashedUrl, isInnerNode, isJSON, isSVG, run } from "./utils.ts";
 
 export type ImportsTransform = ReturnType<typeof initImportsTransform>;
 
@@ -128,10 +120,7 @@ export const initImportsTransform = ({
 
 const getAssetUrl = (raw: string, resolveUrl: string) => {
   const content = assetsCache.get(resolveUrl);
-  if (raw.endsWith("?inline")) {
-    const mimeType = mimeTypes[getExtension(resolveUrl) as Extension];
-    return `data:${mimeType};base64,${content.toString("base64")}`;
-  }
+  if (raw.endsWith("?inline")) return toBase64Url(resolveUrl, content);
   const hashed = getHashedUrl(`${FS_PREFIX}/${resolveUrl}`, content);
   if (isSVG(resolveUrl) || isJSON(resolveUrl)) return `${hashed}&url`;
   return hashed;