Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix colors() when multiple rgba() calls are in one property value

  • Loading branch information...
commit 3c1260b27b942836738899c66b1dd4013ec13d10 1 parent d862f14
@tj tj authored
View
60 lib/plugins/colors.js
@@ -4,7 +4,7 @@
*/
var parse = require('color-parser')
- , visit = require('../visit');
+ , functions = require('./function');
/**
* Provide color manipulation helpers:
@@ -22,50 +22,16 @@ var parse = require('color-parser')
*/
module.exports = function() {
- return function(style, rework){
- visit.declarations(style, substitute);
- }
+ return functions({
+ rgba: function(color, alpha){
+ if (2 == arguments.length) {
+ var c = parse(color.trim());
+ var args = [c.r, c.g, c.b, alpha];
+ } else {
+ var args = [].slice.call(arguments);
+ }
+
+ return 'rgba(' + args.join(', ') + ')';
+ }
+ });
};
-
-/**
- * Substitute easing functions.
- *
- * @api private
- */
-
-function substitute(declarations) {
- for (var i = 0; i < declarations.length; ++i) {
- var decl = declarations[i];
- var val = decl.value;
- var index = val.indexOf('rgba');
- if (-1 == index) continue;
-
- // grab rgba(...) value
- var rgba = val.slice(index, val.indexOf(')', index));
-
- // arity > 2
- if (rgba.split(',').length > 2) continue;
-
- // color
- var c = rgba.slice(rgba.indexOf('(') + 1, rgba.indexOf(',')).trim();
- c = parse(c);
-
- // alpha
- var a = rgba.slice(rgba.indexOf(',') + 1, rgba.length);
- a = parseFloat(a);
-
- // format
- c = 'rgba('
- + c.r
- + ','
- + c.g
- + ','
- + c.b
- + ','
- + a
- + ')';
-
- // replace
- decl.value = val.replace(rgba + ')', c);
- }
-}
View
6 test/fixtures/colors.css
@@ -4,7 +4,7 @@ button {
}
button {
- border: 1px solid rgba ( #fc0 , .2 );
+ border: 1px solid rgba( #fc0 , .2);
}
button {
@@ -17,4 +17,8 @@ button {
button {
background: rgba(white, .2)
+}
+
+button {
+ background: linear-gradient(rgba(black, .5), rgba(black, .7))
}
View
12 test/fixtures/colors.out.css
@@ -1,13 +1,13 @@
button {
- background: rgba(204,204,204,0.5)
+ background: rgba(204, 204, 204, .5)
}
button {
- border: 1px solid rgba(255,204,0,0.2)
+ border: 1px solid rgba(255, 204, 0, .2)
}
button {
- background: rgba(255,204,0,0.2)
+ background: rgba(255, 204, 0, 0.2)
}
button {
@@ -15,5 +15,9 @@ button {
}
button {
- background: rgba(255,255,255,0.2)
+ background: rgba(255, 255, 255, .2)
+}
+
+button {
+ background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .7))
}
Please sign in to comment.
Something went wrong with that request. Please try again.