Skip to content

Commit 5e4af37

Browse files
committed
test(rollup-plugin-html): test externalAssets exclusion
1 parent c30651e commit 5e4af37

File tree

4 files changed

+108
-0
lines changed

4 files changed

+108
-0
lines changed
Loading
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#a1 {
2+
background-image: url('image-a.png');
3+
}
4+
5+
#a2 {
6+
background-image: url('image-a.svg');
7+
}
8+
9+
#d1 {
10+
background-image: url('./image-d.png');
11+
}
12+
13+
#d2 {
14+
background-image: url('./image-d.svg');
15+
}

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

+91
Original file line numberDiff line numberDiff line change
@@ -1216,6 +1216,97 @@ describe('rollup-plugin-html', () => {
12161216
12171217
#h {
12181218
background-image: url("assets/star-H06WHrYy.avif");
1219+
}`.trim(),
1220+
);
1221+
});
1222+
1223+
it('allows to exclude external assets usign a glob pattern', async () => {
1224+
const config = {
1225+
plugins: [
1226+
rollupPluginHTML({
1227+
input: {
1228+
html: `<html>
1229+
<head>
1230+
<link rel="apple-touch-icon" sizes="180x180" href="./image-a.png" />
1231+
<link rel="icon" type="image/png" sizes="32x32" href="image-d.png" />
1232+
<link rel="manifest" href="./webmanifest.json" />
1233+
<link rel="mask-icon" href="./image-a.svg" color="#3f93ce" />
1234+
<link rel="mask-icon" href="image-d.svg" color="#3f93ce" />
1235+
<link rel="stylesheet" href="./styles-with-referenced-assets.css" />
1236+
<link rel="stylesheet" href="./foo/x.css" />
1237+
<link rel="stylesheet" href="foo/bar/y.css" />
1238+
</head>
1239+
<body>
1240+
<img src="./image-d.png" />
1241+
<div>
1242+
<img src="./image-d.svg" />
1243+
</div>
1244+
</body>
1245+
</html>`,
1246+
},
1247+
bundleAssetsFromCss: true,
1248+
externalAssets: ['**/foo/**/*', '*.svg'],
1249+
rootDir: path.join(__dirname, 'fixtures', 'assets'),
1250+
}),
1251+
],
1252+
};
1253+
1254+
const bundle = await rollup(config);
1255+
const { output } = await bundle.generate(outputConfig);
1256+
1257+
expect(output.length).to.equal(8);
1258+
1259+
const expectedAssets = [
1260+
'assets/image-a.png',
1261+
'assets/image-d.png',
1262+
'styles-with-referenced-assets.css',
1263+
'image-a.png',
1264+
'image-d.png',
1265+
'webmanifest.json',
1266+
];
1267+
1268+
for (const name of expectedAssets) {
1269+
const asset = getAsset(output, name);
1270+
expect(asset).to.exist;
1271+
expect(asset.source).to.exist;
1272+
}
1273+
1274+
const outputHtml = getAsset(output, 'index.html').source;
1275+
expect(outputHtml).to.include(
1276+
'<link rel="apple-touch-icon" sizes="180x180" href="assets/image-a.png">',
1277+
);
1278+
expect(outputHtml).to.include(
1279+
'<link rel="icon" type="image/png" sizes="32x32" href="assets/image-d.png">',
1280+
);
1281+
expect(outputHtml).to.include('<link rel="manifest" href="assets/webmanifest.json">');
1282+
expect(outputHtml).to.include('<link rel="mask-icon" href="./image-a.svg" color="#3f93ce">');
1283+
expect(outputHtml).to.include('<link rel="mask-icon" href="image-d.svg" color="#3f93ce">');
1284+
expect(outputHtml).to.include(
1285+
'<link rel="stylesheet" href="assets/styles-with-referenced-assets-NuwIw8gN.css">',
1286+
);
1287+
expect(outputHtml).to.include('<link rel="stylesheet" href="./foo/x.css">');
1288+
expect(outputHtml).to.include('<link rel="stylesheet" href="foo/bar/y.css">');
1289+
expect(outputHtml).to.include('<img src="assets/assets/image-d-y8_AQMDl.png">');
1290+
expect(outputHtml).to.include('<img src="./image-d.svg">');
1291+
1292+
const rewrittenCss = getAsset(output, 'styles-with-referenced-assets.css')
1293+
.source.toString()
1294+
.trim();
1295+
expect(rewrittenCss).to.equal(
1296+
`#a1 {
1297+
background-image: url("assets/image-a-Mr5Lb2jQ.png");
1298+
}
1299+
1300+
#a2 {
1301+
background-image: url("image-a.svg");
1302+
}
1303+
1304+
#d1 {
1305+
background-image: url("assets/image-d-y8_AQMDl.png");
1306+
}
1307+
1308+
#d2 {
1309+
background-image: url("./image-d.svg");
12191310
}`.trim(),
12201311
);
12211312
});

0 commit comments

Comments
 (0)