modernweb-dev
diff --git a/‎package-lock.json
+51-11 b/‎package-lock.json
+51-11
diff --git a/‎packages/rollup-plugin-html/package.json
+2 b/‎packages/rollup-plugin-html/package.json
+2
diff --git a/‎packages/rollup-plugin-html/src/output/emitAssets.ts
+13 b/‎packages/rollup-plugin-html/src/output/emitAssets.ts
+13
diff --git a/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-bold.woff2 b/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-bold.woff2
diff --git a/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-normal.woff2 b/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-normal.woff2
diff --git a/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/styles-with-fonts.css
+15 b/‎packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/styles-with-fonts.css
+15
diff --git a/‎packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
+25 b/‎packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
+25
diff --git a/‎packages/storybook-builder/src/index.ts
+1 b/‎packages/storybook-builder/src/index.ts
+1
@@ -45,11 +45,13 @@
   ],
   "dependencies": {
     "@web/parse5-utils": "^2.1.0",
+    "clean-css": "^5.3.3",
     "glob": "^10.0.0",
     "html-minifier-terser": "^7.1.0",
     "parse5": "^6.0.1"
   },
   "devDependencies": {
+    "@types/clean-css": "^4.2.11",
     "@types/html-minifier-terser": "^7.0.0",
     "rollup": "^4.4.0"
   }
 
@@ -1,5 +1,6 @@
 import { PluginContext } from 'rollup';
 import path from 'path';
+import CleanCSS from 'clean-css';
 
 import { InputAsset, InputData } from '../input/InputData';
 import { RollupPluginHTMLOptions, TransformAssetFunction } from '../RollupPluginHTMLOptions';
@@ -43,6 +44,18 @@ export async function emitAssets(
   const allAssets = [...hashedAssets, ...staticAssets];
 
   for (const asset of allAssets) {
+    if (asset.filePath.endsWith('.css')) {
+      // TODO: try css bundlers like https://lightningcss.dev/bundling.html or esbuild
+      // TODO: question: do we need to recursively analyze all assets that are referenced inside the first css file?
+      // TODO: make a flag to enable this behavior, "false" by default
+      const { styles } = await new CleanCSS({
+        rebaseTo: path.dirname(asset.filePath),
+        returnPromise: true,
+      }).minify([asset.filePath]);
+      console.log('emitEsset.ts styles', styles);
+      asset.content = Buffer.from(styles, 'utf-8');
+    }
+
     const map = asset.hashed ? emittedHashedAssets : emittedStaticAssets;
     if (!map.has(asset.filePath)) {
       let source: Buffer = asset.content;
 
@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Font';
+  src: url('fonts/font-normal.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Font';
+  src: url('fonts/font-bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
@@ -1041,4 +1041,29 @@ describe('rollup-plugin-html', () => {
       ].join(''),
     );
   });
+
+  it.only('includes referenced assets in the bundle', async () => {
+    const config = {
+      plugins: [
+        rollupPluginHTML({
+          input: {
+            html: `<html>
+<head>
+<link rel="stylesheet" href="./styles-with-fonts.css" />
+</head>
+<body>
+</body>
+</html>`,
+          },
+          rootDir: path.join(__dirname, 'fixtures', 'resolves-assets-in-styles'),
+        }),
+      ],
+    };
+
+    const bundle = await rollup(config);
+    const { output } = await bundle.generate(outputConfig);
+
+    // TODO: how to test it, e.g. how to check if "output" contains "font-normal.woff2" and "font-bold.woff2"?
+    console.log('output', output);
+  });
 });
@@ -9,6 +9,7 @@ import { DevServerConfig, mergeConfigs, startDevServer } from '@web/dev-server';
 import type { DevServer } from '@web/dev-server-core';
 import { fromRollup } from '@web/dev-server-rollup';
 import { rollupPluginHTML } from '@web/rollup-plugin-html';
+import { rollupPluginHTML } from '@web/rollup-plugin-import-meta-assets';
 import express from 'express';
 import * as fs from 'fs-extra';
 import { join, parse, resolve } from 'path';