diff --git a/index.js b/index.js index 3bd6f41..9a27c7c 100755 --- a/index.js +++ b/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) 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 2076678..e6b8db7 100755 --- a/test/index.js +++ b/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() + }) +})