@remix-run/assets 0.1.0 → 0.2.0

package/README.md

@@ -1,13 +1,13 @@
 # assets
 
-Fetch-based server for compiling browser JS/TS assets on demand.
+Fetch-based server for compiling browser JS/TS and CSS assets on demand.
 
 ## Features
 
-- **On-Demand Compilation** - Compile browser assets on demand
+- **On-Demand Compilation** - Compile browser scripts and styles on demand
 - **Custom File Mapping** - Define patterns for mapping public URLs to file paths on disk
 - **Access Control** - Control exactly which files can be served with allow and deny rules
-- **Preloads** - Generate modulepreload URLs for `<link>` tags or `Link` headers
+- **Preloads** - Generate preload URLs for scripts and styles based on imports
 - **Caching** - Conservative caching by default with stable URLs, ETags, and revalidation
 - **Optional Fingerprinting** - Source-based fingerprinted URLs for long-lived browser caching
 - **Source Maps** - Serve inline or external sourcemaps
@@ -20,7 +20,7 @@ npm i remix
 
 ## Usage
 
-Use `createAssetServer` to serve browser modules from a URL namespace in your app.
+Use `createAssetServer` to serve browser JS/TS and CSS assets from a URL namespace in your app.
 
 ```ts
 import { createRouter } from 'remix/fetch-router'
@@ -41,7 +41,7 @@ router.get('/assets/*', ({ request }) => {
 })
 ```
 
-This example gives you an `/assets/*` endpoint that serves compiled browser JS modules from `app/assets` and `node_modules`.
+This example gives you an `/assets/*` endpoint that serves compiled browser assets from `app/assets` and `node_modules`.
 
 ## Root Directory
 
@@ -151,7 +151,7 @@ let src = await assetServer.getHref('app/assets/entry.tsx')
 
 ## Preloads
 
-Use `assetServer.getPreloads()` when rendering HTML so you can turn the returned URLs into `<link rel="modulepreload">` tags or `Link` headers for one or more assets and their dependencies. You can provide root-relative or absolute file paths, or `file://` URLs.
+Use `assetServer.getPreloads()` when rendering HTML so you can turn the returned URLs into `<link rel="modulepreload">`, stylesheet preload tags, or `Link` headers for one or more assets and their dependencies. You can provide root-relative or absolute file paths, or `file://` URLs.
 
 ```ts
 let preloads = await assetServer.getPreloads(['app/assets/entry.tsx', 'app/assets/search.tsx'])
@@ -159,16 +159,16 @@ let preloads = await assetServer.getPreloads(['app/assets/entry.tsx', 'app/asset
 //   '/assets/app/assets/entry.tsx',
 //   '/assets/app/assets/search.tsx',
 //   '/assets/app/assets/utils.ts',
-//   '/assets/npm/@remix-run/component/index.js',
+//   '/assets/npm/@remix-run/ui/index.js',
 //   ...etc
 // ]
 ```
 
 ## Fingerprinting
 
-By default, scripts are served at stable URLs with ETags and `Cache-Control: no-cache`. Responses are cached for the lifetime of the asset server instance.
+By default, assets are served at stable URLs with ETags and `Cache-Control: no-cache`. Responses are cached for the lifetime of the asset server instance.
 
-If you want clients to cache scripts aggressively without revalidation, you can opt into source-based fingerprinting.
+If you want clients to cache assets aggressively without revalidation, you can opt into source-based fingerprinting.
 
 ```ts
 import { createAssetServer } from 'remix/assets'
@@ -183,15 +183,13 @@ let assetServer = createAssetServer({
 })
 ```
 
-When fingerprinting is enabled, scripts use a `.@<fingerprint>` segment before the file extension and are served with `Cache-Control: public, max-age=31536000, immutable`.
+When fingerprinting is enabled, assets use a `.@<fingerprint>` segment before the file extension and are served with `Cache-Control: public, max-age=31536000, immutable`.
 
-Source fingerprints are based on the original file contents and the build ID. The build ID must change for each deployment so that fingerprinted modules are invalidated together. This fingerprinting strategy assumes that files on disk won't change, so fingerprinting requires `watch: false`.
+Source fingerprints are based on the original file contents and the build ID. The build ID must change for each deployment so that fingerprinted assets are invalidated together. This fingerprinting strategy assumes that files on disk won't change, so fingerprinting requires `watch: false`.
 
