Permalink
Browse files

Merge pull request #192 from slang800/master

removing legacy webkit gradient syntax & other gradient related improvements
  • Loading branch information...
2 parents 7978531 + 8787f56 commit 98de5f1df59df8a9f94efb8bfb05920489de7833 @slang800 slang800 committed Jul 31, 2013
View
@@ -27,8 +27,6 @@ try {
// ignore
}
-var vendorHelpers = require('./nodes/vendor-helpers')
-
/**
* Library version.
*/
@@ -66,7 +64,5 @@ function plugin() {
} else {
style.define('has-canvas', nodes.false);
}
-
- style.define('gradients-syntax-fix', vendorHelpers);
}
}
@@ -95,9 +95,7 @@ linear-gradient(start, stops...)
// add-property(prop, replace(val, '__CALL__', img))
// start = start[1]
- stops = normalize-stops(stops)
- stops = join-stops(stops, std-stop)
- 'linear-gradient(%s, %s)' % (start stops)
+ unquote('linear-gradient(' + join(', ',arguments) + ')')
/*
* Create a linear gradient image with the given start position
View
@@ -1,3 +1,4 @@
+use('../nodes/vendor-helpers.js')
@import 'config'
/*
@@ -7,13 +8,6 @@
no-wrap = unquote('nowrap')
/*
- * Helper to find out is the list of arguments have commas
- */
-
-is-comma-list()
- return match('\), \(', ''+arguments)
-
-/*
* Helper to find out if a given value is a width
*/
@@ -27,87 +21,27 @@ is-width(val)
return false
/*
- * Literal joining
- */
-
-literal-join(string, literals)
- result = unquote('')
- first = true
- for args in literals
- subresult = unquote('')
- for arg in args
- subresult = subresult arg
- if first
- result = subresult
- first = false
- else
- result = s('%s%s%s', result, unquote(string), subresult)
- return result
-
-/*
- * Modify matched arguments
- * set strict to false to check as “begin with”
- */
-
-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%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%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,
- * or those which should be ignored.
+ * Vendor support for the given prop / arguments, optionally specifying the
+ * only prefixes to utilize, or those which should be ignored.
*/
vendor(prop, args, only = null, ignore = null, vendor-property = true)
+ need_normalize = !vendor-property or prop in ('transition' 'transition-property' 'border-image' 'border-image-slice')
for prefix in vendor-prefixes
unless (only and !(prefix in only)) or (ignore and prefix in ignore)
if official == prefix
- {prop}: args
+ if need_normalize
+ {prop}: normalize(prop,('%s' % args))
+ else
+ {prop}: args
else
- newargs = args
-
- // Transforms in transitions need the prefixes
- if prop in ('transition' 'transition-property')
- 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 = 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
- // between the official syntax and vendor ones
- {newprop}: newargs
+ if need_normalize
+ {newprop}: normalize(prop,('%s' % args),prefix)
+ else
+ {newprop}: args
/*
* Vendorize the given value.
*/
@@ -583,13 +517,13 @@ border-radius()
* // The comma is important
* .placeholder-red
* placeholder(color red,)
- *
+ *
* // We can pass a function
* green-placeholder()
* color green
* .placeholder-green
* placeholder(green-placeholder)
- *
+ *
* // We can pass a hash
* textarea
* placeholder((font-style italic) (font-weight bold) (padding '4px 10px'))
@@ -1,20 +1,79 @@
+var RE_GRADIENT_STOPS = /([\(\,]\s*)(-?(?:\d*\.)?\d+(?:%|px|em))(\s+)((hsl|rgb)a?\([^\)]+\)|#[^\)\,]+)/g
+ , RE_GRADIENT_VAL = /(\(\s*)(?:(-?(\d*\.)?\d+)deg|((to )?(top|bottom|left|right)( (top|bottom|left|right))?))/g
+ , RE_GRADIENT_TYPE = /((repeating-)?(linear|radial)-gradient\()/g
+ , RE_TRANSFORM = /\b(transform)\b/g
+ , RE_FILL_KEYWORD = /\s*\b(fill)\b\s*/g;
+
+var DIRECTIONS = { top: 'bottom', bottom: 'top', left: 'right', right:'left' };
/**
- * Module dependencies.
+ * Expose `normalize`.
*/
-var stylus = require('stylus')
- , nodes = stylus.nodes
- , utils = stylus.utils
+function normalize(property, value, prefix){
+ var result = value.toString()
+ , args;
-/**
- * Expose `gradients-syntax-fix`.
- */
+ /* Fixing the gradients */
+ if (~result.indexOf('gradient(')) {
+
+ /* Normalize color stops */
+ result = result.replace(RE_GRADIENT_STOPS,'$1$4$3$2');
+
+ /* Normalize legacy gradients */
+ result = result.replace(RE_GRADIENT_VAL, function(){
+ args = [].slice.call(arguments, 1);
+ return normalizeGradient(args, prefix);
+ });
+
+ /* Adding prefixes to the legacy gradients */
+ if (prefix) result = result.replace(RE_GRADIENT_TYPE, '-' + prefix + '-$1');
+ }
+
+ /* Adding prefixes to the `transform` values of legacy `transition` property */
+ if (prefix && (property == "'transition'" || property == "'transition-property'")) {
+ result = result.replace(RE_TRANSFORM, '-' + prefix + '-$1');
+ }
-module.exports = function(value) {
- if (value) {
- return 'Hello ' + value.toString().toUpperCase()
+ /* Removing `fill` keyword from the legacy `border-image` property */
+ if (prefix && (property == "'border-image'" || property == "'border-image-slice'")) {
+ result = result.replace(RE_FILL_KEYWORD, ' ');
+ }
+
+ return result;
+}
+
+function normalizeGradient(parts, prefix){
+ /* Fix the degrees to the legacy syntax */
+ var val = parts[0];
+
+ // when the gradients were unprefixed, the w3c changed the way that the
+ // angle direction is interpreted. see:
+ // http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx
+ if (parts[1]) val += (prefix ? parseFloat((Math.abs(450 - parts[1]) % 360).toFixed(3)) : parts[1]) + 'deg';
+
+ /* Fix the directions to the legacy syntax */
+ if (prefix && parts[4]) {
+ // `to top` to `bottom` etc.
+ if (parts[5]) val += DIRECTIONS[parts[5]];
+ if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
+ } else if (!prefix && !parts[4]) {
+ // `top` to `to bottom` etc.
+ if (parts[5]) val += 'to ' + DIRECTIONS[parts[5]];
+ if (parts[6]) val += ' ' + DIRECTIONS[parts[7]];
} else {
- return 'Hello World'
+ if (parts[3]) val += parts[3];
}
+
+ return val;
}
+
+var plugin = function(){
+ return function(style){
+ var nodes = this.nodes;
+ style.define('normalize', function(property, value, prefix) {
+ return new nodes.Ident(normalize(property, value, prefix));
+ });
+ };
+};
+module.exports = plugin;
View
@@ -7,7 +7,7 @@
"url": "git://github.com/visionmedia/nib.git"
},
"dependencies": {
- "stylus": "0.31.x"
+ "stylus": "0.34.x"
},
"devDependencies": {
"connect": "1.x",
Oops, something went wrong.

0 comments on commit 98de5f1

Please sign in to comment.