CSS files should resolve through package.json exports (#1219)

Author: alexgleason

server/build_resolver.go

@@ -76,6 +76,27 @@ func (ctx *BuildContext) resolveEntry(esm EsmPath) (entry BuildEntry) {
 		case ".json", ".jsx", ".svelte", ".vue":
 			entry.update(subPath, true)
 			return
+		case ".css":
+			// check if CSS file is defined in exports
+			if pkgJson.Exports.Len() > 0 {
+				if v, ok := pkgJson.Exports.Get("./" + subPath); ok {
+					if s, ok := v.(string); ok {
+						entry.update(s, true)
+						return
+					} else if obj, ok := v.(npm.JSONObject); ok {
+						// handle conditional exports like {"types": "...", "default": "..."}
+						if defaultPath, ok := obj.Get("default"); ok {
+							if s, ok := defaultPath.(string); ok {
+								entry.update(s, true)
+								return
+							}
+						}
+					}
+				}
+			}
+			// if not found in exports, use the subPath as-is
+			entry.update(subPath, true)
+			return
 		default:
 			// continue
 		}

server/router.go

@@ -1153,6 +1153,24 @@ func esmRouter(db Database, esmStorage storage.Storage, logger *log.Logger) rex.
 				}
 				if err != nil {
 					if os.IsNotExist(err) {
+						// try to resolve the file through package.json exports
+						b := &BuildContext{
+							npmrc:   npmrc,
+							esmPath: esm,
+						}
+						err = b.install()
+						if err != nil {
+							return rex.Status(500, err.Error())
+						}
+						entry := b.resolveEntry(esm)
+						if entry.main != "" && entry.main != "./"+esm.SubPath {
+							// redirect to the resolved path
+							query := ""
+							if rawQuery != "" {
+								query = "?" + rawQuery
+							}
+							return redirect(ctx, fmt.Sprintf("%s/%s%s%s", origin, esm.Name(), utils.NormalizePathname(entry.main), query), true)
+						}
 						ctx.SetHeader("Cache-Control", ccImmutable)
 						return rex.Status(404, "File Not Found")
 					}

test/issue-1217/test.ts

@@ -0,0 +1,29 @@
+import { assertEquals, assertStringIncludes } from "jsr:@std/assert";
+
+Deno.test("issue #1217 - CSS files should resolve through package.json exports", async () => {
+  // Test case 1: yet-another-react-lightbox
+  // The package.json has: "./styles.css": {"default": "./dist/styles.css"}
+  // Should redirect from /styles.css to /dist/styles.css
+  const res1 = await fetch(
+    "http://localhost:8080/*yet-another-react-lightbox@3.21.7/styles.css",
+    { redirect: "follow" },
+  );
+  const css1 = await res1.text();
+  assertEquals(res1.ok, true, "yet-another-react-lightbox styles.css should be found");
+  assertEquals(res1.status, 200, "Should return 200 OK");
+  assertStringIncludes(res1.url, "/dist/styles.css", "Should resolve to /dist/styles.css");
+  assertStringIncludes(css1, "yarl__", "Should contain lightbox CSS");
+
+  // Test case 2: react-tweet
+  // The package.json has: "./theme.css": "./dist/twitter-theme/theme.css"
+  // Should redirect from /theme.css to /dist/twitter-theme/theme.css
+  const res2 = await fetch(
+    "http://localhost:8080/*react-tweet@3.2.2/theme.css",
+    { redirect: "follow" },
+  );
+  const css2 = await res2.text();
+  assertEquals(res2.ok, true, "react-tweet theme.css should be found");
+  assertEquals(res2.status, 200, "Should return 200 OK");
+  assertStringIncludes(res2.url, "/dist/twitter-theme/theme.css", "Should resolve to /dist/twitter-theme/theme.css");
+  assertStringIncludes(css2, "tweet", "Should contain tweet CSS");
+});