-## Script Options
-
-### Minification
+## Target
 
-Enable minification with `scripts.minify`:
+Use `target` to lower emitted syntax to a specific browser support policy and/or ECMAScript version.
 
 ```ts
 import { createAssetServer } from 'remix/assets'
@@ -199,15 +197,19 @@ import { createAssetServer } from 'remix/assets'
 let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
   allow: ['app/assets/**'],
-  scripts: {
-    minify: true,
+  target: {
+    chrome: '109',
+    ios: '15.6',
+    es: '2020',
   },
 })
 ```
 
-### Target
+Supported target options are `chrome`, `firefox`, `safari`, `edge`, `opera`, `ios`, `samsung`, and `es` (ECMAScript version).
+
+### Source Maps
 
-Use `scripts.target` to lower emitted syntax to a specific ECMAScript version.
+Enable sourcemaps with either `'external'` or `'inline'` using `sourceMaps`:
 
 ```ts
 import { createAssetServer } from 'remix/assets'
@@ -215,38 +217,26 @@ import { createAssetServer } from 'remix/assets'
 let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
   allow: ['app/assets/**'],
-  scripts: {
-    target: 'es2019',
-  },
+  sourceMaps: 'external',
 })
 ```
 
-The default target is `esnext`, which means all syntax is preserved.
-
-### Define
-
-Use `scripts.define` to replace global identifiers with constant expressions.
+By default, sourcemap `sources` use URLs so they're presented alongside the compiled output in your browser's developer tools. You can also use file system paths instead with `sourceMapSourcePaths`:
 
 ```ts
 import { createAssetServer } from 'remix/assets'
 
 let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
-  allow: ['app/assets/**', 'app/node_modules/**'],
-  scripts: {
-    define: {
-      'process.env.NODE_ENV': '"production"',
-    },
-    minify: true,
-  },
+  allow: ['app/assets/**'],
+  sourceMaps: 'inline',
+  sourceMapSourcePaths: 'absolute',
 })
 ```
 
-Values are injected exactly as defined, so string literals must include their own quotes, e.g. `process.env.NODE_ENV` must be `"production"` rather than `production`.
-
-### Source Maps
+### Minification
 
-Enable sourcemaps with either `'external'` or `'inline'` using `scripts.sourceMaps`:
+Enable minification with `minify`:
 
 ```ts
 import { createAssetServer } from 'remix/assets'
@@ -254,27 +244,32 @@ import { createAssetServer } from 'remix/assets'
 let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
   allow: ['app/assets/**'],
-  scripts: {
-    sourceMaps: 'external',
-  },
+  minify: true,
 })
 ```
 
-By default, sourcemap `sources` use URLs so they're presented alongside the compiled output in your browser's developer tools. You can also use file system paths instead with `scripts.sourceMapSourcePaths`:
+## Script Options
+
+### Define
+
+Use `scripts.define` to replace global identifiers with constant expressions.
 
 ```ts
 import { createAssetServer } from 'remix/assets'
 
 let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
-  allow: ['app/assets/**'],
+  allow: ['app/assets/**', 'app/node_modules/**'],
   scripts: {
-    sourceMaps: 'inline',
-    sourceMapSourcePaths: 'absolute',
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
   },
 })
 ```
 
+Values are injected exactly as defined, so string literals must include their own quotes, e.g. `process.env.NODE_ENV` must be `"production"` rather than `production`.
+
 ### External Imports
 
 Use `scripts.external` to leave specific import specifiers unchanged by providing an array of specifiers.
@@ -291,6 +286,17 @@ let assetServer = createAssetServer({
 })
 ```
 
+## CSS Imports
+
+Relative CSS `@import` rules are rewritten to asset server URLs. External `@import` URLs are left unchanged automatically. `url()` references are preserved as authored.
+
+```css
+/* Rewritten to asset server URL: */
+@import './reset.css';
+/* External URL: */
+@import 'https://fonts.googleapis.com/css2?family=Inter';
+```
+
 ## Error Handling
 
 Use `onError` to report unexpected compilation failures and/or return a custom response.
@@ -302,8 +308,8 @@ let assetServer = createAssetServer({
   fileMap: { '/assets/app/*path': 'app/*path' },
   allow: ['app/assets/**'],
   onError(error) {
-    console.error('Failed to build client module', error)
-    return new Response('Client module build failed', { status: 500 })
+    console.error('Failed to build client assets', error)
+    return new Response('Client asset build failed', { status: 500 })
   },
 })
 ```

