From d518cb55497cb71634f601432f0855d34d21896f Mon Sep 17 00:00:00 2001
From: Drew Bourne <drew.bourne@capitalone.com>
Date: Thu, 12 Jan 2017 15:05:47 -0500
Subject: [PATCH] Add postcss message when color function contains a var()

Custom properties cannot be resolved by `css-color-function`.
This change skips color functions that contain `var(` and adds
a message to the postcss `result.messages`
with type 'skipped-color-function-with-custom-property'.
---
 index.js                                      | 15 +++++-
 .../fixtures/color-with-custom-properties.css |  6 +++
 .../color-with-custom-properties.expected.css |  6 +++
 test/index.js                                 | 46 +++++++++++++++++++
 4 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/color-with-custom-properties.css
 create mode 100644 test/fixtures/color-with-custom-properties.expected.css

diff --git a/index.js b/index.js
index 295b538..b411159 100755
--- a/index.js
+++ b/index.js
@@ -10,12 +10,25 @@ var helpers = require("postcss-message-helpers")
  * PostCSS plugin to transform color()
  */
 module.exports = postcss.plugin("postcss-color-function", function() {
-  return function(style) {
+  return function(style, result) {
     style.walkDecls(function transformDecl(decl) {
       if (!decl.value || decl.value.indexOf("color(") === -1) {
         return
       }
 
+      if (decl.value.indexOf("var(") !== -1) {
+        result.messages.push({
+          plugin: "postcss-color-function",
+          type: "skipped-color-function-with-custom-property",
+          word: decl.value,
+          message:
+            "Skipped color function with custom property `" +
+            decl.value +
+            "`"
+        })
+        return
+      }
+
       decl.value = helpers.try(function transformColorValue() {
         return transformColor(decl.value)
       }, decl.source)
diff --git a/test/fixtures/color-with-custom-properties.css b/test/fixtures/color-with-custom-properties.css
new file mode 100644
index 0000000..e4dd85c
--- /dev/null
+++ b/test/fixtures/color-with-custom-properties.css
@@ -0,0 +1,6 @@
+body {
+  color: color(var(--red));
+  color: color(var(--red) tint(50%));
+  color: color(var(--red) tint(var(--tintPercent)));
+  color: color(rgb(255, 0, 0) tint(var(--tintPercent)));
+}
diff --git a/test/fixtures/color-with-custom-properties.expected.css b/test/fixtures/color-with-custom-properties.expected.css
new file mode 100644
index 0000000..e4dd85c
--- /dev/null
+++ b/test/fixtures/color-with-custom-properties.expected.css
@@ -0,0 +1,6 @@
+body {
+  color: color(var(--red));
+  color: color(var(--red) tint(50%));
+  color: color(var(--red) tint(var(--tintPercent)));
+  color: color(rgb(255, 0, 0) tint(var(--tintPercent)));
+}
diff --git a/test/index.js b/test/index.js
index e12e995..2049bff 100755
--- a/test/index.js
+++ b/test/index.js
@@ -32,3 +32,49 @@ test("throw errors", function(t) {
 
   t.end()
 })
+
+test("logs message when color() contains var() custom property", function(t) {
+  postcss(plugin()).process(read(filename("fixtures/color-with-custom-properties")))
+    .then(function(result) {
+      const expectedWords = [
+        "color(var(--red))",
+        "color(var(--red) tint(50%))",
+        "color(var(--red) tint(var(--tintPercent)))",
+        "color(rgb(255, 0, 0) tint(var(--tintPercent)))"
+      ]
+
+      t.equal(
+        result.messages.length,
+        expectedWords.length,
+        "expected a message every time a color function is skipped"
+      )
+
+      result.messages.forEach(function(message, i) {
+        t.equal(
+          message.type,
+          "skipped-color-function-with-custom-property",
+          "expected `message.type` to indicate reason for message"
+        )
+
+        t.equal(
+          message.plugin,
+          "postcss-color-function",
+          "expected `message.plugin` to match this plugin's name"
+        )
+
+        t.equal(
+          message.word,
+          expectedWords[i],
+          "expected `message.word` to contain declaration value"
+        )
+
+        t.equal(
+          message.message,
+          "Skipped color function with custom property `" + expectedWords[i] + "`",
+          "expected `message.message` to contain reason for message"
+        )
+      })
+
+      t.end()
+    })
+})