Fix relative paths in CSS (take 2)

packages/core/integration-tests/test/css.js

@@ -272,21 +272,15 @@ describe('css', function() {
       }
     ]);
 
-    let css = await fs.readFile(
-      path.join(__dirname, '/dist/a/style1.css'),
-      'utf8'
-    );
+    let cssPath = path.join(__dirname, '/dist/a/style1.css');
+    let css = await fs.readFile(cssPath, 'utf8');
 
     assert(css.includes('background-image'), 'includes `background-image`');
     assert(/url\([^)]*\)/.test(css), 'includes url()');
 
     assert(
       await fs.exists(
-        path.join(
-          __dirname,
-          path.dirname('/dist/a/style1.css'),
-          css.match(/url\(([^)]*)\)/)[1]
-        )
+        path.join(path.dirname(cssPath), css.match(/url\(([^)]*)\)/)[1])
       ),
       'path specified in url() exists'
     );

packages/core/integration-tests/test/integration/import-raw-subfolder/foo/test.txt

@@ -0,0 +1 @@
+hi there

packages/core/integration-tests/test/integration/import-raw-subfolder/index.js

@@ -0,0 +1,5 @@
+const url = require('./foo/test.txt');
+
+module.exports = function () {
+  return url;
+};

packages/core/integration-tests/test/javascript.js

@@ -795,6 +795,32 @@ describe('javascript', function() {
     assert(await fs.exists(path.join(__dirname, '/dist/', output())));
   });
 
+  it('should support importing a URL to a raw asset in a subfolder', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/import-raw-subfolder/index.js')
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.js',
+      assets: ['index.js', 'test.txt'],
+      childBundles: [
+        {
+          type: 'map'
+        },
+        {
+          type: 'txt',
+          assets: ['test.txt'],
+          childBundles: []
+        }
+      ]
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output, 'function');
+    assert(/^\/test\.[0-9a-f]+\.txt$/.test(output()));
+    assert(await fs.exists(path.join(__dirname, '/dist/', output())));
+  });
+
   it('should minify JS in production mode', async function() {
     let b = await bundle(path.join(__dirname, '/integration/uglify/index.js'), {
       production: true

packages/core/parcel-bundler/src/Asset.js

@@ -119,11 +119,12 @@ class Asset {
 
     this.addDependency(depName, Object.assign({dynamic: true, resolved}, opts));
 
-    const parsed = URL.parse(url);
-    parsed.pathname = this.options.parser
+    let parsed = URL.parse(url);
+    let name = this.options.parser
       .getAsset(resolved, this.options)
       .generateBundleName();
 
+    parsed.pathname = path.relative(path.dirname(this.relativeName), name);
     return URL.format(parsed);
   }
 
@@ -257,8 +258,7 @@ class Asset {
         // Replace temporary bundle names in the output with the final content-hashed names.
         let newValue = value;
         for (let [name, map] of bundleNameMap) {
-          let mapRelative = path.relative(path.dirname(this.relativeName), map);
-          newValue = newValue.split(name).join(mapRelative);
+          newValue = newValue.split(name).join(map);
         }
 
         // Copy `this.generated` on write so we don't end up writing the final names to the cache.

packages/core/parcel-bundler/test/asset.js

@@ -48,7 +48,7 @@ describe('Asset', () => {
         }
       }
     };
-    const asset = new Asset('test', options);
+    const asset = new Asset('/root/dir/test', options);
 
     it('should ignore urls', () => {
       const url = 'https://parceljs.org/assets.html';
@@ -63,6 +63,11 @@ describe('Asset', () => {
       assert.strictEqual(asset.addURLDependency('foo'), bundleName);
     });
 
+    it('should generate relative path', () => {
+      const asset = new Asset('/root/dir/test/baz', options);
+      assert.strictEqual(asset.addURLDependency('foo'), '../' + bundleName);
+    });
+
     it('should preserve query and hash', () => {
       assert.strictEqual(
         asset.addURLDependency('foo#bar'),