Repository: parcel-bundler/parcel (js)

Issue:
Unexpected behaviour using named pipelines in HTML
<!---
Thanks for filing an issue 😄 ! Before you submit, please read the following:

Search open/closed issues before submitting since someone might have asked the same thing before!
-->

# 🐛 bug report

https://github.com/GoogleChromeLabs/tooling.report/tree/parcel-updates/tests/non-js-resources/subtests/image/subtests/data-url/parcel

```html
<!DOCTYPE html>
<img src="data-url:./image.png" />
```

## 🤔 Expected Behavior

The image should either have a data-url, or the build should fail with an error that indicates that named pipelines are not supported in HTML.

## 😯 Current Behavior

```html
<!DOCTYPE html>
<img src="664d9d6ae198090e44781dbe15bbae79">
```

…which appears to be the internal identifier for the module containing the data URL.

Pull request:
HTML: data-url inline bundles
# ↪️ Pull Request

Closes #4869

## 💻 Examples

```html
<!DOCTYPE html>
<img src="data-url:./image.png" />
```

Patch:
diff --git a/packages/packagers/html/src/HTMLPackager.js b/packages/packagers/html/src/HTMLPackager.js
index 6d1732ef5..f9e9a1f10 100644
--- a/packages/packagers/html/src/HTMLPackager.js
+++ b/packages/packagers/html/src/HTMLPackager.js
@@ -5,7 +5,12 @@ import assert from 'assert';
 import {Readable} from 'stream';
 import {Packager} from '@parcel/plugin';
 import posthtml from 'posthtml';
-import {bufferStream, replaceURLReferences, urlJoin} from '@parcel/utils';
+import {
+  bufferStream,
+  replaceInlineReferences,
+  replaceURLReferences,
+  urlJoin,
+} from '@parcel/utils';
 import nullthrows from 'nullthrows';
 
 // https://www.w3.org/TR/html5/dom.html#metadata-content-2
@@ -57,12 +62,24 @@ export default new Packager({
       ),
     ]).process(code);
 
-    return replaceURLReferences({
+    let {contents, map} = replaceURLReferences({
       bundle,
       bundleGraph,
       contents: html,
       relative: false,
     });
+
+    return replaceInlineReferences({
+      bundle,
+      bundleGraph,
+      contents,
+      getInlineBundleContents,
+      getInlineReplacement: (dep, inlineType, contents) => ({
+        from: dep.id,
+        to: contents,
+      }),
+      map,
+    });
   },
 });
 


Test patch:
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
index fa226b985..35078de15 100644
--- a/packages/core/integration-tests/test/html.js
+++ b/packages/core/integration-tests/test/html.js
@@ -1605,4 +1605,22 @@ describe('html', function() {
     assert(html.includes('module.exports = "foo bar"'));
     assert(html.includes('console.log'));
   });
+
+  it('should inline data-urls', async () => {
+    let b = await bundle(
+      path.join(__dirname, '/integration/data-url/index.html'),
+      {
+        sourceMaps: false,
+      },
+    );
+
+    let contents = await outputFS.readFile(
+      b.getBundles().find(b => b.type === 'html').filePath,
+      'utf8',
+    );
+    assert.equal(
+      contents.trim(),
+      `<img src="data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A">`,
+    );
+  });
 });
diff --git a/packages/core/integration-tests/test/integration/data-url/index.html b/packages/core/integration-tests/test/integration/data-url/index.html
new file mode 100644
index 000000000..b80babb5a
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/data-url/index.html
@@ -0,0 +1,1 @@
+<img src="data-url:./img.svg" />