Repository: parcel-bundler/parcel (js)

Issue:
bundle-text: causes inline source maps
<!---
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

<!--- Provide a general summary of the issue here -->

When using `bundle-text:` on a source type that supports source maps (such as CSS), the source is inlined into the bundled text. This produces larger files in production.

## 🎛 Configuration (.babelrc, package.json, cli command)

<!--- If describing a bug, tell us what your babel configuration looks like -->

https://github.com/GoogleChromeLabs/tooling.report/tree/parcel-updates/tests/non-js-resources/subtests/css/subtests/source/parcel

```js
import css from 'bundle-text:./styles.css';

const style = document.createElement('style');
style.textContent = css;
document.head.append(style);
```

```css
html {
  background: green;
}

h1 {
  color: white;
}
```

## 🤔 Expected Behavior

<!--- Tell us what should happen -->

Either the sourcemap is removed, or becomes external.

```js
!function(){var e,t=document.createElement("style"),n=(e="html{background:green}h1{color:#fff}")&&e.__esModule?e.default:e;t.textContent=n,document.head.append(t)}();
//# sourceMappingURL=index.a3f3179f.js.map
```

## 😯 Current Behavior

```js
!function(){var e,t=document.createElement("style"),c=(e="html{background:green}h1{color:#fff}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJtYXBwaW5ncyI6IkFBQUEsS0FDQSxnQkFDQSxDQUVBLEdBQ0EsVUFDQSIsInNvdXJjZXMiOlsiLi9zcmMvc3R5bGVzLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyJodG1sIHtcbiAgYmFja2dyb3VuZDogZ3JlZW47XG59XG5cbmgxIHtcbiAgY29sb3I6IHdoaXRlO1xufVxuIl0sIm5hbWVzIjpbXSwidmVyc2lvbiI6MywiZmlsZSI6ImluZGV4LkhBU0hfUkVGXzMxMjE0Y2I4ODM1NzdlNDYxMjVmMTg4ZWI5NGMzMTUwLmNzcy5tYXAifQ== */\n")&&e.__esModule?e.default:e;t.textContent=c,document.head.append(t)}();
//# sourceMappingURL=index.a3f3179f.js.map
```

## 💁 Possible Solution

<!--- Not obligatory, but suggest a fix/reason for the bug -->

Either the sourcemap is removed, or becomes external.

## 🔦 Context

The idea is to create an optimal build for production.

## 💻 Code Sample

<!-- Please provide a code repository, gist, code snippet or sample files to reproduce the issue -->

https://github.com/GoogleChromeLabs/tooling.report/tree/parcel-updates/tests/non-js-resources/subtests/css/subtests/source/parcel

## 🌍 Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

| Software         | Version(s) |
| ---------------- | ---------- |
| Parcel           | 2.0.0-beta.1
| Node             | v12.16.1
| npm/Yarn         | npm 6.14.4
| Operating System | OSX 10.15.5

<!-- Love parcel? Please consider supporting our collective:
👉  https://opencollective.com/parcel/donate -->


Pull request:
[T-596] Don't generate sourcemaps for inline bundles
<!---
Thanks for filing a pull request 😄 ! Before you submit, please read the following:

Search open/closed issues before submitting since someone might have pushed the same thing before!
-->

# ↪️ Pull Request

<!---
Provide a general summary of the pull request here
Please look for any issues that this PR resolves and tag them in the PR.
-->

This PR changes the behaviour of sourcemaps on inline bundles, by no longer generating these sourcemaps or inlining them. This should improve the bundle size for html and alike.

I don't think anyone really needs sourcemaps for inline bundles due to how small they usually will be, we could however make this more advanced by only writing sourcemaps for large inlined bundles... but the amount of users that will use this seems minimal, compared to the extra complexity this will bring it's probably not worth it.

Height: T-596
Closes #4855

## ✔️ PR Todo

