Changing the vendorize for gradients, border-images and transtions to external js function instead of buggy Stylus hacks, fixes #94

Author: kizu

lib/nib/gradients.styl

@@ -95,9 +95,7 @@ linear-gradient(start, stops...)
   //       add-property(prop, replace(val, '__CALL__', img))
   //     start = start[1]
 
-  stops = normalize-stops(stops)
-  stops = join-stops(stops, std-stop)
-  'linear-gradient(%s, %s)' % (start stops)
+  unquote('linear-gradient(' + join(', ',arguments) + ')')
 
 /*
  * Create a linear gradient image with the given start position

lib/nib/vendor.styl

@@ -6,76 +6,6 @@
 
 no-wrap = unquote('nowrap')
 
-/*
- * Helper to find out is the list of arguments have commas
- */
-
-is-comma-list()
-  return match('\), \(', ''+arguments)
-
-/*
- * Helper to find out if a given value is a width
- */
-
-is-width(val)
-  if auto == val
-    return true
-  else if val && 'unit' == type(val)
-    // Stylus does not short circuit so we need to perform this as a distinct
-    // operation to prevent errors
-    return '' != unit(val)
-  return false
-
-/*
- * Literal joining
- */
-
-literal-join(string, literals)
-  result = unquote('')
-  first = true
-  for args in literals
-    subresult = unquote('')
-    for arg in args
-      subresult = subresult arg
-    if first
-      result = subresult
-      first = false
-    else
-      result = s('%s%s%s', result, unquote(string), subresult)
-  return result
-
-/*
- * Modify matched arguments
- * set strict to false to check as “begin with”
- */
-
-modify-args(args, argument, prefix = '', postfix = '', replace = false, strict = true)
-  result = ()
-  argument = unquote(argument) if type(argument) == 'string'
-  prefix = unquote(prefix)
-  postfix = unquote(postfix)
-
-  // Checking if there are values divided by comma
-  if is-comma-list(args)
-    for subargs in args
-      subresult = ()
-      for arg in subargs
-        if (arg == argument and strict) or (match(''+s('%s',argument),''+arg) and !strict)
-          arg = s('%s%s%s', prefix, replace ? replace : arg, postfix)
-        push(subresult, arg) if arg != unquote('')
-      subresult = literal-join(' ', subresult) if length(subresult) > 1
-      push(result, subresult)
-    result = literal-join(', ', result)
-  else
-    for arg in args
-      if (arg == argument and strict) or (match(''+s('%s',argument),''+arg) and !strict)
-        arg = s('%s%s%s', prefix, replace ? replace : arg, postfix)
-      push(result, arg) if arg != unquote('')
-  return result
-
-remove-args(args, argument, strict = true)
-  return modify-args(args, argument, replace: unquote(''), strict: strict)
-
 /*
  * Vendor support for the given prop / arguments,
  * optionally specifying the only prefixes to utilize,
@@ -91,22 +21,18 @@ vendor(prop, args, only = null, ignore = null, vendor-property = true)
         newargs = args
 
         // Transforms in transitions need the prefixes
-        if prop in ('transition' 'transition-property')
-          newargs = modify-args(newargs, transform, '-' + prefix + '-')
-
-        // Adding prefixes for gradients
-        if prop in ('border-image' 'background' 'background-image' 'cursor' 'list-style' 'list-style-image')
-          newargs = modify-args(newargs, "-gradient\(", '-' + prefix + '-', strict: false)
+        // if prop in ('transition' 'transition-property')
+        //   newargs = modify-args(newargs, transform, '-' + prefix + '-')
 
         // Removing the `fill` from prefixed border-images
-        if prop in ('border-image' 'border-image-slice')
-          newargs = remove-args(newargs, fill)
+        // if prop in ('border-image' 'border-image-slice')
+        //   newargs = remove-args(newargs, fill)
 
         newprop = prop
         newprop = '-' + prefix + '-' + prop if vendor-property
         // TODO: make the adjustments for differences
         // between the official syntax and vendor ones
-        {newprop}: vendorize(newargs)
+        {newprop}: vendorize(prop,('%s' % args),prefix)
 
 /*
  * Vendorize the given value.

lib/nodes/vendor-helpers.js

@@ -11,7 +11,7 @@ var stylus = require('stylus')
  * Expose `vendorize`.
  */
 
-module.exports = function(value) {
+module.exports = function(property,value,prefix) {
   var result = value.toString();
 
   if (result.indexOf('gradient(') > -1) {
@@ -29,6 +29,15 @@ module.exports = function(value) {
       }
       return result;
     });
+    result = result.replace(/((repeating-)?(linear|radial)-gradient\()/g,'-' + prefix + '-$1');
+  }
+
+  if (property == "'transition'" || property == "'transition-property'") {
+    result = result.replace(/\b(transform)\b/g,'-' + prefix + '-$1');
+  }
+
+  if (property == "'border-image'" || property == "'border-image-slice'") {
+    result = result.replace(/\b(fill)\b/g,'');
   }
 
   return new nodes.Ident(result);