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

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

@@ -0,0 +1 @@
+g

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

@@ -0,0 +1,24 @@
+#a {
+background-image: url("images/star.svg");
+}
+#b {
+  background-image: url("images/star.svg#foo");
+}
+#c {
+  background-image: url("images/star.png");
+}
+#d {
+  background-image: url("images/star.jpg");
+}
+#e {
+  background-image: url("images/star.jpeg");
+}
+#f {
+  background-image: url("images/star.webp");
+}
+#g {
+  background-image: url("images/star.gif");
+}
+#h {
+  background-image: url("images/star.avif");
+}

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

@@ -1046,6 +1046,7 @@ describe('rollup-plugin-html', () => {
     const config = {
       plugins: [
         rollupPluginHTML({
+          bundleAssetsFromCss: true,
           input: {
             html: `
               <html>
@@ -1069,8 +1070,8 @@ describe('rollup-plugin-html', () => {
     const fontBold = output.find(o => o.name === 'font-normal.woff2');
     const style = output.find(o => o.name === 'styles-with-fonts.css');
     // It has emitted the font
-    expect(!!fontBold).to.equal(true);
-    expect(!!fontNormal).to.equal(true);
+    expect(fontBold).to.exist;
+    expect(fontNormal).to.exist;
     // e.g. "font-normal-f0mNRiTD.woff2"
     const regex = /assets\/font-normal-\w+\.woff2/;
     // It outputs the font to the assets folder
@@ -1085,6 +1086,7 @@ describe('rollup-plugin-html', () => {
     const config = {
       plugins: [
         rollupPluginHTML({
+          bundleAssetsFromCss: true,
           input: {
             html: `
               <html>
@@ -1108,7 +1110,7 @@ describe('rollup-plugin-html', () => {
     const style = output.find(o => o.name === 'node_modules-styles-with-fonts.css');
 
     // It has emitted the font
-    expect(!!font).to.equal(true);
+    expect(font).to.exist;
     // e.g. "font-normal-f0mNRiTD.woff2"
     const regex = /assets\/font-normal-\w+\.woff2/;
     // It outputs the font to the assets folder
@@ -1123,6 +1125,7 @@ describe('rollup-plugin-html', () => {
     const config = {
       plugins: [
         rollupPluginHTML({
+          bundleAssetsFromCss: true,
           input: {
             html: `
               <html>
@@ -1146,4 +1149,74 @@ describe('rollup-plugin-html', () => {
     const fonts = output.filter(o => o.name === 'font-normal.woff2');
     expect(fonts.length).to.equal(1);
   });
+
+  it('handles images referenced from css', async () => {
+    const config = {
+      plugins: [
+        rollupPluginHTML({
+          bundleAssetsFromCss: true,
+          input: {
+            html: `
+              <html>
+                <head>
+                  <link rel="stylesheet" href="./styles.css" />
+                </head>
+                <body>
+                </body>
+              </html>
+            `,
+          },
+          rootDir: path.join(__dirname, 'fixtures', 'resolves-assets-in-styles-images'),
+        }),
+      ],
+    };
+
+    const bundle = await rollup(config);
+    const { output } = await bundle.generate(outputConfig);
+
+    expect(output.find(o => o.name === 'star.avif')).to.exist;
+    expect(output.find(o => o.name === 'star.gif')).to.exist;
+    expect(output.find(o => o.name === 'star.jpeg')).to.exist;
+    expect(output.find(o => o.name === 'star.jpg')).to.exist;
+    expect(output.find(o => o.name === 'star.png')).to.exist;
+    expect(output.find(o => o.name === 'star.svg')).to.exist;
+    expect(output.find(o => o.name === 'star.webp')).to.exist;
+
+    const rewrittenCss = (output.find(o => o.name === 'styles.css') as OutputAsset).source
+      .toString()
+      .trim();
+    expect(rewrittenCss).to.equal(
+      `#a {
+  background-image: url("assets/star-mrrzn5BV.svg");
+}
+
+#b {
+  background-image: url("assets/star-mrrzn5BV.svg#foo");
+}
+
+#c {
+  background-image: url("assets/star-eErsO14u.png");
+}
+
+#d {
+  background-image: url("assets/star-yqfHyXQC.jpg");
+}
+
+#e {
+  background-image: url("assets/star-G_i5Rpoh.jpeg");
+}
+
+#f {
+  background-image: url("assets/star-l7b58t3m.webp");
+}
+
+#g {
+  background-image: url("assets/star-P4TYRBwL.gif");
+}
+
+#h {
+  background-image: url("assets/star-H06WHrYy.avif");
+}`.trim(),
+    );
+  });
 });