@anaemia/bundler 0.3.7 → 0.5.0

package/src/index.ts

@@ -1,9 +1,11 @@
-import { Configuration, rspack } from "@rspack/core";
-import path from "path";
+import type { Configuration } from "@rspack/core";
+import { rspack } from "@rspack/core";
+import path from "node:path";
 import fs from "node:fs";
 import type { AnaemiaConfig } from "@anaemia/core/config";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
+import pc from "picocolors";
 
 import clientServerFnTransform from "./plugins/babel-transform-server.js";
 import serverHashInjector from "./plugins/babel-hash-injector-server.js";
@@ -15,43 +17,94 @@ import { generateRouterEntry } from "./router/generate-entry.js";
 import { generateServerRoutes } from "./router/generate-server-routes.js";
 import { getAliases } from "./aliases.js";
 
-import { createStyleRules, createBabelRule } from "./rules.js";
+import { createStyleRules, createBabelRule, createAssetRules } from "./rules.js";
 import { getClientOptimization, getPerformanceProfile } from "./optimization.js";
+import loadEnvFiles from "./env-loader.js";
+
+import { analyzeApp } from "./analyzer/index.js";
 
 const require = createRequire(import.meta.url);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {}): Promise<[Configuration, Configuration]> {
+export async function getRspackConfig(
+  appRoot: string,
+  config: AnaemiaConfig = {},
+): Promise<[Configuration, Configuration]> {
   const isDev = process.env.NODE_ENV !== "production";
-  const rawEnv = process.env;
+  loadEnvFiles(appRoot, process.env.NODE_ENV || "development");
+
+  // run the analyzer to collect route metadata and other information about the app that we can use to optimize the build
+  const analysis = await analyzeApp(appRoot, {
+    mode: isDev ? "development" : "production",
+  });
+
+  // flush diagnostics to console
+  const tag = pc.dim("[anaemia-analyzer]");
+
+  for (const diagnostic of analysis.diagnostics) {
+    const prefix =
+      diagnostic.severity === "error"
+        ? pc.red("✖ [error]")
+        : diagnostic.severity === "warning"
+          ? pc.yellow("⚠ [warning]")
+          : pc.cyan("› [info]");
+
+    const loc = diagnostic.line ? pc.dim(`:${diagnostic.line}`) : "";
+    const file = pc.bold(diagnostic.filePath);
+    const msg =
+      diagnostic.severity === "error"
+        ? pc.red(diagnostic.message)
+        : diagnostic.severity === "warning"
+          ? pc.yellow(diagnostic.message)
+          : diagnostic.message;
+
+    // eslint-disable-next-line no-console
+    console.log(`${tag} ${prefix} ${file}${loc} - ${msg}`);
+    // eslint-disable-next-line no-console
+    if (diagnostic.help) console.log(`  ${pc.dim(`hint: ${diagnostic.help}`)}`);
+  }
+
   const coreRuntimeDir = path.dirname(require.resolve("@anaemia/core/package.json"));
   const runtimeDir = path.resolve(coreRuntimeDir, "./dist/runtime");
 
   const routes = await scanRoutes(appRoot);
   const serverRoutes = scanServerRoutes(appRoot);
-  writeManifest(appRoot, routes);
+  writeManifest(appRoot, routes, analysis.routeMetadata);
 
   const frameworkInternalDir = path.resolve(appRoot, "./.anaemia");
   if (!fs.existsSync(frameworkInternalDir)) {
     fs.mkdirSync(frameworkInternalDir, { recursive: true });
   }
 
+  // bootstrap config entries and generate necessary files for the router based on the scanned routes
   const entryFile = generateRouterEntry(appRoot, routes);
   const serverRoutesFile = generateServerRoutes(appRoot, serverRoutes);
+
   const styleRules = createStyleRules(config);
+  const assetRules = createAssetRules(isDev);
+
+  // allow users to inject additional babel plugins via the config, which is useful for things like macros or other code transforms that need to run at compile time
   const extraClientBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.client ?? []) ?? [];
   const extraServerBabelPlugins = config.plugins?.flatMap((p) => p.babelPlugins?.server ?? []) ?? [];
   const solidRefreshPlugin = [require.resolve("solid-refresh/babel"), { bundler: "rspack-esm", jsx: false }];
 
-  // env processing
+  /**
+   * env processing:
+   *
+   * - we inject some default env vars like MODE, DEV, and PROD for convenience
+   * - for the server, we expose all env vars
+   * - for the client, we only expose vars that start with PUBLIC_, as well as the same defaults
+   * - users can also define additional compile-time constants via config.define.client and config.define.server, which are merged into the rspack DefinePlugin config
+   */
   const serverEnv: Record<string, string> = {
     MODE: JSON.stringify(process.env.NODE_ENV || "development"),
     DEV: JSON.stringify(isDev),
     PROD: JSON.stringify(!isDev),
   };
-  for (const key in rawEnv) {
-    serverEnv[key] = JSON.stringify(rawEnv[key]);
+
+  for (const key in process.env) {
+    serverEnv[key] = JSON.stringify(process.env[key]);
   }
 
   const clientEnv: Record<string, string> = {
@@ -59,18 +112,22 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     DEV: JSON.stringify(isDev),
     PROD: JSON.stringify(!isDev),
   };
-  for (const key in rawEnv) {
+
+  for (const key in process.env) {
     if (key.startsWith("PUBLIC_")) {
-      clientEnv[key] = JSON.stringify(rawEnv[key]);
+      clientEnv[key] = JSON.stringify(process.env[key]);
     }
   }
 
+  // shared resolve config
+  // we set up some shared resolve config between client and server here, like extension aliases and path aliases
   const sharedResolve = {
     extensions: [".tsx", ".ts", ".jsx", ".js", ".json", ".scss", ".css"],
     extensionAlias: { ".js": [".ts", ".js"], ".jsx": [".tsx", ".jsx"] },
     alias: { "anaemia-user-app": entryFile, ...getAliases(appRoot) },
   };
 
+  // client and server configurations
   let clientConfig: Configuration = {
     name: "client",
     context: appRoot,
@@ -95,9 +152,19 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
       alias: {
         ...sharedResolve.alias,
         "solid-refresh": require.resolve("solid-refresh"),
-        [path.resolve(coreRuntimeDir, "./dist/runtime/context.js")]: path.resolve(coreRuntimeDir, "./dist/runtime/context.browser.js"),
+        [path.resolve(coreRuntimeDir, "./dist/runtime/context.js")]: path.resolve(
+          coreRuntimeDir,
+          "./dist/runtime/context.browser.js",
+        ),
+      },
+      fallback: {
+        async_hooks: false,
+        "node:async_hooks": false,
+        fs: false,
+        "node:fs": false,
+        path: false,
+        "node:path": false,
       },
-      fallback: { async_hooks: false, "node:async_hooks": false, fs: false, "node:fs": false, path: false, "node:path": false },
     },
     devServer: isDev
       ? {
@@ -110,9 +177,17 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
         }
       : undefined,
     plugins: [
-      new rspack.HtmlRspackPlugin({ template: path.resolve(appRoot, "./index.html"), filename: "index.html", inject: false }),
+      new rspack.HtmlRspackPlugin({
+        template: path.resolve(appRoot, "./index.html"),
+        filename: "index.html",
+        inject: false,
+      }),
       new rspack.DefinePlugin({
-        __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({ port: config.port, assets: config.assets, styles: config.styles }),
+        __ANAEMIA_RUNTIME_CONFIG__: JSON.stringify({
+          port: config.port,
+          assets: config.assets,
+          styles: config.styles,
+        }),
         ...config.define?.client,
         "import.meta.env": clientEnv,
       }),
@@ -126,7 +201,7 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
           if (fs.existsSync(srcPath)) return srcPath;
 
           return path.resolve(__dirname, "../src/runtime/empty-module.cjs");
-        })()
+        })(),
       ),
       new AnaemiaManifestHydrationPlugin({ appRoot }),
     ],
