support images and fonts url() in css

src/build.ts

@@ -10,7 +10,7 @@ import {getClientPath, prepareOutput, visitMarkdownFiles} from "./files.js";
 import {createImportResolver, rewriteModule} from "./javascript/imports.js";
 import type {Logger, Writer} from "./logger.js";
 import {renderServerless} from "./render.js";
-import {bundleStyles, rollupClient} from "./rollup.js";
+import {bundleStyles, rollupClient, saveCssAssets} from "./rollup.js";
 import {searchIndex} from "./search.js";
 import {Telemetry} from "./telemetry.js";
 import {faint} from "./tty.js";
@@ -43,7 +43,12 @@ export interface BuildEffects {
    * @param outputPath The path of this file relative to the outputRoot. For
    * example, in a local build this should be relative to the dist directory.
    */
-  writeFile(outputPath: string, contents: Buffer | string): Promise<void>;
+  writeFile(outputPath: string, contents: Buffer | Uint8Array | string): Promise<void>;
+
+  /**
+   * @param path The path to test relative to the outputRoot.
+   */
+  fileExists(path: string): Promise<boolean>;
 }
 
 export async function build(
@@ -109,9 +114,9 @@ export async function build(
       const clientPath = getClientPath(entry);
       const outputPath = join("_observablehq", name);
       effects.output.write(`${faint("bundle")} ${clientPath} ${faint("→")} `);
-      const code = await (entry.endsWith(".css")
-        ? bundleStyles({path: clientPath})
-        : rollupClient(clientPath, {minify: true}));
+      const code = entry.endsWith(".css")
+        ? (await bundleStyles({path: clientPath})).text
+        : await rollupClient(clientPath, {minify: true});
       await effects.writeFile(outputPath, code);
     }
     if (config.search) {
@@ -125,13 +130,14 @@ export async function build(
         const outputPath = join("_import", style.path);
         const sourcePath = join(root, style.path);
         effects.output.write(`${faint("style")} ${sourcePath} ${faint("→")} `);
-        const code = await bundleStyles({path: sourcePath});
-        await effects.writeFile(outputPath, code);
+        const {text, files} = await bundleStyles({path: sourcePath});
+        await effects.writeFile(outputPath, text);
+        await saveCssAssets(files, effects);
       } else {
         const outputPath = join("_observablehq", `theme-${style.theme}.css`);
         effects.output.write(`${faint("bundle")} theme-${style.theme}.css ${faint("→")} `);
-        const code = await bundleStyles({theme: style.theme});
-        await effects.writeFile(outputPath, code);
+        const {text} = await bundleStyles({theme: style.theme});
+        await effects.writeFile(outputPath, text);
       }
     }
   }
@@ -206,6 +212,16 @@ export class FileBuildEffects implements BuildEffects {
     await prepareOutput(destination);
     await writeFile(destination, contents);
   }
+  async fileExists(path: string): Promise<boolean> {
+    path = join(this.outputRoot, path);
+    try {
+      await access(path, constants.R_OK);
+      return true;
+    } catch (error) {
+      if (!isEnoent(error)) throw error;
+    }
+    return false;
+  }
 }
 
 function styleEquals(a: Style, b: Style): boolean {

src/deploy.ts

@@ -375,6 +375,9 @@ class DeployBuildEffects implements BuildEffects {
       throw error;
     }
   }
+  async fileExists(): Promise<boolean> {
+    return false;
+  }
 }
 
 // export for testing

src/preview.ts

@@ -1,7 +1,7 @@
 import {createHash} from "node:crypto";
 import {watch} from "node:fs";
 import type {FSWatcher, WatchEventType} from "node:fs";
-import {access, constants, readFile, stat} from "node:fs/promises";
+import {access, constants, copyFile, readFile, stat, writeFile} from "node:fs/promises";
 import {createServer} from "node:http";
 import type {IncomingMessage, RequestListener, Server, ServerResponse} from "node:http";
 import {basename, dirname, extname, join, normalize} from "node:path";
@@ -15,14 +15,15 @@ import type {Config} from "./config.js";
 import {mergeStyle} from "./config.js";
 import {Loader} from "./dataloader.js";
 import {HttpError, isEnoent, isHttpError, isSystemError} from "./error.js";
