Merge pull request #207 from slang800/gradients

Gradients

lib/nib/gradients.styl

@@ -15,19 +15,6 @@ replace(expr, str, val)
         expr[i] = val
   expr
 
-/*
- * Normalize gradient points.
- */
-
-grad-point(pos)
-  if length(pos) == 1
-    return left pos if pos in (top bottom)
-    return pos top if pos in (left right)
-  else if pos[0] in (top bottom)
-    pos[1] pos[0]
-  else
-    pos
-
 /*
  * Implicit color stop position.
  */
@@ -76,13 +63,6 @@ join-stops(stops, translate)
     str += translate(color, pos)
   unquote(str)
 
-/*
- * Legacy Webkit color stop.
- */
-
-webkit-stop(color, pos)
-  'color-stop(%d, %s)' % (pos / 100 color)
-
 /*
  * Standard color stop.
  */
@@ -105,35 +85,18 @@ std-stop(color, pos)
 
 linear-gradient(start, stops...)
   error('color stops required') unless length(stops)
-  prop = current-property[0]
-  val = current-property[1]
-
-  if start is a 'color'
-    unshift(stops, start)
-    start = top
+  // if current-property
+  //   if start is a 'color'
+  //     unshift(stops, start)
+  //     start = top
+  //   if start[0] is a 'unit'
+  //     if has-canvas
+  //       img = linear-gradient-image(start, stops)
+  //       add-property(prop, replace(val, '__CALL__', img))
+  //     start = start[1]
 
   stops = normalize-stops(stops)
-
-  // gradient image
-  if start[0] is a 'unit'
-    if has-canvas
-      img = linear-gradient-image(start, stops)
-      add-property(prop, replace(val, '__CALL__', img))
-    start = start[1]
-
-  // legacy webkit
-  end = grad-point(opposite-position(start))
-  webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop))
-  add-property(prop, replace(val, '__CALL__', webkit-legacy))
-
-  // vendor prefixed
   stops = join-stops(stops, std-stop)
-  for prefix in vendor-prefixes
-    unless prefix == official
-      gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops)
-      add-property(prop, replace(val, '__CALL__', gradient))
-
-  // standard
   'linear-gradient(%s, %s)' % (start stops)
 
 /*

lib/nib/vendor.styl

@@ -45,24 +45,27 @@ literal-join(string, literals)
   return result
 
 /*
- * Replacing one value with another
+ * Prepend matched argument with given prefix
+ * set strict to false to check as “begin with”
  */
 
-replace-args(args,argument,val)
+prepend-args(args, prefix, argument, strict = true)
   result = ()
   // Checking if there are values divided by comma
   if is-comma-list(args)
     for subargs in args
       subresult = ()
       for arg in subargs
-        arg = unquote(val) if arg == argument
+        if (arg == argument and strict) or (match('^'+s('%s',argument),''+arg) and !strict)
+          arg = s('%s%s',unquote(prefix),arg)
         push(subresult, arg)
       subresult = literal-join(' ', subresult) if length(subresult) > 1
       push(result, subresult)
     result = literal-join(', ', result)
   else
     for arg in args
-      arg = unquote(val) if arg == argument
+      if (arg == argument and strict) or (match('^'+s('%s',argument),''+arg) and !strict)
+        arg = s('%s%s',unquote(prefix),arg)
       push(result, arg)
   return result
 
@@ -72,7 +75,7 @@ replace-args(args,argument,val)
  * or those which should be ignored.
  */
 
-vendor(prop, args, only = null, ignore = null)
+vendor(prop, args, only = null, ignore = null, vendor-property = true)
   for prefix in vendor-prefixes
     unless (only and !(prefix in only)) or (ignore and prefix in ignore)
       if official == prefix
@@ -81,8 +84,14 @@ vendor(prop, args, only = null, ignore = null)
         newargs = args
         // Adjusting the args if needed
         if prop in ('transition' 'transition-property')