- [x] Added/updated unit tests for this change
- [x] Filled out test instructions (In case there aren't any unit tests)
- [x] Included links to related issues/PRs


Patch:
diff --git a/packages/core/core/src/PackagerRunner.js b/packages/core/core/src/PackagerRunner.js
index 895e2d497..f22cb5c66 100644
--- a/packages/core/core/src/PackagerRunner.js
+++ b/packages/core/core/src/PackagerRunner.js
@@ -224,11 +224,8 @@ export default class PackagerRunner {
   }
 
   getSourceMapReference(bundle: NamedBundle, map: ?SourceMap): Async<?string> {
-    if (map && this.options.sourceMaps) {
-      if (
-        bundle.isInline ||
-        (bundle.target.sourceMap && bundle.target.sourceMap.inline)
-      ) {
+    if (map && this.options.sourceMaps && !bundle.isInline) {
+      if (bundle.target.sourceMap && bundle.target.sourceMap.inline) {
         return this.generateSourceMap(bundleToInternalBundle(bundle), map);
       } else {
         return path.basename(bundle.filePath) + '.map';
@@ -390,9 +387,7 @@ export default class PackagerRunner {
     }
 
     let mapFilename = filePath + '.map';
-    let isInlineMap =
-      bundle.isInline ||
-      (bundle.target.sourceMap && bundle.target.sourceMap.inline);
+    let isInlineMap = bundle.target.sourceMap && bundle.target.sourceMap.inline;
 
     let stringified = await map.stringify({
       file: path.basename(mapFilename),


Test patch:
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
index aa86244e1..f049454de 100644
--- a/packages/core/integration-tests/test/html.js
+++ b/packages/core/integration-tests/test/html.js
@@ -415,11 +415,13 @@ describe('html', function() {
 
     // mergeStyles
     assert(
-      html.match(
-        /<style>h1{color:red}div{font-size:20px}\n\/\*# sourceMappingURL=.*\*\/<\/style><style media="print">div{color:#00f}\n\/\*# sourceMappingURL=.*\*\/<\/style>/,
+      html.includes(
+        '<style>h1{color:red}div{font-size:20px}</style><style media="print">div{color:#00f}</style>',
       ),
     );
 
+    assert(!html.includes('sourceMappingURL'));
+
     // minifySvg is false
     assert(
       html.includes(
@@ -801,37 +803,6 @@ describe('html', function() {
     assert(!html.includes('someArgument'));
   });
 
-  it('should add an inline sourcemap to inline JS', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/html-inline-js/index.html'),
-      {minify: false},
-    );
-
-    // inline bundles are not output, but are apart of the bundleGraph
-    assertBundles(b, [
-      {type: 'js', assets: ['index.html']},
-      {type: 'js', assets: ['index.html']},
-      {type: 'js', assets: ['index.html']},
-      {type: 'js', assets: ['index.html']},
-      {name: 'index.html', assets: ['index.html']},
-    ]);
-
-    let files = await outputFS.readdir(distDir);
-    // assert that the inline js files are not output
-    assert(!files.some(filename => filename.includes('js')));
-
-    let html = await outputFS.readFile(
-      path.join(distDir, 'index.html'),
-      'utf-8',
-    );
-
-    assert(
-      html.includes(
-        '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,ey',
-      ),
-    );
-  });
-
   it('should process inline styles', async function() {
     let b = await bundle(
       path.join(__dirname, '/integration/html-inline-styles/index.html'),
@@ -920,11 +891,8 @@ describe('html', function() {
       path.join(distDir, 'index.html'),
       'utf8',
     );
-    assert(
-      html.match(
-        /<style>.index{color:#00f}\n\/\*# sourceMappingURL=.*<\/style>/,
-      ),
-    );
+    assert(html.includes('<style>.index{color:#00f}</style>'));
+    assert(!html.includes('sourceMappingURL'));
   });
 
   it('should process inline non-js scripts', async function() {
diff --git a/packages/core/integration-tests/test/javascript.js b/packages/core/integration-tests/test/javascript.js
index 8ee5218ec..301ef5f88 100644
--- a/packages/core/integration-tests/test/javascript.js
+++ b/packages/core/integration-tests/test/javascript.js
@@ -2234,18 +2234,21 @@ describe('javascript', function() {
       path.join(__dirname, '/integration/bundle-text/index.js'),
     );
 
+    let cssBundleContent = (await run(b)).default;
+
     assert(
-      (await run(b)).default.startsWith(
+      cssBundleContent.startsWith(
         `body {
   background-color: #000000;
 }
 
 .svg-img {
   background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A");
-}
-/*# sourceMappingURL=data:application/json;charset=utf-8;base64,`,
+}`,
       ),
     );
+
+    assert(!cssBundleContent.includes('sourceMappingURL'));
   });
 
   it('should inline text content as url-encoded text and mime type with `data-url:*` imports', async () => {