diff --git a/css-plugin-base-builder.js b/css-plugin-base-builder.js index 551b261..63261ea 100644 --- a/css-plugin-base-builder.js +++ b/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 diff --git a/test/css.builder.spec.js b/test/css.builder.spec.js index 650af19..e887b35 100644 --- a/test/css.builder.spec.js +++ b/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()); diff --git a/test/data/rootRelative.css b/test/data/rootRelative.css new file mode 100644 index 0000000..41db838 --- /dev/null +++ b/test/data/rootRelative.css @@ -0,0 +1,6 @@ +@import "./dep.css"; + +body { + background-color: red; + background-image: url(/path/to/x.png); +}