test(rollup-plugin-html): test externalAssets exclusion

bashmish · bashmish · commit 5e4af3748e37 · 2024-03-19T14:45:49.000+01:00
diff --git a/packages/rollup-plugin-html/test/fixtures/assets/image-d.png b/packages/rollup-plugin-html/test/fixtures/assets/image-d.png
@@ -0,0 +1 @@
+image-d.png
diff --git a/packages/rollup-plugin-html/test/fixtures/assets/image-d.svg b/packages/rollup-plugin-html/test/fixtures/assets/image-d.svg
@@ -0,0 +1 @@
+image-d.svg
diff --git a/packages/rollup-plugin-html/test/fixtures/assets/styles-with-referenced-assets.css b/packages/rollup-plugin-html/test/fixtures/assets/styles-with-referenced-assets.css
@@ -0,0 +1,15 @@
+#a1 {
+  background-image: url('image-a.png');
+}
+
+#a2 {
+  background-image: url('image-a.svg');
+}
+
+#d1 {
+  background-image: url('./image-d.png');
+}
+
+#d2 {
+  background-image: url('./image-d.svg');
+}
diff --git a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
@@ -1216,6 +1216,97 @@ describe('rollup-plugin-html', () => {
 
 #h {
   background-image: url("assets/star-H06WHrYy.avif");
+}`.trim(),
+    );
+  });
+
+  it('allows to exclude external assets usign a glob pattern', async () => {
+    const config = {
+      plugins: [
+        rollupPluginHTML({
+          input: {
+            html: `<html>
+<head>
+<link rel="apple-touch-icon" sizes="180x180" href="./image-a.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="image-d.png" />
+<link rel="manifest" href="./webmanifest.json" />
+<link rel="mask-icon" href="./image-a.svg" color="#3f93ce" />
+<link rel="mask-icon" href="image-d.svg" color="#3f93ce" />
+<link rel="stylesheet" href="./styles-with-referenced-assets.css" />
+<link rel="stylesheet" href="./foo/x.css" />
+<link rel="stylesheet" href="foo/bar/y.css" />
+</head>
+<body>
+<img src="./image-d.png" />
+<div>
+<img src="./image-d.svg" />
+</div>
+</body>
+</html>`,
+          },
+          bundleAssetsFromCss: true,
+          externalAssets: ['**/foo/**/*', '*.svg'],
+          rootDir: path.join(__dirname, 'fixtures', 'assets'),
+        }),
+      ],
+    };
+
+    const bundle = await rollup(config);
+    const { output } = await bundle.generate(outputConfig);
+
+    expect(output.length).to.equal(8);
+
+    const expectedAssets = [
+      'assets/image-a.png',
+      'assets/image-d.png',
+      'styles-with-referenced-assets.css',
+      'image-a.png',
+      'image-d.png',
+      'webmanifest.json',
+    ];
+
+    for (const name of expectedAssets) {
+      const asset = getAsset(output, name);
+      expect(asset).to.exist;
+      expect(asset.source).to.exist;
+    }
+
+    const outputHtml = getAsset(output, 'index.html').source;
+    expect(outputHtml).to.include(
+      '<link rel="apple-touch-icon" sizes="180x180" href="assets/image-a.png">',
+    );
+    expect(outputHtml).to.include(
+      '<link rel="icon" type="image/png" sizes="32x32" href="assets/image-d.png">',
+    );
+    expect(outputHtml).to.include('<link rel="manifest" href="assets/webmanifest.json">');
+    expect(outputHtml).to.include('<link rel="mask-icon" href="./image-a.svg" color="#3f93ce">');
+    expect(outputHtml).to.include('<link rel="mask-icon" href="image-d.svg" color="#3f93ce">');
+    expect(outputHtml).to.include(
+      '<link rel="stylesheet" href="assets/styles-with-referenced-assets-NuwIw8gN.css">',
+    );
+    expect(outputHtml).to.include('<link rel="stylesheet" href="./foo/x.css">');
+    expect(outputHtml).to.include('<link rel="stylesheet" href="foo/bar/y.css">');
+    expect(outputHtml).to.include('<img src="assets/assets/image-d-y8_AQMDl.png">');
+    expect(outputHtml).to.include('<img src="./image-d.svg">');
+
+    const rewrittenCss = getAsset(output, 'styles-with-referenced-assets.css')
+      .source.toString()
+      .trim();
+    expect(rewrittenCss).to.equal(
+      `#a1 {
+  background-image: url("assets/image-a-Mr5Lb2jQ.png");
+}
+
+#a2 {
+  background-image: url("image-a.svg");
+}
+
+#d1 {
+  background-image: url("assets/image-d-y8_AQMDl.png");
+}
+
+#d2 {
+  background-image: url("./image-d.svg");
 }`.trim(),
     );
   });
