Changed: Add postcss message when color function contains a var() (postcss#36)

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'.

Author: drewbourne

index.js

@@ -16,6 +16,19 @@ module.exports = postcss.plugin("postcss-color-function", function() {
         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
+      }
+
       try {
         decl.value = helpers.try(function transformColorValue() {
           return transformColor(decl.value)

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)));
+}

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)));
+}

test/index.js

@@ -51,3 +51,49 @@ test("logs warning when color() value cannot be parsed", 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()
+    })
+})