Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Gradients1 #209

Merged
merged 5 commits into from

3 participants

@slang800
Collaborator

Another chunk of #192.

@slang800 slang800 merged commit 7978531 into tj:master

1 check passed

Details default The Travis CI build passed
@slang800 slang800 deleted the unknown repository branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 30, 2013
  1. @kizu @slang800

    Changed arguments-modifying functions, fixed the case with `border-im…

    kizu authored slang800 committed
    …age` with `fill`
  2. @kizu @slang800

    Added basic support for radial gradients and one basic test

    kizu authored slang800 committed
  3. @kizu @slang800

    More stable checks on gradients

    kizu authored slang800 committed
  4. @Panya @slang800

    Example for the plugin

    Panya authored slang800 committed
  5. @kizu @slang800

    Renamed template for plugin

    kizu authored slang800 committed
This page is out of date. Refresh to see the latest.
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
Something went wrong with that request. Please try again.