diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js index ac8db41d712..c022343cac8 100644 --- a/packages/core/integration-tests/test/css.js +++ b/packages/core/integration-tests/test/css.js @@ -213,6 +213,54 @@ describe('css', function() { ); }); + it('should support linking to assets in parent folders with url() from CSS', async function() { + let b = await bundle( + [ + path.join(__dirname, '/integration/css-url-relative/src/a/style1.css'), + path.join(__dirname, '/integration/css-url-relative/src/b/style2.css') + ], + { + production: true, + sourceMaps: false + } + ); + + await assertBundleTree(b, [ + { + type: 'css', + assets: ['style1.css'], + childBundles: [ + { + type: 'png' + } + ] + }, + { + type: 'css', + assets: ['style2.css'] + } + ]); + + let css = await fs.readFile( + path.join(__dirname, '/dist/a/style1.css'), + '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 specified in url() exists' + ); + }); + it('should support transforming with postcss', async function() { let b = await bundle(path.join(__dirname, '/integration/postcss/index.js')); diff --git a/packages/core/integration-tests/test/integration/css-url-relative/src/a/style1.css b/packages/core/integration-tests/test/integration/css-url-relative/src/a/style1.css new file mode 100644 index 00000000000..8ad6f805d0d --- /dev/null +++ b/packages/core/integration-tests/test/integration/css-url-relative/src/a/style1.css @@ -0,0 +1,3 @@ +body { + background-image: url('../foo.png'); +} diff --git a/packages/core/integration-tests/test/integration/css-url-relative/src/b/style2.css b/packages/core/integration-tests/test/integration/css-url-relative/src/b/style2.css new file mode 100644 index 00000000000..b05faf8ead0 --- /dev/null +++ b/packages/core/integration-tests/test/integration/css-url-relative/src/b/style2.css @@ -0,0 +1,3 @@ +body { + color: red; +} diff --git a/packages/core/integration-tests/test/integration/css-url-relative/src/foo.png b/packages/core/integration-tests/test/integration/css-url-relative/src/foo.png new file mode 100644 index 00000000000..8a1daa0121d Binary files /dev/null and b/packages/core/integration-tests/test/integration/css-url-relative/src/foo.png differ diff --git a/packages/core/parcel-bundler/src/Asset.js b/packages/core/parcel-bundler/src/Asset.js index 3b3c11a7668..92b443a021b 100644 --- a/packages/core/parcel-bundler/src/Asset.js +++ b/packages/core/parcel-bundler/src/Asset.js @@ -249,7 +249,8 @@ class Asset { // Replace temporary bundle names in the output with the final content-hashed names. let newValue = value; for (let [name, map] of bundleNameMap) { - newValue = newValue.split(name).join(map); + let mapRelative = path.relative(path.dirname(this.relativeName), map); + newValue = newValue.split(name).join(mapRelative); } // Copy `this.generated` on write so we don't end up writing the final names to the cache.