feat: support additional assets in css

Author: thepassle

docs/docs/building/rollup-plugin-html.md

@@ -125,6 +125,45 @@ export default {
 };
 ```
 
+#### Including assets referenced from css
+
+If your css files reference other assets via `url`, like for example:
+
+```css
+body {
+  background-image: url('images/star.gif');
+}
+
+/* or */
+@font-face {
+  src: url('fonts/font-bold.woff2') format('woff2');
+  /* ...etc */
+}
+```
+
+You can enable the `bundleAssetsFromCss` option:
+
+```js
+rollupPluginHTML({
+  bundleAssetsFromCss: true,
+  // ...etc
+});
+```
+
+And those assets will get output to the `assets/` dir, and the source css file will get updated with the output locations of those assets, e.g.:
+
+```css
+body {
+  background-image: url('assets/star-P4TYRBwL.gif');
+}
+
+/* or */
+@font-face {
+  src: url('assets/font-bold-f0mNRiTD.woff2') format('woff2');
+  /* ...etc */
+}
+```
+
 ### Handling absolute paths
 
 If your HTML file contains any absolute paths they will be resolved against the current working directory. You can set a different root directory in the config. Input paths will be resolved relative to this root directory as well.

packages/rollup-plugin-html/src/RollupPluginHTMLOptions.ts

@@ -41,6 +41,8 @@ export interface RollupPluginHTMLOptions {
   absolutePathPrefix?: string;
   /** When set to true, will insert meta tags for CSP and add script-src values for inline scripts by sha256-hashing the contents */
   strictCSPInlineScripts?: boolean;
+  /** Bundle assets reference from CSS via `url` */
+  bundleAssetsFromCss?: boolean;
 }
 
 export interface GeneratedBundle {

packages/rollup-plugin-html/src/output/emitAssets.ts

@@ -11,9 +11,22 @@ export interface EmittedAssets {
   hashed: Map<string, string>;
 }
 
-function shouldHandleFontFile(url: string) {
+const allowedFileExtensions = [
+  // https://www.w3.org/TR/html4/types.html#:~:text=ID%20and%20NAME%20tokens%20must,tokens%20defined%20by%20other%20attributes.
+  /.*\.svg(#[A-Za-z][A-Za-z0-9\-_:.]*)?/,
+  /.*\.png/,
+  /.*\.jpg/,
+  /.*\.jpeg/,
+  /.*\.webp/,
+  /.*\.gif/,
+  /.*\.avif/,
+  /.*\.woff2/,
+  /.*\.woff/,
+];
+
+function shouldHandleAsset(url: string) {
   return (
-    (url.endsWith('.woff2') || url.endsWith('.woff')) &&
+    allowedFileExtensions.some(f => f.test(url)) &&
     !url.startsWith('http') &&
     !url.startsWith('data') &&
     !url.startsWith('#') &&
@@ -69,34 +82,42 @@ export async function emitAssets(
 
       let ref: string;
       let basename = path.basename(asset.filePath);
-      const emittedFonts = new Map();
+      const emittedExternalAssets = new Map();
       if (asset.hashed) {
-        if (basename.endsWith('.css')) {
+        if (basename.endsWith('.css') && options.bundleAssetsFromCss) {
           let updatedCssSource = false;
           const { code } = await transform({
             filename: basename,
             code: asset.content,
             minify: false,
             visitor: {
               Url: url => {
-                if (shouldHandleFontFile(url.url)) {
+                // Support foo.svg#bar
+                const [filePath, idRef] = url.url.split('#');
+
+                if (shouldHandleAsset(url.url)) {
                   // Read the font file, get the font from the source location on the FS using asset.filePath
-                  const fontLocation = path.resolve(path.dirname(asset.filePath), url.url);
-                  const fontContent = fs.readFileSync(fontLocation);
+                  const assetLocation = path.resolve(path.dirname(asset.filePath), filePath);
+                  const assetContent = fs.readFileSync(assetLocation);
 
                   // Avoid duplicates
-                  if (!emittedFonts.has(fontLocation)) {
+                  if (!emittedExternalAssets.has(assetLocation)) {
                     const fontFileRef = this.emitFile({
                       type: 'asset',
-                      name: path.basename(url.url),
-                      source: fontContent,
+                      name: path.basename(filePath),
+                      source: assetContent,
                     });
                     const emittedFontFilePath = path.basename(this.getFileName(fontFileRef));
-                    emittedFonts.set(fontLocation, emittedFontFilePath);
+                    emittedExternalAssets.set(assetLocation, emittedFontFilePath);
                     // Update the URL in the original CSS file to point to the emitted font file
-                    url.url = emittedFontFilePath;
+                    url.url = `assets/${
+                      idRef ? `${emittedFontFilePath}#${idRef}` : emittedFontFilePath
+                    }`;
                   } else {
-                    url.url = emittedFonts.get(fontLocation);
+                    const emittedFontFilePath = emittedExternalAssets.get(assetLocation);
+                    url.url = `assets/${
+                      idRef ? `${emittedFontFilePath}#${idRef}` : emittedFontFilePath
+                    }`;
                   }
                 }
                 updatedCssSource = true;

packages/rollup-plugin-html/src/rollupPluginHTML.ts

@@ -72,6 +72,7 @@ export function rollupPluginHTML(pluginOptions: RollupPluginHTMLOptions = {}): R
       if (pluginOptions.strictCSPInlineScripts) {
         strictCSPInlineScripts = pluginOptions.strictCSPInlineScripts;
       }
+      pluginOptions.bundleAssetsFromCss = !!pluginOptions.bundleAssetsFromCss;
 
       if (pluginOptions.input == null) {
         // we are reading rollup input, so replace whatever was there

packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles-images/images/star.avif

@@ -0,0 +1 @@
+a