-import {getClientPath} from "./files.js";
+import {getClientPath, prepareOutput} from "./files.js";
 import {FileWatchers} from "./fileWatchers.js";
 import {createImportResolver, rewriteModule} from "./javascript/imports.js";
 import {getImplicitSpecifiers, getImplicitStylesheets} from "./libraries.js";
+import type {Logger, Writer} from "./logger.js";
 import {diffMarkdown, parseMarkdown} from "./markdown.js";
 import type {ParseResult} from "./markdown.js";
 import {renderPreview, resolveStylesheet} from "./render.js";
-import {bundleStyles, rollupClient} from "./rollup.js";
+import {bundleStyles, rollupClient, saveCssAssets} from "./rollup.js";
 import {searchIndex} from "./search.js";
 import {Telemetry} from "./telemetry.js";
 import {bold, faint, green, link, red} from "./tty.js";
@@ -38,6 +39,28 @@ export interface PreviewOptions {
   verbose?: boolean;
 }
 
+export interface PreviewEffects {
+  logger: Logger;
+  output: Writer;
+
+  /**
+   * @param outputPath The path of this file relative to the outputRoot. For
+   * example, in a local build this should be relative to the dist directory.
+   */
+  copyFile(sourcePath: string, outputPath: string): Promise<void>;
+
+  /**
+   * @param outputPath The path of this file relative to the outputRoot. For
+   * example, in a local build this should be relative to the dist directory.
+   */
+  writeFile(outputPath: string, contents: Buffer | Uint8Array | string): Promise<void>;
+
+  /**
+   * @param path The path to test relative to the outputRoot.
+   */
+  fileExists(path: string): Promise<boolean>;
+}
+
 export async function preview(options: PreviewOptions): Promise<PreviewServer> {
   return PreviewServer.start(options);
 }
