rebase assets url

README.md

@@ -76,6 +76,13 @@ Default: `null`
 
 A function to transform the content of imported files. Take one argument (file content) & should return the modified content.
 
+#### rewriteurls
+
+Type: `Boolean`  
+Default: `true`
+
+If this option is set to true, then relative urls in imported stylesheets will be modified to be relative from the new parent file.
+
 #### Example with some options
 
 ```js

index.js

@@ -7,6 +7,7 @@ var path = require("path")
 var clone = require("clone")
 var postcss = require("postcss")
 var findFile = require("find-file")
+var urlrewrite = require("postcss-urlrewrite");
 var parseImport = require("parse-import")
 
 /**
@@ -34,6 +35,11 @@ function AtImport(options) {
       options.from = styles.rules[0].source.file
     }
 
+    // set rewriteurls to true by default
+    if (options.rewriteurls === undefined) {
+      options.rewriteurls = true;
+    }
+
     // if from available, prepend from directory in the path array
     addInputToPath(options)
 
@@ -95,7 +101,18 @@ function readAtImport(atRule, options) {
   var newStyles = postcss.parse(readFile(resolvedFilename, options.encoding, options.transform || function(value) { return value }), parseOptions)
 
   // recursion: import @import from imported file
-  parseStyles(newStyles, options)
+  parseStyles(newStyles, parseOptions)
+
+  // rewrites relative paths in imported stylesheet rules to new root
+  if (options.rewriteurls) {
+    var urlRewriter = urlrewrite({rules: function(uri) {
+      if (!uri.is("absolute") && uri.path()[0] !== "/") {
+        var modifier = path.relative(path.dirname(options.from), dirname)
+        uri.path(path.join(modifier, uri.path()))
+      }
+    }});
+    urlRewriter(newStyles);
+  }
 
   // wrap rules if the @import have a media query
   if (parsedAtImport.condition && parsedAtImport.condition.length) {

package.json

@@ -24,7 +24,8 @@
     "clone": "^0.1.17",
     "find-file": "^0.1.4",
     "parse-import": "^0.1.3",
-    "postcss": "^2.1.0"
+    "postcss": "^2.1.0",
+    "postcss-urlrewrite": "^0.1.1"
   },
   "devDependencies": {
     "css-whitespace": "^1.1.0",

test/fixtures/dont-rewrite-urls.css

@@ -0,0 +1 @@
+@import "imports/urls.css";

test/fixtures/dont-rewrite-urls.expected.css

@@ -0,0 +1,54 @@
+.one {
+  background: url(relative.png);
+}
+
+.two {
+  background: url(../relative.png);
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url('resources.woff?#iefix&v=3.2.1') format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url(resources.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url("resources.woff") format('woff');
+}
+
+.png { background: url(resources.png); }
+
+.gif { background: url("resources.gif"); }
+
+.jpeg { background: url('resources.jpeg'); }
+
+.jpg { background: url('path/resources.jpg'); }
+
+.svg { background: url('path/resources.svg'); }
+
+.web-one { background: url("http://www.google.com/images/srpr/logo3w.png"); }
+
+.web-two { background: url(http://www.google.com/images/srpr/logo3w.png); }
+
+.web-three { background: url('http://www.google.com/images/srpr/logo3w.png'); }
+
+.absolute-one { background: url("/resources.png"); }
+
+.absolute-two { background: url(/resources.png); }
+
+.absolute-three { background: url('/resources.png'); }
+
+.base64 {
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+}

test/fixtures/imports/relative/deep.urls.css

@@ -0,0 +1,7 @@
+.one {
+  background: url(relative.png);
+}
+
+.two {
+  background: url(../relative.png);
+}

test/fixtures/imports/urls.css

@@ -0,0 +1,48 @@
+@import "relative/deep.urls.css";
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url('resources.woff?#iefix&v=3.2.1') format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url(resources.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url("resources.woff") format('woff');
+}
+
+.png { background: url(resources.png); }
+
+.gif { background: url("resources.gif"); }
+
+.jpeg { background: url('resources.jpeg'); }
+
+.jpg { background: url('path/resources.jpg'); }
+
+.svg { background: url('path/resources.svg'); }
+
+.web-one { background: url("http://www.google.com/images/srpr/logo3w.png"); }
+
+.web-two { background: url(http://www.google.com/images/srpr/logo3w.png); }
+
+.web-three { background: url('http://www.google.com/images/srpr/logo3w.png'); }
+
+.absolute-one { background: url("/resources.png"); }
+
+.absolute-two { background: url(/resources.png); }
+
+.absolute-three { background: url('/resources.png'); }
+
+.base64 {
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+}

test/fixtures/rewrite-urls.css

@@ -0,0 +1 @@
+@import "imports/urls.css";

test/fixtures/rewrite-urls.expected.css

@@ -0,0 +1,54 @@
+.one {
+  background: url(imports/relative/relative.png);
+}
+
+.two {
+  background: url(imports/relative.png);
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url('imports/resources.woff?#iefix&v=3.2.1') format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url(imports/resources.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: normal;
+  src: local('PT Sans'), local('PTSans'), url("imports/resources.woff") format('woff');
+}
+
+.png { background: url(imports/resources.png); }
+
+.gif { background: url("imports/resources.gif"); }
+
+.jpeg { background: url('imports/resources.jpeg'); }
+
+.jpg { background: url('imports/path/resources.jpg'); }
+
+.svg { background: url('imports/path/resources.svg'); }
+
+.web-one { background: url("http://www.google.com/images/srpr/logo3w.png"); }
+
+.web-two { background: url(http://www.google.com/images/srpr/logo3w.png); }
+
+.web-three { background: url('http://www.google.com/images/srpr/logo3w.png'); }
+
+.absolute-one { background: url("/resources.png"); }
+
+.absolute-two { background: url(/resources.png); }
+
+.absolute-three { background: url('/resources.png'); }
+
+.base64 {
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+}

test/index.js

@@ -41,6 +41,10 @@ test("@import", function(t) {
 
   compareFixtures(t, "relative-to-source", "should not need `path` option if `source` option has been passed to postcss", null, {from: "test/fixtures/relative-to-source.css"})
 
+  compareFixtures(t, "rewrite-urls", "should update relaitive asset urls in imported stylesheet", null, {from: "test/fixtures/rewrite-urls.css"})
+
+  compareFixtures(t, "dont-rewrite-urls", "should NOT update relative asset urls in imported stylesheet if `rewriteurls` option is set to false", {rewriteurls: false}, {from: "test/fixtures/rewrite-urls.css"})
+
   t.end()
 })