From 0b6aa96672fe09dd4e24a52f84d3f907f794e5dd Mon Sep 17 00:00:00 2001
From: chloe caruso <git@paperclover.net>
Date: Sat, 15 Feb 2025 05:45:02 -0800
Subject: [PATCH] Chloe/hmr4 (#17353)

Co-authored-by: Zack Radisic <56137411+zackradisic@users.noreply.github.com>
Co-authored-by: Jarred Sumner <jarred@jarredsumner.com>
---
 src/bake/DevServer.zig                  | 490 ++++++++++++++++++------
 src/bake/hmr-runtime-client.ts          |   7 +-
 src/bundler/bundle_v2.zig               | 179 ++++++---
 src/css/css_internals.zig               |  14 +-
 src/css/css_parser.zig                  |  24 +-
 src/css/printer.zig                     |  75 ++--
 src/css/properties/transform.zig        |   2 +-
 src/css/selectors/parser.zig            |   4 +-
 src/css/selectors/selector.zig          |   2 +-
 src/css/values/url.zig                  |   6 +-
 src/js_ast.zig                          |   2 +-
 test/bake/client-fixture.mjs            |  11 +
 test/bake/dev-server-harness.ts         | 174 +++++++--
 test/bake/dev/css.test.ts               | 283 ++++++++++----
 test/js/bun/http/bun-serve-html.test.ts |   2 +-
 15 files changed, 940 insertions(+), 335 deletions(-)

diff --git a/src/bake/DevServer.zig b/src/bake/DevServer.zig
index b89bb9aed3..33c6e29d85 100644
--- a/src/bake/DevServer.zig
+++ b/src/bake/DevServer.zig
@@ -896,6 +896,12 @@ pub fn attachRoutes(dev: *DevServer, server: anytype) !bool {
             dev,
             wrapGenericRequestHandler(onIncrementalVisualizer, is_ssl),
         );
+        app.get(
+            internal_prefix ++ "/iv",
+            *DevServer,
+            dev,
+            redirectHandler(internal_prefix ++ "/incremental_visualizer", is_ssl),
+        );
     }
 
     // Only attach a catch-all handler if the framework has filesystem router
@@ -992,6 +998,22 @@ inline fn wrapGenericRequestHandler(
     }.handle;
 }
 
+inline fn redirectHandler(comptime path: []const u8, comptime is_ssl: bool) fn (
+    dev: *DevServer,
+    req: *Request,
+    resp: *uws.NewApp(is_ssl).Response,
+) void {
+    return struct {
+        fn handle(dev: *DevServer, req: *Request, resp: *uws.NewApp(is_ssl).Response) void {
+            _ = dev;
+            _ = req;
+            resp.writeStatus("302 Found");
+            resp.writeHeader("Location", path);
+            resp.endWithoutBody(false);
+        }
+    }.handle;
+}
+
 fn onIncrementalVisualizer(_: *DevServer, _: *Request, resp: anytype) void {
     resp.corked(onIncrementalVisualizerCorked, .{resp});
 }
@@ -1107,7 +1129,7 @@ fn ensureRouteIsBundled(
                 switch (try checkRouteFailures(dev, route_bundle_index, resp)) {
                     .stop => return,
                     .ok => {}, // Errors were cleared or not in the way.
-                    .rebuild => continue :sw .unqueued,
+                    .rebuild => continue :sw .unqueued, // Do the build all over again
                 }
             }
 