@@ -47,14 +70,19 @@ export class PreviewServer {
   private readonly _server: ReturnType<typeof createServer>;
   private readonly _socketServer: WebSocketServer;
   private readonly _verbose: boolean;
+  private readonly _effects: PreviewEffects;
 
-  private constructor({config, server, verbose}: {config: Config; server: Server; verbose: boolean}) {
+  private constructor(
+    {config, server, verbose}: {config: Config; server: Server; verbose: boolean},
+    effects: PreviewEffects = new DefaultPreviewEffects(join(config.root, ".observablehq", "cache"))
+  ) {
     this._config = config;
     this._verbose = verbose;
     this._server = server;
     this._server.on("request", this._handleRequest);
     this._socketServer = new WebSocketServer({server: this._server});
     this._socketServer.on("connection", this._handleConnection);
+    this._effects = effects;
   }
 
   static async start({verbose = true, hostname, port, open, ...options}: PreviewOptions) {
@@ -103,7 +131,7 @@ export class PreviewServer {
         if (pathname.endsWith(".js")) {
           end(req, res, await rollupClient(path), "text/javascript");
         } else if (pathname.endsWith(".css")) {
-          end(req, res, await bundleStyles({path}), "text/css");
+          end(req, res, (await bundleStyles({path})).text, "text/css");
         } else {
           throw new HttpError(`Not found: ${pathname}`, 404);
         }
@@ -114,16 +142,22 @@ export class PreviewServer {
       } else if (pathname === "/_observablehq/minisearch.json") {
         end(req, res, await searchIndex(config), "application/json");
       } else if ((match = /^\/_observablehq\/theme-(?<theme>[\w-]+(,[\w-]+)*)?\.css$/.exec(pathname))) {
-        end(req, res, await bundleStyles({theme: match.groups!.theme?.split(",") ?? []}), "text/css");
+        end(req, res, (await bundleStyles({theme: match.groups!.theme?.split(",") ?? []})).text, "text/css");
       } else if (pathname.startsWith("/_observablehq/")) {
         send(req, pathname.slice("/_observablehq".length), {root: publicRoot}).pipe(res);
       } else if (pathname.startsWith("/_import/")) {
         const path = pathname.slice("/_import".length);
         const filepath = join(root, path);
+        const includePath = join(root, ".observablehq", "cache");
         try {
-          if (pathname.endsWith(".css")) {
-            await access(filepath, constants.R_OK);
-            end(req, res, await bundleStyles({path: filepath}), "text/css");
+          if (pathname.startsWith("/_import/assets/")) {
+            await access(join(includePath, pathname), constants.R_OK);
+            send(req, pathname, {root: includePath}).pipe(res);
+            return;
+          } else if (pathname.endsWith(".css")) {
+            const {text, files} = await bundleStyles({path: filepath});
+            await saveCssAssets(files, this._effects);
+            end(req, res, text, "text/css");
             return;
           } else if (pathname.endsWith(".js")) {
             const input = await readFile(filepath, "utf-8");
@@ -414,3 +448,40 @@ function handleWatch(socket: WebSocket, req: IncomingMessage, {root, style: defa
     socket.send(JSON.stringify(message));
   }
 }
+
+class DefaultPreviewEffects implements PreviewEffects {
+  private readonly outputRoot: string;
+  readonly logger: Logger;
+  readonly output: Writer;
+  constructor(
+    outputRoot: string,
+    {logger = console, output = process.stdout}: {logger?: Logger; output?: Writer} = {}
+  ) {
+    if (!outputRoot) throw new Error("missing outputRoot");
+    this.logger = logger;
+    this.output = output;
+    this.outputRoot = outputRoot;
+  }
+  async copyFile(sourcePath: string, outputPath: string): Promise<void> {
+    const destination = join(this.outputRoot, outputPath);
+    this.logger.log(destination);
+    await prepareOutput(destination);
+    await copyFile(sourcePath, destination);
+  }
+  async writeFile(outputPath: string, contents: string | Buffer): Promise<void> {
+    const destination = join(this.outputRoot, outputPath);
+    this.logger.log(destination);
+    await prepareOutput(destination);
+    await writeFile(destination, contents);
+  }
+  async fileExists(path: string): Promise<boolean> {
+    path = join(this.outputRoot, path);
+    try {
+      await access(path, constants.R_OK);
+      return true;
+    } catch (error) {
+      if (!isEnoent(error)) throw error;
+    }
+    return false;
+  }
+}

src/rollup.ts

@@ -1,16 +1,19 @@
+import {basename} from "path";
 import {nodeResolve} from "@rollup/plugin-node-resolve";
 import {type CallExpression} from "acorn";
 import {simple} from "acorn-walk";
 import {build} from "esbuild";
 import type {AstNode, OutputChunk, Plugin, ResolveIdResult} from "rollup";
 import {rollup} from "rollup";
 import esbuild from "rollup-plugin-esbuild";
+import type {BuildEffects} from "./build.js";
 import {getClientPath} from "./files.js";
 import {getStringLiteralValue, isStringLiteral} from "./javascript/features.js";
 import {isPathImport, resolveNpmImport} from "./javascript/imports.js";
 import {getObservableUiOrigin} from "./observableApiClient.js";
 import {Sourcemap} from "./sourcemap.js";
 import {THEMES, renderTheme} from "./theme.js";
+import {faint} from "./tty.js";
 import {relativeUrl} from "./url.js";
 
 const STYLE_MODULES = {
@@ -25,15 +28,39 @@ function rewriteInputsNamespace(code: string) {
   return code.replace(/\b__ns__\b/g, "inputs-3a86ea");
 }
 
-export async function bundleStyles({path, theme}: {path?: string; theme?: string[]}): Promise<string> {
-  const result = await build({
-    bundle: true,
-    ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
-    write: false,
-    alias: STYLE_MODULES
-  });
-  const text = result.outputFiles[0].text;
-  return rewriteInputsNamespace(text); // TODO only for inputs
+type AssetReference = {path: string; contents: Uint8Array};
+
+const INLINE_CSS = Object.fromEntries(
+  ["svg", "png", "jpeg", "jpg", "gif", "eot", "otf", "woff", "woff2"].map((ext) => [`.${ext}`, "file" as const])
+);
+
+export async function bundleStyles({
+  path,
+  theme
+}: {
+  path?: string;
+  theme?: string[];
+}): Promise<{text: string; files: AssetReference[]}> {
+  try {
+    const result = await build({
+      bundle: true,
+      loader: INLINE_CSS,
+      ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}),
+      write: false,
+      outdir: "/_import",
+      assetNames: "assets/[name].[hash]",
+      alias: STYLE_MODULES,
+      logLevel: "silent"
+    });
+    const {text} = result.outputFiles.at(-1)!;
+    return {
+      text: path === "src/client/stdlib/inputs.css" ? rewriteInputsNamespace(text) : text,
+      files: result.outputFiles.slice(0, -1).map(({path, contents}) => ({path: path.slice(1), contents}))
+    };
+  } catch (error: any) {
+    const err = error?.errors?.[0]?.location;
+    throw new Error(err ? `Error bundling ${err.file} line ${err.line}:\n${err.lineText}` : "Bundler error.");
+  }
 }
 
 export async function rollupClient(clientPath: string, {minify = false} = {}): Promise<string> {
@@ -154,3 +181,12 @@ function importMetaResolve(): Plugin {
     }
   };
 }
+
+export async function saveCssAssets(files: AssetReference[], effects: BuildEffects): Promise<void> {
+  for (const {path, contents} of files) {
+    if (!(await effects.fileExists(path))) {
+      effects.output.write(`${faint("asset")} ${basename(path)} ${faint("→")} `);
+      await effects.writeFile(path, contents);
+    }
+  }
+}

test/input/build/css-assets-public/atkinson.css

@@ -0,0 +1,11 @@
+@import url("observablehq:default.css");
+@import url("observablehq:theme-glacier.css");
+
+@font-face {
+  font-family: "atkinson";
+  src: url("atkinson-sample.woff2") format("woff2");
+}
+
+:root {
+  --serif: atkinson;
+}

test/input/build/css-assets-public/index.md

@@ -0,0 +1,53 @@
+---
+style: "atkinson.css"
+---
+
+# Atkinson Hyperlegible
+
+## from the Braille Institute
+
+**a typeface providing greater legibility and readability for low vision readers**
+
+Atkinson Hyperlegible font is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. Free for anyone to use!
+
+For more see the [brailleinstitute.org/freefont](https://brailleinstitute.org/freefont) web page.
+
+---
+
+## Font License
+
+Copyright © 2020, Braille Institute of America, Inc., [brailleinstitute.org/freefont](https://www.brailleinstitute.org/freefont) with Reserved Typeface Name Atkinson Hyperlegible Font.
+
+#### General
+
+Copyright Holder allows the Font to be used, studied, modified and redistributed freely as long as it is not sold by itself. The Font, including any derivative works, may be bundled, embedded, redistributed and/or sold with any software or other work provided that the Reserved Typeface Name is not used on, in or by any derivative work. The Font and derivatives, however, cannot be released under any other type of license. The requirement for the Font to remain under this license does not
+apply to any document created using the Font or any of its derivatives.
+
+#### Definitions
+
+- "Author" refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.
+- “Copyright Holder” refers to Braille Institute of America, Inc.
+- “Font” refers to the Atkinson Hyperlegible Font developed by Copyright Holder.
+- "Font Software" refers to the set of files released by Copyright Holder under this license. This may include source files, build scripts and documentation.
+- "Modified Version" refers to any derivative made by adding to, deleting, or substituting -- in part or in whole -- any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.
+- "Original Version" refers to the collection of the Font Software components as distributed by Copyright Holder.
+- "Reserved Typeface Name" refers to the name Atkinson Hyperlegible Font.
+
+#### Permission & Conditions
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:
+1) Neither the Font Software nor any of its individual components, in Original Version or Modified Version, may be sold by itself.
+2) The Original Version or Modified Version of the Font Software may be bundled, redistributed and/or sold with any other software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.
+3) No Modified Version of the Font Software may use the Reserved Typeface Name unless explicit written permission is granted by Copyright Holder. This restriction only applies to the primary font name as presented to the users.
+4) The name of Copyright Holder or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version or any related software or other product, except:
+(a) to acknowledge the contribution(s) of Copyright Holder and the Author(s); or
+(b) with the prior written permission of Copyright Holder.
+5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license.
+
+#### Termination
+
+This license shall immediately terminate and become null and void if any of the above conditions are not met.
+
+#### Disclaimer
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK OR OTHER RIGHT. IN NO EVENT SHALL COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OF OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.