package/dist/lib/asset-server.d.ts

@@ -1,3 +1,4 @@
+import type { AssetTarget } from './target.ts';
 import type { ChokidarWatcher } from './watch.ts';
 interface AssetServerWatchOptions {
     /**
@@ -16,13 +17,22 @@ interface AssetServerWatchOptions {
 }
 interface FingerprintOptions {
     /**
-     * Per-build invalidation token that must change whenever fingerprinted module URLs
+     * Per-build invalidation token that must change whenever fingerprinted asset URLs
      * should be invalidated together.
      */
     buildId: string;
 }
-declare const scriptTargets: readonly ["es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "es2021", "es2022", "es2023", "es2024", "es2025", "es2026", "esnext"];
-export type ScriptsTarget = (typeof scriptTargets)[number];
+type AssetSourceMaps = 'inline' | 'external';
+type AssetSourceMapSourcePaths = 'url' | 'absolute';
+interface AssetServerScriptOptions {
+    /**
+     * Replace global expressions with constant values during transform, e.g.
+     * `{ 'process.env.NODE_ENV': '"production"' }`
+     */
+    define?: Record<string, string>;
+    /** Import specifiers to leave unrewritten (CDN URLs, import map entries, etc.) */
+    external?: string[];
+}
 export interface AssetServerOptions {
     /** File patterns keyed by public URL patterns. */
     fileMap: Readonly<Record<string, string>>;
@@ -39,45 +49,37 @@ export interface AssetServerOptions {
      */
     deny?: readonly string[];
     /**
-     * Controls optional source-based URL fingerprinting for rewritten import URLs.
+     * Controls optional source-based URL fingerprinting for rewritten asset URLs.
      *
-     * When omitted, all served modules use stable non-fingerprinted URLs with `Cache-Control: no-cache`.
+     * When omitted, all served assets use stable non-fingerprinted URLs with `Cache-Control: no-cache`.
      * Cannot be used together with active watch mode. Set `watch: false` when fingerprinting.
      */
     fingerprint?: FingerprintOptions;
     /**
-     * Script pipeline configuration. Omit to use defaults.
-     */
-    scripts?: {
-        /**
-         * Source map mode (disabled when omitted).
-         * - `'external'`: serve source maps as separate `.map` files; adds `//# sourceMappingURL=` comment
-         * - `'inline'`: embed source maps as a base64 data URL directly in the JS; no separate `.map` file
-         */
-        sourceMaps?: 'inline' | 'external';
-        /**
-         * Controls the source paths written into source map `sources`.
-         * - `'url'` (default): use the stable server path (e.g. `'/assets/app/entry.ts'`)
-         * - `'absolute'`: use the original filesystem path on disk
-         */
-        sourceMapSourcePaths?: 'url' | 'absolute';
-        /**
-         * Minify emitted modules.
-         */
-        minify?: boolean;
-        /**
-         * Replace global expressions with constant values during transform, e.g.
-         * `{ 'process.env.NODE_ENV': '"production"' }`
-         */
-        define?: Record<string, string>;
-        /**
-         * Lower emitted syntax to a specific ECMAScript target. Omit this option to preserve
-         * modern syntax unless project configuration already requests a lower target.
-         */
-        target?: ScriptsTarget;
-        /** Import specifiers to leave unrewritten (CDN URLs, import map entries, etc.) */
-        external?: string[];
-    };
+     * Shared compatibility target for scripts and styles. Browser targets apply to both
+     * pipelines, and `es` only affects scripts.
+     */
+    target?: AssetTarget;
+    /**
+     * Source map mode for scripts and styles.
+     * - `'external'`: serve source maps as separate `.map` files
+     * - `'inline'`: embed source maps as a base64 data URL in the compiled asset
+     */
+    sourceMaps?: AssetSourceMaps;
+    /**
+     * Source path strategy for source map `sources`.
+     * - `'url'` (default): use the stable server path (e.g. `'/assets/app/entry.ts'`)
+     * - `'absolute'`: use the original filesystem path on disk
+     */
+    sourceMapSourcePaths?: AssetSourceMapSourcePaths;
+    /**
+     * Minification setting for emitted scripts and styles.
+     */
+    minify?: boolean;
+    /**
+     * Script-only configuration.
+     */
+    scripts?: AssetServerScriptOptions;
     /**
      * Enable filesystem-backed cache invalidation for long-lived server instances.
      * Enabled by default. Pass `true` to use the default watcher options, an options
@@ -92,16 +94,16 @@ export interface AssetServerOptions {
 }
 export interface AssetServer {
     /**
-     * Serves a script request. Returns `Response | null` — null means the request was not
-     * handled by this server, letting the router fall through to a 404.
+     * Serves a script or style request. Returns `Response | null` — null means the request
+     * was not handled by this server, letting the router fall through to a 404.
      */
     fetch(request: Request): Promise<Response | null>;
     /**
-     * Returns the request href for a served module file.
+     * Returns the request href for a served asset file.
      */
     getHref(filePath: string): Promise<string>;
     /**
-     * Returns preload URLs for one or more served module files, ordered shallowest-first.
+     * Returns preload URLs for one or more served asset files, ordered shallowest-first.
      */
     getPreloads(filePath: string | readonly string[]): Promise<string[]>;
     /**
@@ -114,8 +116,8 @@ export declare function getInternalWatchTargets(assetServer: AssetServer): reado
 /**
  * Create an asset server instance
  *
- * Compiles TypeScript/JavaScript modules on demand with optional source-based URL
- * fingerprinting, caching, and configurable file mapping.
+ * Compiles TypeScript/JavaScript scripts and CSS styles on demand with optional
+ * source-based URL fingerprinting, caching, and configurable file mapping.
  *
  * @param options Server configuration
  * @returns A {@link AssetServer} with `fetch()`, `getHref()`, and `getPreloads()` methods

package/dist/lib/asset-server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asset-server.d.ts","sourceRoot":"","sources":["../../src/lib/asset-server.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAGjD,UAAU,uBAAuB;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,aAAa,6IAcT,CAAA;AAGV,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE;QACR;;;;WAIG;QACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;QAClC;;;;WAIG;QACH,oBAAoB,CAAC,EAAE,KAAK,GAAG,UAAU,CAAA;QACzC;;WAEG;QACH,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB;;;WAGG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAC/B;;;WAGG;QACH,MAAM,CAAC,EAAE,aAAa,CAAA;QACtB,kFAAkF;QAClF,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;KACpB,CAAA;IACD;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,uBAAuB,CAAA;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA;CACzE;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IACjD;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IAC1C;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;IACpE;;OAEG;IACH,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;CACvB;AAsBD,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,CAEhG;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,MAAM,EAAE,CAEnF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CA4H1E"}
+{"version":3,"file":"asset-server.d.ts","sourceRoot":"","sources":["../../src/lib/asset-server.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAA6C,MAAM,aAAa,CAAA;AAEzF,OAAO,KAAK,EAAsB,eAAe,EAAE,MAAM,YAAY,CAAA;AAErE,UAAU,uBAAuB;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,UAAU,kBAAkB;IAC1B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAA;AAC5C,KAAK,yBAAyB,GAAG,KAAK,GAAG,UAAU,CAAA;AAEnD,UAAU,wBAAwB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAID,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACxB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,eAAe,CAAA;IAC5B;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,yBAAyB,CAAA;IAChD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,wBAAwB,CAAA;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,uBAAuB,CAAA;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA;CACzE;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IACjD;;OAEG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IAC1C;;OAEG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;IACpE;;OAEG;IACH,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAA;CACvB;AAuBD,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,CAEhG;AAED,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,MAAM,EAAE,CAEnF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAqN1E"}

package/dist/lib/asset-server.js

@@ -1,27 +1,16 @@
 import * as path from 'node:path';
 import * as fs from 'node:fs';
-import { isAssetServerCompilationError } from "./compilation-error.js";
 import { createAccessPolicy } from "./access.js";
-import { createModuleCompiler, createResponseForModule } from "./scripts/compiler.js";
+import { isAssetServerCompilationError } from "./compilation-error.js";
+import { getFingerprintRequestCacheControl, parseFingerprintSuffix } from "./fingerprint.js";
 import { normalizeFilePath } from "./paths.js";
 import { compileRoutes } from "./routes.js";
+import { createResponseForScript, createScriptCompiler } from "./scripts/compiler.js";
+import { supportedScriptExtensions } from "./scripts/resolve.js";
+import { createResponseForStyle, createStyleCompiler, isStyleFilePath } from "./styles/compiler.js";
+import { resolveScriptTarget, resolveStyleTarget } from "./target.js";
 import { createAssetServerWatcher } from "./watch.js";
-const scriptTargets = [
-    'es2015',
-    'es2016',
-    'es2017',
-    'es2018',
-    'es2019',
-    'es2020',
-    'es2021',
-    'es2022',
-    'es2023',
-    'es2024',
-    'es2025',
-    'es2026',
-    'esnext',
-];
-const scriptTargetSet = new Set(scriptTargets);
+const scriptExtensionSet = new Set(supportedScriptExtensions);
 const chokidarWatcherByAssetServer = new WeakMap();
 const watcherByAssetServer = new WeakMap();
 export function getInternalChokidarWatcher(assetServer) {
@@ -33,8 +22,8 @@ export function getInternalWatchTargets(assetServer) {
 /**
  * Create an asset server instance
  *
- * Compiles TypeScript/JavaScript modules on demand with optional source-based URL
- * fingerprinting, caching, and configurable file mapping.
+ * Compiles TypeScript/JavaScript scripts and CSS styles on demand with optional
+ * source-based URL fingerprinting, caching, and configurable file mapping.
  *
  * @param options Server configuration
  * @returns A {@link AssetServer} with `fetch()`, `getHref()`, and `getPreloads()` methods
@@ -60,11 +49,11 @@ export function createAssetServer(options) {
     });
     let watcher = null;
     let chokidarWatcher = null;
-    let moduleCompiler = createModuleCompiler({
+    let scriptCompiler = createScriptCompiler({
         buildId: resolvedOptions.buildId,
         define: resolvedOptions.define,
         external: resolvedOptions.external,
-        fingerprintModules: resolvedOptions.fingerprintModules,
+        fingerprintAssets: resolvedOptions.fingerprintAssets,
         isAllowed: accessPolicy.isAllowed,
         minify: resolvedOptions.minify,
         onWatchDirectoriesChange: (delta) => {
@@ -80,6 +69,23 @@ export function createAssetServer(options) {
         watchIgnore: resolvedOptions.watchOptions?.ignore,
         watchMode: resolvedOptions.watchOptions !== null,
     });
+    let styleCompiler = createStyleCompiler({
+        buildId: resolvedOptions.buildId,
+        fingerprintAssets: resolvedOptions.fingerprintAssets,
+        isAllowed: accessPolicy.isAllowed,
+        minify: resolvedOptions.minify,
+        onWatchDirectoriesChange: (delta) => {
+            if (!watcher)
+                return;
+            watcher.updateWatchedDirectories(delta);
+        },
+        rootDir: resolvedOptions.rootDir,
+        routes: resolvedOptions.routes,
+        sourceMapSourcePaths: resolvedOptions.sourceMapSourcePaths,
+        sourceMaps: resolvedOptions.sourceMaps,
+        targets: resolvedOptions.stylesTarget,
+        watchIgnore: resolvedOptions.watchOptions?.ignore,
+    });
     if (resolvedOptions.watchOptions) {
         watcher = createAssetServerWatcher({
             ...resolvedOptions.watchOptions,
@@ -102,7 +108,8 @@ export function createAssetServer(options) {
     async function handleWatchEvent(filePath, event) {
         try {
             let normalizedFilePath = normalizeFilePath(filePath);
-            await moduleCompiler.handleFileEvent(normalizedFilePath, event);
+            await scriptCompiler.handleFileEvent(normalizedFilePath, event);
+            await styleCompiler.handleFileEvent(normalizedFilePath, event);
         }
         catch (error) {
             console.error(`There was an error invalidating the asset server cache: ${error}`);
@@ -112,28 +119,58 @@ export function createAssetServer(options) {
         async fetch(request) {
             if (request.method !== 'GET' && request.method !== 'HEAD')
                 return null;
-            let parsedRequestPathname = moduleCompiler.parseRequestPathname(new URL(request.url).pathname);
+            let parsedRequestPathname = parseAssetRequestPathname(new URL(request.url).pathname, {
+                fingerprintAssets: resolvedOptions.fingerprintAssets,
+                routes: resolvedOptions.routes,
+            });
             if (!parsedRequestPathname)
                 return null;
             try {
                 let ifNoneMatch = request.headers.get('If-None-Match');
-                let moduleResult = await moduleCompiler.getModule(parsedRequestPathname.filePath, {
+                if (isStyleFilePath(parsedRequestPathname.filePath)) {
+                    let styleResult = await styleCompiler.getStyle(parsedRequestPathname.filePath, {
+                        ifNoneMatch,
+                        isSourceMapRequest: parsedRequestPathname.isSourceMapRequest,
+                        requestedFingerprint: parsedRequestPathname.requestedFingerprint,
+                    });
+                    if (styleResult.type === 'not-modified') {
+                        return new Response(null, {
+                            status: 304,
+                            headers: { ETag: styleResult.etag },
+                        });
+                    }
+                    let compiledStyle = styleResult.style;
+                    if (parsedRequestPathname.requestedFingerprint !== null) {
+                        if (compiledStyle.fingerprint !== parsedRequestPathname.requestedFingerprint)
+                            return null;
+                    }
+                    return createResponseForStyle(compiledStyle, {
+                        cacheControl: parsedRequestPathname.cacheControl,
+                        ifNoneMatch,
+                        isSourceMapRequest: parsedRequestPathname.isSourceMapRequest,
+                        method: request.method,
+                    });
+                }
+                if (!isScriptFilePath(parsedRequestPathname.filePath)) {
+                    return null;
+                }
+                let scriptResult = await scriptCompiler.getScript(parsedRequestPathname.filePath, {
                     ifNoneMatch,
                     isSourceMapRequest: parsedRequestPathname.isSourceMapRequest,
                     requestedFingerprint: parsedRequestPathname.requestedFingerprint,
                 });
-                if (moduleResult.type === 'not-modified') {
+                if (scriptResult.type === 'not-modified') {
                     return new Response(null, {
                         status: 304,
-                        headers: { ETag: moduleResult.etag },
+                        headers: { ETag: scriptResult.etag },
                     });
                 }
-                let compiledModule = moduleResult.module;
+                let compiledScript = scriptResult.script;
                 if (parsedRequestPathname.requestedFingerprint !== null) {
-                    if (compiledModule.fingerprint !== parsedRequestPathname.requestedFingerprint)
+                    if (compiledScript.fingerprint !== parsedRequestPathname.requestedFingerprint)
                         return null;
                 }
-                return createResponseForModule(compiledModule, {
+                return createResponseForScript(compiledScript, {
                     cacheControl: parsedRequestPathname.cacheControl,
                     ifNoneMatch,
                     isSourceMapRequest: parsedRequestPathname.isSourceMapRequest,
@@ -145,17 +182,45 @@ export function createAssetServer(options) {
                 // compiling imports. In this fetch context, both cases should fall through as "not
                 // handled here" so the outer router can continue to its own 404 behavior.
                 if (isAssetServerCompilationError(error) &&
-                    (error.code === 'MODULE_NOT_FOUND' || error.code === 'MODULE_NOT_ALLOWED')) {
+                    (error.code === 'FILE_NOT_FOUND' || error.code === 'FILE_NOT_ALLOWED')) {
                     return null;
                 }
                 return responseForError(error);
             }
         },
         async getHref(filePath) {
-            return moduleCompiler.getHref(filePath);
+            if (isStyleFilePath(filePath)) {
+                return styleCompiler.getHref(filePath);
+            }
+            return scriptCompiler.getHref(filePath);
         },
         async getPreloads(filePath) {
-            return moduleCompiler.getPreloadUrls(filePath);
+            let filePaths = Array.isArray(filePath) ? filePath : [filePath];
+            let styleFiles = [];
+            let scriptFiles = [];
+            for (let nextFilePath of filePaths) {
+                if (isStyleFilePath(nextFilePath)) {
+                    styleFiles.push(nextFilePath);
+                    continue;
+                }
+                scriptFiles.push(nextFilePath);
+            }
+            if (styleFiles.length === 0 && scriptFiles.length === 0) {
+                return [];
+            }
+            if (styleFiles.length === 0) {
+                return flattenPreloadLayers(await scriptCompiler.getPreloadLayers(filePath));
+            }
+            if (scriptFiles.length === 0) {
+                return flattenPreloadLayers(await styleCompiler.getPreloadLayers(filePath));
+            }
+            // Mixed asset type preloads need to be merged, so we merge in order of first asset type seen
+            let scriptPreloadLayersPromise = scriptCompiler.getPreloadLayers(scriptFiles);
+            let stylePreloadLayersPromise = styleCompiler.getPreloadLayers(styleFiles);
+            let preloadLayerGroups = isStyleFilePath(filePaths[0])
+                ? [stylePreloadLayersPromise, scriptPreloadLayersPromise]
+                : [scriptPreloadLayersPromise, stylePreloadLayersPromise];
+            return mergePreloadLayers(await Promise.all(preloadLayerGroups));
         },
         async close() {
             await watcher?.close();
@@ -175,6 +240,25 @@ function internalServerError() {
         headers: { 'Content-Type': 'text/plain; charset=utf-8' },
     });
 }
+function mergePreloadLayers(preloadLayersByRoot) {
+    let urls = [];
+    let seen = new Set();
+    let maxDepth = Math.max(0, ...preloadLayersByRoot.map((layers) => layers.length));
+    for (let depth = 0; depth < maxDepth; depth++) {
+        for (let preloadLayers of preloadLayersByRoot) {
+            for (let url of preloadLayers[depth] ?? []) {
+                if (seen.has(url))
+                    continue;
+                seen.add(url);
+                urls.push(url);
+            }
+        }
+    }
+    return urls;
+}
+function flattenPreloadLayers(preloadLayers) {
+    return preloadLayers.flatMap((layer) => layer);
+}
 function defaultErrorHandler(error) {
     console.error(error);
 }
@@ -191,28 +275,21 @@ function resolveAssetServerOptions(options) {
         define: scriptOptions.define,
         deny: options.deny,
         external: scriptOptions.external ?? [],
-        fingerprintModules: fingerprintOptions.enabled,
-        minify: scriptOptions.minify ?? false,
+        fingerprintAssets: fingerprintOptions.enabled,
+        minify: options.minify ?? false,
         onError: options.onError ?? defaultErrorHandler,
         rootDir,
         routes: compileRoutes({
             fileMap: options.fileMap,
             rootDir,
         }),
-        sourceMapSourcePaths: scriptOptions.sourceMapSourcePaths ?? 'url',
-        sourceMaps: scriptOptions.sourceMaps,
-        scriptsTarget: normalizeTarget(scriptOptions.target),
+        sourceMapSourcePaths: options.sourceMapSourcePaths ?? 'url',
+        sourceMaps: options.sourceMaps,
+        scriptsTarget: resolveScriptTarget(options.target),
+        stylesTarget: resolveStyleTarget(options.target),
         watchOptions: normalizeWatchOptions(options.watch),
     };
 }
-function normalizeTarget(target) {
-    if (target == null)
-        return undefined;
-    if (typeof target !== 'string' || !scriptTargetSet.has(target)) {
-        throw new TypeError(`Expected target to be one of ${scriptTargets.map((value) => `"${value}"`).join(', ')}. Received "${target}".`);
-    }
-    return target;
-}
 function normalizeFingerprintOptions(options) {
     if (!options.fingerprint) {
         return {
@@ -240,3 +317,22 @@ function normalizeWatchOptions(options) {
         return {};
     return options;
 }
+function parseAssetRequestPathname(pathname, options) {
+    let isSourceMapRequest = pathname.endsWith('.map');
+    let pathWithoutMap = isSourceMapRequest ? pathname.slice(0, -4) : pathname;
+    let fingerprint = parseFingerprintSuffix(pathWithoutMap);
+    let filePath = options.routes.resolveUrlPathname(fingerprint.pathname);
+    if (!filePath)
+        return null;
+    if (options.fingerprintAssets && fingerprint.requestedFingerprint === null)
+        return null;
+    return {
+        cacheControl: getFingerprintRequestCacheControl(fingerprint.requestedFingerprint),
+        filePath,
+        isSourceMapRequest,
+        requestedFingerprint: fingerprint.requestedFingerprint,
+    };
+}
+function isScriptFilePath(filePath) {
+    return scriptExtensionSet.has(path.extname(filePath).toLowerCase());
+}