Add preserveCustomProps option to preserve custom properties

Author: ar53n

README.md

@@ -6,11 +6,10 @@
 
 **⚠️ `color-mod()` has been removed from [Color Module Level 4 specification](https://www.w3.org/TR/css-color-4/#changes-from-20160705).**
 
-
 ## Installation
 
 ```console
-$ npm install postcss-color-function
+npm install postcss-color-function
 ```
 
 ## Usage
@@ -25,8 +24,10 @@ var colorFunction = require("postcss-color-function")
 var css = fs.readFileSync("input.css", "utf8")
 
 // process css
+// set preserveCustomProps to `false` by default `true`
+//for delete declarations with custom properties
 var output = postcss()
-  .use(colorFunction())
+  .use(colorFunction({preserveCustomProps: true}))
   .process(css)
   .css
 ```

index.js

@@ -6,17 +6,27 @@ var parser = require("postcss-value-parser")
 var colorFn = require("css-color-function")
 var helpers = require("postcss-message-helpers")
 
+var defaultOptions = {
+  preserveCustomProps: true,
+}
+
 /**
  * PostCSS plugin to transform color()
  */
-module.exports = postcss.plugin("postcss-color-function", function() {
+module.exports = postcss.plugin("postcss-color-function", function(options) {
+  options = Object.assign({}, defaultOptions, options)
+
   return function(style, result) {
     style.walkDecls(function transformDecl(decl) {
       if (!decl.value || decl.value.indexOf("color(") === -1) {
         return
       }
 
       if (decl.value.indexOf("var(") !== -1) {
+        if (!options.preserveCustomProps) {
+          decl.remove()
+          return
+        }
         result.messages.push({
           plugin: "postcss-color-function",
           type: "skipped-color-function-with-custom-property",
@@ -27,7 +37,7 @@ module.exports = postcss.plugin("postcss-color-function", function() {
             "`",
         })
         return
-      }
+      } 
 
       try {
         decl.value = helpers.try(function transformColorValue() {

package.json

@@ -24,12 +24,13 @@
   },
   "devDependencies": {
     "eslint": "^3.19.0",
+    "faucet": "0.0.1",
     "npmpub": "^3.1.0",
-    "tape": "^3.0.0"
+    "tape": "^4.10.1"
   },
   "scripts": {
     "lint": "eslint *.js index.js ./test/",
-    "test": "npm run lint && tape test",
+    "test": "npm run lint && tape test | faucet",
     "release": "npmpub"
   }
 }

test/fixtures/delete-custom-properties.css

@@ -0,0 +1,7 @@
+body {
+  color: color(var(--red));
+  color: color(var(--red) tint(50%));
+  background-color: color(red tint(50%));
+  color: color(var(--red) tint(var(--tintPercent)));
+  color: color(rgb(255, 0, 0) tint(var(--tintPercent)));
+}

test/fixtures/delete-custom-properties.expected.css

@@ -0,0 +1,3 @@
+body {
+  background-color: rgb(255, 128, 128);
+}

test/index.js

@@ -20,7 +20,7 @@ function compareFixtures(t, name, msg, opts, postcssOpts) {
   var actual = postcss().use(plugin(opts))
     .process(read(postcssOpts.from), postcssOpts).css
   var expected = read(filename("fixtures/" + name + ".expected"))
-  fs.writeFile(filename("fixtures/" + name + ".actual"), actual)
+  fs.writeFileSync(filename("fixtures/" + name + ".actual"), actual)
   t.equal(actual, expected, msg)
 }
 
@@ -106,3 +106,41 @@ test("logs message when color() contains var() custom property", function(t) {
     t.end()
   })
 })
+
+test(
+  "test delete custom properties with option preserveCustomProps `false`", 
+  function(t) {
+    postcss(plugin({preserveCustomProps : false})).process(
+      read(filename("fixtures/delete-custom-properties"))
+    ).then(function(result) {
+      var expectedDeclaration = [{
+        prop: "background-color",
+        value: "rgb(255, 128, 128)",
+      }]
+      // check left rules in body after clear
+      var declNodes = result.root.nodes[0].nodes
+      t.equal(
+        declNodes.length,
+        expectedDeclaration.length,
+        "expected " + expectedDeclaration.length +
+        " declaration length but got " + declNodes.length
+      )
+
+      t.equal(
+        declNodes[0].prop,
+        expectedDeclaration[0].prop,
+        "expected declaration with "+ expectedDeclaration[0].prop +
+        " property but got " + declNodes[0].prop
+      )
+
+      t.equal(
+        declNodes[0].value,
+        expectedDeclaration[0].value,
+        "expected declaration with "+ expectedDeclaration[0].value +
+        " value but got " + declNodes[0].value
+      )
+
+      t.end()
+    })
+  }
+)