Support import with { type: 'css' } (#1193)

Author: ije

server/build.go

@@ -679,7 +679,7 @@ func (ctx *BuildContext) buildModule(analyzeMode bool) (meta *BuildMeta, include
 
 							if len(args.With) > 0 && args.With["type"] == "css" {
 								return esbuild.OnResolveResult{
-									Path:        "/" + ctx.esmPath.Name() + utils.NormalizePathname(modulePath),
+									Path:        "/" + ctx.esmPath.Name() + utils.NormalizePathname(modulePath) + "?module",
 									External:    true,
 									SideEffects: esbuild.SideEffectsFalse,
 								}, nil

server/router.go

@@ -1029,11 +1029,39 @@ func esmRouter(db Database, esmStorage storage.Storage, logger *log.Logger) rex.
 		} else {
 			// return wasm file as an es6 module when `?module` query is present (requires `top-level-await` support)
 			if pathKind == RawFile && strings.HasSuffix(esm.SubPath, ".wasm") && query.Has("module") {
-				buf := &bytes.Buffer{}
 				wasmUrl := origin + pathname
-				fmt.Fprintf(buf, "/* esm.sh - wasm module */\n")
-				fmt.Fprintf(buf, "const data = await fetch(%s).then(r => r.arrayBuffer());\nexport default new WebAssembly.Module(data);", strings.TrimSpace(string(utils.MustEncodeJSON(wasmUrl))))
+				buf := bytes.NewBufferString("/* esm.sh - wasm module */\n")
+				buf.WriteString("const data = await fetch(")
+				buf.WriteString(strings.TrimSpace(string(utils.MustEncodeJSON(wasmUrl))))
+				buf.WriteString(").then(r => r.arrayBuffer());\n")
+				buf.WriteString("export default new WebAssembly.Module(data);")
 				ctx.SetHeader("Content-Type", ctJavaScript)
+				ctx.SetHeader("Content-Length", fmt.Sprintf("%d", buf.Len()))
+				ctx.SetHeader("Cache-Control", ccImmutable)
+				return buf
+			}
+
+			// return css file as a `CSSStyleSheet` object when `?module` query is present
+			if pathKind == RawFile && strings.HasSuffix(esm.SubPath, ".css") && query.Has("module") {
+				filename := path.Join(npmrc.StoreDir(), esm.Name(), "node_modules", esm.PkgName, esm.SubPath)
+				css, err := os.ReadFile(filename)
+				if err != nil {
+					return rex.Status(500, err.Error())
+				}
+				buf := bytes.NewBufferString("/* esm.sh - css module */\n")
+				buf.WriteString("const stylesheet = new CSSStyleSheet();\n")
+				if bytes.ContainsRune(css, '`') {
+					buf.WriteString("stylesheet.replaceSync(`")
+					buf.WriteString(strings.TrimSpace(string(utils.MustEncodeJSON(string(css)))))
+					buf.WriteString(");\n")
+				} else {
+					buf.WriteString("stylesheet.replaceSync(`")
+					buf.Write(css)
+					buf.WriteString("`);\n")
+				}
+				buf.WriteString("export default stylesheet;\n")
+				ctx.SetHeader("Content-Type", ctJavaScript)
+				ctx.SetHeader("Content-Length", fmt.Sprintf("%d", buf.Len()))
 				ctx.SetHeader("Cache-Control", ccImmutable)
 				return buf
 			}

test/issue-1191/test.ts

@@ -0,0 +1,28 @@
+import { assert, assertEquals } from "jsr:@std/assert";
+
+// related issue: https://github.com/esm-dev/esm.sh/issues/1191
+Deno.test(
+  "import with { type: 'css' }",
+  async () => {
+    const res = await fetch("http://localhost:8080/[email protected]/es2022/menu/menu.mjs");
+    const text = await res.text();
+    assert(res.ok);
+    assertEquals(res.headers.get("content-type"), "application/javascript; charset=utf-8");
+    assertEquals(res.headers.get("cache-control"), "public, max-age=31536000, immutable");
+    assert(text.includes(`import("/[email protected]/style.css?module")`));
+  },
+);
+
+Deno.test(
+  "css?module",
+  async () => {
+    const res = await fetch("http://localhost:8080/[email protected]/style.css?module");
+    const text = await res.text();
+    assert(res.ok);
+    assertEquals(res.headers.get("content-type"), "application/javascript; charset=utf-8");
+    assertEquals(res.headers.get("cache-control"), "public, max-age=31536000, immutable");
+    assert(text.includes("const stylesheet = new CSSStyleSheet();"));
+    assert(text.includes("stylesheet.replaceSync(`"));
+    assert(text.includes("`);\nexport default stylesheet;"));
+  },
+);