Merge pull request #138 from papandreou/fix/rootRelativeUrls

Fix root relative urls when there's no browserRootURL setting

Author: guybedford

css-plugin-base-builder.js

@@ -122,7 +122,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) {
     }
   }), atUrl({
     url: function(fileName, decl, from, dirname, to, options, result) {
-      if ((absUrl(fileName) && fileName.charAt(0) !== '/') || fileName.match(/^%23/))
+      if ((absUrl(fileName) && (!loader.browserRootURL || fileName.charAt(0) !== '/')) || fileName.match(/^%23/))
         return fileName;
 
       // dirname may be renormalized to cwd

test/css.builder.spec.js

@@ -25,6 +25,41 @@ describe('CSS Builder', function() {
 			});
 		});
 
+		describe('with a browserRootURL config', function () {
+			it('should preprend it to a relative url(...) reference', function () {
+				var builder = new Builder();
+				builder.config(System.getConfig());
+				builder.config({
+					browserRootURL: 'https://example.com/',
+					rootURL: './test'
+				});
+				return builder.compile('test/data/test.css!', {minify: false}).then((results) => {
+					return expect(results.source).to.contain("body{background-color:red;background-image:url(https://example.com/data/x.png)}");
+				});
+			});
+
+			it('should preprend it to a root-relative url(...) reference', function () {
+				var builder = new Builder();
+				builder.config(System.getConfig());
+				builder.config({
+					browserRootURL: 'https://example.com/',
+					rootURL: './test'
+				});
+				return builder.compile('test/data/rootRelative.css!', {minify: false}).then((results) => {
+					return expect(results.source).to.contain("body{background-color:red;background-image:url(https://example.com/path/to/x.png)}");
+				});
+			});
+		});
+
+		// https://github.com/systemjs/plugin-css/pull/135#commitcomment-24415595
+		it('should handle a root-relative url when no rootURL and no browserRootURL are configured', function () {
+			var builder = new Builder();
+			builder.config(System.getConfig());
+			return builder.compile('test/data/rootRelative.css!', {minify: false}).then((results) => {
+				return expect(results.source).to.contain("body{background-color:red;background-image:url(/path/to/x.png)}");
+			});
+		});
+
 		it('Should support buildCSS: false', function() {
 			var builder = new Builder();
 			builder.config(System.getConfig());

test/data/rootRelative.css

@@ -0,0 +1,6 @@
+@import "./dep.css";
+
+body {
+  background-color: red;
+  background-image: url(/path/to/x.png);
+}