Skip to content

Commit a902dda

Browse files
committed
WIP feat(rollup-plugin-html): resolves assets in styles
1 parent 2d933bc commit a902dda

File tree

8 files changed

+107
-11
lines changed

8 files changed

+107
-11
lines changed

package-lock.json

+51-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/rollup-plugin-html/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,13 @@
4545
],
4646
"dependencies": {
4747
"@web/parse5-utils": "^2.1.0",
48+
"clean-css": "^5.3.3",
4849
"glob": "^10.0.0",
4950
"html-minifier-terser": "^7.1.0",
5051
"parse5": "^6.0.1"
5152
},
5253
"devDependencies": {
54+
"@types/clean-css": "^4.2.11",
5355
"@types/html-minifier-terser": "^7.0.0",
5456
"rollup": "^4.4.0"
5557
}

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

+13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { PluginContext } from 'rollup';
22
import path from 'path';
3+
import CleanCSS from 'clean-css';
34

45
import { InputAsset, InputData } from '../input/InputData';
56
import { RollupPluginHTMLOptions, TransformAssetFunction } from '../RollupPluginHTMLOptions';
@@ -43,6 +44,18 @@ export async function emitAssets(
4344
const allAssets = [...hashedAssets, ...staticAssets];
4445

4546
for (const asset of allAssets) {
47+
if (asset.filePath.endsWith('.css')) {
48+
// TODO: try css bundlers like https://lightningcss.dev/bundling.html or esbuild
49+
// TODO: question: do we need to recursively analyze all assets that are referenced inside the first css file?
50+
// TODO: make a flag to enable this behavior, "false" by default
51+
const { styles } = await new CleanCSS({
52+
rebaseTo: path.dirname(asset.filePath),
53+
returnPromise: true,
54+
}).minify([asset.filePath]);
55+
console.log('emitEsset.ts styles', styles);
56+
asset.content = Buffer.from(styles, 'utf-8');
57+
}
58+
4659
const map = asset.hashed ? emittedHashedAssets : emittedStaticAssets;
4760
if (!map.has(asset.filePath)) {
4861
let source: Buffer = asset.content;

packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-bold.woff2

Whitespace-only changes.

packages/rollup-plugin-html/test/fixtures/resolves-assets-in-styles/fonts/font-normal.woff2

Whitespace-only changes.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@font-face {
2+
font-family: 'Font';
3+
src: url('fonts/font-normal.woff2') format('woff2');
4+
font-weight: normal;
5+
font-style: normal;
6+
font-display: swap;
7+
}
8+
9+
@font-face {
10+
font-family: 'Font';
11+
src: url('fonts/font-bold.woff2') format('woff2');
12+
font-weight: bold;
13+
font-style: normal;
14+
font-display: swap;
15+
}

packages/rollup-plugin-html/test/rollup-plugin-html.test.ts

+25
Original file line numberDiff line numberDiff line change
@@ -1041,4 +1041,29 @@ describe('rollup-plugin-html', () => {
10411041
].join(''),
10421042
);
10431043
});
1044+
1045+
it.only('includes referenced assets in the bundle', async () => {
1046+
const config = {
1047+
plugins: [
1048+
rollupPluginHTML({
1049+
input: {
1050+
html: `<html>
1051+
<head>
1052+
<link rel="stylesheet" href="./styles-with-fonts.css" />
1053+
</head>
1054+
<body>
1055+
</body>
1056+
</html>`,
1057+
},
1058+
rootDir: path.join(__dirname, 'fixtures', 'resolves-assets-in-styles'),
1059+
}),
1060+
],
1061+
};
1062+
1063+
const bundle = await rollup(config);
1064+
const { output } = await bundle.generate(outputConfig);
1065+
1066+
// TODO: how to test it, e.g. how to check if "output" contains "font-normal.woff2" and "font-bold.woff2"?
1067+
console.log('output', output);
1068+
});
10441069
});

packages/storybook-builder/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { DevServerConfig, mergeConfigs, startDevServer } from '@web/dev-server';
99
import type { DevServer } from '@web/dev-server-core';
1010
import { fromRollup } from '@web/dev-server-rollup';
1111
import { rollupPluginHTML } from '@web/rollup-plugin-html';
12+
import { rollupPluginHTML } from '@web/rollup-plugin-import-meta-assets';
1213
import express from 'express';
1314
import * as fs from 'fs-extra';
1415
import { join, parse, resolve } from 'path';

0 commit comments

Comments
 (0)