-          newargs = replace-args(args, transform, '-' + prefix + '-transform')
-        {'-' + prefix + '-' + prop}: newargs
+          newargs = prepend-args(args, '-' + prefix + '-', transform)
+        if prop in ('border-image' 'background' 'background-image' 'cursor' 'list-style' 'list-style-image')
+          newargs = prepend-args(args, '-' + prefix + '-', linear-gradient, false)
+        newprop = prop
+        newprop = '-' + prefix + '-' + prop if vendor-property
+        // TODO: make the adjustments for differences
+        // between the official syntax and vendor ones
+        {newprop}: newargs
 
 /*
  * Vendorize the given value.
@@ -578,4 +587,38 @@ placeholder()
           pair()
         else if pair is not null && pair[0] is not null
           {pair[0]}: type(pair[1]) == 'string' ? s(pair[1]) : pair[1]
-input-placeholder = placeholder
+input-placeholder = placeholder
+
+/*
+ * Vendor background support (gradients).
+ */
+
+background()
+  if match('-gradient\(', ''+arguments)
+    vendor('background', arguments, vendor-property: false)
+  else
+    background arguments
+
+background-image()
+  if match('-gradient\(', ''+arguments)
+    vendor('background-image', arguments, vendor-property: false)
+  else
+    background-image arguments
+
+cursor()
+  if match('-gradient\(', ''+arguments)
+    vendor('cursor', arguments, vendor-property: false)
+  else
+    cursor arguments
+
+list-style()
+  if match('-gradient\(', ''+arguments)
+    vendor('list-style', arguments, vendor-property: false)
+  else
+    list-style arguments
+
+list-style-image()
+  if match('-gradient\(', ''+arguments)
+    vendor('list-style-image', arguments, vendor-property: false)
+  else
+    list-style-image arguments

test/cases/linear-gradient.css

