Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Gradients1 #209

Merged
merged 5 commits into from

3 participants

Sean Lang Roman Komarov Mikhail Korepanov
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 30, 2013
  1. Roman Komarov Sean Lang

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

    kizu authored slang800 committed
    …age` with `fill`
  2. Roman Komarov Sean Lang

    Added basic support for radial gradients and one basic test

    kizu authored slang800 committed
  3. Roman Komarov Sean Lang

    More stable checks on gradients

    kizu authored slang800 committed
  4. Mikhail Korepanov Sean Lang

    Example for the plugin

    Panya authored slang800 committed
  5. Roman Komarov Sean Lang

    Renamed template for plugin

    kizu authored slang800 committed
This page is out of date. Refresh to see the latest.
4 lib/nib.js
View
@@ -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);
}
}
37 lib/nib/vendor.styl
View
@@ -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
20 lib/nodes/vendor-helpers.js
View
@@ -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'
+ }
+}
6 test/cases/linear-gradient.css
View
@@ -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%);
3  test/cases/linear-gradient.styl
View
@@ -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
6 test/cases/vendor.css
View
@@ -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;
3  test/cases/vendor.styl
View
@@ -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.