Correctly build dependency URLs (for CSS) (#2740)

parcel-bundler · Mar 12, 2019 · 68701f6 · 68701f6
1 parent 161cd27
commit 68701f6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js
@@ -166,7 +166,7 @@ describe('css', function() {
       path.join(__dirname, '/dist/index.css'),
       'utf8'
     );
-    assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css));
+    assert(/url\("\/test\.[0-9a-f]+\.woff2"\)/.test(css));
     assert(css.includes('url("http://google.com")'));
     assert(css.includes('.index'));
     assert(css.includes('url("data:image/gif;base64,quotes")'));
@@ -179,7 +179,7 @@ describe('css', function() {
         path.join(
           __dirname,
           '/dist/',
-          css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1]
+          css.match(/url\("(\/test\.[0-9a-f]+\.woff2)"\)/)[1]
         )
       )
     );
@@ -225,7 +225,10 @@ describe('css', function() {
       path.join(__dirname, '/dist/index.css'),
       'utf8'
     );
-    assert(/url\(test\.[0-9a-f]+\.woff2\)/.test(css), 'woff ext found in css');
+    assert(
+      /url\(\/test\.[0-9a-f]+\.woff2\)/.test(css),
+      'woff ext found in css'
+    );
     assert(css.includes('url(http://google.com)'), 'url() found');
     assert(css.includes('.index'), '.index found');
     assert(css.includes('url("data:image/gif;base64,quotes")'));
@@ -238,7 +241,7 @@ describe('css', function() {
         path.join(
           __dirname,
           '/dist/',
-          css.match(/url\((test\.[0-9a-f]+\.woff2)\)/)[1]
+          css.match(/url\((\/test\.[0-9a-f]+\.woff2)\)/)[1]
         )
       )
     );
@@ -282,11 +285,7 @@ describe('css', function() {
 
     assert(
       await fs.exists(
-        path.join(
-          __dirname,
-          path.dirname('/dist/a/style1.css'),
-          css.match(/url\(([^)]*)\)/)[1]
-        )
+        path.join(__dirname, 'dist', css.match(/url\(([^)]*)\)/)[1])
       ),
       'path specified in url() exists'
     );

diff --git a/packages/core/integration-tests/test/sass.js b/packages/core/integration-tests/test/sass.js
@@ -188,7 +188,7 @@ describe('sass', function() {
       path.join(__dirname, '/dist/index.css'),
       'utf8'
     );
-    assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css));
+    assert(/url\("\/test\.[0-9a-f]+\.woff2"\)/.test(css));
     assert(css.includes('url("http://google.com")'));
     assert(css.includes('.index'));
 
@@ -197,7 +197,7 @@ describe('sass', function() {
         path.join(
           __dirname,
           '/dist/',
-          css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1]
+          css.match(/url\("(\/test\.[0-9a-f]+\.woff2)"\)/)[1]
         )
       )
     );

diff --git a/packages/core/parcel-bundler/src/Asset.js b/packages/core/parcel-bundler/src/Asset.js
@@ -257,8 +257,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.

diff --git a/packages/core/parcel-bundler/src/assets/CSSAsset.js b/packages/core/parcel-bundler/src/assets/CSSAsset.js
@@ -6,6 +6,8 @@ const CssSyntaxError = require('postcss/lib/css-syntax-error');
 const SourceMap = require('../SourceMap');
 const loadSourceMap = require('../utils/loadSourceMap');
 const path = require('path');
+const urlJoin = require('../utils/urlJoin');
+const isURL = require('../utils/is-url');
 
 const URL_RE = /url\s*\("?(?![a-z]+:)/;
 const IMPORT_RE = /@import/;
@@ -91,6 +93,9 @@ class CSSAsset extends Asset {
             let url = this.addURLDependency(node.nodes[0].value, {
               loc: decl.source.start
             });
+            if (!isURL(url)) {
+              url = urlJoin(this.options.publicURL, url);
+            }
             dirty = node.nodes[0].value !== url;
             node.nodes[0].value = url;
           }