Fix case when user may have other plugins with similar names (hover-color, for example)

Author: demiazz

index.js

@@ -6,13 +6,15 @@ var balanced = require("balanced-match")
 var colorFn = require("css-color-function")
 var helpers = require("postcss-message-helpers")
 
+var colorFnRegExp = /(^|[^\w\-])color\(/;
+
 /**
  * PostCSS plugin to transform color()
  */
 module.exports = postcss.plugin("postcss-color-function", function() {
   return function(style) {
     style.eachDecl(function transformDecl(decl) {
-      if (!decl.value || decl.value.indexOf("color(") === -1) {
+      if (!decl.value) {
         return
       }
 
@@ -30,11 +32,16 @@ module.exports = postcss.plugin("postcss-color-function", function() {
  * @return {String}        converted declaration value to rgba()
  */
 function transformColor(string, source) {
-  var index = string.indexOf("color(")
-  if (index == -1) {
+  var index = string.search(colorFnRegExp);
+
+  if (index === -1) {
     return string
   }
 
+  // NOTE: regexp search beginning of line of non char symbol between `color(`.
+  //       Offset used for second case.
+  index = index === 0 ? index : index + 1;
+
   var fn = string.slice(index)
   var balancedMatches = balanced("(", ")", fn)
   if (!balancedMatches) {

test/fixtures/color.css

@@ -3,4 +3,8 @@ body {
   background-color: color(red tint(50%));
   border-color: color(hsla(125, 50%, 50%, .4) hue(200));
   border-top-color: color(hwb(270, 10%, 0%) contrast(50%));
+
+  border-bottom-color: hover-color(red);
+
+  border-right-color: hover-color(color(red tint(50%)));
 }

test/fixtures/color.expected.css

@@ -3,4 +3,8 @@ body {
   background-color: rgb(255, 128, 128);
   border-color: rgba(64, 149, 191, 0.4);
   border-top-color: rgb(248, 240, 255);
+
+  border-bottom-color: hover-color(red);
+
+  border-right-color: hover-color(rgb(255, 128, 128));
 }