handles css urls

Author: aruntk

packages/synthesis-compiler/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'mwc:synthesis-compiler',
-  version: '1.2.1',
+  version: '1.3.0',
   summary: 'Synthesis is meteor + polymer',
   git: 'https://github.com/meteorwebcomponents/synthesis',
   documentation: 'README.md',

packages/synthesis-compiler/synthesis-compiler.js

@@ -165,12 +165,8 @@ class DissectHtml {
           const defChild = child;
           const attrs = _.map(defChild.attrs, (o) => {
             // all src values without [[*]] and {{*}}
-            if ((o.name === 'src' || o.name === 'src$') && o.value && !o.value.match(/({{|\[\[)\s*[\w\.]+\s*(}}|\]\])/g)) {
-              const url = self.importableUrl(o.value);
-              // console.log(defChild.nodeName, o, url);
-              if (url) {
-                o.value = path.resolve(path.dirname(`/${self.sourceName}`), o.value);
-              }
+            if (o.name === 'src' || o.name === 'src$') {
+              o.value = self._changeRelUrl(o.value);
             }
             return o;
           });
@@ -186,7 +182,7 @@ class DissectHtml {
     return processedNodes.concat(pushNodes);
   }
   processStyle(css) {
-    return polyclean.stripCss(css);
+    return this._changeCssUrls(polyclean.stripCss(css));
   }
   processScripts(child) {
     const self = this;
@@ -268,13 +264,38 @@ class DissectHtml {
     }
     return null;
   }
+  _changeRelUrl(inpUrl) {
+    // avoids [[prop]] and {{prop}}
+    if (inpUrl && !inpUrl.match(/({{|\[\[)\s*[\w\.]+\s*(}}|\]\])/g)) {
+      // avoids absolute & remote urls
+      const url = this.importableUrl(inpUrl);
+      if (url) {
+        return path.resolve(path.dirname(`/${this.sourceName}`), inpUrl);
+      }
+    }
+    return inpUrl;
+
+  }
+  _changeCssUrls(text) {
+    const self = this;
+    // to get -> property: url(filepath)
+
+    const processed = text.replace(/url\(.*?\)/ig, function(a) {
+      // to get -> filepath from url(filepath), url('filepath') and url("filepath")
+      const processedUrl = a.replace(/\(['|"]?([^)]+?)['|"]?\)/, function(_url, inpUrl) {
+        return `(${self._changeRelUrl(inpUrl)})`;
+      });
+      return processedUrl;
+    });
+    return processed;
+  }
   processCssImport(hrefAttr, child) {
     const url = path.resolve(this.sourceName, '../', hrefAttr.value);
     // checks if file exists
     if (fs.existsSync(url)) {
       const contents = fs.readFileSync(url, 'utf8');
       // css is inlined
-      const minified = this.processStyle(contents);
+      const minified = this._changeCssUrls(this.processStyle(contents));
       if (minified) {
         // link tag is replaced with style tag
         return _.extend(child, {

packages/synthesis-jade/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'mwc:synthesis-jade',
-  version: '1.2.4',
+  version: '1.3.0',
   summary: 'Synthesis is meteor + polymer',
   git: 'https://github.com/meteorwebcomponents/synthesis',
   documentation: 'README.md',
@@ -25,7 +25,7 @@ Package.onTest((api) => {
 Package.registerBuildPlugin({
   name: 'synthesis-jade',
   use: [
-    'mwc:synthesis-compiler@1.2.1',
+    'mwc:synthesis-compiler@1.3.0',
     '[email protected]',
     '[email protected]',
   ],

packages/synthesis/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'mwc:synthesis',
-  version: '1.2.4',
+  version: '1.3.0',
   summary: 'Synthesis is meteor + polymer',
   git: 'https://github.com/meteorwebcomponents/synthesis',
   documentation: 'README.md',
@@ -25,7 +25,7 @@ Package.onTest((api) => {
 Package.registerBuildPlugin({
   name: 'synthesis',
   use: [
-    'mwc:synthesis-compiler@1.2.1',
+    'mwc:synthesis-compiler@1.3.0',
     '[email protected]',
     '[email protected]',
   ],