@@ -1158,7 +1180,7 @@ fn checkRouteFailures(
 ) !enum { stop, ok, rebuild } {
     var sfa_state = std.heap.stackFallback(65536, dev.allocator);
     const sfa = sfa_state.get();
-    var gts = try dev.initGraphTraceState(sfa);
+    var gts = try dev.initGraphTraceState(sfa, 0);
     defer gts.deinit(sfa);
     defer dev.incremental_result.failures_added.clearRetainingCapacity();
     dev.graph_safety_lock.lock();
@@ -1349,7 +1371,7 @@ fn generateHTMLPayload(dev: *DevServer, route_bundle_index: RouteBundle.Index, r
     // Prepare bitsets for tracing
     var sfa_state = std.heap.stackFallback(65536, dev.allocator);
     const sfa = sfa_state.get();
-    var gts = try dev.initGraphTraceState(sfa);
+    var gts = try dev.initGraphTraceState(sfa, 0);
     defer gts.deinit(sfa);
     // Run tracing
     dev.client_graph.reset();
@@ -1359,7 +1381,7 @@ fn generateHTMLPayload(dev: *DevServer, route_bundle_index: RouteBundle.Index, r
 
     const payload_size = bundled_html.len +
         ("<link rel=\"stylesheet\" href=\"" ++ asset_prefix ++ "/0000000000000000.css\">").len * css_ids.len +
-        "<script type=\"module\" crossorigin src=\"\"></script>".len +
+        "<script type=\"module\" crossorigin async src=\"\"></script>".len +
         client_prefix.len + "/".len +
         display_name.len +
         "-0000000000000000.js".len;
@@ -1375,7 +1397,7 @@ fn generateHTMLPayload(dev: *DevServer, route_bundle_index: RouteBundle.Index, r
     }
     array.appendSliceAssumeCapacity(before_body_end);
     // Insert the client script tag before "</body>"
-    array.appendSliceAssumeCapacity("<script type=\"module\" crossorigin src=\"");
+    array.appendSliceAssumeCapacity("<script type=\"module\" crossorigin async src=\"");
     array.appendSliceAssumeCapacity(client_prefix);
     array.appendSliceAssumeCapacity("/");
     array.appendSliceAssumeCapacity(display_name);
@@ -1648,7 +1670,7 @@ fn indexFailures(dev: *DevServer) !void {
 
         total_len += dev.incremental_result.failures_removed.items.len * @sizeOf(u32);
 
-        var gts = try dev.initGraphTraceState(sfa);
+        var gts = try dev.initGraphTraceState(sfa, 0);
         defer gts.deinit(sfa);
 
         var payload = try std.ArrayList(u8).initCapacity(sfa, total_len);
@@ -1721,7 +1743,7 @@ fn generateClientBundle(dev: *DevServer, route_bundle: *RouteBundle) bun.OOM![]u
     // Prepare bitsets
     var sfa_state = std.heap.stackFallback(65536, dev.allocator);
     const sfa = sfa_state.get();
-    var gts = try dev.initGraphTraceState(sfa);
+    var gts = try dev.initGraphTraceState(sfa, 0);
     defer gts.deinit(sfa);
 
     // Run tracing
@@ -1794,7 +1816,7 @@ fn generateCssJSArray(dev: *DevServer, route_bundle: *RouteBundle) bun.OOM!JSC.J
     var sfa_state = std.heap.stackFallback(65536, dev.allocator);
 
     const sfa = sfa_state.get();
-    var gts = try dev.initGraphTraceState(sfa);
+    var gts = try dev.initGraphTraceState(sfa, 0);
     defer gts.deinit(sfa);
 
     // Run tracing
@@ -1993,13 +2015,15 @@ pub fn finalizeBundle(
     }
 
     for (result.cssChunks(), result.css_file_list.values()) |*chunk, metadata| {
+        assert(chunk.content == .css);
+
         const index = bun.JSAst.Index.init(chunk.entry_point.source_index);
 
         const code = try chunk.intermediate_output.code(
             dev.allocator,
             &bv2.graph,
             &bv2.linker.graph,
-            "/_bun/TODO-import-prefix-where-is-this-used?",
+            "THIS_SHOULD_NEVER_BE_EMITTED_IN_DEV_MODE",
             chunk,
             result.chunks,
             null,
@@ -2089,7 +2113,10 @@ pub fn finalizeBundle(
         chunk.entry_point.entry_point_id = @intCast(route_bundle_index.get());
     }
 
-    var gts = try dev.initGraphTraceState(bv2.graph.allocator);
+    var gts = try dev.initGraphTraceState(
+        bv2.graph.allocator,
+        if (result.cssChunks().len > 0) bv2.graph.input_files.len else 0,
+    );
     defer gts.deinit(bv2.graph.allocator);
     ctx.gts = &gts;
     ctx.server_seen_bit_set = try bun.bit_set.DynamicBitSetUnmanaged.initEmpty(bv2.graph.allocator, dev.server_graph.bundled_files.count());
@@ -2103,20 +2130,17 @@ pub fn finalizeBundle(
     // have been modified.
     for (js_chunk.content.javascript.parts_in_chunk_in_order) |part_range| {
         switch (targets[part_range.source_index.get()].bakeGraph()) {
-            .server, .ssr => try dev.server_graph.processChunkDependencies(&ctx, part_range.source_index, bv2.graph.allocator),
-            .client => try dev.client_graph.processChunkDependencies(&ctx, part_range.source_index, bv2.graph.allocator),
+            .server, .ssr => try dev.server_graph.processChunkDependencies(&ctx, .normal, part_range.source_index, bv2.graph.allocator),
+            .client => try dev.client_graph.processChunkDependencies(&ctx, .normal, part_range.source_index, bv2.graph.allocator),
         }
     }
     for (result.htmlChunks()) |*chunk| {
         const index = bun.JSAst.Index.init(chunk.entry_point.source_index);
-        try dev.client_graph.processChunkDependencies(&ctx, index, bv2.graph.allocator);
+        try dev.client_graph.processChunkDependencies(&ctx, .normal, index, bv2.graph.allocator);
     }
-    for (result.cssChunks(), result.css_file_list.values()) |*chunk, metadata| {
-        const index = bun.JSAst.Index.init(chunk.entry_point.source_index);
-        // TODO: index css deps. this must add all recursively referenced files
-        // as dependencies of the entry point, instead of building a recursive tree.
-        _ = index;
-        _ = metadata;
+    for (result.cssChunks()) |*chunk| {
+        const entry_index = bun.JSAst.Index.init(chunk.entry_point.source_index);
+        try dev.client_graph.processChunkDependencies(&ctx, .css, entry_index, bv2.graph.allocator);
     }
 
     // Index all failed files now that the incremental graph has been updated.
@@ -2851,6 +2875,7 @@ const FileKind = enum(u2) {
 pub fn IncrementalGraph(side: bake.Side) type {
     return struct {
         // Unless otherwise mentioned, all data structures use DevServer's allocator.
+        // All arrays are indexed by FileIndex, except for the two edge-related arrays.
 
         /// Keys are absolute paths for the "file" namespace, or the
         /// pretty-formatted path value that appear in imports. Absolute paths
@@ -2968,11 +2993,13 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 flags: Flags,
 
                 const Flags = packed struct(u32) {
+                    /// Kind determines the data representation in `content`, as
+                    /// well as how this file behaves when tracing.
+                    kind: FileKind,
                     /// If the file has an error, the failure can be looked up
                     /// in the `.failures` map.
                     failed: bool,
                     /// For JS files, this is a component root; the server contains a matching file.
-                    /// For CSS files, this is also marked on the stylesheet that is imported from JS.
                     is_hmr_root: bool,
                     /// This is a file is an entry point to the framework.
                     /// Changing this will always cause a full page reload.
@@ -2980,10 +3007,22 @@ pub fn IncrementalGraph(side: bake.Side) type {
                     /// If this file has a HTML RouteBundle. The bundle index is tucked away in:
                     /// `graph.source_maps.items[i].extra.empty.html_bundle_route_index`
                     is_html_route: bool,
-                    /// CSS files get special handling
-                    kind: FileKind,
+                    /// A CSS root is the first file in a CSS bundle, aka the
+                    /// one that the JS or HTML file points into.
+                    ///
+                    /// There are many complicated rules when CSS files
+                    /// reference each other, none of which are modelled in
+                    /// IncrementalGraph. Instead, any change to downstream
+                    /// files will find the CSS root, and queue it for a
+                    /// re-bundle. Additionally, CSS roots only have one level
+                    /// of imports, as the code in `finalizeBundle` will add all
+                    /// referenced files as edges directly to the root, creating
+                    /// a flat list instead of a tree. Those downstream files
+                    /// remaining empty; only present so that invalidation can
+                    /// trace them to this root.
+                    is_css_root: bool,
 
-                    unused: enum(u26) { unused } = .unused,
+                    unused: enum(u25) { unused } = .unused,
                 };
 
                 comptime {
@@ -3010,7 +3049,6 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 }
 
                 fn initUnknown(flags: Flags) @This() {
-                    assert(flags.kind == .unknown);
                     return .{
                         .content = .{ .unknown = .unknown }, // unused
                         .code_len = 0, // unused
@@ -3242,6 +3280,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         .is_hmr_root = ctx.server_to_client_bitset.isSet(index.get()),
                         .is_special_framework_file = false,
                         .is_html_route = false,
+                        .is_css_root = content == .css, // non-root CSS files never get registered in this function
                         .kind = switch (content) {
                             .js => if (ctx.loaders[index.get()].isJavaScriptLike()) .js else .asset,
                             .css => .css,
@@ -3364,6 +3403,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
         pub fn processChunkDependencies(
             g: *@This(),
             ctx: *HotUpdateContext,
+            comptime mode: enum { normal, css },
             bundle_graph_index: bun.JSAst.Index,
             temp_alloc: Allocator,
         ) bun.OOM!void {
@@ -3375,9 +3415,10 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 bun.fmt.quote(g.bundled_files.keys()[file_index.get()]),
             });
 
+            // Build a map from the existing import list. Later, entries that
+            // were not marked as `.seen = true` will be freed.
             var quick_lookup: TempLookup.HashTable = .{};
             defer quick_lookup.deinit(temp_alloc);
-
             {
                 var it: ?EdgeIndex = g.first_import.items[file_index.get()].unwrap();
                 while (it) |edge_index| {
@@ -3397,10 +3438,14 @@ pub fn IncrementalGraph(side: bake.Side) type {
             // removing edges.
             const quick_lookup_values_to_care_len = quick_lookup.count();
 
+            // A new import linked list is constructed. A side effect of this
+            // approach is that the order of the imports is reversed on every
+            // save. However, the ordering here doesn't matter.
             var new_imports: EdgeIndex.Optional = .none;
             defer g.first_import.items[file_index.get()] = new_imports;
 
-            if (side == .server) {
+            // (CSS chunks are not present on the server side)
+            if (mode == .normal and side == .server) {
                 if (ctx.server_seen_bit_set.isSet(file_index.get())) return;
 
                 const file = &g.bundled_files.values()[file_index.get()];
@@ -3418,7 +3463,10 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 }
             }
 
-            try g.processChunkImportRecords(ctx, temp_alloc, &quick_lookup, &new_imports, file_index, bundle_graph_index);
+            switch (mode) {
+                .normal => try g.processChunkImportRecords(ctx, temp_alloc, &quick_lookup, &new_imports, file_index, bundle_graph_index),
+                .css => try g.processCSSChunkImportRecords(ctx, temp_alloc, &quick_lookup, &new_imports, file_index, bundle_graph_index),
+            }
 
             // '.seen = false' means an import was removed and should be freed
             for (quick_lookup.values()[0..quick_lookup_values_to_care_len]) |val| {
@@ -3465,6 +3513,166 @@ pub fn IncrementalGraph(side: bake.Side) type {
             }
         }
 
+        fn processCSSChunkImportRecords(
+            g: *@This(),
+            ctx: *HotUpdateContext,
+            temp_alloc: Allocator,
+            quick_lookup: *TempLookup.HashTable,
+            new_imports: *EdgeIndex.Optional,
+            file_index: FileIndex,
+            bundler_index: bun.JSAst.Index,
+        ) !void {
+            bun.assert(bundler_index.isValid());
+            bun.assert(ctx.loaders[bundler_index.get()] == .css);
+
+            var sfb = std.heap.stackFallback(@sizeOf(bun.JSAst.Index) * 64, temp_alloc);
+            const queue_alloc = sfb.get();
+
+            // This queue avoids stack overflow.
+            // Infinite loop is prevented by the tracing bits in `processEdgeAttachment`.
+            var queue: ArrayListUnmanaged(bun.JSAst.Index) = .empty;
+            defer queue.deinit(queue_alloc);
+
+            for (ctx.import_records[bundler_index.get()].slice()) |import_record| {
+                const result = try processEdgeAttachment(g, ctx, temp_alloc, quick_lookup, new_imports, file_index, import_record, .css);
+                if (result == .@"continue" and import_record.source_index.isValid()) {
+                    try queue.append(queue_alloc, import_record.source_index);
+                }
+            }
+
+            while (queue.popOrNull()) |index| {
+                for (ctx.import_records[index.get()].slice()) |import_record| {
+                    const result = try processEdgeAttachment(g, ctx, temp_alloc, quick_lookup, new_imports, file_index, import_record, .css);
+                    if (result == .@"continue" and import_record.source_index.isValid()) {
+                        try queue.append(queue_alloc, import_record.source_index);
+                    }
+                }
+            }
+        }
+
+        fn processEdgeAttachment(
+            g: *@This(),
+            ctx: *HotUpdateContext,
+            temp_alloc: Allocator,
+            quick_lookup: *TempLookup.HashTable,
+            new_imports: *EdgeIndex.Optional,
+            file_index: FileIndex,
+            import_record: bun.ImportRecord,
+            comptime mode: enum {
+                js_or_html,
+                /// When set, the graph tracing state bits are used to prevent
+                /// infinite recursion. This is only done for CSS, since it:
+                /// - Recursively processes its imports
+                /// - Does not use its tracing bits for anything else
+                css,
+            },
+        ) bun.OOM!enum { @"continue", stop } {
+            const log = bun.Output.scoped(.processEdgeAttachment, false);
+
+            // When an import record is duplicated, it gets marked unused.
+            // This happens in `ConvertESMExportsForHmr.deduplicatedImport`
+            // There is still a case where deduplication must happen.
+            if (import_record.is_unused) return .stop;
+            if (import_record.source_index.isRuntime()) return .stop;
+
+            const key = import_record.path.keyForIncrementalGraph();
+            log("processEdgeAttachment({s}, {})", .{ key, import_record.source_index });
+
+            // Attempt to locate the FileIndex from bundle_v2's Source.Index
+            const imported_file_index: FileIndex, const kind = brk: {
+                if (import_record.source_index.isValid()) {
+                    const kind: FileKind = if (mode == .css)
+                        switch (ctx.loaders[import_record.source_index.get()]) {
+                            .css => .css,
+                            else => .asset,
+                        };
+                    if (ctx.getCachedIndex(side, import_record.source_index).*.unwrap()) |i| {
+                        break :brk .{ i, kind };
+                    } else if (mode == .css) {
+                        const index = (try g.insertEmpty(key, kind)).index;
+                        // TODO: make this more clear that:
+                        // temp_alloc == bv2.graph.allocator
+                        try ctx.gts.resize(side, temp_alloc, index.get() + 1);
+                        break :brk .{ index, kind };
+                    }
+                }
+
+                break :brk switch (mode) {
+                    // All invalid source indices are external URLs that cannot be watched.
+                    .css => return .stop,
+                    // Check IncrementalGraph to find an file from a prior build.
+                    .js_or_html => .{
+                        .init(@intCast(
+                            g.bundled_files.getIndex(key) orelse
+                                // Not tracked in IncrementalGraph. This can be hit for
+                                // certain external files.
+                                return .@"continue",
+                        )),
+                        {},
+                    },
+                };
+            };
+
+            if (Environment.isDebug) {
+                bun.assert(imported_file_index.get() < g.bundled_files.count());
+            }
+
+            // For CSS files visiting other CSS files, prevent infinite
+            // recursion.  CSS files visiting assets cannot cause recursion
+            // since assets cannot import other files.
+            if (mode == .css and kind == .css) {
+                if (ctx.gts.bits(side).isSet(imported_file_index.get()))
+                    return .stop;
+                ctx.gts.bits(side).set(imported_file_index.get());
+            }
+
+            const gop = try quick_lookup.getOrPut(temp_alloc, imported_file_index);
+            if (gop.found_existing) {
+                // If the edge has already been seen, it will be skipped
+                // to ensure duplicate edges never exist.
+                if (gop.value_ptr.seen) return .@"continue";
+                const lookup = gop.value_ptr;
+                lookup.seen = true;
+                const dep = &g.edges.items[lookup.edge_index.get()];
+                dep.next_import = new_imports.*;
+                new_imports.* = lookup.edge_index.toOptional();
+            } else {
+                // A new edge is needed to represent the dependency and import.
+                const first_dep = &g.first_dep.items[imported_file_index.get()];
+                const edge = try g.newEdge(.{
+                    .next_import = new_imports.*,
+                    .next_dependency = first_dep.*,
+                    .prev_dependency = .none,
+                    .imported = imported_file_index,
+                    .dependency = file_index,
+                });
+                if (first_dep.*.unwrap()) |dep| {
+                    g.edges.items[dep.get()].prev_dependency = edge.toOptional();
+                }
+                new_imports.* = edge.toOptional();
+                first_dep.* = edge.toOptional();
+
+                g.owner().incremental_result.had_adjusted_edges = true;
+
+                // To prevent duplicates, add into the quick lookup map
+                // the file index so that it does exist.
+                gop.value_ptr.* = .{
+                    .edge_index = edge,
+                    .seen = true,
+                };
+
+                log("attach edge={d} | id={d} {} -> id={d} {}", .{
+                    edge.get(),
+                    file_index.get(),
+                    bun.fmt.quote(g.bundled_files.keys()[file_index.get()]),
+                    imported_file_index.get(),
+                    bun.fmt.quote(g.bundled_files.keys()[imported_file_index.get()]),
+                });
+            }
+
+            return .@"continue";
+        }
+
         fn processChunkImportRecords(
             g: *@This(),
             ctx: *HotUpdateContext,
@@ -3474,6 +3682,10 @@ pub fn IncrementalGraph(side: bake.Side) type {
             file_index: FileIndex,
             index: bun.JSAst.Index,
         ) !void {
+            bun.assert(index.isValid());
+            // don't call this function for CSS sources
+            bun.assert(ctx.loaders[index.get()] != .css);
+
             const log = bun.Output.scoped(.processChunkDependencies, false);
             for (ctx.import_records[index.get()].slice()) |import_record| {
                 // When an import record is duplicated, it gets marked unused.
@@ -3482,6 +3694,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 if (import_record.is_unused) continue;
 
                 if (!import_record.source_index.isRuntime()) try_index_record: {
+                    // TODO: move this block into a function
                     const key = import_record.path.keyForIncrementalGraph();
                     const imported_file_index: FileIndex = brk: {
                         if (import_record.source_index.isValid()) {
@@ -3665,6 +3878,12 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         const index = dev.client_graph.getFileIndex(key) orelse
                             Output.panic("Client Incremental Graph is missing component for {}", .{bun.fmt.quote(key)});
                         try dev.client_graph.traceImports(index, gts, goal);
+
+                        if (Environment.isDebug and file.kind == .css) {
+                            // Server CSS files never have imports. They are
+                            // purely a reference to the client graph.
+                            bun.assert(g.first_import.items[file_index.get()] == .none);
+                        }
                     }
                     if (goal == .find_errors and file.failed) {
                         const fail = g.owner().bundling_failures.getKeyAdapted(
@@ -3677,16 +3896,16 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 },
                 .client => {
                     if (file.flags.kind == .css) {
+                        // It is only possible to find CSS roots by tracing.
+                        bun.debugAssert(file.flags.is_css_root);
+
                         if (goal == .find_css) {
                             try g.current_css_files.append(g.owner().allocator, file.cssAssetId());
                         }
 
-                        // Do not count css files as a client module
-                        // and also do not trace its imports.
-                        //
-                        // The server version of this code does not need to
-                        // early return, since server css files never have
-                        // imports.
+                        // See the comment on `is_css_root` on how CSS roots
+                        // have a slightly different meaning for their assets.
+                        // Regardless, CSS can't import JS, so this trace is done.
                         return;
                     }
 
@@ -3752,6 +3971,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         .is_hmr_root = false,
                         .is_special_framework_file = false,
                         .is_html_route = is_route,
+                        .is_css_root = false,
                         .kind = .unknown,
                     };
                     if (gop.found_existing) {
@@ -3769,6 +3989,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         flags.failed = gop.value_ptr.flags.failed;
                         flags.is_special_framework_file = gop.value_ptr.flags.is_special_framework_file;
                         flags.is_hmr_root = gop.value_ptr.flags.is_hmr_root;
+                        flags.is_css_root = gop.value_ptr.flags.is_css_root;
                     }
                     gop.value_ptr.* = File.initUnknown(flags);
                 },
@@ -3794,7 +4015,10 @@ pub fn IncrementalGraph(side: bake.Side) type {
         }
 
         /// Returns the key that was inserted.
-        pub fn insertEmpty(g: *@This(), abs_path: []const u8) bun.OOM![]const u8 {
+        pub fn insertEmpty(g: *@This(), abs_path: []const u8, kind: FileKind) bun.OOM!struct {
+            index: FileIndex,
+            key: []const u8,
+        } {
             g.owner().graph_safety_lock.assertLocked();
             const gop = try g.bundled_files.getOrPut(g.owner().allocator, abs_path);
             if (!gop.found_existing) {
@@ -3805,7 +4029,8 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         .is_hmr_root = false,
                         .is_special_framework_file = false,
                         .is_html_route = false,
-                        .kind = .unknown,
+                        .is_css_root = false,
+                        .kind = kind,
                     }),
                     .server => .{
                         .is_rsc = false,
@@ -3813,15 +4038,16 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         .is_route = false,
                         .is_client_component_boundary = false,
                         .failed = false,
-                        .kind = .unknown,
+                        .kind = kind,
                     },
                 };
                 try g.first_dep.append(g.owner().allocator, .none);
                 try g.first_import.append(g.owner().allocator, .none);
                 if (side == .client)
                     try g.source_maps.append(g.owner().allocator, .empty);
+                try g.ensureStaleBitCapacity(true);
             }
-            return gop.key_ptr.*;
+            return .{ .index = .init(@intCast(gop.index)), .key = gop.key_ptr.* };
         }
 
         /// Server CSS files are just used to be targets for graph traversal.
@@ -3843,15 +4069,13 @@ pub fn IncrementalGraph(side: bake.Side) type {
 
             switch (side) {
                 .client => @compileError("not implemented: use receiveChunk"),
-                .server => {
-                    gop.value_ptr.* = .{
-                        .is_rsc = false,
-                        .is_ssr = false,
-                        .is_route = false,
-                        .is_client_component_boundary = false,
-                        .failed = false,
-                        .kind = .css,
-                    };
+                .server => gop.value_ptr.* = .{
+                    .is_rsc = false,
+                    .is_ssr = false,
+                    .is_route = false,
+                    .is_client_component_boundary = false,
+                    .failed = false,
+                    .kind = .css,
                 },
             }
 
@@ -3913,6 +4137,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         .is_hmr_root = false,
                         .is_special_framework_file = false,
                         .is_html_route = false,
+                        .is_css_root = false,
                         .kind = .unknown,
                     };
                     if (found_existing) {
@@ -3929,6 +4154,7 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         flags.is_html_route = gop.value_ptr.flags.is_html_route;
                         flags.is_special_framework_file = gop.value_ptr.flags.is_special_framework_file;
                         flags.is_hmr_root = gop.value_ptr.flags.is_hmr_root;
+                        flags.is_css_root = gop.value_ptr.flags.is_css_root;
                     }
                     gop.value_ptr.* = File.initUnknown(flags);
                 },
@@ -4000,8 +4226,12 @@ pub fn IncrementalGraph(side: bake.Side) type {
             );
         }
 
+        /// Given a set of paths, mark the relevant files as stale and append
+        /// them into `entry_points`. This is called whenever a file is changed,
+        /// and a new bundle has to be run.
         pub fn invalidate(g: *@This(), paths: []const []const u8, entry_points: *EntryPointList, alloc: Allocator) !void {
             g.owner().graph_safety_lock.assertLocked();
+            const keys = g.bundled_files.keys();
             const values = g.bundled_files.values();
             for (paths) |path| {
                 const index = g.bundled_files.getIndex(path) orelse {
@@ -4013,37 +4243,60 @@ pub fn IncrementalGraph(side: bake.Side) type {
                 g.stale_files.set(index);
                 const data = &values[index];
                 switch (side) {
-                    .client => {
+                    .client => switch (data.flags.kind) {
+                        .css => {
+                            if (data.flags.is_css_root) {
+                                try entry_points.appendCss(alloc, path);
+                            }
+
+                            var it = g.first_dep.items[index].unwrap();
+                            while (it) |edge_index| {
+                                const entry = g.edges.items[edge_index.get()];
+                                const dep = entry.dependency;
+                                g.stale_files.set(dep.get());
+
+                                const dep_file = values[dep.get()];
+                                if (dep_file.flags.is_css_root) {
+                                    try entry_points.appendCss(alloc, keys[dep.get()]);
+                                }
+
+                                it = entry.next_dependency.unwrap();
+                            }
+                        },
+                        .asset => {
+                            var it = g.first_dep.items[index].unwrap();
+                            while (it) |edge_index| {
+                                const entry = g.edges.items[edge_index.get()];
+                                const dep = entry.dependency;
+                                g.stale_files.set(dep.get());
+
+                                const dep_file = values[dep.get()];
+                                // Assets violate the "do not reprocess
+                                // unchanged files" rule by reprocessing ALL
+                                // dependencies, instead of just the CSS roots.
+                                //
+                                // This is currently required to force HTML
+                                // bundles to become up to date with the new
+                                // asset URL. Additionally, it is currently seen
+                                // as a bit nicer in HMR to do this for all JS
+                                // files, though that could be reconsidered.
+                                if (dep_file.flags.is_css_root) {
+                                    try entry_points.appendCss(alloc, keys[dep.get()]);
+                                } else {
+                                    try entry_points.appendJs(alloc, keys[dep.get()], .client);
+                                }
+
+                                it = entry.next_dependency.unwrap();
+                            }
+
+                            try entry_points.appendJs(alloc, path, .client);
+                        },
                         // When re-bundling SCBs, only bundle the server. Otherwise
                         // the bundler gets confused and bundles both sides without
                         // knowledge of the boundary between them.
-                        if (data.flags.kind == .css)
-                            try entry_points.appendCss(alloc, path)
-                        else if (!data.flags.is_hmr_root) {
+                        .js, .unknown => if (!data.flags.is_hmr_root) {
                             try entry_points.appendJs(alloc, path, .client);
-
-                            if (data.flags.kind == .asset) {
-                                // Changing asset files directly currently
-                                // violates the "do not reprocess unchanged
-                                // files" rule. An asset invalidate will
-                                // implicitly invalidate all direct dependants.
-                                // This is currently required to force HTML
-                                // bundles to become up to date with the new
-                                // asset URL. This is also done for other files
-                                // not out of requirement, but to make HMR a bit
-                                // nicer.
-                                @branchHint(.unlikely);
-                                const keys = g.bundled_files.keys();
-                                var it = g.first_dep.items[index].unwrap();
-                                while (it) |edge_index| {
-                                    const entry = g.edges.items[edge_index.get()];
-                                    const dep = entry.dependency;
-                                    g.stale_files.set(dep.get());
-                                    try entry_points.appendJs(alloc, keys[dep.get()], .client);
-                                    it = entry.next_dependency.unwrap();
-                                }
-                            }
-                        }
+                        },
                     },
                     .server => {
                         if (data.is_rsc)
@@ -4228,11 +4481,8 @@ pub fn IncrementalGraph(side: bake.Side) type {
                             &source_map_strings,
                         ) catch |err| {
                             switch (err) {
-                                error.IncompleteUTF8 => {
-                                    @panic("Unexpected: asset with incomplete UTF-8 as file path");
-                                },
-                                // TODO: file an issue. This shouldn't be necessary.
-                                else => |e| return e,
+                                error.IncompleteUTF8 => @panic("Unexpected: source file with incomplete UTF-8 as file path"),
+                                error.OutOfMemory => |e| return e,
                             }
                         };
                     } else {
@@ -4242,11 +4492,8 @@ pub fn IncrementalGraph(side: bake.Side) type {
                         // -> file:///C:/path/to/file.js
                         bun.strings.percentEncodeWrite(path, &source_map_strings) catch |err| {
                             switch (err) {
-                                error.IncompleteUTF8 => {
-                                    @panic("Unexpected: asset with incomplete UTF-8 as file path");
-                                },
-                                // TODO: file an issue. This shouldn't be necessary.
-                                else => |e| return e,
+                                error.IncompleteUTF8 => @panic("Unexpected: source file with incomplete UTF-8 as file path"),
+                                error.OutOfMemory => |e| return e,
                             }
                         };
                     }
@@ -4255,11 +4502,8 @@ pub fn IncrementalGraph(side: bake.Side) type {
                     try source_map_strings.appendSlice("\"bun://");
                     bun.strings.percentEncodeWrite(path, &source_map_strings) catch |err| {
                         switch (err) {
-                            error.IncompleteUTF8 => {
-                                @panic("Unexpected: asset with incomplete UTF-8 as file path");
-                            },
-                            // TODO: file an issue. This shouldn't be necessary.
-                            else => |e| return e,
+                            error.IncompleteUTF8 => @panic("Unexpected: source file with incomplete UTF-8 as file path"),
+                            error.OutOfMemory => |e| return e,
                         }
                     };
                     try source_map_strings.appendSlice("\"");
@@ -4500,6 +4744,16 @@ const GraphTraceState = struct {
         gts.server_bits.setAll(false);
         gts.client_bits.setAll(false);
     }
+
+    fn resize(gts: *GraphTraceState, side: bake.Side, allocator: Allocator, new_size: usize) !void {
+        const b = switch (side) {
+            .client => &gts.client_bits,
+            .server => &gts.server_bits,
+        };
+        if (b.bit_length < new_size) {
+            try b.resize(allocator, new_size, false);
+        }
+    }
 };
 
 const TraceImportGoal = enum {
@@ -4508,10 +4762,13 @@ const TraceImportGoal = enum {
     find_errors,
 };
 
-fn initGraphTraceState(dev: *const DevServer, sfa: Allocator) !GraphTraceState {
+/// `extra_client_bits` is specified if it is possible that the client graph may
+/// increase in size while the bits are being used. This happens with CSS files,
+/// though [TODO] might not actually be necessary.
+fn initGraphTraceState(dev: *const DevServer, sfa: Allocator, extra_client_bits: usize) !GraphTraceState {
     var server_bits = try DynamicBitSetUnmanaged.initEmpty(sfa, dev.server_graph.bundled_files.count());
     errdefer server_bits.deinit(sfa);
-    const client_bits = try DynamicBitSetUnmanaged.initEmpty(sfa, dev.client_graph.bundled_files.count());
+    const client_bits = try DynamicBitSetUnmanaged.initEmpty(sfa, dev.client_graph.bundled_files.count() + extra_client_bits);
     return .{ .server_bits = server_bits, .client_bits = client_bits };
 }
 
@@ -4569,8 +4826,8 @@ const DirectoryWatchStore = struct {
         dev.graph_safety_lock.lock();
         defer dev.graph_safety_lock.unlock();
         const owned_file_path = switch (renderer) {
-            .client => try dev.client_graph.insertEmpty(import_source),
-            .server, .ssr => try dev.server_graph.insertEmpty(import_source),
+            .client => (try dev.client_graph.insertEmpty(import_source, .unknown)).key,
+            .server, .ssr => (try dev.server_graph.insertEmpty(import_source, .unknown)).key,
         };
 
         store.insert(dir, owned_file_path, specifier) catch |err| switch (err) {
@@ -5427,6 +5684,8 @@ pub fn startReloadBundle(dev: *DevServer, event: *HotReloadEvent) bun.OOM!void {
 
     event.processFileList(dev, &entry_points, temp_alloc);
     if (entry_points.set.count() == 0) {
+        // TODO: Files which become disconnected from the incremental graph
+        // should be removed from the watcher.
         Output.debugWarn("nothing to bundle. watcher may potentially be watching too many files.", .{});
         Output.debugWarn("modified files: {s}", .{
             bun.fmt.fmtSlice(event.files.keys(), ", "),
@@ -5519,29 +5778,29 @@ pub const HotReloadEvent = struct {
         alloc: Allocator,
     ) void {
         const changed_file_paths = event.files.keys();
-        // TODO: check for .delete and remove items from graph. this has to be done
-        // with care because some editors save by deleting and recreating the file.
-        // delete events are not to be trusted at face value. also, merging of
-        // events can cause .write and .delete to be true at the same time.
-        const changed_file_attributes = event.files.values();
-        _ = changed_file_attributes;
 
-        {
-            dev.graph_safety_lock.lock();
-            defer dev.graph_safety_lock.unlock();
+        dev.graph_safety_lock.lock();
+        defer dev.graph_safety_lock.unlock();
 
-            inline for (.{ &dev.server_graph, &dev.client_graph }) |g| {
-                g.invalidate(changed_file_paths, entry_points, alloc) catch bun.outOfMemory();
+        inline for (.{ &dev.server_graph, &dev.client_graph }) |g| {
+            g.invalidate(changed_file_paths, entry_points, alloc) catch bun.outOfMemory();
+        }
+
+        if (dev.has_tailwind_plugin_hack) |*map| {
+            for (map.keys()) |abs_path| {
+                const file = dev.client_graph.bundled_files.get(abs_path) orelse
+                    continue;
+                if (file.flags.kind == .css)
+                    entry_points.appendCss(alloc, abs_path) catch bun.outOfMemory();
             }
+        }
 
-            if (dev.has_tailwind_plugin_hack) |*map| {
-                for (map.keys()) |abs_path| {
-                    const file = dev.client_graph.bundled_files.get(abs_path) orelse
-                        continue;
-                    if (file.flags.kind == .css)
-                        entry_points.appendCss(alloc, abs_path) catch bun.outOfMemory();
-                }
-            }
+        if (entry_points.set.count() == 0) {
+            Output.debugWarn("nothing to bundle. watcher may potentially be watching too many files.", .{});
+            Output.debugWarn("modified files: {s}", .{
+                bun.fmt.fmtSlice(changed_file_paths, ", "),
+            });
+            return;
         }
     }
 
@@ -5559,14 +5818,13 @@ pub const HotReloadEvent = struct {
             return;
         }
 
-        // defer event.files.clearRetainingCapacity();
-
         var sfb = std.heap.stackFallback(4096, bun.default_allocator);
         const temp_alloc = sfb.get();
         var entry_points: EntryPointList = EntryPointList.empty;
         defer entry_points.deinit(temp_alloc);
 
         first.processFileList(dev, &entry_points, temp_alloc);
+
         const timer = first.timer;
 
         if (dev.watcher_atomics.recycleEventFromDevServer(first)) |second| {
@@ -5575,10 +5833,6 @@ pub const HotReloadEvent = struct {
         }
 
         if (entry_points.set.count() == 0) {
-            Output.debugWarn("nothing to bundle. watcher may potentially be watching too many files.", .{});
-            Output.debugWarn("modified files: {s}", .{
-                bun.fmt.fmtSlice(first.files.keys(), ", "),
-            });
             return;
         }
 
@@ -6133,7 +6387,7 @@ pub const Assets = struct {
         const gop = try assets.path_map.getOrPut(alloc, abs_path);
         if (!gop.found_existing) {
             // Locate a stable pointer for the file path
-            const stable_abs_path = try assets.owner().client_graph.insertEmpty(abs_path);
+            const stable_abs_path = (try assets.owner().client_graph.insertEmpty(abs_path, .unknown)).key;
             gop.key_ptr.* = stable_abs_path;
         } else {
             const entry_index = gop.value_ptr.*;
diff --git a/src/bake/hmr-runtime-client.ts b/src/bake/hmr-runtime-client.ts
index 715ce97dbf..9e42bea554 100644
--- a/src/bake/hmr-runtime-client.ts
+++ b/src/bake/hmr-runtime-client.ts
@@ -104,14 +104,15 @@ const ws = initWebSocket(
           // Skip to the last route
           let nextRouteId = reader.i32();
           while (nextRouteId != null && nextRouteId !== -1) {
-            reader.string32();
-            reader.cursor += 16 * reader.u32();
+            const i = reader.i32();
+            reader.cursor += 16 * Math.max(0, i);
             nextRouteId = reader.i32();
           }
           break;
         } else {
           // Skip to the next route
-          reader.cursor += 16 * reader.u32();
+          const i = reader.i32();
+          reader.cursor += 16 * Math.max(0, i);
         }
       } while (true);
       // List 3
diff --git a/src/bundler/bundle_v2.zig b/src/bundler/bundle_v2.zig
index 92d2b545c9..c3058882a9 100644
--- a/src/bundler/bundle_v2.zig
+++ b/src/bundler/bundle_v2.zig
@@ -2395,11 +2395,15 @@ pub const BundleV2 = struct {
             var js_files = try std.ArrayListUnmanaged(Index).initCapacity(this.graph.allocator, this.graph.ast.len - this.graph.css_file_count - 1);
 
             const asts = this.graph.ast.slice();
-            const loaders = this.graph.input_files.items(.loader);
+            const css_asts = asts.items(.css);
+
+            const input_files = this.graph.input_files.slice();
+            const loaders = input_files.items(.loader);
+            const sources = input_files.items(.source);
             for (
                 asts.items(.parts)[1..],
                 asts.items(.import_records)[1..],
-                asts.items(.css)[1..],
+                css_asts[1..],
                 asts.items(.target)[1..],
                 1..,
             ) |part_list, import_records, maybe_css, target, index| {
@@ -2409,9 +2413,37 @@ pub const BundleV2 = struct {
                 // Actual empty files will contain a part exporting an empty object.
                 if (part_list.len != 0) {
                     if (maybe_css != null) {
-                        @branchHint(.unlikely);
+                        // CSS has restrictions on what files can be imported.
+                        // This means the file can become an error after
+                        // resolution, which is not usually the case.
                         css_total_files.appendAssumeCapacity(Index.init(index));
+                        var log = Logger.Log.init(this.graph.allocator);
+                        defer log.deinit();
+                        if (this.linker.scanCSSImports(
+                            @intCast(index),
+                            import_records.slice(),
+                            css_asts,
+                            sources,
+                            loaders,
+                            &log,
+                        ) == .errors) {
+                            // TODO: it could be possible for a plugin to change
+                            // the type of loader from whatever it was into a
+                            // css-compatible loader.
+                            try dev_server.handleParseTaskFailure(
+                                error.InvalidCssImport,
+                                .client,
+                                sources[index].path.text,
+                                &log,
+                            );
+                            // Since there is an error, do not treat it as a
+                            // valid CSS chunk.
+                            _ = start.css_entry_points.swapRemove(Index.init(index));
+                        }
                     } else {
+                        // HTML files are special cased because they correspond
+                        // to routes in DevServer. They have a JS chunk too,
+                        // derived off of the import record list.
                         if (loaders[index] == .html) {
                             try html_files.put(this.graph.allocator, Index.init(index), {});
                         } else {
@@ -2440,6 +2472,7 @@ pub const BundleV2 = struct {
                         }
                     }
                 } else {
+                    // Treat empty CSS files for removal.
                     _ = start.css_entry_points.swapRemove(Index.init(index));
                 }
             }
@@ -2473,8 +2506,8 @@ pub const BundleV2 = struct {
         // a new npm dependency), where one file that fails doesnt prevent the
         // passing files to get cached in the incremental graph.
 
-        // The linker still has to be initialized as code generation expects it
-        // TODO: ???
+        // The linker still has to be initialized as code generation expects
+        // much of its state to be valid memory, even if empty.
         try this.linker.load(
             this,
             this.graph.entry_points.items,
@@ -2949,7 +2982,12 @@ pub const BundleV2 = struct {
                 continue;
             }
 
-            if (this.transpiler.options.dev_server) |dev_server| {
+            if (this.transpiler.options.dev_server) |dev_server| brk: {
+                if (loader == .css) {
+                    // Do not use cached files for CSS.
+                    break :brk;
+                }
+
                 import_record.source_index = Index.invalid;
 
                 if (dev_server.isFileCached(path.text, bake_graph)) |entry| {
@@ -2969,7 +3007,7 @@ pub const BundleV2 = struct {
                         import_record.path.text = path.text;
                         import_record.path.pretty = rel;
                         import_record.path = this.pathWithPrettyInitialized(path.*, target) catch bun.outOfMemory();
-                        if (entry.kind == .css or loader == .html) {
+                        if (loader == .html or entry.kind == .css) {
                             import_record.path.is_disabled = true;
                         }
                     }
@@ -3248,7 +3286,8 @@ pub const BundleV2 = struct {
 
                 const input_file_loaders = this.graph.input_files.items(.loader);
                 const save_import_record_source_index = this.transpiler.options.dev_server == null or
-                    result.loader == .html;
+                    result.loader == .html or
+                    result.loader == .css;
 
                 if (this.resolve_tasks_waiting_for_import_source_index.fetchSwapRemove(result.source.index.get())) |pending_entry| {
                     for (pending_entry.value.slice()) |to_assign| {
@@ -7302,7 +7341,11 @@ pub const LinkerContext = struct {
                             scratchbuf,
                             writer,
                             bun.css.PrinterOptions.default(),
-                            &entry.condition_import_records,
+                            .{
+                                .import_records = &entry.condition_import_records,
+                                .ast_urls_for_css = this.parse_graph.ast.items(.url_for_css),
+                                .ast_unique_key_for_additional_file = this.parse_graph.input_files.items(.unique_key_for_additional_file),
+                            },
                         );
 
                         condition.toCss(W, &printer) catch unreachable;
@@ -7686,14 +7729,12 @@ pub const LinkerContext = struct {
             const tla_checks = this.parse_graph.ast.items(.tla_check);
             const input_files = this.parse_graph.input_files.items(.source);
             const loaders: []const Loader = this.parse_graph.input_files.items(.loader);
-            const unique_key_for_additional_file = this.parse_graph.input_files.items(.unique_key_for_additional_file);
 
             const export_star_import_records: [][]u32 = this.graph.ast.items(.export_star_import_records);
             const exports_refs: []Ref = this.graph.ast.items(.exports_ref);
             const module_refs: []Ref = this.graph.ast.items(.module_ref);
             const ast_flags_list = this.graph.ast.items(.flags);
 
-            const urls_for_css = this.graph.ast.items(.url_for_css);
             const css_asts: []?*bun.css.BundlerStyleSheet = this.graph.ast.items(.css);
 
             var symbols = &this.graph.symbols;
@@ -7713,46 +7754,14 @@ pub const LinkerContext = struct {
                 // Is it CSS?
                 if (css_asts[id] != null) {
                     // Inline URLs for non-CSS files into the CSS file
-                    for (import_records) |*record| {
-                        if (record.source_index.isValid()) {
-                            // Other file is not CSS
-                            if (css_asts[record.source_index.get()] == null) {
-                                const source = &input_files[id];
-                                const loader = loaders[record.source_index.get()];
-                                switch (loader) {
-                                    .jsx, .js, .ts, .tsx, .napi, .sqlite, .json, .html => {
-                                        this.log.addErrorFmt(
-                                            source,
-                                            record.range.loc,
-                                            this.allocator,
-                                            "Cannot import a \".{s}\" file into a CSS file",
-                                            .{@tagName(loader)},
-                                        ) catch bun.outOfMemory();
-                                    },
-                                    .sqlite_embedded => {
-                                        this.log.addErrorFmt(
-                                            source,
-                                            record.range.loc,
-                                            this.allocator,
-                                            "Cannot import a \"sqlite_embedded\" file into a CSS file",
-                                            .{},
-                                        ) catch bun.outOfMemory();
-                                    },
-                                    .css, .file, .toml, .wasm, .base64, .dataurl, .text, .bunsh => {},
-                                }
-
-                                // It has an inlined url for CSS
-                                if (urls_for_css[record.source_index.get()].len > 0) {
-                                    record.path.text = urls_for_css[record.source_index.get()];
-                                }
-                                // It is some external URL
-                                else if (unique_key_for_additional_file[record.source_index.get()].len > 0) {
-                                    record.path.text = unique_key_for_additional_file[record.source_index.get()];
-                                }
-                            }
-                        }
-                        // else if (record.copy_source_index.isValid()) {}
-                    }
+                    _ = this.scanCSSImports(
+                        id,
+                        import_records,
+                        css_asts,
+                        input_files,
+                        loaders,
+                        this.log,
+                    );
                     // TODO:
                     // Validate cross-file "composes: ... from" named imports
                     continue;
@@ -8536,6 +8545,41 @@ pub const LinkerContext = struct {
         }
     }
 
+    pub fn scanCSSImports(
+        this: *LinkerContext,
+        file_source_index: u32,
+        file_import_records: []ImportRecord,
+        // slices from Graph
+        css_asts: []const ?*bun.css.BundlerStyleSheet,
+        sources: []const Logger.Source,
+        loaders: []const Loader,
+        log: *Logger.Log,
+    ) enum { ok, errors } {
+        for (file_import_records) |*record| {
+            if (record.source_index.isValid()) {
+                // Other file is not CSS
+                if (css_asts[record.source_index.get()] == null) {
+                    const source = &sources[file_source_index];
+                    const loader = loaders[record.source_index.get()];
+
+                    switch (loader) {
+                        .jsx, .js, .ts, .tsx, .napi, .sqlite, .json, .html, .sqlite_embedded => {
+                            log.addErrorFmt(
+                                source,
+                                record.range.loc,
+                                this.allocator,
+                                "Cannot import a \".{s}\" file into a CSS file",
+                                .{@tagName(loader)},
+                            ) catch bun.outOfMemory();
+                        },
+                        .css, .file, .toml, .wasm, .base64, .dataurl, .text, .bunsh => {},
+                    }
+                }
+            }
+        }
+        return if (log.errors > 0) .errors else .ok;
+    }
+
     pub fn createExportsForFile(
         c: *LinkerContext,
         allocator: std.mem.Allocator,
@@ -9879,7 +9923,11 @@ pub const LinkerContext = struct {
                     worker.allocator,
                     &buffer_writer,
                     printer_options,
-                    &css_import.condition_import_records,
+                    .{
+                        .import_records = &css_import.condition_import_records,
+                        .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
+                        .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
+                    },
                 )) {
                     .result => {},
                     .err => {
@@ -9909,7 +9957,11 @@ pub const LinkerContext = struct {
                     worker.allocator,
                     &buffer_writer,
                     printer_options,
-                    &import_records,
+                    .{
+                        .import_records = &import_records,
+                        .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
+                        .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
+                    },
                 )) {
                     .result => {},
                     .err => {
@@ -9939,7 +9991,11 @@ pub const LinkerContext = struct {
                     worker.allocator,
                     &buffer_writer,
                     printer_options,
-                    &c.graph.ast.items(.import_records)[idx.get()],
+                    .{
+                        .import_records = &c.graph.ast.items(.import_records)[idx.get()],
+                        .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
+                        .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
+                    },
                 )) {
                     .result => {},
                     .err => {
@@ -10077,7 +10133,7 @@ pub const LinkerContext = struct {
                             .license_comments = .{},
                             .options = bun.css.ParserOptions.default(allocator, null),
                         };
-                        wrapRulesWithConditions(&ast, allocator, &entry.conditions, &entry.condition_import_records);
+                        wrapRulesWithConditions(&ast, allocator, &entry.conditions);
                         chunk.content.css.asts[i] = ast;
                     },
                     .external_path => |*p| {
@@ -10127,7 +10183,15 @@ pub const LinkerContext = struct {
                                     .minify = c.options.minify_whitespace or c.options.minify_syntax or c.options.minify_identifiers,
                                 };
 
-                                const print_result = switch (ast_import.toCss(allocator, printer_options, &entry.condition_import_records)) {
+                                const print_result = switch (ast_import.toCss(
+                                    allocator,
+                                    printer_options,
+                                    .{
+                                        .import_records = &entry.condition_import_records,
+                                        .ast_urls_for_css = c.parse_graph.ast.items(.url_for_css),
+                                        .ast_unique_key_for_additional_file = c.parse_graph.input_files.items(.unique_key_for_additional_file),
+                                    },
+                                )) {
                                     .result => |v| v,
                                     .err => |e| {
                                         c.log.addErrorFmt(null, Loc.Empty, c.allocator, "Error generating CSS for import: {}", .{e}) catch bun.outOfMemory();
@@ -10192,7 +10256,7 @@ pub const LinkerContext = struct {
                             ast.rules.v.items.len = 0;
                         }
 
-                        wrapRulesWithConditions(ast, allocator, &entry.conditions, &entry.condition_import_records);
+                        wrapRulesWithConditions(ast, allocator, &entry.conditions);
                         // TODO: Remove top-level duplicate rules across files
                     },
                 }
@@ -10204,7 +10268,6 @@ pub const LinkerContext = struct {
         ast: *bun.css.BundlerStyleSheet,
         temp_allocator: std.mem.Allocator,
         conditions: *const BabyList(bun.css.ImportConditions),
-        _: *const BabyList(ImportRecord),
     ) void {
         var dummy_import_records = bun.BabyList(bun.ImportRecord){};
         defer bun.debugAssert(dummy_import_records.len == 0);
diff --git a/src/css/css_internals.zig b/src/css/css_internals.zig
index 68003930e7..d5d9786c18 100644
--- a/src/css/css_internals.zig
+++ b/src/css/css_internals.zig
@@ -135,7 +135,7 @@ pub fn testingImpl(globalThis: *JSC.JSGlobalObject, callframe: *JSC.CallFrame, c
                 .targets = .{
                     .browsers = minify_options.targets.browsers,
                 },
-            }, &import_records)) {
+            }, .initOutsideOfBundler(&import_records))) {
                 .result => |result| result,
                 .err => |err| {
                     return err.toJSString(alloc, globalThis);
@@ -314,10 +314,14 @@ pub fn attrTest(globalThis: *JSC.JSGlobalObject, callframe: *JSC.CallFrame) bun.
             minify_options.targets = targets;
             stylesheet.minify(alloc, minify_options);
 
-            const result = stylesheet.toCss(alloc, bun.css.PrinterOptions{
-                .minify = minify,
-                .targets = targets,
-            }, &import_records) catch |e| {
+            const result = stylesheet.toCss(
+                alloc,
+                bun.css.PrinterOptions{
+                    .minify = minify,
+                    .targets = targets,
+                },
+                .initOutsideOfBundler(&import_records),
+            ) catch |e| {
                 bun.handleErrorReturnTrace(e, @errorReturnTrace());
                 return .undefined;
             };
diff --git a/src/css/css_parser.zig b/src/css/css_parser.zig
index e7e45ce44a..86eff8b5fb 100644
--- a/src/css/css_parser.zig
+++ b/src/css/css_parser.zig
@@ -87,6 +87,7 @@ pub const Printer = css_printer.Printer;
 pub const PrinterOptions = css_printer.PrinterOptions;
 pub const targets = @import("./targets.zig");
 pub const Targets = css_printer.Targets;
+pub const ImportInfo = css_printer.ImportInfo;
 // pub const Features = css_printer.Features;
 
 const context = @import("./context.zig");
@@ -122,7 +123,7 @@ pub const Feature = compat.Feature;
 pub const fmtPrinterError = errors_.fmtPrinterError;
 
 pub const PrintErr = error{
-    lol,
+    CSSPrintError,
 };
 
 pub fn OOM(e: anyerror) noreturn {
@@ -2851,11 +2852,11 @@ pub fn StyleSheet(comptime AtRule: type) type {
             return .{ .result = {} };
         }
 
-        pub fn toCssWithWriter(this: *const @This(), allocator: Allocator, writer: anytype, options: css_printer.PrinterOptions, import_records: ?*const bun.BabyList(ImportRecord)) PrintResult(ToCssResultInternal) {
+        pub fn toCssWithWriter(this: *const @This(), allocator: Allocator, writer: anytype, options: css_printer.PrinterOptions, import_info: ?bun.css.ImportInfo) PrintResult(ToCssResultInternal) {
             const W = @TypeOf(writer);
 
-            var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_records);
-            const result = this.toCssWithWriterImpl(allocator, W, &printer, options, import_records) catch {
+            var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
+            const result = this.toCssWithWriterImpl(allocator, W, &printer, options) catch {
                 bun.assert(printer.error_kind != null);
                 return .{
                     .err = printer.error_kind.?,
@@ -2865,8 +2866,7 @@ pub fn StyleSheet(comptime AtRule: type) type {
             return .{ .result = result };
         }
 
-        pub fn toCssWithWriterImpl(this: *const @This(), allocator: Allocator, comptime W: type, printer: *Printer(W), options: css_printer.PrinterOptions, import_records: ?*const bun.BabyList(ImportRecord)) PrintErr!ToCssResultInternal {
-            _ = import_records; // autofix
+        pub fn toCssWithWriterImpl(this: *const @This(), allocator: Allocator, comptime W: type, printer: *Printer(W), options: css_printer.PrinterOptions) PrintErr!ToCssResultInternal {
             const project_root = options.project_root;
 
             // #[cfg(feature = "sourcemap")]
@@ -2915,12 +2915,12 @@ pub fn StyleSheet(comptime AtRule: type) type {
             }
         }
 
-        pub fn toCss(this: *const @This(), allocator: Allocator, options: css_printer.PrinterOptions, import_records: ?*const bun.BabyList(ImportRecord)) PrintResult(ToCssResult) {
+        pub fn toCss(this: *const @This(), allocator: Allocator, options: css_printer.PrinterOptions, import_info: ?bun.css.ImportInfo) PrintResult(ToCssResult) {
             // TODO: this is not necessary
             // Make sure we always have capacity > 0: https://github.com/napi-rs/napi-rs/issues/1124.
             var dest = ArrayList(u8).initCapacity(allocator, 1) catch unreachable;
             const writer = dest.writer(allocator);
-            const result = switch (toCssWithWriter(this, allocator, writer, options, import_records)) {
+            const result = switch (toCssWithWriter(this, allocator, writer, options, import_info)) {
                 .result => |v| v,
                 .err => |e| return .{ .err = e },
             };
@@ -3146,7 +3146,7 @@ pub const StyleAttribute = struct {
         } };
     }
 
-    pub fn toCss(this: *const StyleAttribute, allocator: Allocator, options: PrinterOptions, import_records: *bun.BabyList(ImportRecord)) PrintErr!ToCssResult {
+    pub fn toCss(this: *const StyleAttribute, allocator: Allocator, options: PrinterOptions, import_info: ?ImportInfo) PrintErr!ToCssResult {
         // #[cfg(feature = "sourcemap")]
         // assert!(
         //   options.source_map.is_none(),
@@ -3155,7 +3155,7 @@ pub const StyleAttribute = struct {
 
         var dest = ArrayList(u8){};
         const writer = dest.writer(allocator);
-        var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_records);
+        var printer = Printer(@TypeOf(writer)).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
         printer.sources = &this.sources;
 
         try this.declarations.toCss(@TypeOf(writer), &printer);
@@ -6514,14 +6514,14 @@ pub const to_css = struct {
         comptime T: type,
         this: *const T,
         options: PrinterOptions,
-        import_records: ?*const bun.BabyList(ImportRecord),
+        import_info: ?ImportInfo,
     ) PrintErr![]const u8 {
         var s = ArrayList(u8){};
         errdefer s.deinit(allocator);
         const writer = s.writer(allocator);
         const W = @TypeOf(writer);
         // PERF: think about how cheap this is to create
-        var printer = Printer(W).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_records);
+        var printer = Printer(W).new(allocator, std.ArrayList(u8).init(allocator), writer, options, import_info);
         defer printer.deinit();
         switch (T) {
             CSSString => try CSSStringFns.toCss(this, W, &printer),
diff --git a/src/css/printer.zig b/src/css/printer.zig
index b68c1086bb..e8411a8382 100644
--- a/src/css/printer.zig
+++ b/src/css/printer.zig
@@ -80,6 +80,24 @@ pub const Features = css.targets.Features;
 
 const Browsers = css.targets.Browsers;
 
+pub const ImportInfo = struct {
+    import_records: *const bun.BabyList(bun.ImportRecord),
+    /// bundle_v2.graph.ast.items(.url_for_css)
+    ast_urls_for_css: []const []const u8,
+    /// bundle_v2.graph.input_files.items(.unique_key_for_additional_file)
+    ast_unique_key_for_additional_file: []const []const u8,
+
+    /// Only safe to use when outside the bundler. As in, the import records
+    /// were not resolved to source indices. This will out-of-bounds otherwise.
+    pub fn initOutsideOfBundler(records: *bun.BabyList(bun.ImportRecord)) ImportInfo {
+        return .{
+            .import_records = records,
+            .ast_urls_for_css = &.{},
+            .ast_unique_key_for_additional_file = &.{},
+        };
+    }
+};
+
 /// A `Printer` represents a destination to output serialized CSS, as used in
 /// the [ToCss](super::traits::ToCss) trait. It can wrap any destination that
 /// implements [std::fmt::Write](std::fmt::Write), such as a [String](String).
@@ -114,7 +132,7 @@ pub fn Printer(comptime Writer: type) type {
         ctx: ?*const css.StyleContext = null,
         scratchbuf: std.ArrayList(u8),
         error_kind: ?css.PrinterError = null,
-        import_records: ?*const bun.BabyList(bun.ImportRecord),
+        import_info: ?ImportInfo = null,
         public_path: []const u8,
         /// NOTE This should be the same mimalloc heap arena allocator
         allocator: Allocator,
@@ -144,23 +162,23 @@ pub fn Printer(comptime Writer: type) type {
         }
 
         /// Add an error related to std lib fmt errors
-        pub fn addFmtError(this: *This) PrintErr!void {
+        pub fn addFmtError(this: *This) PrintErr {
             this.error_kind = css.PrinterError{
                 .kind = .fmt_error,
                 .loc = null,
             };
-            return PrintErr.lol;
+            return PrintErr.CSSPrintError;
         }
 
-        pub fn addNoImportRecordError(this: *This) PrintErr!void {
+        pub fn addNoImportRecordError(this: *This) PrintErr {
             this.error_kind = css.PrinterError{
                 .kind = .no_import_records,
                 .loc = null,
             };
-            return PrintErr.lol;
+            return PrintErr.CSSPrintError;
         }
 
-        pub fn addInvalidCssModulesPatternInGridError(this: *This) PrintErr!void {
+        pub fn addInvalidCssModulesPatternInGridError(this: *This) PrintErr {
             this.error_kind = css.PrinterError{
                 .kind = .invalid_css_modules_pattern_in_grid,
                 .loc = css.ErrorLocation{
@@ -169,7 +187,7 @@ pub fn Printer(comptime Writer: type) type {
                     .column = this.loc.column,
                 },
             };
-            return PrintErr.lol;
+            return PrintErr.CSSPrintError;
         }
 
         /// Returns an error of the given kind at the provided location in the current source file.
@@ -187,7 +205,7 @@ pub fn Printer(comptime Writer: type) type {
                     .column = loc.column,
                 } else null,
             };
-            return PrintErr.lol;
+            return PrintErr.CSSPrintError;
         }
 
         pub fn deinit(this: *This) void {
@@ -204,22 +222,22 @@ pub fn Printer(comptime Writer: type) type {
             scratchbuf: std.ArrayList(u8),
             dest: Writer,
             options: PrinterOptions,
-            import_records: ?*const bun.BabyList(bun.ImportRecord),
+            import_info: ?ImportInfo,
         ) This {
             return .{
                 .sources = null,
                 .dest = dest,
                 .minify = options.minify,
                 .targets = options.targets,
-                .dependencies = if (options.analyze_dependencies != null) ArrayList(css.Dependency){} else null,
+                .dependencies = if (options.analyze_dependencies != null) .empty else null,
                 .remove_imports = options.analyze_dependencies != null and options.analyze_dependencies.?.remove_imports,
                 .pseudo_classes = options.pseudo_classes,
-                .indentation_buf = std.ArrayList(u8).init(allocator),
-                .import_records = import_records,
+                .indentation_buf = .init(allocator),
+                .import_info = import_info,
                 .scratchbuf = scratchbuf,
                 .allocator = allocator,
                 .public_path = options.public_path,
-                .loc = Location{
+                .loc = .{
                     .source_index = 0,
                     .line = 0,
                     .column = 1,
@@ -228,14 +246,13 @@ pub fn Printer(comptime Writer: type) type {
         }
 
         pub inline fn getImportRecords(this: *This) PrintErr!*const bun.BabyList(bun.ImportRecord) {
-            if (this.import_records) |import_records| return import_records;
-            try this.addNoImportRecordError();
-            unreachable;
+            if (this.import_info) |info| return info.import_records;
+            return this.addNoImportRecordError();
         }
 
         pub fn printImportRecord(this: *This, import_record_idx: u32) PrintErr!void {
-            if (this.import_records) |import_records| {
-                const import_record = import_records.at(import_record_idx);
+            if (this.import_info) |info| {
+                const import_record = info.import_records.at(import_record_idx);
                 const a, const b = bun.bundle_v2.cheapPrefixNormalizer(this.public_path, import_record.path.text);
                 try this.writeStr(a);
                 try this.writeStr(b);
@@ -245,13 +262,27 @@ pub fn Printer(comptime Writer: type) type {
         }
 
         pub inline fn importRecord(this: *Printer(Writer), import_record_idx: u32) PrintErr!*const bun.ImportRecord {
-            if (this.import_records) |import_records| return import_records.at(import_record_idx);
-            try this.addNoImportRecordError();
-            unreachable;
+            if (this.import_info) |info| return info.import_records.at(import_record_idx);
+            return this.addNoImportRecordError();
         }
 
         pub inline fn getImportRecordUrl(this: *This, import_record_idx: u32) PrintErr![]const u8 {
-            return (try this.importRecord(import_record_idx)).path.text;
+            const import_info = this.import_info orelse return this.addNoImportRecordError();
+            const record = import_info.import_records.at(import_record_idx);
+            if (record.source_index.isValid()) {
+                // It has an inlined url for CSS
+                const urls_for_css = import_info.ast_urls_for_css[record.source_index.get()];
+                if (urls_for_css.len > 0) {
+                    return urls_for_css;
+                }
+                // It is a chunk URL
+                const unique_key_for_additional_file = import_info.ast_unique_key_for_additional_file[record.source_index.get()];
+                if (unique_key_for_additional_file.len > 0) {
+                    return unique_key_for_additional_file;
+                }
+            }
+            // External URL stays as-is
+            return record.path.text;
         }
 
         pub fn context(this: *const Printer(Writer)) ?*const css.StyleContext {
diff --git a/src/css/properties/transform.zig b/src/css/properties/transform.zig
index 0beb971e73..2fc78932ce 100644
--- a/src/css/properties/transform.zig
+++ b/src/css/properties/transform.zig
@@ -81,7 +81,7 @@ pub const TransformList = struct {
                 scratchbuf,
                 base_writer,
                 css.PrinterOptions.defaultWithMinify(true),
-                dest.import_records,
+                dest.import_info,
             );
             defer p.deinit();
 
diff --git a/src/css/selectors/parser.zig b/src/css/selectors/parser.zig
index 135b45bc43..a5bc5745b4 100644
--- a/src/css/selectors/parser.zig
+++ b/src/css/selectors/parser.zig
@@ -927,7 +927,7 @@ pub const PseudoClass = union(enum) {
         const writer = s.writer(dest.allocator);
         const W2 = @TypeOf(writer);
         const scratchbuf = std.ArrayList(u8).init(dest.allocator);
-        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_records);
+        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info);
         try serialize.serializePseudoClass(this, W2, &printer, null);
         return dest.writeStr(s.items);
     }
@@ -2598,7 +2598,7 @@ pub const PseudoElement = union(enum) {
         const writer = s.writer(dest.allocator);
         const W2 = @TypeOf(writer);
         const scratchbuf = std.ArrayList(u8).init(dest.allocator);
-        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_records);
+        var printer = Printer(W2).new(dest.allocator, scratchbuf, writer, css.PrinterOptions.default(), dest.import_info);
         try serialize.serializePseudoElement(this, W2, &printer, null);
         return dest.writeStr(s.items);
     }
diff --git a/src/css/selectors/selector.zig b/src/css/selectors/selector.zig
index 9453816227..94352ab134 100644
--- a/src/css/selectors/selector.zig
+++ b/src/css/selectors/selector.zig
@@ -708,7 +708,7 @@ pub const serialize = struct {
                     const writer = id.writer();
                     css.serializer.serializeIdentifier(v.value, writer) catch return dest.addFmtError();
 
-                    const s = try css.to_css.string(dest.allocator, CSSString, &v.value, css.PrinterOptions.default(), dest.import_records);
+                    const s = try css.to_css.string(dest.allocator, CSSString, &v.value, css.PrinterOptions.default(), dest.import_info);
 
                     if (id.items.len > 0 and id.items.len < s.len) {
                         try dest.writeStr(id.items);
diff --git a/src/css/values/url.zig b/src/css/values/url.zig
index ffa9bea03d..1d6808c939 100644
--- a/src/css/values/url.zig
+++ b/src/css/values/url.zig
@@ -111,14 +111,12 @@ pub const Url = struct {
         }
 
         const import_record = try dest.importRecord(this.import_record_idx);
-        const url = import_record.path.text;
+        const url = try dest.getImportRecordUrl(this.import_record_idx);
 
         if (dest.minify and !import_record.is_internal) {
             var buf = ArrayList(u8){};
             // PERF(alloc) we could use stack fallback here?
             var bufw = buf.writer(dest.allocator);
-            const BufW = @TypeOf(bufw);
-            _ = BufW; // autofix
             defer buf.deinit(dest.allocator);
             css.Token.toCssGeneric(&css.Token{ .unquoted_url = url }, &bufw) catch return dest.addFmtError();
 
@@ -140,7 +138,7 @@ pub const Url = struct {
             try dest.writeStr(buf.items);
         } else {
             try dest.writeStr("url(");
-            css.serializer.serializeString(import_record.path.text, dest) catch return dest.addFmtError();
+            css.serializer.serializeString(url, dest) catch return dest.addFmtError();
             try dest.writeChar(')');
         }
     }
diff --git a/src/js_ast.zig b/src/js_ast.zig
index c79b3755f5..b8b81ea322 100644
--- a/src/js_ast.zig
+++ b/src/js_ast.zig
@@ -7165,7 +7165,7 @@ pub const BundledAst = struct {
         };
     }
 
-    /// TODO: I don't like having to do this extra allocation. Is there a way to only do this if we know it is imported by a CSS file?
+    /// TODO: Move this from being done on all parse tasks into the start of the linker. This currently allocates base64 encoding for every small file loaded thing.
     pub fn addUrlForCss(
         this: *BundledAst,
         allocator: std.mem.Allocator,
diff --git a/test/bake/client-fixture.mjs b/test/bake/client-fixture.mjs
index 3daa68a958..406888c4e7 100644
--- a/test/bake/client-fixture.mjs
+++ b/test/bake/client-fixture.mjs
@@ -42,6 +42,8 @@ function reset() {
   }
 }
 
+let allowWebSocketMessages = true;
+
 function createWindow(windowUrl) {
   window = new Window({
     url: windowUrl,
@@ -57,6 +59,12 @@ function createWindow(windowUrl) {
       url = new URL(url, window.location.origin).href;
       super(url, protocols, options);
       webSockets.push(this);
+      this.addEventListener("message", event => {
+        if (!allowWebSocketMessages) {
+          console.error("[E] WebSocket message received while messages are not allowed");
+          process.exit(2);
+        }
+      });
     }
     close() {
       super.close();
@@ -177,6 +185,9 @@ process.on("message", async message => {
       pendingReload();
     }
   }
+  if (message.type === "set-allow-websocket-messages") {
+    allowWebSocketMessages = message.args[0];
+  }
   if (message.type === "hard-reload") {
     expectingReload = true;
     await handleReload();
diff --git a/test/bake/dev-server-harness.ts b/test/bake/dev-server-harness.ts
index 8ce48d87c7..2d09b2e0b7 100644
--- a/test/bake/dev-server-harness.ts
+++ b/test/bake/dev-server-harness.ts
@@ -1,6 +1,6 @@
 /// <reference path="../../src/bake/bake.d.ts" />
-import { Bake, Subprocess } from "bun";
-import fs, { realpathSync } from "node:fs";
+import { Bake, BunFile, Subprocess } from "bun";
+import fs, { readFileSync, realpathSync } from "node:fs";
 import path from "node:path";
 import os from "node:os";
 import assert from "node:assert";
@@ -27,6 +27,17 @@ export const minimalFramework: Bake.Framework = {
   },
 };
 
+export const imageFixtures = {
+  bun: imageFixture("test/integration/sharp/bun.png"),
+  bun2: imageFixture("test/bundler/fixtures/with-assets/img.png"),
+};
+
+function imageFixture(relative: string) {
+  const buf: any = readFileSync(path.join(import.meta.dir, "../../", relative));
+  buf.sourcePath = relative;
+  return buf;
+}
+
 /// Workaround to enable hot-module-reloading
 export const reactRefreshStub = {
   "node_modules/react-refresh/runtime.js": `
@@ -95,7 +106,7 @@ let activeClient: Client | null = null;
 async function maybeWaitInteractive(message: string) {
   if (interactive) {
     while (activeClient) {
-      const input = prompt("\x1b[32mPress return to " + message + "; JS>\x1b[0m");
+      const input = prompt("\x1b[36mPress return to " + message + "; JS>\x1b[0m");
       if (input === "q" || input === "exit") {
         process.exit(0);
         return;
@@ -104,7 +115,7 @@ async function maybeWaitInteractive(message: string) {
       const result = await activeClient.jsInteractive(input);
       console.log(result);
     }
-    console.log("\x1b[32mPress return to " + message + "\x1b[0m");
+    console.log("\x1b[36mPress return to " + message + "\x1b[0m");
     await new Promise(resolve => {
       // Enable raw mode
       process.stdin.setRawMode(true);
@@ -127,7 +138,7 @@ const hmrClientInitRegex = /\[Bun\] (Live|Hot-module)-reloading socket connected
 
 type ErrorSpec = string;
 
-type FileObject = Record<string, string | Buffer>;
+type FileObject = Record<string, string | Buffer | BunFile>;
 
 export class Dev {
   rootDir: string;
@@ -173,7 +184,10 @@ export class Dev {
     return withAnnotatedStack(snapshot, async () => {
       await maybeWaitInteractive("write " + file);
       const wait = this.waitForHotReload();
-      await Bun.write(this.join(file), (options.dedent ?? true) ? dedent(contents) : contents);
+      await Bun.write(
+        this.join(file),
+        ((typeof contents === "string" && options.dedent) ?? true) ? dedent(contents) : contents,
+      );
       await wait;
 
       let errors = options.errors;
@@ -205,7 +219,7 @@ export class Dev {
       if (contents === source) {
         throw new Error(`Couldn't find and replace ${JSON.stringify(find)} in ${file}`);
       }
-      await Bun.write(filename, shouldDedent ? dedent(contents) : contents);
+      await Bun.write(filename, typeof contents === "string" && shouldDedent ? dedent(contents) : contents);
       await wait;
 
       if (errors !== null) {
@@ -321,6 +335,14 @@ class DevFetchPromise extends Promise<Response> {
     return (await this).json();
   }
 
+  async arrayBuffer() {
+    return (await this).arrayBuffer();
+  }
+
+  async blob() {
+    return (await this).blob();
+  }
+
   /// Usage: await dev.fetch("/").expect.toInclude("Hello");
   get expect(): Matchers<string> {
     return expectProxy(this.text(), [], expect(""));
@@ -339,6 +361,32 @@ class DevFetchPromise extends Promise<Response> {
       }
     });
   }
+
+  expectFile(expected: Buffer) {
+    return withAnnotatedStack(snapshotCallerLocation(), async () => {
+      const res = await this;
+      expect(res.status).toBe(200);
+      let actual: any = new Uint8Array(await res.arrayBuffer());
+      try {
+        expect(actual).toEqual(expected);
+      } catch (e) {
+        // better printing
+        display_as_string: {
+          for (let i = 0; i < actual.byteLength; i++) {
+            if (actual[i] > 127 || actual[i] < 20) {
+              break display_as_string;
+            }
+          }
+          actual = new TextDecoder("utf8").decode(actual);
+          if ((expected as any).sourcePath) {
+            expected[Bun.inspect.custom] = () => `[File] ${(expected as any).sourcePath}`;
+          }
+          expect(actual).toEqual(expected);
+        }
+        throw e;
+      }
+    });
+  }
 }
 
 class StylePromise extends Promise<Record<string, string>> {
@@ -555,6 +603,7 @@ export class Client extends EventEmitter {
       this.suppressInteractivePrompt = false;
       if (errors && errors.length > 0) {
         if (!hasVisibleModal) {
+          await maybeWaitInteractive("expectErrorOverlay");
           throw new Error("Expected errors, but none found");
         }
 
@@ -747,6 +796,22 @@ export class Client extends EventEmitter {
       styleProxyHandler,
     );
   }
+
+  async expectNoWebSocketActivity(cb: () => Promise<void>) {
+    return withAnnotatedStack(snapshotCallerLocation(), async () => {
+      if (this.exited) throw new Error("Client exited while waiting for no WebSocket activity");
+
+      // Block WebSocket messages
+      this.#proc.send({ type: "set-allow-websocket-messages", args: [false] });
+
+      try {
+        await cb();
+      } finally {
+        // Re-enable WebSocket messages
+        this.#proc.send({ type: "set-allow-websocket-messages", args: [true] });
+      }
+    });
+  }
 }
 
 function expectProxy(text: Promise<string>, chain: string[], expect: any): any {
@@ -808,7 +873,6 @@ const styleProxyHandler: ProxyHandler<any> = {
     }
     const subpromise = target.then(style => {
       if (style === undefined) {
-        console.error(target.capturedStack);
         throw new Error(`Selector '${target.selector}' was not found`);
       }
       return style[prop];
@@ -885,11 +949,10 @@ async function withAnnotatedStack<T>(stackLine: string, cb: () => Promise<T>): P
   try {
     return await cb();
   } catch (err: any) {
-    console.log();
-    console.error(stackLine);
     stackLine = stackLine.replace("<anonymous>", "test");
     const oldStack = err.stack;
     const newError = new Error(err?.message ?? oldStack.slice(0, oldStack.indexOf("\n    at ")));
+    (newError as any).stackLine = stackLine;
     newError.stack = `${newError.message}\n${stackLine}`;
     throw newError;
   }
@@ -903,14 +966,17 @@ const counts: Record<string, number> = {};
 
 console.log("Dev server testing directory:", tempDir);
 
-function writeAll(root: string, files: FileObject) {
+async function writeAll(root: string, files: FileObject) {
+  const promises: Promise<any>[] = [];
   for (const [file, contents] of Object.entries(files)) {
     const filename = path.join(root, file);
     fs.mkdirSync(path.dirname(filename), { recursive: true });
     const formattedContents =
       typeof contents === "string" ? dedent(contents).replaceAll("{{root}}", root.replaceAll("\\", "\\\\")) : contents;
-    fs.writeFileSync(filename, formattedContents as string);
+    // @ts-expect-error the type of Bun.write is too strict
+    promises.push(Bun.write(filename, formattedContents));
   }
+  await Promise.all(promises);
 }
 
 class OutputLineStream extends EventEmitter {
@@ -922,6 +988,7 @@ class OutputLineStream extends EventEmitter {
   cursor: number = 0;
   disposed = false;
   closes = 0;
+  panicked = false;
 
   constructor(name: string, readable1: ReadableStream, readable2: ReadableStream) {
     super();
@@ -953,6 +1020,7 @@ class OutputLineStream extends EventEmitter {
           for (const line of lines) {
             this.lines.push(line);
             if (line.includes("============================================================")) {
+              this.panicked = true;
               this.emit("panic");
             }
             // These can be noisy due to symlinks.
@@ -975,6 +1043,13 @@ class OutputLineStream extends EventEmitter {
     regex: RegExp,
     timeout = (isWindows ? 5000 : 1000) * (Bun.version.includes("debug") ? 3 : 1),
   ): Promise<RegExpMatchArray> {
+    if (this.panicked) {
+      return new Promise((_, reject) => {
+        this.on("close", () => {
+          reject(new Error("Panicked while waiting for line " + JSON.stringify(regex.toString())));
+        });
+      });
+    }
     return new Promise((resolve, reject) => {
       let ran = false;
       let timer: any;
@@ -1025,6 +1100,31 @@ class OutputLineStream extends EventEmitter {
   }
 }
 
+export function indexHtmlScript(htmlFiles: string[]) {
+  return [
+    ...htmlFiles.map((file, i) => `import html${i} from "./${file}";`),
+    "export default {",
+    "  static: {",
+    ...(htmlFiles.length === 1
+      ? [`    '/*': html0,`]
+      : htmlFiles.map(
+          (file, i) =>
+            `    ${JSON.stringify(
+              "/" +
+                file
+                  .replace(/\.html$/, "")
+                  .replace("/index", "")
+                  .replace(/\/$/, ""),
+            )}: html${i},`,
+        )),
+    "  },",
+    "  fetch(req) {",
+    "    return new Response('Not Found', { status: 404 });",
+    "  },",
+    "};",
+  ].join("\n");
+}
+
 export function devTest<T extends DevServerTest>(description: string, options: T): T {
   if (interactive) return options;
 
@@ -1036,25 +1136,14 @@ export function devTest<T extends DevServerTest>(description: string, options: T
   const basename = path.basename(caller, ".test" + path.extname(caller));
   const count = (counts[basename] = (counts[basename] ?? 0) + 1);
 
-  const indexHtmlScript = dedent`
-    import html from "./index.html";
-    export default {
-      static: {
-        '/*': html,
-      },
-      fetch(req) {
-        return new Response("Not Found", { status: 404 });
-      },
-    };
-  `;
-
   async function run() {
     const root = path.join(tempDir, basename + count);
     if ("files" in options) {
-      writeAll(root, options.files);
-      if (options.files["bun.app.ts"] == undefined && options.files["index.html"] == undefined) {
+      const htmlFiles = Object.keys(options.files).filter(file => file.endsWith(".html"));
+      await writeAll(root, options.files);
+      if (options.files["bun.app.ts"] == undefined && htmlFiles.length === 0) {
         if (!options.framework) {
-          throw new Error("Must specify one of: `options.framework`, `index.html`, or `bun.app.ts`");
+          throw new Error("Must specify one of: `options.framework`, `*.html`, or `bun.app.ts`");
         }
         if (options.pluginFile) {
           fs.writeFileSync(path.join(root, "pluginFile.ts"), dedent(options.pluginFile));
@@ -1071,11 +1160,11 @@ export function devTest<T extends DevServerTest>(description: string, options: T
             };
           `,
         );
-      } else if (options.files["index.html"]) {
+      } else if (htmlFiles.length > 0) {
         if (options.files["bun.app.ts"]) {
           throw new Error("Cannot provide both bun.app.ts and index.html");
         }
-        fs.writeFileSync(path.join(root, "bun.app.ts"), indexHtmlScript);
+        fs.writeFileSync(path.join(root, "bun.app.ts"), indexHtmlScript(htmlFiles));
       }
     } else {
       if (!options.fixture) {
@@ -1088,7 +1177,7 @@ export function devTest<T extends DevServerTest>(description: string, options: T
         if (!fs.existsSync(path.join(root, "index.html"))) {
           throw new Error(`Fixture ${fixture} must contain a bun.app.ts or index.html file.`);
         } else {
-          fs.writeFileSync(path.join(root, "bun.app.ts"), indexHtmlScript);
+          fs.writeFileSync(path.join(root, "bun.app.ts"), indexHtmlScript(["index.html"]));
         }
       }
       if (!fs.existsSync(path.join(root, "node_modules"))) {
@@ -1134,6 +1223,9 @@ export function devTest<T extends DevServerTest>(description: string, options: T
       },
     });
     danglingProcesses.add(devProcess);
+    if (interactive) {
+      console.log("\x1b[35mDev Server PID: " + devProcess.pid + "\x1b[0m");
+    }
     // @ts-expect-error
     using stream = new OutputLineStream("dev", devProcess.stdout, devProcess.stderr);
     const port = parseInt((await stream.waitForLine(/localhost:(\d+)/))[1], 10);
@@ -1146,15 +1238,17 @@ export function devTest<T extends DevServerTest>(description: string, options: T
       await options.test(dev);
     } catch (err: any) {
       while (err instanceof SuppressedError) {
-        console.error(err.suppressed);
+        logErr(err.suppressed);
         err = err.error;
       }
       if (interactive) {
-        console.error(err);
+        logErr(err);
         await maybeWaitInteractive("exit");
         process.exit(1);
       }
-      throw err;
+      logErr(err);
+      console.log("\x1b[31mFailed\x1b[0;2m. Files in " + root + "\x1b[0m\r");
+      throw "\r\x1b[K\x1b[A";
     }
 
     if (interactive) {
@@ -1164,7 +1258,7 @@ export function devTest<T extends DevServerTest>(description: string, options: T
     }
   }
 
-  const name = `DevServer > ${basename}.${count}: ${description}`;
+  const name = `DevServer > ${basename}-${count}: ${description}`;
   try {
     // TODO: resolve ci flakiness.
     if (isCI && isWindows) {
@@ -1189,7 +1283,7 @@ export function devTest<T extends DevServerTest>(description: string, options: T
     }
     if (name.includes(arg)) {
       interactive = true;
-      console.log("\x1b[32m" + name + " (Interactive)\x1b[0m");
+      console.log("\x1b[32;1m" + name + " (Interactive)\x1b[0m");
       run();
       return options;
     }
@@ -1197,6 +1291,16 @@ export function devTest<T extends DevServerTest>(description: string, options: T
   return options;
 }
 
+function logErr(err: any) {
+  console.error();
+  if (err.stackLine) {
+    console.error(`error\x1b[0;2m:\x1b[0m`, err.message);
+    console.error(err.stackLine);
+  } else {
+    console.error(err);
+  }
+}
+
 process.on("exit", () => {
   for (const proc of danglingProcesses) {
     proc.kill("SIGKILL");
diff --git a/test/bake/dev/css.test.ts b/test/bake/dev/css.test.ts
index c52db9aa29..fbd1c4f9e7 100644
--- a/test/bake/dev/css.test.ts
+++ b/test/bake/dev/css.test.ts
@@ -1,6 +1,7 @@
 // CSS tests concern bundling bugs with CSS files
 import { expect } from "bun:test";
-import { devTest, emptyHtmlFile, minimalFramework, reactRefreshStub } from "../dev-server-harness";
+import { devTest, emptyHtmlFile, imageFixtures, reactRefreshStub } from "../dev-server-harness";
+import assert from "node:assert";
 
 devTest("css file with syntax error does not kill old styles", {
   files: {
@@ -122,79 +123,71 @@ devTest("add new css import later", {
     await client.style("body").notFound();
   },
 });
+devTest("css import another css file", {
+  files: {
+    "index.html": emptyHtmlFile({
+      styles: ["styles.css"],
+    }),
+    "styles.css": `
+      @import "./second.css";
+      body {
+        color: red;
+      }
+    `,
+    "second.css": `
+      h1 {
+        color: blue;
+      }
+    `,
+  },
+  async test(dev) {
+    await using c = await dev.client("/");
+    // Verify initial build
+    await c.style("h1").color.expect.toBe("#00f");
+    await c.style("body").color.expect.toBe("red");
 
-// TODO: revive these tests for server components. they fail because some assertion.
-// devTest("css file with syntax error does not kill old styles", {
-//   framework: minimalFramework,
-//   files: {
-//     "routes/styles.css": `
-//       body {
-//         color: red;
-//       }
-//     `,
-//     "routes/index.ts": `
-//       import { expect } from 'bun:test';
-//       import './styles.css';
+    // Hot reload
+    await dev.write(
+      "second.css",
+      `
+        h1 {
+          color: green;
+        }
+      `,
+    );
+    await c.style("h1").color.expect.toBe("green");
+    await c.style("body").color.expect.toBe("red");
 
-//       export default function (req, meta) {
-//         expect(meta.styles).toHaveLength(1);
-//         return new Response(meta.styles[0]);
-//       }
-//     `,
-//   },
-//   async test(dev) {
-//     let css_url = await dev.fetch("/").text();
-//     await dev.fetch(css_url).equalsNoSpaces("/*routes/styles.css*/body{color:red;}");
-//     await dev.write(
-//       "routes/styles.css",
-//       `
-//         body {
-//           color: red;
-//           background-color
-//         }
-//       `,
-//     );
-//     await dev.fetch(css_url).equalsNoSpaces("/*routes/styles.css*/body{color:red;}");
-//     await dev.fetch("/").equals(css_url);
-//     await dev.write(
-//       "routes/styles.css",
-//       `
-//         body {
-//           color: red;
-//           background-color: blue;
-//         }
-//       `,
-//     );
-//     await dev.fetch(css_url).equalsNoSpaces("/*routes/styles.css*/body{color:red;background-color:#00f;}");
-//     await dev.fetch("/").equals(css_url);
-//     await dev.write("routes/styles.css", ` `);
-//     await dev.fetch(css_url).equalsNoSpaces("/*routes/styles.css*/");
-//     await dev.fetch("/").equals(css_url);
-//   },
-// });
-// devTest("css file with initial syntax error gets recovered", {
-//   framework: minimalFramework,
-//   files: {
-//     "routes/styles.css": `
-//       body {
-//         color: red;
-//     `,
-//     "routes/index.ts": `
-//       import { expect } from 'bun:test';
-//       import './styles.css';
-//       export default function (req, meta) {
-//         const input = req.json();
-//         expect(meta.styles).toHaveLength(input.len);
-//         return new Response('' + meta.styles[0]);
-//       }
-//     `,
-//   },
-//   async test(dev) {
-//     await dev.fetchJSON("/", { len: 1 }).equals("undefined");
-//   },
-// });
-
-devTest("fuzz case 1", {
+    // Check that the styles still work after a reload
+    await c.hardReload();
+    await c.style("h1").color.expect.toBe("green");
+    await c.style("body").color.expect.toBe("red");
+  },
+});
+devTest("asset referenced in css", {
+  files: {
+    "index.html": emptyHtmlFile({
+      styles: ["styles.css"],
+    }),
+    "styles.css": `
+      body {
+        background-image: url(./bun.png);
+      }
+    `,
+    "bun.png": imageFixtures.bun,
+  },
+  async test(dev) {
+    await using client = await dev.client("/");
+    let backgroundImage = await client.style("body").backgroundImage;
+    assert(backgroundImage);
+    await dev.fetch(extractCssUrl(backgroundImage)).expectFile(imageFixtures.bun);
+    await dev.write("bun.png", imageFixtures.bun2);
+    backgroundImage = await client.style("body").backgroundImage;
+    assert(backgroundImage);
+    await dev.fetch(extractCssUrl(backgroundImage)).expectFile(imageFixtures.bun2);
+  },
+});
+devTest("syntax error crash", {
   files: {
     "styles.css": `
       body {
@@ -213,3 +206,149 @@ devTest("fuzz case 1", {
     expect((await dev.fetch("/")).status).toBe(500);
   },
 });
+devTest("circular css imports handle hot reload", {
+  files: {
+    "index.html": emptyHtmlFile({
+      styles: ["a.css"],
+      body: `
+        <div class="a">hello</div>
+        <div class="b">hello</div>
+      `,
+    }),
+    "a.css": `
+      @import "./b.css";
+      .a { color: red; }
+    `,
+    "b.css": `
+      @import "./a.css";
+      .b { color: blue; }
+    `,
+  },
+  async test(dev) {
+    await using client = await dev.client("/");
+    await client.style(".a").color.expect.toBe("red");
+    await client.style(".b").color.expect.toBe("#00f");
+
+    // Modify one of the circular dependencies
+    await dev.write(
+      "a.css",
+      `
+        @import "./b.css";
+        .a { color: green; }
+      `,
+    );
+    await client.style(".a").color.expect.toBe("green");
+    await client.style(".b").color.expect.toBe("#00f");
+  },
+});
+devTest("multiple stylesheets importing same dependency", {
+  files: {
+    "first.html": emptyHtmlFile({
+      styles: ["first.css"],
+      body: `
+        <div class="first">hello</div>
+        <div class="shared">hello</div>
+      `,
+    }),
+    "second.html": emptyHtmlFile({
+      styles: ["second.css"],
+      body: `
+        <div class="second">hello</div>
+        <div class="shared">hello</div>
+      `,
+    }),
+    "first.css": `
+      @import "./shared.css";
+      .first { color: red; }
+    `,
+    "second.css": `
+      @import "./shared.css";
+      .second { color: blue; }
+    `,
+    "shared.css": `
+      .shared { color: green; }
+    `,
+  },
+  async test(dev) {
+    await using c1 = await dev.client("/first");
+    await using c2 = await dev.client("/second");
+    await c1.style(".first").color.expect.toBe("red");
+    await c2.style(".second").color.expect.toBe("#00f");
+    await c1.style(".shared").color.expect.toBe("green");
+    await c2.style(".shared").color.expect.toBe("green");
+
+    await dev.write(
+      "shared.css",
+      `
+        .shared { color: yellow; }
+      `,
+    );
+
+    await c1.style(".shared").color.expect.toBe("#ff0");
+    await c2.style(".shared").color.expect.toBe("#ff0");
+  },
+});
+devTest("removing and re-adding css import", {
+  files: {
+    "index.html": emptyHtmlFile({
+      styles: ["main.css"],
+    }),
+    "main.css": `
+      @import "./colors.css";
+      .main { background: white; }
+    `,
+    "colors.css": `
+      .colored { color: blue; }
+    `,
+  },
+  async test(dev) {
+    await using client = await dev.client("/");
+    await client.style(".colored").color.expect.toBe("#00f");
+
+    // Remove the import
+    await dev.write(
+      "main.css",
+      `
+        /* @import "./colors.css"; */
+        .main { background: white; }
+      `,
+    );
+    await client.style(".colored").notFound();
+
+    // A change to 'colors.css' should not trigger a rebuild of 'main.css', nor notify any clients.
+    await client.expectNoWebSocketActivity(async () => {
+      await dev.write(
+        "colors.css",
+        `
+          .colored { color: yellow; }
+        `,
+      );
+      await dev.write(
+        "colors.css",
+        `
+          .colored { color: blue; }
+        `,
+      );
+    });
+    await client.style(".colored").notFound();
+
+    // Re-add the import
+    await dev.write(
+      "main.css",
+      `
+        @import "./colors.css";
+        .main { background: white; }
+      `,
+    );
+    await client.style(".colored").color.expect.toBe("#00f");
+    await client.style(".main").backgroundColor.expect.toBe("#fff");
+  },
+});
+
+function extractCssUrl(backgroundImage: string): string {
+  const url = backgroundImage.match(/url\((['"])(.*?)\1\)/);
+  if (!url) {
+    throw new Error("No url found in background-image: " + backgroundImage);
+  }
+  return url[2];
+}
diff --git a/test/js/bun/http/bun-serve-html.test.ts b/test/js/bun/http/bun-serve-html.test.ts
index 4e77fa1c7a..7aefa86deb 100644
--- a/test/js/bun/http/bun-serve-html.test.ts
+++ b/test/js/bun/http/bun-serve-html.test.ts
@@ -737,7 +737,7 @@ test("serve html with JSX runtime in development mode", async () => {
   const response = await fetch(server.url);
   expect(response.status).toBe(200);
   const htmlText = await response.text();
-  const jsSrc = htmlText.match(/<script type="module" crossorigin src="([^"]+)"/)?.[1]!;
+  const jsSrc = htmlText.match(/<script type="module" crossorigin async src="([^"]+)"/)?.[1]!;
   const js = await (await fetch(new URL(jsSrc, server.url))).text();
 
   // Development mode should use jsxDEV