@@ -134,8 +209,13 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
       parser: { "css/auto": { namedExports: false } },
       rules: [
         styleRules.client,
+        ...assetRules.client,
         {
-          ...createBabelRule({ isServer: false, isDev, plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins] }),
+          ...createBabelRule({
+            isServer: false,
+            isDev,
+            plugins: [clientServerFnTransform, ...(isDev ? [solidRefreshPlugin] : []), ...extraClientBabelPlugins],
+          }),
           exclude: (modulePath: string) => {
             if (modulePath.includes("@anaemia") && modulePath.includes("core")) return false;
             if (modulePath.includes("@solidjs") && modulePath.includes("router")) return false;
@@ -152,7 +232,13 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     context: appRoot,
     target: "node",
     entry: { server: path.resolve(runtimeDir, "entry-server.jsx") },
-    output: { path: path.resolve(appRoot, "./dist/server"), filename: "index.js", module: true, chunkFormat: "module", chunkLoading: "import" },
+    output: {
+      path: path.resolve(appRoot, "./dist/server"),
+      filename: "index.js",
+      module: true,
+      chunkFormat: "module",
+      chunkLoading: "import",
+    },
     optimization: { nodeEnv: false },
     resolve: {
       ...sharedResolve,
@@ -171,8 +257,13 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
       parser: { "css/auto": { namedExports: false } },
       rules: [
         styleRules.server,
+        ...assetRules.server,
         {
-          ...createBabelRule({ isServer: true, isDev, plugins: [serverHashInjector, ...extraServerBabelPlugins] }),
+          ...createBabelRule({
+            isServer: true,
+            isDev,
+            plugins: [serverHashInjector, ...extraServerBabelPlugins],
+          }),
           exclude: (modulePath: string) => {
             if (modulePath.includes("@anaemia") && modulePath.includes("core")) return false;
             if (modulePath.includes("@solidjs") && modulePath.includes("router")) return false;
@@ -183,6 +274,7 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
     },
   };
 
+  // allow plugins to modify the client and server configurations before they are returned
   for (const plugin of config.plugins ?? []) {
     if (plugin.clientRspackConfig) clientConfig = plugin.clientRspackConfig(clientConfig);
     if (plugin.serverRspackConfig) serverConfig = plugin.serverRspackConfig(serverConfig);
@@ -193,3 +285,11 @@ export async function getRspackConfig(appRoot: string, config: AnaemiaConfig = {
 
 export { scanRoutes } from "./router/scan.js";
 export { writeManifest } from "./router/manifest.js";
+export { analyzeApp, collectAnalyzerFiles, parseAnalyzerFile, walkAst } from "./analyzer/index.js";
+export type {
+  AnalyzeAppOptions,
+  AnalyzerDiagnostic,
+  AnalyzerFileKind,
+  AnalyzerResult,
+  ParsedAnalyzerFile,
+} from "./analyzer/index.js";

package/src/optimization.ts

@@ -2,8 +2,8 @@ import { rspack } from "@rspack/core";
 
 export function getClientOptimization(isDev: boolean) {
   return {
-    sideEffects: true,
-    usedExports: true,
+    sideEffects: !isDev,
+    usedExports: !isDev,
     splitChunks: isDev
       ? (false as const)
       : ({
@@ -14,7 +14,7 @@ export function getClientOptimization(isDev: boolean) {
             framework: {
               chunks: "all" as const,
               name: "framework",
-              test: /[\\/]node_modules[\\/](solid-js|@solidjs[\\/]router)[\\/]/,
+              test: /[\\/]node_modules[\\/](solid-js|@solidjs)[\\/]/,
               priority: 40,
               enforce: true,
             },
@@ -26,7 +26,20 @@ export function getClientOptimization(isDev: boolean) {
             },
           },
         } as const),
-    minimizer: isDev ? [] : [new rspack.SwcJsMinimizerRspackPlugin()],
+    minimizer: isDev
+      ? []
+      : [
+          new rspack.SwcJsMinimizerRspackPlugin({
+            minimizerOptions: {
+              mangle: {
+                keep_fnames: true,
+              },
+              compress: {
+                keep_fnames: true,
+              },
+            },
+          }),
+        ],
   };
 }
 
@@ -34,4 +47,4 @@ export function getPerformanceProfile(isDev: boolean) {
   return isDev
     ? { hints: false as const, maxAssetSize: 1000000, maxEntrypointSize: 1000000 }
     : { hints: "warning" as const, maxAssetSize: 307200, maxEntrypointSize: 512000 };
-}
+}

package/src/plugins/babel-transform-server.ts

@@ -28,16 +28,13 @@ export default function clientServerFnTransform({ types: t }: { types: typeof Ba
           state.hasRunOnServer = true;
           const filename = state.file.opts.filename || "unknown";
 
-          const serverFunctionCallback = path.node.arguments[0];
           const explicitId = path.node.arguments[1];
 
           const functionHash = t.isStringLiteral(explicitId)
             ? explicitId.value
             : createServerFunctionId(filename, path.node.start);
 
-          if (serverFunctionCallback) {
-            path.get('arguments.0').remove();
-          }
+          path.get('arguments.0').remove();
 
           // this whole thing is just magic bro
           // wtf is this ast manipulation

package/src/plugins/rspack-manifest-hydration.ts

@@ -32,11 +32,11 @@ export class AnaemiaManifestHydrationPlugin implements RspackPluginInstance {
           const files = Array.from(chunk.files);
 
           const jsFiles = files.filter(
-            (f) => f.endsWith(".js") && !f.includes(".hot-update.") && !f.endsWith(".js.map")
+            (f) => f.endsWith(".js") && !f.includes(".hot-update.") && !f.endsWith(".js.map"),
           );
 
           const cssFiles = files.filter(
-            (f) => f.endsWith(".css") && !f.includes(".hot-update.") && !f.endsWith(".css.map")
+            (f) => f.endsWith(".css") && !f.includes(".hot-update.") && !f.endsWith(".css.map"),
           );
 
           if (jsFiles.length > 0 || cssFiles.length > 0) {
@@ -54,4 +54,4 @@ export class AnaemiaManifestHydrationPlugin implements RspackPluginInstance {
       }
     });
   }
-}
+}

package/src/router/generate-entry.ts

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import type { RouteManifestEntry } from "./scan.js";
 import { transform } from "sucrase";
 
@@ -21,7 +21,14 @@ type PageNode = {
 
 type TreeNode = LayoutNode | PageNode;
 
-function buildTree(routes: RouteManifestEntry[], strippedLayouts: string[][], routeIndices: number[], routesDir: string, allLayouts: Map<string, number>, parentPrefix: string): TreeNode[] {
+function buildTree(
+  routes: RouteManifestEntry[],
+  strippedLayouts: string[][],
+  routeIndices: number[],
+  routesDir: string,
+  allLayouts: Map<string, number>,
+  parentPrefix: string,
+): TreeNode[] {
   const nodes: TreeNode[] = [];
   const leafIndices = strippedLayouts.map((l, i) => (l.length === 0 ? i : -1)).filter((i) => i !== -1);
 
@@ -94,10 +101,12 @@ function renderTree(nodes: TreeNode[], indent = 6): string {
         return `${pad}<Route path="${routePath}" component={Route${node.routeIdx}Wrapped} />`;
       }
 
-      let layoutPath = node.relativePath;
+      const layoutPath = node.relativePath;
       const inner = renderTree(node.children, indent + 2);
 
-      return [`${pad}<Route path="${layoutPath}" component={Layout${node.layoutIdx}}>`, inner, `${pad}</Route>`].join("\n");
+      return [`${pad}<Route path="${layoutPath}" component={Layout${node.layoutIdx}}>`, inner, `${pad}</Route>`].join(
+        "\n",
+      );
     })
     .join("\n");
 }
@@ -193,7 +202,7 @@ const Route${i}Wrapped = (props) => (
     conventionalRoutes.map((_, i) => i),
     routesDir,
     allLayouts,
-    "/"
+    "/",
   );
 
   let routeJsx = renderTree(tree, 6);

package/src/router/generate-server-routes.ts

@@ -1,16 +1,19 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import type { ServerRouteEntry } from "./scan.js";
+import { transform } from "sucrase";
 
 export function generateServerRoutes(appRoot: string, routes: ServerRouteEntry[]): string {
   const outDir = path.resolve(appRoot, "./.anaemia");
-  const outPath = path.resolve(outDir, "./__anaemia_server_routes__.ts");
+  const isTs = fs.existsSync(path.resolve(appRoot, "tsconfig.json"));
+  const ext = isTs ? "ts" : "js";
+  const outPath = path.resolve(outDir, "./__anaemia_server_routes__." + ext);
 
   const imports = routes.map((r, i) => `import * as ServerRoute${i} from "${r.filePath}";`).join("\n");
 
   const registrations = routes.map((r, i) => `  registerRoute(app, "${r.urlPattern}", ServerRoute${i});`).join("\n");
 
-  const code = `
+  const rawCode = `
 // @ts-nocheck
 // auto-generated by anaemia - do not edit!!
 import type { Hono } from "hono";
@@ -31,6 +34,14 @@ ${registrations}
 }
 `.trimStart();
 
-  fs.writeFileSync(outPath, code);
+  const finalCode = isTs
+    ? rawCode
+    : transform(rawCode.replace("// @ts-nocheck\n", ""), {
+        transforms: ["typescript", "jsx"],
+        jsxRuntime: "preserve",
+        production: true,
+      }).code;
+
+  fs.writeFileSync(outPath, finalCode);
   return outPath;
 }

package/src/router/manifest.ts

@@ -1,42 +1,28 @@
-import fs from "fs";
-import path from "path";
-import type { RouteManifestEntry } from "./scan.js";
+import fs from "node:fs";
+import path from "node:path";
+import type { RouteManifestEntry } from "../router/scan.js";
+import type { RouteMetadata } from "../analyzer/checks/route-metadata.js";
 
-interface BuildManifest {
-  routes: RouteManifestEntry[];
-  // filled in after rspack build - maps chunkName to hashed filename
-  chunks: Record<string, { js: string; css?: string }>;
-  errors: Record<string, string>;
-  buildTime: string;
-}
-
-export function writeManifest(appRoot: string, routes: RouteManifestEntry[]): void {
-  const errors: Record<string, string> = {};
-
-  for (const route of routes) {
-    if (route.filePath.endsWith("404.tsx")) {
-      errors["404"] = route.urlPattern;
-    }
-    if (route.filePath.endsWith("500.tsx")) {
-      errors["500"] = route.urlPattern;
-    }
-  }
+export function writeManifest(appRoot: string, routes: RouteManifestEntry[], routeMetadata: RouteMetadata[]) {
+  const metadataMap = new Map(routeMetadata.map((m) => [path.resolve(appRoot, m.filePath), m]));
 
-  const conventionalRoutes = routes.filter(
-    (r) => !r.filePath.endsWith("404.tsx") && !r.filePath.endsWith("500.tsx")
-  );
-
-  const manifest: BuildManifest = {
-    routes: conventionalRoutes,
-    errors,
-    chunks: {}, // rspack fills this in via ManifestPlugin
-    buildTime: new Date().toISOString(),
+  const manifest = {
+    routes: routes.map((route) => {
+      const meta = metadataMap.get(route.filePath);
+      return {
+        ...route,
+        isStatic: meta?.isStatic ?? false,
+        hasLoader: meta?.hasLoader ?? false,
+        hasGuard: meta?.hasGuard ?? false,
+        serverFunctionIds: meta?.serverFunctionIds ?? [],
+      };
+    }),
+    chunks: {},
   };
 
-  const outDir = path.resolve(appRoot, "./dist");
-  fs.mkdirSync(outDir, { recursive: true });
-  fs.writeFileSync(
-    path.resolve(outDir, "route-manifest.json"),
-    JSON.stringify(manifest, null, 2)
-  );
-}
+  const manifestPath = path.resolve(appRoot, "./dist/route-manifest.json");
+  const manifestDir = path.dirname(manifestPath);
+  if (!fs.existsSync(manifestDir)) fs.mkdirSync(manifestDir, { recursive: true });
+
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+}

package/src/router/scan.ts

@@ -1,5 +1,5 @@
 import { glob } from "glob";
-import path from "path";
+import path from "node:path";
 import { createJiti } from "jiti";
 import fs from "node:fs";
 import { getAliases } from "../aliases.js";
@@ -51,16 +51,14 @@ const DYNAMIC_SEGMENT = /^\[(.+?)\]\.(tsx|jsx)$/;
 export function scanServerRoutes(appRoot: string): ServerRouteEntry[] {
   const routesDir = path.resolve(appRoot, "./src/routes");
   const files = glob.sync("**/_route.{ts,tsx,js,jsx}", { cwd: routesDir, posix: true });
-  
+
   return files.map((file) => {
     const dir = path.dirname(file);
-    
-    const normalizedDir = dir
-      .replace(/\[\.\.\.(.+?)\]/g, "*")
-      .replace(/\[(.+?)\]/g, ":$1");
+
+    const normalizedDir = dir.replace(/\[\.\.\.(.+?)\]/g, "*").replace(/\[(.+?)\]/g, ":$1");
 
     const urlPattern = normalizedDir === "." ? "/" : `/${normalizedDir}`;
-    
+
     return {
       urlPattern,
       filePath: path.resolve(routesDir, file),
@@ -92,7 +90,7 @@ export async function scanRoutes(appRoot: string): Promise<RouteManifestEntry[]>
 
       try {
         const layoutModule = (await jiti.import(resolveConfigPath(absolutePath))) as RouteModule;
-        if (layoutModule?.config?.guards) {
+        if (layoutModule.config?.guards) {
           layoutGuards = layoutModule.config.guards;
         }
       } catch {
@@ -122,7 +120,7 @@ export async function scanRoutes(appRoot: string): Promise<RouteManifestEntry[]>
 
     try {
       const pageModule = (await jiti.import(resolveConfigPath(absolutePagePath))) as RouteModule;
-      if (pageModule?.config?.guards) {
+      if (pageModule.config?.guards) {
         pageGuards = pageModule.config.guards;
       }
     } catch {
@@ -207,6 +205,7 @@ function resolveLayoutChain(dir: string, layoutMap: Map<string, LayoutManifestEn
   const layouts: LayoutManifestEntry[] = [];
   let current = dir;
 
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   while (true) {
     const layoutEntry = layoutMap.get(current);
     if (layoutEntry) layouts.unshift(layoutEntry);
@@ -215,4 +214,4 @@ function resolveLayoutChain(dir: string, layoutMap: Map<string, LayoutManifestEn
   }
 
   return layouts;
-}
+}

package/src/rules.ts

@@ -1,30 +1,30 @@
 import { createRequire } from "node:module";
 import type { AnaemiaConfig } from "@anaemia/core";
-import { PluginItem } from "@babel/core";
+import type { PluginItem } from "@babel/core";
+import type { RuleSetRule } from "@rspack/core";
 
 const require = createRequire(import.meta.url);
 
 export function createStyleRules(config: AnaemiaConfig) {
   const useSass = config.styles?.sass !== false;
   const useModules = config.styles?.modules ?? true;
-
   const baseLoaders = useSass ? [{ loader: require.resolve("sass-loader"), options: { api: "modern" } }] : [];
+  const localIdentName = config.styles?.modulesLocalIdentName ?? "[name]__[local]__[hash:base64:5]";
+  const cssParser = useModules ? { cssModules: { localIdentName } } : undefined;
 
   return {
     client: {
       test: /\.(c|sc|sa)ss$/,
       type: useModules ? "css/auto" : ("css" as const),
       use: baseLoaders,
+      parser: cssParser,
     },
     server: {
       test: /\.(c|sc|sa)ss$/,
       type: useModules ? "css/auto" : ("css" as const),
-      generator: {
-        css: {
-          exportOnlyLocals: true,
-        },
-      },
+      generator: { css: { exportOnlyLocals: true } },
       use: baseLoaders,
+      parser: cssParser,
     },
   };
 }
@@ -55,4 +55,44 @@ export function createBabelRule({
       },
     ],
   };
-}
+}
+
+export function createAssetRules(isDev: boolean) {
+  const filename = isDev ? "assets/[name][ext]" : "assets/[name].[contenthash:8][ext]";
+
+  const sharedRawRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg|json)$/i,
+    resourceQuery: /raw/,
+    type: "asset/source",
+  };
+
+  const sharedUrlRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+    resourceQuery: /url/,
+    type: "asset/resource",
+    generator: { filename },
+  };
+
+  const sharedInlineRule: RuleSetRule = {
+    test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i,
+    resourceQuery: /inline/,
+    type: "asset/inline",
+  };
+
+  const sharedAssetRules: RuleSetRule[] = [sharedRawRule, sharedUrlRule, sharedInlineRule];
+
+  const clientRules: RuleSetRule[] = [
+    ...sharedAssetRules,
+    { test: /\.(png|jpe?g|gif|webp|avif|ico)$/i, type: "asset/resource", generator: { filename } },
+    { test: /\.svg$/i, type: "asset", parser: { dataUrlCondition: { maxSize: 8192 } }, generator: { filename } },
+    { test: /\.json$/i, type: "json" },
+  ];
+
+  const serverRules: RuleSetRule[] = [
+    ...sharedAssetRules,
+    { test: /\.(png|jpe?g|gif|webp|avif|ico|svg)$/i, type: "asset/source" },
+    { test: /\.json$/i, type: "json" },
+  ];
+
+  return { client: clientRules, server: serverRules };
+}