From 8e80016d8b61c5d68759bfd1caa9fb827e46643c Mon Sep 17 00:00:00 2001
From: Will Binns-Smith <wbinnssmith@atlassian.com>
Date: Wed, 15 Apr 2020 01:16:52 -0700
Subject: [PATCH] CSS SourceMaps (#4440)

* Convert $FlowFixMe for untyped imports to flowlint off

* Implement CSS sourcemaps

* update source-map

* update sourcemap tests

* all remaining typescript tests

* Allow whitespace characters while checking mappings

* fix tests

Co-authored-by: Jasper De Moor <jasperdemoor@gmail.com>
---
 flow-libs/postcss.js.flow                     |  24 +-
 packages/core/cache/src/Cache.js              |   2 +-
 packages/core/core/src/utils.js               |   2 +-
 packages/core/integration-tests/test/css.js   |  35 +-
 packages/core/integration-tests/test/html.js  |  18 +-
 .../sourcemap-css-import/package.json         |   6 +
 .../sourcemap-css-import/yarn.lock            |   0
 .../integration/sourcemap-css/package.json    |   6 +
 .../test/integration/sourcemap-css/yarn.lock  |   0
 .../integration/sourcemap-less/package.json   |   6 +
 .../test/integration/sourcemap-less/yarn.lock |   0
 .../sourcemap-sass-imported/package.json      |   6 +
 .../sourcemap-sass-imported/yarn.lock         |   0
 .../integration/sourcemap-sass/package.json   |   6 +
 .../test/integration/sourcemap-sass/yarn.lock |   0
 .../sourcemap-typescript-nested/package.json  |   6 +
 .../sourcemap-typescript-nested/yarn.lock     |   0
 .../sourcemap-typescript/package.json         |   6 +
 .../sourcemap-typescript/yarn.lock            |   0
 .../core/integration-tests/test/javascript.js |  10 +-
 packages/core/integration-tests/test/less.js  |   2 +-
 packages/core/integration-tests/test/sass.js  |   2 +-
 .../core/integration-tests/test/sourcemaps.js | 770 +++++++++---------
 packages/core/register/src/register.js        |   6 +-
 packages/core/test-utils/src/utils.js         |  17 +
 packages/core/utils/src/index.js              |   2 +-
 packages/core/utils/src/schema.js             |   2 +-
 packages/optimizers/cssnano/package.json      |   1 +
 .../cssnano/src/CSSNanoOptimizer.js           |  44 +-
 .../htmlnano/src/HTMLNanoOptimizer.js         |   2 +-
 packages/packagers/css/package.json           |   1 +
 packages/packagers/css/src/CSSPackager.js     |  70 +-
 packages/packagers/js/src/JSPackager.js       |   3 +-
 packages/transformers/css/package.json        |   1 +
 .../transformers/css/src/CSSTransformer.js    |  25 +-
 35 files changed, 634 insertions(+), 447 deletions(-)
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-css-import/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-css-import/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-css/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-css/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-less/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-less/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-sass-imported/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-sass-imported/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-sass/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-sass/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-typescript-nested/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-typescript-nested/yarn.lock
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-typescript/package.json
 create mode 100644 packages/core/integration-tests/test/integration/sourcemap-typescript/yarn.lock

diff --git a/flow-libs/postcss.js.flow b/flow-libs/postcss.js.flow
index 705bd5df272..065edf416b5 100644
--- a/flow-libs/postcss.js.flow
+++ b/flow-libs/postcss.js.flow
@@ -4,7 +4,8 @@
 // Derived from the PostCSS docs available at
 // http://api.postcss.org/postcss.html.
 
-import type {SourceMapGenerator} from 'source-map';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import typeof {SourceMapGenerator} from 'source-map';
 
 declare module 'postcss' {
   declare type NodeCallback = (Node, number) => false | void;
@@ -23,20 +24,23 @@ declare module 'postcss' {
   declare interface Root extends Container {}
 
   declare class Processor {
-    process(css: string | Result, opts?: processOptions): Promise<Result>;
+    process(
+      css: string | Result | Root,
+      opts?: ProcessOptions,
+    ): Promise<Result>;
   }
 
-  declare type ProcessOptions = {|
-    from?: string,
-    to?: string,
-    map?: MapOptions,
-    parser?: parser,
-    stringifier?: stringifier,
-    syntax?: {|
+  declare type ProcessOptions = $Shape<{|
+    from: string,
+    to: string,
+    map: MapOptions,
+    parser: parser,
+    stringifier: stringifier,
+    syntax: {|
       parser: parser,
       stringifier: stringifier,
     |},
-  |};
+  |}>;
 
   declare type MapOptions = {|
     inline?: boolean,
diff --git a/packages/core/cache/src/Cache.js b/packages/core/cache/src/Cache.js
index 922d5e01e92..e5b85a0bec9 100644
--- a/packages/core/cache/src/Cache.js
+++ b/packages/core/cache/src/Cache.js
@@ -8,7 +8,7 @@ import type {FileSystem} from '@parcel/fs';
 import path from 'path';
 import logger from '@parcel/logger';
 import {serialize, deserialize, registerSerializableClass} from '@parcel/core';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import packageJson from '../package.json';
 
 export default class Cache {
diff --git a/packages/core/core/src/utils.js b/packages/core/core/src/utils.js
index 8a21633bb89..b55c9654120 100644
--- a/packages/core/core/src/utils.js
+++ b/packages/core/core/src/utils.js
@@ -10,7 +10,7 @@ import Graph from './Graph';
 import ParcelConfig from './ParcelConfig';
 import {RequestGraph} from './RequestTracker';
 import Config from './public/Config';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import packageJson from '../package.json';
 
 export function getBundleGroupId(bundleGroup: BundleGroup): string {
diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js
index c42859a98a4..b11ca128e15 100644
--- a/packages/core/integration-tests/test/css.js
+++ b/packages/core/integration-tests/test/css.js
@@ -264,6 +264,7 @@ describe('css', () => {
       path.join(__dirname, '/integration/cssnano/index.js'),
       {
         minify: true,
+        sourceMaps: false,
       },
     );
 
@@ -275,19 +276,43 @@ describe('css', () => {
     assert(css.includes('.local'));
     assert(css.includes('.index'));
 
-    // TODO: Make this `2` when a `sourceMappingURL` is added
     assert.equal(css.split('\n').length, 1);
   });
 
+  it('should produce a sourcemap when sourceMaps are used', async function() {
+    await bundle(path.join(__dirname, '/integration/cssnano/index.js'), {
+      minify: true,
+    });
+
+    let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
+    assert(css.includes('.local'));
+    assert(css.includes('.index'));
+
+    let lines = css.trim().split('\n');
+    assert.equal(lines.length, 2);
+    assert.equal(lines[1], '/*# sourceMappingURL=index.css.map */');
+
+    let map = JSON.parse(
+      await outputFS.readFile(path.join(distDir, 'index.css.map'), 'utf8'),
+    );
+    assert.equal(map.file, 'index.css.map');
+    assert.equal(map.mappings, 'AAAA,OACA,WACA,CCFA,OACA,SACA');
+    assert.deepEqual(map.sources, [
+      'integration/cssnano/local.css',
+      'integration/cssnano/index.css',
+    ]);
+  });
+
   it('should inline data-urls for text-encoded files', async () => {
-    await bundle(path.join(__dirname, '/integration/data-url/text.css'));
+    await bundle(path.join(__dirname, '/integration/data-url/text.css'), {
+      sourceMaps: false,
+    });
     let css = await outputFS.readFile(path.join(distDir, 'text.css'), 'utf8');
     assert.equal(
-      css,
+      css.trim(),
       `.svg-img {
   background-image: url('data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A');
-}
-`,
+}`,
     );
   });
 
diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
index 5ec98f3b388..24389970b1b 100644
--- a/packages/core/integration-tests/test/html.js
+++ b/packages/core/integration-tests/test/html.js
@@ -329,8 +329,8 @@ describe('html', function() {
 
     // mergeStyles
     assert(
-      html.includes(
-        '<style>h1{color:red}div{font-size:20px}</style><style media="print">div{color:#00f}</style>',
+      html.match(
+        /<style>h1{color:red}div{font-size:20px}\n\/\*# sourceMappingURL=.*\*\/<\/style><style media="print">div{color:#00f}\n\/\*# sourceMappingURL=.*\*\/<\/style>/,
       ),
     );
 
@@ -834,7 +834,11 @@ describe('html', function() {
       path.join(distDir, 'index.html'),
       'utf8',
     );
-    assert(html.includes('<style>.index{color:#00f}</style>'));
+    assert(
+      html.match(
+        /<style>.index{color:#00f}\n\/\*# sourceMappingURL=.*<\/style>/,
+      ),
+    );
   });
 
   it('should process inline non-js scripts', async function() {
@@ -1159,8 +1163,8 @@ describe('html', function() {
       path.join(distDir, html.match(/\/a\.[a-z0-9]+\.css/)[0]),
       'utf8',
     );
-    assert(css.includes('.a'));
-    assert(!css.includes('.b'));
+    assert(css.includes('.a {'));
+    assert(!css.includes('.b {'));
 
     // b.html should point to a CSS bundle containing only b.css
     // It should not point to the bundle containing a.css from a.html
@@ -1178,8 +1182,8 @@ describe('html', function() {
       path.join(distDir, html.match(/\/b\.[a-z0-9]+\.css/)[0]),
       'utf8',
     );
-    assert(!css.includes('.a'));
-    assert(css.includes('.b'));
+    assert(!css.includes('.a {'));
+    assert(css.includes('.b {'));
   });
 
   it('should invalidate parent bundle when inline bundles change', async function() {
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-import/package.json b/packages/core/integration-tests/test/integration/sourcemap-css-import/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-css-import/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-import/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-css-import/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css/package.json b/packages/core/integration-tests/test/integration/sourcemap-css/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-css/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-css/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-less/package.json b/packages/core/integration-tests/test/integration/sourcemap-less/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-less/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-less/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-less/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass-imported/package.json b/packages/core/integration-tests/test/integration/sourcemap-sass-imported/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-sass-imported/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass-imported/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-sass-imported/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass/package.json b/packages/core/integration-tests/test/integration/sourcemap-sass/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-sass/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-sass/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-typescript-nested/package.json b/packages/core/integration-tests/test/integration/sourcemap-typescript-nested/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-typescript-nested/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-typescript-nested/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-typescript-nested/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/integration/sourcemap-typescript/package.json b/packages/core/integration-tests/test/integration/sourcemap-typescript/package.json
new file mode 100644
index 00000000000..20b7871d386
--- /dev/null
+++ b/packages/core/integration-tests/test/integration/sourcemap-typescript/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "parcel-sourcemap-integration-test",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-typescript/yarn.lock b/packages/core/integration-tests/test/integration/sourcemap-typescript/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/core/integration-tests/test/javascript.js b/packages/core/integration-tests/test/javascript.js
index fb89e0e8459..7ca0be63c9f 100644
--- a/packages/core/integration-tests/test/javascript.js
+++ b/packages/core/integration-tests/test/javascript.js
@@ -2099,15 +2099,17 @@ describe('javascript', function() {
       path.join(__dirname, '/integration/bundle-text/index.js'),
     );
 
-    assert.equal(
-      (await run(b)).default,
-      `body {
+    assert(
+      (await run(b)).default.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,`,
+      ),
     );
   });
 
diff --git a/packages/core/integration-tests/test/less.js b/packages/core/integration-tests/test/less.js
index 49a0e2b25e4..19a4c7accae 100644
--- a/packages/core/integration-tests/test/less.js
+++ b/packages/core/integration-tests/test/less.js
@@ -108,7 +108,7 @@ describe('less', function() {
     assert.equal(output(), 2);
 
     let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
-    assert.equal(css, '');
+    assert.equal(css.trim(), '/*# sourceMappingURL=index.css.map */');
   });
 
   it('should support linking to assets with url() from less', async function() {
diff --git a/packages/core/integration-tests/test/sass.js b/packages/core/integration-tests/test/sass.js
index 8671106e540..1d3e4801ad5 100644
--- a/packages/core/integration-tests/test/sass.js
+++ b/packages/core/integration-tests/test/sass.js
@@ -101,7 +101,7 @@ describe('sass', function() {
     assert.equal(output(), 2);
 
     let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
-    assert.equal(css, '');
+    assert.equal(css.trim(), '/*# sourceMappingURL=index.css.map */');
   });
 
   it('should support linking to assets with url() from scss', async function() {
diff --git a/packages/core/integration-tests/test/sourcemaps.js b/packages/core/integration-tests/test/sourcemaps.js
index c4e1e5a1400..1bb909a78d9 100644
--- a/packages/core/integration-tests/test/sourcemaps.js
+++ b/packages/core/integration-tests/test/sourcemaps.js
@@ -4,10 +4,10 @@ import os from 'os';
 import SourceMap from '@parcel/source-map';
 import {
   bundle,
-  run,
   assertBundleTree,
   inputFS,
   outputFS,
+  shallowEqual,
 } from '@parcel/test-utils';
 import {loadSourceMapUrl} from '@parcel/utils';
 
@@ -38,7 +38,18 @@ function checkSourceMapping({
     generated,
     generated.indexOf(generatedStr),
   );
-  let sourcePosition = indexToLineCol(source, source.indexOf(str));
+
+  let matchIndex = source.indexOf(str);
+  let matchWhitespaceIndex = matchIndex;
+  while (
+    matchWhitespaceIndex > 0 &&
+    [' ', '\t'].includes(source[matchWhitespaceIndex - 1])
+  ) {
+    matchWhitespaceIndex--;
+  }
+
+  let sourceWhitespacePosition = indexToLineCol(source, matchWhitespaceIndex);
+  let sourcePosition = indexToLineCol(source, matchIndex);
 
   let mapping = map.findClosestMapping(
     generatedPosition.line,
@@ -57,18 +68,37 @@ function checkSourceMapping({
     column: mapping.original.column + generatedDiff.column,
   };
 
-  assert.deepStrictEqual(
-    {
-      line: computedSourcePosition.line,
-      column: computedSourcePosition.column,
-      source: mapping.source,
-    },
-    {
-      line: sourcePosition.line,
-      column: sourcePosition.column,
-      source: sourcePath,
-    },
-    "mapping '" + str + "' appears to be incorrect: " + msg,
+  let computedMapping = {
+    line: computedSourcePosition.line,
+    column: computedSourcePosition.column,
+    source: mapping.source,
+  };
+
+  let sourceMapping = {
+    line: sourcePosition.line,
+    column: sourcePosition.column,
+    source: sourcePath,
+  };
+
+  let sourceWhitespaceMapping = {
+    line: sourceWhitespacePosition.line,
+    column: sourceWhitespacePosition.column,
+    source: sourcePath,
+  };
+
+  assert(
+    shallowEqual(computedMapping, sourceMapping) ||
+      shallowEqual(computedMapping, sourceWhitespaceMapping),
+    "mapping '" +
+      str +
+      "' appears to be incorrect: " +
+      msg +
+      '\n\nExpected computed mapping ' +
+      JSON.stringify(computedMapping) +
+      ' to equal either\n\n' +
+      JSON.stringify(sourceMapping) +
+      '\nor, accepting whitespace,\n' +
+      JSON.stringify(sourceWhitespaceMapping),
   );
 }
 
@@ -154,7 +184,7 @@ describe('sourcemaps', function() {
     let input = await inputFS.readFile(sourceFilename, 'utf8');
     let sourcePath = 'index.js';
     let mapData = sourceMap.getMap();
-    assert.equal(Object.keys(mapData.sources).length, 1);
+    assert.equal(mapData.sources.length, 1);
 
     assert(
       await inputFS.exists(path.resolve(distDir + sourceRoot + sourcePath)),
@@ -210,7 +240,7 @@ describe('sourcemaps', function() {
     let sourceMap = new SourceMap();
     sourceMap.addRawMappings(map.mappings, map.sources, map.names);
     let mapData = sourceMap.getMap();
-    assert.equal(Object.keys(mapData.sources).length, 3);
+    assert.equal(mapData.sources.length, 3);
 
     for (let source of mapData.sources) {
       assert(
@@ -299,7 +329,7 @@ describe('sourcemaps', function() {
     let sourceMap = new SourceMap();
     sourceMap.addRawMappings(map.mappings, map.sources, map.names);
     let mapData = sourceMap.getMap();
-    assert.equal(Object.keys(mapData.sources).length, 3);
+    assert.equal(mapData.sources.length, 3);
 
     for (let source of mapData.sources) {
       assert(
@@ -361,209 +391,121 @@ describe('sourcemaps', function() {
     });
   });
 
-  it.skip('should create a valid sourcemap as a child of a TS bundle', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/sourcemap-typescript/index.ts'),
+  it('should create a valid sourcemap as a child of a TS bundle', async function() {
+    let inputFilePath = path.join(
+      __dirname,
+      '/integration/sourcemap-typescript/index.ts',
     );
 
-    await assertBundleTree(b, {
-      name: 'index.js',
-      assets: ['index.ts'],
-      childBundles: [
-        {
-          name: 'index.js.map',
-          type: 'map',
-        },
-      ],
-    });
+    await bundle(inputFilePath);
+    let distDir = path.join(__dirname, '../dist/');
+    let filename = path.join(distDir, 'index.js');
+    let raw = await outputFS.readFile(filename, 'utf8');
+    let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+    if (!mapUrlData) {
+      throw new Error('Could not load map');
+    }
+    let map = mapUrlData.map;
 
-    // let raw = await outputFS.readFile(path.join(__dirname, '/dist/index.js'), 'utf8');
-    let map = await outputFS.readFile(
-      path.join(__dirname, '/dist/index.js.map'),
-      'utf8',
-    );
-    assert.equal(JSON.parse(map).sources.length, 1);
+    assert.equal(map.file, 'index.js.map');
+    assert(raw.includes('//# sourceMappingURL=index.js.map'));
+    assert.equal(map.sourceRoot, '/__parcel_source_root/');
 
-    let output = await run(b);
-    assert.equal(typeof output.env, 'function');
-    assert.equal(output.env(), process.env.NODE_ENV);
-  });
+    let sourceMap = new SourceMap();
+    sourceMap.addRawMappings(map.mappings, map.sources, map.names);
 
-  it.skip('should create a valid sourcemap as a child of a nested TS bundle', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/sourcemap-typescript-nested/index.ts'),
-    );
+    let mapData = sourceMap.getMap();
+    assert.equal(mapData.sources.length, 1);
+    assert.deepEqual(mapData.sources, ['index.ts']);
 
-    await assertBundleTree(b, {
-      name: 'index.js',
-      assets: ['index.ts', 'local.ts'],
-      childBundles: [
-        {
-          name: 'index.js.map',
-          type: 'map',
-        },
-      ],
+    let input = await inputFS.readFile(inputFilePath, 'utf-8');
+    checkSourceMapping({
+      map: sourceMap,
+      source: input,
+      generated: raw,
+      str: 'function env()',
+      sourcePath: 'index.ts',
     });
-
-    // let raw = await outputFS.readFile(path.join(__dirname, '/dist/index.js'), 'utf8');
-    let map = await outputFS.readFile(
-      path.join(__dirname, '/dist/index.js.map'),
-      'utf8',
-    );
-    assert.equal(JSON.parse(map).sources.length, 2);
-
-    let output = await run(b);
-    assert.equal(typeof output.env, 'function');
-    assert.equal(output.env(), process.env.NODE_ENV);
   });
 
-  it.skip('should load existing sourcemaps of libraries', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/sourcemap-existing/index.js'),
-    );
-
-    assertBundleTree(b, {
-      name: 'index.js',
-      assets: ['index.js', 'sum.js'],
-      childBundles: [
-        {
-          type: 'map',
-        },
-      ],
-    });
-
-    let jsOutput = await outputFS.readFile(b.name, 'utf8');
-
-    let sourcemapReference = path.join(
+  it('should create a valid sourcemap as a child of a nested TS bundle', async function() {
+    let inputFilePath = path.join(
       __dirname,
-      '/dist/',
-      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
-    );
-
-    assert(
-      await outputFS.exists(path.join(sourcemapReference)),
-      'referenced sourcemap should exist',
+      '/integration/sourcemap-typescript-nested/index.ts',
     );
 
-    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
-    assert(
-      map.indexOf('module.exports = (a, b) => a + b') > -1,
-      'Sourcemap should contain the existing sourcemap',
-    );
-  });
-
-  it.skip('should load inline sourcemaps of libraries', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/sourcemap-inline/index.js'),
-    );
-
-    assertBundleTree(b, {
-      name: 'index.js',
-      assets: ['index.js', 'sum.js'],
-      childBundles: [
-        {
-          type: 'map',
-        },
-      ],
-    });
-
-    let jsOutput = await outputFS.readFile(b.name, 'utf8');
-
-    let sourcemapReference = path.join(
-      __dirname,
-      '/dist/',
-      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
-    );
+    await bundle(inputFilePath);
+    let distDir = path.join(__dirname, '../dist/');
+    let filename = path.join(distDir, 'index.js');
+    let raw = await outputFS.readFile(filename, 'utf8');
+    let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+    if (!mapUrlData) {
+      throw new Error('Could not load map');
+    }
+    let map = mapUrlData.map;
 
-    assert(
-      await outputFS.exists(path.join(sourcemapReference)),
-      'referenced sourcemap should exist',
-    );
+    assert.equal(map.file, 'index.js.map');
+    assert(raw.includes('//# sourceMappingURL=index.js.map'));
+    assert.equal(map.sourceRoot, '/__parcel_source_root/');
 
-    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
-    assert(
-      map.indexOf('module.exports = (a, b) => a + b') > -1,
-      'Sourcemap should contain the existing sourcemap',
-    );
-  });
+    let sourceMap = new SourceMap();
+    sourceMap.addRawMappings(map.mappings, map.sources, map.names);
 
-  it.skip('should load referenced contents of sourcemaps', async function() {
-    let b = await bundle(
-      path.join(__dirname, '/integration/sourcemap-external-contents/index.js'),
-    );
+    let mapData = sourceMap.getMap();
+    assert.equal(mapData.sources.length, 2);
+    assert.deepEqual(mapData.sources, ['index.ts', 'local.ts']);
 
-    assertBundleTree(b, {
-      name: 'index.js',
-      assets: ['index.js', 'sum.js'],
-      childBundles: [
-        {
-          type: 'map',
-        },
-      ],
+    let input = await inputFS.readFile(inputFilePath, 'utf-8');
+    checkSourceMapping({
+      map: sourceMap,
+      source: input,
+      generated: raw,
+      str: 'function env()',
+      sourcePath: 'index.ts',
     });
 
-    let jsOutput = await outputFS.readFile(b.name, 'utf8');
-
-    let sourcemapReference = path.join(
-      __dirname,
-      '/dist/',
-      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
-    );
-
-    assert(
-      await outputFS.exists(path.join(sourcemapReference)),
-      'referenced sourcemap should exist',
-    );
-
-    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
-    assert(
-      map.indexOf('module.exports = (a, b) => a + b') > -1,
-      'Sourcemap should contain the existing sourcemap',
+    let local = await inputFS.readFile(
+      path.join(__dirname, '/integration/sourcemap-typescript-nested/local.ts'),
+      'utf-8',
     );
+    checkSourceMapping({
+      map: sourceMap,
+      source: local,
+      generated: raw,
+      str: 'exports.local',
+      sourcePath: 'local.ts',
+    });
   });
 
-  it.skip('should create a valid sourcemap as a child of a CSS bundle', async function() {
+  it('should create a valid sourcemap for a CSS bundle', async function() {
     async function test(minify) {
-      let b = await bundle(
-        path.join(__dirname, '/integration/sourcemap-css/style.css'),
-        {minify: true},
+      let inputFilePath = path.join(
+        __dirname,
+        '/integration/sourcemap-css/style.css',
       );
 
-      await assertBundleTree(b, {
-        name: 'style.css',
-        assets: ['style.css'],
-        childBundles: [
-          {
-            name: 'style.css.map',
-            type: 'map',
-          },
-        ],
-      });
+      await bundle(inputFilePath, {minify});
+      let distDir = path.join(__dirname, '../dist/');
+      let filename = path.join(distDir, 'style.css');
+      let raw = await outputFS.readFile(filename, 'utf8');
+      let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+      if (!mapUrlData) {
+        throw new Error('Could not load map');
+      }
+      let map = mapUrlData.map;
 
-      let input = await inputFS.readFile(
-        path.join(__dirname, '/integration/sourcemap-css/style.css'),
-        'utf8',
-      );
-      let raw = await outputFS.readFile(
-        path.join(__dirname, '/dist/style.css'),
-        'utf8',
-      );
-      let map = JSON.parse(
-        await outputFS.readFile(
-          path.join(__dirname, '/dist/style.css.map'),
-          'utf8',
-        ),
-      );
+      assert.equal(map.file, 'style.css.map');
+      assert(raw.includes('/*# sourceMappingURL=style.css.map */'));
+      assert.equal(map.sourceRoot, '/__parcel_source_root/');
 
-      assert(raw.includes('/*# sourceMappingURL=/style.css.map */'));
-      assert.equal(
-        map.sourceRoot,
-        path.normalize('../integration/sourcemap-css'),
-      );
+      let sourceMap = new SourceMap();
+      sourceMap.addRawMappings(map.mappings, map.sources, map.names);
 
-      let sourceMap = await new SourceMap().addMap(map);
-      assert.equal(Object.keys(sourceMap.sources).length, 1);
-      assert.equal(sourceMap.sources['style.css'], input);
+      let input = await inputFS.readFile(inputFilePath, 'utf-8');
+
+      let mapData = sourceMap.getMap();
+      assert.equal(mapData.sources.length, 1);
+      assert.deepEqual(mapData.sources, ['style.css']);
 
       checkSourceMapping({
         map: sourceMap,
@@ -588,71 +530,61 @@ describe('sourcemaps', function() {
     await test(true);
   });
 
-  it.skip('should create a valid sourcemap for a CSS bundle with imports', async function() {
+  it('should create a valid sourcemap for a CSS bundle with imports', async function() {
     async function test(minify) {
-      let b = await bundle(
-        path.join(__dirname, '/integration/sourcemap-css-import/style.css'),
-        {minify},
+      let inputFilePath = path.join(
+        __dirname,
+        '/integration/sourcemap-css-import/style.css',
       );
 
-      await assertBundleTree(b, {
-        name: 'style.css',
-        assets: ['style.css', 'other-style.css', 'another-style.css'],
-        childBundles: [
-          {
-            name: 'style.css.map',
-            type: 'map',
-          },
-        ],
-      });
+      await bundle(inputFilePath, {minify});
+      let distDir = path.join(__dirname, '../dist/');
+      let filename = path.join(distDir, 'style.css');
+      let raw = await outputFS.readFile(filename, 'utf8');
+      let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+      if (!mapUrlData) {
+        throw new Error('Could not load map');
+      }
+      let map = mapUrlData.map;
 
-      let style = await inputFS.readFile(
-        path.join(__dirname, '/integration/sourcemap-css-import/style.css'),
-        'utf8',
-      );
+      assert.equal(map.file, 'style.css.map');
+      assert(raw.includes('/*# sourceMappingURL=style.css.map */'));
+      assert.equal(map.sourceRoot, '/__parcel_source_root/');
+
+      let sourceMap = new SourceMap();
+      sourceMap.addRawMappings(map.mappings, map.sources, map.names);
+
+      let style = await inputFS.readFile(inputFilePath, 'utf-8');
       let otherStyle = await inputFS.readFile(
         path.join(
           __dirname,
           '/integration/sourcemap-css-import/other-style.css',
         ),
-        'utf8',
+        'utf-8',
       );
       let anotherStyle = await inputFS.readFile(
         path.join(
           __dirname,
           '/integration/sourcemap-css-import/another-style.css',
         ),
-        'utf8',
-      );
-      let raw = await outputFS.readFile(
-        path.join(__dirname, '/dist/style.css'),
-        'utf8',
-      );
-      let map = JSON.parse(
-        await outputFS.readFile(
-          path.join(__dirname, '/dist/style.css.map'),
-          'utf8',
-        ),
-      );
-
-      assert(raw.includes('/*# sourceMappingURL=/style.css.map */'));
-      assert.equal(
-        map.sourceRoot,
-        path.normalize('../integration/sourcemap-css-import'),
+        'utf-8',
       );
 
-      let sourceMap = await new SourceMap().addMap(map);
-      assert.equal(Object.keys(sourceMap.sources).length, 3);
-      assert.equal(sourceMap.sources['style.css'], style);
-      assert.equal(sourceMap.sources['other-style.css'], otherStyle);
-      assert.equal(sourceMap.sources['another-style.css'], anotherStyle);
+      let mapData = sourceMap.getMap();
+      assert.equal(mapData.sources.length, 3);
+      assert.deepEqual(mapData.sources, [
+        'other-style.css',
+        'another-style.css',
+        // TODO: Is this a bug?
+        'test/integration/sourcemap-css-import/style.css',
+      ]);
 
       checkSourceMapping({
         map: sourceMap,
         source: style,
         generated: raw,
         str: 'body',
-        sourcePath: 'style.css',
+        sourcePath: 'test/integration/sourcemap-css-import/style.css',
         msg: ' ' + (minify ? 'with' : 'without') + ' minification',
       });
 
@@ -661,7 +593,7 @@ describe('sourcemaps', function() {
         source: style,
         generated: raw,
         str: 'background-color',
-        sourcePath: 'style.css',
+        sourcePath: 'test/integration/sourcemap-css-import/style.css',
         msg: ' ' + (minify ? 'with' : 'without') + ' minification',
       });
 
@@ -708,46 +640,32 @@ describe('sourcemaps', function() {
 
   it.skip('should create a valid sourcemap for a SASS asset', async function() {
     async function test(minify) {
-      let b = await bundle(
-        path.join(__dirname, '/integration/sourcemap-sass/style.scss'),
-        {minify},
+      let inputFilePath = path.join(
+        __dirname,
+        '/integration/sourcemap-sass/style.scss',
       );
 
-      await assertBundleTree(b, {
-        name: 'style.css',
-        assets: ['style.scss'],
-        childBundles: [
-          {
-            name: 'style.css.map',
-            type: 'map',
-          },
-        ],
-      });
+      await bundle(inputFilePath, {minify});
+      let distDir = path.join(__dirname, '../dist/');
+      let filename = path.join(distDir, 'style.css');
+      let raw = await outputFS.readFile(filename, 'utf8');
+      let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+      if (!mapUrlData) {
+        throw new Error('Could not load map');
+      }
+      let map = mapUrlData.map;
 
-      let input = await inputFS.readFile(
-        path.join(__dirname, '/integration/sourcemap-sass/style.scss'),
-        'utf8',
-      );
-      let raw = await inputFS.readFile(
-        path.join(__dirname, '/dist/style.css'),
-        'utf8',
-      );
-      let map = JSON.parse(
-        await outputFS.readFile(
-          path.join(__dirname, '/dist/style.css.map'),
-          'utf8',
-        ),
-      );
+      assert.equal(map.file, 'style.css.map');
+      assert(raw.includes('/*# sourceMappingURL=style.css.map */'));
+      assert.equal(map.sourceRoot, '/__parcel_source_root/');
 
-      assert(raw.includes('/*# sourceMappingURL=/style.css.map */'));
-      assert.equal(
-        map.sourceRoot,
-        path.normalize('../integration/sourcemap-sass'),
-      );
+      let sourceMap = new SourceMap();
+      sourceMap.addRawMappings(map.mappings, map.sources, map.names);
 
-      let sourceMap = await new SourceMap().addMap(map);
-      assert.equal(Object.keys(sourceMap.sources).length, 1);
-      assert.equal(sourceMap.sources['style.scss'], input);
+      let input = await inputFS.readFile(inputFilePath, 'utf-8');
+      let mapData = sourceMap.getMap();
+      assert.equal(mapData.sources.length, 1);
+      assert.deepEqual(mapData.sources, ['style.scss']);
 
       checkSourceMapping({
         map: sourceMap,
@@ -774,58 +692,47 @@ describe('sourcemaps', function() {
 
   it.skip('should create a valid sourcemap when for a CSS asset importing SASS', async function() {
     async function test(minify) {
-      let b = await bundle(
-        path.join(__dirname, '/integration/sourcemap-sass-imported/style.css'),
-        {minify},
+      let inputFilePath = path.join(
+        __dirname,
+        '/integration/sourcemap-sass-imported/style.css',
       );
 
-      await assertBundleTree(b, {
-        name: 'style.css',
-        assets: ['style.css', 'other.scss'],
-        childBundles: [
-          {
-            name: 'style.css.map',
-            type: 'map',
-          },
-        ],
-      });
+      await bundle(inputFilePath, {minify});
+      let distDir = path.join(__dirname, '../dist/');
+      let filename = path.join(distDir, 'style.css');
+      let raw = await outputFS.readFile(filename, 'utf8');
+      let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+      if (!mapUrlData) {
+        throw new Error('Could not load map');
+      }
+      let map = mapUrlData.map;
 
-      let style = await inputFS.readFile(
-        path.join(__dirname, '/integration/sourcemap-sass-imported/style.css'),
-        'utf8',
-      );
+      assert.equal(map.file, 'style.css.map');
+      assert(raw.includes('/*# sourceMappingURL=style.css.map */'));
+      assert.equal(map.sourceRoot, '/__parcel_source_root/');
+
+      let sourceMap = new SourceMap();
+      sourceMap.addRawMappings(map.mappings, map.sources, map.names);
+
+      let style = await inputFS.readFile(inputFilePath, 'utf-8');
       let other = await inputFS.readFile(
         path.join(__dirname, '/integration/sourcemap-sass-imported/other.scss'),
-        'utf8',
-      );
-      let raw = await outputFS.readFile(
-        path.join(__dirname, '/dist/style.css'),
-        'utf8',
-      );
-      let map = JSON.parse(
-        await outputFS.readFile(
-          path.join(__dirname, '/dist/style.css.map'),
-          'utf8',
-        ),
-      );
-
-      assert(raw.includes('/*# sourceMappingURL=/style.css.map */'));
-      assert.equal(
-        map.sourceRoot,
-        path.normalize('../integration/sourcemap-sass-imported'),
+        'utf-8',
       );
-
-      let sourceMap = await new SourceMap().addMap(map);
-      assert.equal(Object.keys(sourceMap.sources).length, 2);
-      assert.equal(sourceMap.sources['style.css'], style);
-      assert.equal(sourceMap.sources['other.scss'], other);
+      let mapData = sourceMap.getMap();
+      assert.equal(mapData.sources.length, 2);
+      assert.deepEqual(mapData.sources, [
+        'other.scss',
+        // TODO: Figure out why this happens?
+        'test/integration/sourcemap-sass-imported/style.css',
+      ]);
 
       checkSourceMapping({
         map: sourceMap,
         source: style,
         generated: raw,
         str: 'body',
-        sourcePath: 'style.css',
+        sourcePath: 'test/integration/sourcemap-sass-imported/style.css',
         msg: ' ' + (minify ? 'with' : 'without') + ' minification',
       });
 
@@ -834,7 +741,7 @@ describe('sourcemaps', function() {
         source: style,
         generated: raw,
         str: 'color',
-        sourcePath: 'style.css',
+        sourcePath: 'test/integration/sourcemap-sass-imported/style.css',
         msg: ' ' + (minify ? 'with' : 'without') + ' minification',
       });
 
@@ -862,49 +769,32 @@ describe('sourcemaps', function() {
 
   it.skip('should create a valid sourcemap for a LESS asset', async function() {
     async function test(minify) {
-      let b = await bundle(
-        path.join(__dirname, '/integration/sourcemap-less/style.less'),
-        {minify},
+      let inputFilePath = path.join(
+        __dirname,
+        '/integration/sourcemap-less/style.less',
       );
 
-      await assertBundleTree(b, {
-        name: 'style.css',
-        assets: ['style.less'],
-        childBundles: [
-          {
-            name: 'style.css.map',
-            type: 'map',
-          },
-        ],
-      });
+      await bundle(inputFilePath, {minify});
+      let distDir = path.join(__dirname, '../dist/');
+      let filename = path.join(distDir, 'style.css');
+      let raw = await outputFS.readFile(filename, 'utf8');
+      let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+      if (!mapUrlData) {
+        throw new Error('Could not load map');
+      }
+      let map = mapUrlData.map;
 
-      let input = await inputFS.readFile(
-        path.join(__dirname, '/integration/sourcemap-less/style.less'),
-        'utf8',
-      );
-      let raw = await inputFS.readFile(
-        path.join(__dirname, '/dist/style.css'),
-        'utf8',
-      );
-      let map = JSON.parse(
-        await outputFS.readFile(
-          path.join(__dirname, '/dist/style.css.map'),
-          'utf8',
-        ),
-      );
+      assert.equal(map.file, 'style.css.map');
+      assert(raw.includes('/*# sourceMappingURL=style.css.map */'));
+      assert.equal(map.sourceRoot, '/__parcel_source_root/');
 
-      assert(raw.includes('/*# sourceMappingURL=/style.css.map */'));
-      assert.equal(
-        map.sourceRoot,
-        path.normalize('../integration/sourcemap-less'),
-      );
+      let sourceMap = new SourceMap();
+      sourceMap.addRawMappings(map.mappings, map.sources, map.names);
 
-      let sourceMap = await new SourceMap().addMap(map);
-      assert.equal(Object.keys(sourceMap.sources).length, 1);
-      assert.equal(
-        sourceMap.sources['style.less'],
-        input.replace(new RegExp(os.EOL, 'g'), '\n'),
-      );
+      let mapData = sourceMap.getMap();
+      assert.equal(mapData.sources.length, 1);
+      assert.deepEqual(mapData.sources, ['style.less']);
+      let input = await inputFS.readFile(inputFilePath, 'utf-8');
 
       checkSourceMapping({
         map: sourceMap,
@@ -924,10 +814,69 @@ describe('sourcemaps', function() {
         msg: ' ' + (minify ? 'with' : 'without') + ' minification',
       });
     }
+
     await test(false);
     await test(true);
   });
 
+  it('Should be able to create a sourcemap with inlined sources', async function() {
+    let sourceFilename = path.join(
+      __dirname,
+      '/integration/sourcemap-inline-sources/index.js',
+    );
+    await bundle(sourceFilename);
+
+    let distDir = path.join(
+      __dirname,
+      '/integration/sourcemap-inline-sources/dist/',
+    );
+
+    let filename = path.join(distDir, 'index.js');
+    let raw = await outputFS.readFile(filename, 'utf8');
+
+    let mapData = await loadSourceMapUrl(outputFS, filename, raw);
+    if (!mapData) {
+      throw new Error('Could not load map');
+    }
+
+    let sourceContent = await inputFS.readFile(sourceFilename, 'utf-8');
+
+    let map = mapData.map;
+    assert.equal(map.file, 'index.js.map');
+    assert.deepEqual(map.sources, ['index.js']);
+    assert.equal(map.sourcesContent[0], sourceContent);
+  });
+
+  it('Should be able to create inline sourcemaps', async function() {
+    let sourceFilename = path.join(
+      __dirname,
+      '/integration/sourcemap-generate-inline/index.js',
+    );
+    await bundle(sourceFilename);
+
+    let distDir = path.join(
+      __dirname,
+      '/integration/sourcemap-generate-inline/dist/',
+    );
+
+    let filename = path.join(distDir, 'index.js');
+    let raw = await outputFS.readFile(filename, 'utf8');
+
+    let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
+    if (!mapUrlData) {
+      throw new Error('Could not load map');
+    }
+
+    assert(
+      mapUrlData.url.startsWith('data:application/json;charset=utf-8;base64,'),
+      'inline sourcemap bundles should have a base64 url',
+    );
+
+    let map = mapUrlData.map;
+    assert.equal(map.file, 'index.js.map');
+    assert.deepEqual(map.sources, ['index.js']);
+  });
+
   it.skip('should load existing sourcemaps for CSS files', async function() {
     async function test(minify) {
       let b = await bundle(
@@ -1032,61 +981,108 @@ describe('sourcemaps', function() {
     await test(true);
   });
 
-  it('Should be able to create a sourcemap with inlined sources', async function() {
-    let sourceFilename = path.join(
-      __dirname,
-      '/integration/sourcemap-inline-sources/index.js',
+  it.skip('should load existing sourcemaps of libraries', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/sourcemap-existing/index.js'),
     );
-    await bundle(sourceFilename);
 
-    let distDir = path.join(
+    assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'sum.js'],
+      childBundles: [
+        {
+          type: 'map',
+        },
+      ],
+    });
+
+    let jsOutput = await outputFS.readFile(b.name, 'utf8');
+
+    let sourcemapReference = path.join(
       __dirname,
-      '/integration/sourcemap-inline-sources/dist/',
+      '/dist/',
+      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
     );
 
-    let filename = path.join(distDir, 'index.js');
-    let raw = await outputFS.readFile(filename, 'utf8');
+    assert(
+      await outputFS.exists(path.join(sourcemapReference)),
+      'referenced sourcemap should exist',
+    );
 
-    let mapData = await loadSourceMapUrl(outputFS, filename, raw);
-    if (!mapData) {
-      throw new Error('Could not load map');
-    }
+    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
+    assert(
+      map.indexOf('module.exports = (a, b) => a + b') > -1,
+      'Sourcemap should contain the existing sourcemap',
+    );
+  });
 
-    let sourceContent = await inputFS.readFile(sourceFilename, 'utf-8');
+  it.skip('should load inline sourcemaps of libraries', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/sourcemap-inline/index.js'),
+    );
 
-    let map = mapData.map;
-    assert.equal(map.file, 'index.js.map');
-    assert.deepEqual(map.sources, ['index.js']);
-    assert.equal(map.sourcesContent[0], sourceContent);
-  });
+    assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'sum.js'],
+      childBundles: [
+        {
+          type: 'map',
+        },
+      ],
+    });
 
-  it('Should be able to create inline sourcemaps', async function() {
-    let sourceFilename = path.join(
+    let jsOutput = await outputFS.readFile(b.name, 'utf8');
+
+    let sourcemapReference = path.join(
       __dirname,
-      '/integration/sourcemap-generate-inline/index.js',
+      '/dist/',
+      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
     );
-    await bundle(sourceFilename);
 
-    let distDir = path.join(
-      __dirname,
-      '/integration/sourcemap-generate-inline/dist/',
+    assert(
+      await outputFS.exists(path.join(sourcemapReference)),
+      'referenced sourcemap should exist',
     );
 
-    let filename = path.join(distDir, 'index.js');
-    let raw = await outputFS.readFile(filename, 'utf8');
+    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
+    assert(
+      map.indexOf('module.exports = (a, b) => a + b') > -1,
+      'Sourcemap should contain the existing sourcemap',
+    );
+  });
 
-    let mapUrlData = await loadSourceMapUrl(outputFS, filename, raw);
-    if (!mapUrlData) {
-      throw new Error('Could not load map');
-    }
+  it.skip('should load referenced contents of sourcemaps', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/sourcemap-external-contents/index.js'),
+    );
+
+    assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'sum.js'],
+      childBundles: [
+        {
+          type: 'map',
+        },
+      ],
+    });
+
+    let jsOutput = await outputFS.readFile(b.name, 'utf8');
+
+    let sourcemapReference = path.join(
+      __dirname,
+      '/dist/',
+      jsOutput.substring(jsOutput.lastIndexOf('//# sourceMappingURL') + 22),
+    );
 
     assert(
-      mapUrlData.url.startsWith('data:application/json;charset=utf-8;base64,'),
-      'inline sourcemap bundles should have a base64 url',
+      await outputFS.exists(path.join(sourcemapReference)),
+      'referenced sourcemap should exist',
     );
 
-    let map = mapUrlData.map;
-    assert.equal(map.file, 'index.js.map');
-    assert.deepEqual(map.sources, ['index.js']);
+    let map = await outputFS.readFile(path.join(sourcemapReference), 'utf8');
+    assert(
+      map.indexOf('module.exports = (a, b) => a + b') > -1,
+      'Sourcemap should contain the existing sourcemap',
+    );
   });
 });
diff --git a/packages/core/register/src/register.js b/packages/core/register/src/register.js
index cb2b1240765..8123a50e7a5 100644
--- a/packages/core/register/src/register.js
+++ b/packages/core/register/src/register.js
@@ -4,12 +4,12 @@ import type {IDisposable, InitialParcelOptions} from '@parcel/types';
 
 import {NodePackageManager} from '@parcel/package-manager';
 import {NodeFS} from '@parcel/fs';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import defaultConfigContents from '@parcel/config-default';
-// $FlowFixMe this is untyped
+// $FlowFixMe Flow can't resolve this
 import Module from 'module';
 import path from 'path';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import {addHook} from 'pirates';
 import Parcel, {INTERNAL_RESOLVE, INTERNAL_TRANSFORM} from '@parcel/core';
 
diff --git a/packages/core/test-utils/src/utils.js b/packages/core/test-utils/src/utils.js
index d7b7df110ce..06138cdb14c 100644
--- a/packages/core/test-utils/src/utils.js
+++ b/packages/core/test-utils/src/utils.js
@@ -507,3 +507,20 @@ function prepareNodeContext(filePath, globals) {
   ctx.global = ctx;
   return ctx;
 }
+
+export function shallowEqual(
+  a: $Shape<{|+[string]: mixed|}>,
+  b: $Shape<{|+[string]: mixed|}>,
+) {
+  if (Object.keys(a).length !== Object.keys(b).length) {
+    return false;
+  }
+
+  for (let [key, value] of Object.entries(a)) {
+    if (!b.hasOwnProperty(key) || b[key] !== value) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/core/utils/src/index.js b/packages/core/utils/src/index.js
index c1861ce16fd..894e0463e4f 100644
--- a/packages/core/utils/src/index.js
+++ b/packages/core/utils/src/index.js
@@ -12,7 +12,7 @@ export {default as objectHash} from './objectHash';
 export {default as prettifyTime} from './prettifyTime';
 export {default as prettyDiagnostic} from './prettyDiagnostic';
 export {default as PromiseQueue} from './PromiseQueue';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 export {default as promisify} from './promisify';
 export {default as validateSchema} from './schema';
 export {default as TapStream} from './TapStream';
diff --git a/packages/core/utils/src/schema.js b/packages/core/utils/src/schema.js
index 2ce0030533d..5d2dca9507b 100644
--- a/packages/core/utils/src/schema.js
+++ b/packages/core/utils/src/schema.js
@@ -2,7 +2,7 @@
 import ThrowableDiagnostic, {
   generateJSONCodeHighlights,
 } from '@parcel/diagnostic';
-// $FlowFixMe untyped
+// flowlint-next-line untyped-import:off
 import levenshteinDistance from 'js-levenshtein';
 
 export type SchemaEntity =
diff --git a/packages/optimizers/cssnano/package.json b/packages/optimizers/cssnano/package.json
index 2dfa58e359e..bd466e11d5f 100644
--- a/packages/optimizers/cssnano/package.json
+++ b/packages/optimizers/cssnano/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@parcel/plugin": "^2.0.0-alpha.3.1",
+    "@parcel/source-map": "^2.0.0-alpha.4.9",
     "cssnano": "^4.1.10",
     "postcss": "^7.0.5"
   }
diff --git a/packages/optimizers/cssnano/src/CSSNanoOptimizer.js b/packages/optimizers/cssnano/src/CSSNanoOptimizer.js
index e5718851bfb..f39cc7253f8 100644
--- a/packages/optimizers/cssnano/src/CSSNanoOptimizer.js
+++ b/packages/optimizers/cssnano/src/CSSNanoOptimizer.js
@@ -1,24 +1,58 @@
 // @flow strict-local
 
+import SourceMap from '@parcel/source-map';
 import {Optimizer} from '@parcel/plugin';
 import postcss from 'postcss';
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import cssnano from 'cssnano';
 
 export default new Optimizer({
-  async optimize({bundle, contents, map}) {
+  async optimize({
+    bundle,
+    contents: prevContents,
+    getSourceMapReference,
+    map: prevMap,
+    options,
+  }) {
     if (!bundle.env.minify) {
-      return {contents, map};
+      return {contents: prevContents, map: prevMap};
     }
 
-    if (typeof contents !== 'string') {
+    if (typeof prevContents !== 'string') {
       throw new Error(
         'CSSNanoOptimizer: Only string contents are currently supported',
       );
     }
 
+    const result = await postcss([cssnano]).process(prevContents, {
+      // Suppress postcss's warning about a missing `from` property. In this
+      // case, the input map contains all of the sources.
+      from: undefined,
+      map: {
+        annotation: false,
+        inline: false,
+        prev: prevMap ? await prevMap.stringify({}) : null,
+      },
+    });
+
+    let map;
+    if (result.map != null) {
+      map = new SourceMap();
+      let {mappings, sources, names} = result.map.toJSON();
+      map.addRawMappings(mappings, sources, names);
+    }
+
+    let contents = result.css;
+    if (options.sourceMaps) {
+      let reference = await getSourceMapReference(map);
+      if (reference != null) {
+        contents += '\n' + '/*# sourceMappingURL=' + reference + ' */\n';
+      }
+    }
+
     return {
-      contents: (await postcss([cssnano]).process(contents)).css,
+      contents,
+      map,
     };
   },
 });
diff --git a/packages/optimizers/htmlnano/src/HTMLNanoOptimizer.js b/packages/optimizers/htmlnano/src/HTMLNanoOptimizer.js
index 843a7547ad0..17f329d9b5c 100644
--- a/packages/optimizers/htmlnano/src/HTMLNanoOptimizer.js
+++ b/packages/optimizers/htmlnano/src/HTMLNanoOptimizer.js
@@ -1,6 +1,6 @@
 // @flow strict-local
 
-// $FlowFixMe this is untyped
+// flowlint-next-line untyped-import:off
 import htmlnano from 'htmlnano';
 import {loadConfig} from '@parcel/utils';
 import {Optimizer} from '@parcel/plugin';
diff --git a/packages/packagers/css/package.json b/packages/packagers/css/package.json
index 1c684ea6e8c..0261d01aed4 100644
--- a/packages/packagers/css/package.json
+++ b/packages/packagers/css/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@parcel/plugin": "^2.0.0-alpha.3.1",
+    "@parcel/source-map": "^2.0.0-alpha.4.9",
     "@parcel/utils": "^2.0.0-alpha.3.1"
   }
 }
diff --git a/packages/packagers/css/src/CSSPackager.js b/packages/packagers/css/src/CSSPackager.js
index 7814d563fa2..9a8fff57913 100644
--- a/packages/packagers/css/src/CSSPackager.js
+++ b/packages/packagers/css/src/CSSPackager.js
@@ -1,14 +1,23 @@
 // @flow
 
+import path from 'path';
+import SourceMap from '@parcel/source-map';
 import {Packager} from '@parcel/plugin';
 import {
   PromiseQueue,
+  countLines,
   replaceInlineReferences,
   replaceURLReferences,
 } from '@parcel/utils';
 
 export default new Packager({
-  async package({bundle, bundleGraph, getInlineBundleContents}) {
+  async package({
+    bundle,
+    bundleGraph,
+    getInlineBundleContents,
+    options,
+    getSourceMapReference,
+  }) {
     let queue = new PromiseQueue({maxConcurrent: 32});
     bundle.traverseAssets({
       exit: asset => {
@@ -25,31 +34,68 @@ export default new Packager({
         }
 
         queue.add(() =>
-          asset.getCode().then((css: string) => {
-            if (media.length) {
-              return `@media ${media.join(', ')} {\n${css.trim()}\n}\n`;
-            }
+          Promise.all([
+            asset,
+            asset.getCode().then((css: string) => {
+              if (media.length) {
+                return `@media ${media.join(', ')} {\n${css}\n}\n`;
+              }
 
-            return css;
-          }),
+              return css;
+            }),
+            options.sourceMaps && asset.getMapBuffer(),
+          ]),
         );
       },
     });
 
     let outputs = await queue.run();
+    let contents = '';
+    let map = new SourceMap();
+    let lineOffset = 0;
+    for (let [asset, code, mapBuffer] of outputs) {
+      contents += code + '\n';
+      if (options.sourceMaps) {
+        if (mapBuffer) {
+          map.addBufferMappings(mapBuffer, lineOffset);
+        } else {
+          map.addEmptyMap(
+            path
+              .relative(options.projectRoot, asset.filePath)
+              .replace(/\\+/g, '/'),
+            code,
+            lineOffset,
+          );
+        }
+
+        lineOffset += countLines(code);
+      }
+    }
+
+    if (options.sourceMaps) {
+      let reference = await getSourceMapReference(map);
+      if (reference != null) {
+        contents += '/*# sourceMappingURL=' + reference + ' */\n';
+      }
+    }
+
+    ({contents, map} = replaceURLReferences({
+      bundle,
+      bundleGraph,
+      contents,
+      map,
+    }));
+
     return replaceInlineReferences({
       bundle,
       bundleGraph,
-      contents: replaceURLReferences({
-        bundle,
-        bundleGraph,
-        contents: outputs.map(output => output).join('\n'),
-      }).contents,
+      contents,
       getInlineBundleContents,
       getInlineReplacement: (dep, inlineType, contents) => ({
         from: dep.id,
         to: contents,
       }),
+      map,
     });
   },
 });
diff --git a/packages/packagers/js/src/JSPackager.js b/packages/packagers/js/src/JSPackager.js
index 1fd4f006695..1b14b014e47 100644
--- a/packages/packagers/js/src/JSPackager.js
+++ b/packages/packagers/js/src/JSPackager.js
@@ -148,7 +148,6 @@ export default new Packager({
         wrapped += ']';
 
         if (options.sourceMaps) {
-          let lineCount = countLines(output);
           if (mapBuffer) {
             map.addBufferMappings(mapBuffer, lineOffset);
           } else {
@@ -161,7 +160,7 @@ export default new Packager({
             );
           }
 
-          lineOffset += lineCount + 1;
+          lineOffset += countLines(output) + 1;
         }
         i++;
       }
diff --git a/packages/transformers/css/package.json b/packages/transformers/css/package.json
index 0bcd58baaa5..48dddef3498 100644
--- a/packages/transformers/css/package.json
+++ b/packages/transformers/css/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@parcel/plugin": "^2.0.0-alpha.3.1",
+    "@parcel/source-map": "^2.0.0-alpha.4.9",
     "@parcel/utils": "^2.0.0-alpha.3.1",
     "postcss": "^7.0.5",
     "postcss-value-parser": "^3.3.1",
diff --git a/packages/transformers/css/src/CSSTransformer.js b/packages/transformers/css/src/CSSTransformer.js
index b1a6982eaa2..0dd88911e1f 100644
--- a/packages/transformers/css/src/CSSTransformer.js
+++ b/packages/transformers/css/src/CSSTransformer.js
@@ -3,6 +3,7 @@
 import type {FilePath} from '@parcel/types';
 import type {Container, Node} from 'postcss';
 
+import SourceMap from '@parcel/source-map';
 import {Transformer} from '@parcel/plugin';
 import {createDependencyLocation, isURL} from '@parcel/utils';
 import postcss from 'postcss';
@@ -166,7 +167,7 @@ export default new Transformer({
     return [asset];
   },
 
-  generate({ast}) {
+  async generate({asset, ast}) {
     let root = ast.program;
 
     // $FlowFixMe
@@ -192,13 +193,27 @@ export default new Transformer({
       root.each((node, index) => convert(root, node, index));
     }
 
-    let code = '';
-    postcss.stringify(root, c => {
-      code += c;
+    let result = await postcss().process(root, {
+      from: asset.filePath,
+      map: {
+        annotation: false,
+        inline: false,
+      },
+      // Pass postcss's own stringifier to it to silence its warning
+      // as we don't want to perform any transformations -- only generate
+      stringifier: postcss.stringify,
     });
 
+    let map;
+    if (result.map != null) {
+      map = new SourceMap();
+      let {mappings, sources, names} = result.map.toJSON();
+      map.addRawMappings(mappings, sources, names);
+    }
+
     return {
-      content: code,
+      content: result.css,
+      map,
     };
   },
 });