Gradients1

lib/nib.js

@@ -27,6 +27,8 @@ try {
   // ignore
 }
 
+var vendorHelpers = require('./nodes/vendor-helpers')
+
 /**
  * Library version.
  */
@@ -64,5 +66,7 @@ function plugin() {
     } else {
       style.define('has-canvas', nodes.false);
     }
+
+    style.define('gradients-syntax-fix', vendorHelpers);
   }
 }

lib/nib/vendor.styl

@@ -45,30 +45,37 @@ literal-join(string, literals)
   return result
 
 /*
- * Prepend matched argument with given prefix
+ * Modify matched arguments
  * set strict to false to check as “begin with”
  */
 
-prepend-args(args, prefix, argument, strict = true)
+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',unquote(prefix),arg)
-        push(subresult, arg)
+        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',unquote(prefix),arg)
-      push(result, arg)
+      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,
@@ -82,11 +89,19 @@ vendor(prop, args, only = null, ignore = null, vendor-property = true)
         {prop}: args
       else
         newargs = args
-        // Adjusting the args if needed
+
+        // Transforms in transitions need the prefixes
         if prop in ('transition' 'transition-property')
-          newargs = prepend-args(args, '-' + prefix + '-', transform)
+          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 = prepend-args(args, '-' + prefix + '-', linear-gradient, false)
+          newargs = modify-args(newargs, "-gradient\(", '-' + prefix + '-', strict: false)
+
+        // Removing the `fill` from prefixed border-images
+        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

lib/nodes/vendor-helpers.js

@@ -0,0 +1,20 @@
+
+/**
+ * Module dependencies.
+ */
+
+var stylus = require('stylus')
+  , nodes = stylus.nodes
+  , utils = stylus.utils
+
+/**
+ * Expose `gradients-syntax-fix`.
+ */
+
+module.exports = function(value) {
+  if (value) {
+    return 'Hello ' + value.toString().toUpperCase()
+  } else {
+    return 'Hello World'
+  }
+}

test/cases/linear-gradient.css

@@ -53,6 +53,12 @@ body {
   -o-border-image: -o-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
   border-image: linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
 }
+body {
+  -webkit-border-image: -webkit-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+  -moz-border-image: -moz-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+  -o-border-image: -o-linear-gradient(top, #fff 0, #000 100%) 20% stretch stretch;
+  border-image: linear-gradient(top, #fff 0, #000 100%) 20% fill stretch stretch;
+}
 body {
   cursor: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
   cursor: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);

test/cases/linear-gradient.styl

@@ -28,6 +28,9 @@ body
 body
   border-image: linear-gradient(top, #fff, #000) 20% stretch stretch;
 
+body
+  border-image: linear-gradient(top, #fff, #000) 20% fill stretch stretch;
+
 gradient-var = linear-gradient(40deg, red, lime)
 
 body

test/cases/vendor.css

@@ -150,6 +150,12 @@ section {
   -moz-border-image: url("image.png") 20% stretch stretch;
   border-image: url("image.png") 20% stretch stretch;
 }
+section {
+  -o-border-image: url("image.png") 20% stretch stretch;
+  -webkit-border-image: url("image.png") 20% stretch stretch;
+  -moz-border-image: url("image.png") 20% stretch stretch;
+  border-image: url("image.png") 20% fill stretch stretch;
+}
 p {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;

test/cases/vendor.styl

@@ -79,6 +79,9 @@ button
 section
   border-image: url("image.png") 20% stretch stretch;
 
+section
+  border-image: url("image.png") 20% fill stretch stretch;
+
 p
   hyphens: auto