@@ -1,56 +1,76 @@
 body {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
-  background: -webkit-linear-gradient(top, #fff 0, #000 100%);
-  background: -moz-linear-gradient(top, #fff 0, #000 100%);
-  background: -o-linear-gradient(top, #fff 0, #000 100%);
-  background: -ms-linear-gradient(top, #fff 0, #000 100%);
-  background: linear-gradient(top, #fff 0, #000 100%);
+  background: -webkit-linear-gradient(#fff, #000 100%);
+  background: -moz-linear-gradient(#fff, #000 100%);
+  background: -o-linear-gradient(#fff, #000 100%);
+  background: -ms-linear-gradient(#fff, #000 100%);
+  background: linear-gradient(#fff, #000 100%);
 }
 body {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
   background: -webkit-linear-gradient(top, #fff 0, #000 100%);
   background: -moz-linear-gradient(top, #fff 0, #000 100%);
   background: -o-linear-gradient(top, #fff 0, #000 100%);
   background: -ms-linear-gradient(top, #fff 0, #000 100%);
   background: linear-gradient(top, #fff 0, #000 100%);
 }
 body {
-  background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #fff), color-stop(0.25, #f00), color-stop(0.5, #00f), color-stop(1, #000));
   background: -webkit-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
   background: -moz-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
   background: -o-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
   background: -ms-linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
   background: linear-gradient(top left, #fff 0, #f00 25%, #00f 50%, #000 100%);
 }
 body {
-  background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
   background: -webkit-linear-gradient(bottom right, #fff 0, #000 80%);
   background: -moz-linear-gradient(bottom right, #fff 0, #000 80%);
   background: -o-linear-gradient(bottom right, #fff 0, #000 80%);
   background: -ms-linear-gradient(bottom right, #fff 0, #000 80%);
   background: linear-gradient(bottom right, #fff 0, #000 80%);
 }
 body {
-  background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
   background: -webkit-linear-gradient(right bottom, #fff 0, #000 80%);
   background: -moz-linear-gradient(right bottom, #fff 0, #000 80%);
   background: -o-linear-gradient(right bottom, #fff 0, #000 80%);
   background: -ms-linear-gradient(right bottom, #fff 0, #000 80%);
   background: linear-gradient(right bottom, #fff 0, #000 80%);
 }
 body {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
   background: -webkit-linear-gradient(top, #fff 0, #000 100%);
   background: -moz-linear-gradient(top, #fff 0, #000 100%);
   background: -ms-linear-gradient(top, #fff 0, #000 100%);
   background: -o-linear-gradient(top, #fff 0, #000 100%);
   background: linear-gradient(top, #fff 0, #000 100%);
 }
 body {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000)), #fff;
   background: -webkit-linear-gradient(top, #fff 0, #000 100%), #fff;
   background: -moz-linear-gradient(top, #fff 0, #000 100%), #fff;
   background: -ms-linear-gradient(top, #fff 0, #000 100%), #fff;
   background: -o-linear-gradient(top, #fff 0, #000 100%), #fff;
   background: linear-gradient(top, #fff 0, #000 100%), #fff;
 }
+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% stretch stretch;
+}
+body {
+  cursor: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+  cursor: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+  cursor: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+  cursor: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+  cursor: linear-gradient(40deg, #f00 0, #0f0 100%);
+}
+body {
+  list-style: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style: linear-gradient(40deg, #f00 0, #0f0 100%);
+}
+body {
+  list-style-image: -webkit-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style-image: -moz-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style-image: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style-image: -o-linear-gradient(40deg, #f00 0, #0f0 100%);
+  list-style-image: linear-gradient(40deg, #f00 0, #0f0 100%);
+}

test/cases/linear-gradient.styl

@@ -1,4 +1,5 @@
 
+@import 'nib/vendor'
 @import 'nib/gradients'
 
 body
@@ -22,4 +23,18 @@ body
   background: linear-gradient(top, white, black)
 
 body
-  background: linear-gradient(top, white, black), white
+  background: linear-gradient(top, white, black), white
+
+body
+  border-image: linear-gradient(top, #fff, #000) 20% stretch stretch;
+
+gradient-var = linear-gradient(40deg, red, lime)
+
+body
+  cursor: gradient-var
+
+body
+  list-style: gradient-var
+
+body
+  list-style-image: gradient-var

test/cases/multiple-gradients.css

@@ -0,0 +1,28 @@
+.test1 {
+  background: -webkit-linear-gradient(top, #fff 0, #000 100%), -webkit-linear-gradient(bottom, #000 0, #fff 100%);
+  background: -moz-linear-gradient(top, #fff 0, #000 100%), -moz-linear-gradient(bottom, #000 0, #fff 100%);
+  background: -o-linear-gradient(top, #fff 0, #000 100%), -o-linear-gradient(bottom, #000 0, #fff 100%);
+  background: -ms-linear-gradient(top, #fff 0, #000 100%), -ms-linear-gradient(bottom, #000 0, #fff 100%);
+  background: linear-gradient(top, #fff 0, #000 100%), linear-gradient(bottom, #000 0, #fff 100%);
+}
+.test2 {
+  background: #fff -webkit-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -webkit-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+  background: #fff -moz-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -moz-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+  background: #fff -o-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -o-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+  background: #fff -ms-linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, -ms-linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+  background: #fff linear-gradient(top, #000 0, #fff 100%) 0 0 no-repeat, linear-gradient(bottom, #000 0, #fff 100%) 10px bottom repeat-y;
+}
+.test3 {
+  background-image: -webkit-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -webkit-linear-gradient(bottom, #000 0, #fff 100%);
+  background-image: -moz-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -moz-linear-gradient(bottom, #000 0, #fff 100%);
+  background-image: -o-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -o-linear-gradient(bottom, #000 0, #fff 100%);
+  background-image: -ms-linear-gradient(top, #fff 0, #000 100%), url("a.png"), -ms-linear-gradient(bottom, #000 0, #fff 100%);
+  background-image: linear-gradient(top, #fff 0, #000 100%), url("a.png"), linear-gradient(bottom, #000 0, #fff 100%);
+}
+.test4 {
+  background: -webkit-linear-gradient(bottom, #000 0, #fff 100%), -webkit-linear-gradient(top, #fff 0, #000 100%);
+  background: -moz-linear-gradient(bottom, #000 0, #fff 100%), -moz-linear-gradient(top, #fff 0, #000 100%);
+  background: -o-linear-gradient(bottom, #000 0, #fff 100%), -o-linear-gradient(top, #fff 0, #000 100%);
+  background: -ms-linear-gradient(bottom, #000 0, #fff 100%), -ms-linear-gradient(top, #fff 0, #000 100%);
+  background: linear-gradient(bottom, #000 0, #fff 100%), linear-gradient(top, #fff 0, #000 100%);
+}

test/cases/multiple-gradients.styl

@@ -0,0 +1,23 @@
+
+@import 'nib/vendor'
+@import 'nib/gradients'
+
+.test1
+  background: linear-gradient(top, white, black),
+              linear-gradient(bottom, black, white)
+
+.test2
+  background: #fff \
+  	linear-gradient(top, black, white) 0 0 no-repeat,
+    linear-gradient(bottom, black, white) 10px bottom repeat-y
+
+.test3
+  background-image: linear-gradient(top, white, black),
+              		url(a.png),
+              		linear-gradient(bottom, black, white)
+
+gradient1 = linear-gradient(top, white, black)
+gradient2 = linear-gradient(bottom, black, white)
+
+.test4
+  background: gradient2, gradient1

test/cases/vendor.styl

@@ -1,5 +1,6 @@
 
 @import 'nib/vendor'
+@import 'nib/gradients'
 
 vendor-prefixes = webkit moz official