Workaround build system issues with url() syntax in CSS files

Author: drarmstr

css/c3.css

@@ -211,12 +211,6 @@ html.grabbing * {
 .c3.butterfly .navigatable .node rect {
   cursor: pointer;
 }
-.c3.butterfly .link path.fade_right {
-  mask: url(#mask_fade_right);
-}
-.c3.butterfly .link path.fade_left {
-  mask: url(#mask_fade_left);
-}
 table.c3.table {
   border-collapse: collapse;
 }

css/c3.less

@@ -305,16 +305,6 @@ html.grabbing, html.grabbing * {
             cursor: pointer;
         }
     }
-
-    .link path {
-      &.fade_right {
-        mask: url(#mask_fade_right);
-      }
-
-      &.fade_left {
-        mask: url(#mask_fade_left);
-      }
-    }
 }
 
 

js/c3-graph.coffee

@@ -582,9 +582,15 @@ class c3.Sankey.Butterfly extends c3.Sankey
                 d3.event.stopPropagation
                 @focus datum
 
+        # Style links that fade out to unrendered nodes
         @paths.all.classed
             fade_left: (link)=> @link_source(link) not of @current_nodes
             fade_right: (link)=> @link_target(link) not of @current_nodes
+        # Workaround packing/build issues for systems that don't like url() syntax in CSS files...
+        @paths.all.attr 'mask', (link)=>
+            if @link_source(link) not of @current_nodes then 'url(#mask_fade_left)'
+            else if @link_target(link) not of @current_nodes then 'url(#mask_fade_right)'
+            else null
 
     _butterfly_layout: =>
         focus_key = @key @focal