Merge pull request #27 from studiosciences/master

Retain whitespace before color().  Fix for #26.

Author: MoOx

index.js

@@ -2,7 +2,7 @@
  * Module dependencies.
  */
 var postcss = require("postcss")
-var balanced = require("balanced-match")
+var parser = require("postcss-value-parser")
 var colorFn = require("css-color-function")
 var helpers = require("postcss-message-helpers")
 
@@ -17,7 +17,7 @@ module.exports = postcss.plugin("postcss-color-function", function() {
       }
 
       decl.value = helpers.try(function transformColorValue() {
-        return transformColor(decl.value, decl.source)
+        return transformColor(decl.value)
       }, decl.source)
     })
   }
@@ -29,22 +29,13 @@ module.exports = postcss.plugin("postcss-color-function", function() {
  * @param  {String} string declaration value
  * @return {String}        converted declaration value to rgba()
  */
-function transformColor(string, source) {
-  var index = string.search(/(^|[^\w\-])color\(/)
+function transformColor(string) {
+  return parser(string).walk(function(node) {
+    if (node.type !== "function" || node.value !== "color") {
+      return
+    }
 
-  if (index === -1) {
-    return string
-  }
-
-  // NOTE: regexp search beginning of line of non char symbol before `color(`.
-  //       Offset used for second case.
-  index = index === 0 ? index : index + 1
-
-  var fn = string.slice(index)
-  var balancedMatches = balanced("(", ")", fn)
-  if (!balancedMatches) {
-    throw new Error("Missing closing parentheses in '" + string + "'", source)
-  }
-
-  return string.slice(0, index) + colorFn.convert("color(" + balancedMatches.body + ")") + transformColor(balancedMatches.post)
+    node.value = colorFn.convert(parser.stringify(node))
+    node.type = "word"
+  }).toString()
 }

package.json

@@ -20,10 +20,10 @@
     "index.js"
   ],
   "dependencies": {
-    "balanced-match": "^0.1.0",
     "css-color-function": "^1.2.0",
     "postcss": "^5.0.4",
-    "postcss-message-helpers": "^2.0.0"
+    "postcss-message-helpers": "^2.0.0",
+    "postcss-value-parser": "^3.3.0"
   },
   "devDependencies": {
     "jscs": "^1.6.2",

test/fixtures/color.css

@@ -7,4 +7,6 @@ body {
   border-bottom-color: hover-color(red);
 
   border-right-color: hover-color(color(red tint(50%)));
+
+  border-color: color(#999 a(0.8)) color(#999 a(0.8));
 }

test/fixtures/color.expected.css

@@ -7,4 +7,6 @@ body {
   border-bottom-color: hover-color(red);
 
   border-right-color: hover-color(rgb(255, 128, 128));
+
+  border-color: rgba(153, 153, 153, 0.8) rgba(153, 153, 153, 0.8);
 }