Merge pull request #2664 from modernweb-dev/feat/rollup-plugin-html-r…

…esolves-assets-in-styles

feat(rollup-plugin-html): resolves assets in styles

.changeset/famous-shoes-joke.md

@@ -0,0 +1,5 @@
+---
+"@web/rollup-plugin-html": minor
+---
+
+feat(rollup-plugin-html): resolves assets in styles

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/package.json

@@ -47,6 +47,7 @@
     "@web/parse5-utils": "^2.1.0",
     "glob": "^10.0.0",
     "html-minifier-terser": "^7.1.0",
+    "lightningcss": "^1.24.0",
     "parse5": "^6.0.1"
   },
   "devDependencies": {

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 {