Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #209 from slang800/gradients1

small fixes for gradients (another chunk of #192)
  • Loading branch information...
commit 7978531d212f198041d0270820426eabf5c80905 2 parents 760f9f8 + 3c7ac67
@slang800 slang800 authored
View
4 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);
}
}
View
37 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
View
20 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'
+ }
+}
View
6 test/cases/linear-gradient.css
@@ -54,6 +54,12 @@ body {
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%);
cursor: -ms-linear-gradient(40deg, #f00 0, #0f0 100%);
View
3  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
View
6 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;
View
3  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
Please sign in to comment.
Something went wrong with that request. Please try again.