From 74bb4886d6b8cd9f53201a97d5ab51a762844a13 Mon Sep 17 00:00:00 2001
From: Alex Stephen <alexstephen@google.com>
Date: Fri, 14 Jun 2019 14:51:54 -0700
Subject: [PATCH] use scalar-color function instead of other color adjustment
 functions

---
 .../README.md                                 | 74 +++++++++++++++
 .../__tests__/index.js                        | 93 +++++++++++++++++++
 .../function-scalar-color-use-always/index.js | 52 +++++++++++
 src/rules/index.js                            |  5 +
 4 files changed, 224 insertions(+)
 create mode 100644 src/rules/function-scalar-color-use-always/README.md
 create mode 100644 src/rules/function-scalar-color-use-always/__tests__/index.js
 create mode 100644 src/rules/function-scalar-color-use-always/index.js

diff --git a/src/rules/function-scalar-color-use-always/README.md b/src/rules/function-scalar-color-use-always/README.md
new file mode 100644
index 00000000..c37706b5
--- /dev/null
+++ b/src/rules/function-scalar-color-use-always/README.md
@@ -0,0 +1,74 @@
+# function-quote-no-quoted-strings-inside
+
+Disallow quoted strings inside the [quote function](https://sass-lang.com/documentation/functions/string#quote)
+
+```scss
+p {
+   color: saturate(blue, 20%);
+  /**     ↑      ↑
+   * This function should be scalar-color
+   */
+}
+```
+
+## Options
+
+### `true`
+
+The following patterns are considered violations:
+
+```scss
+p {
+   color: saturate(blue, 20%);
+}
+```
+
+```scss
+p {
+   color: desaturate(blue, 20%);
+}
+```
+
+```scss
+p {
+   color: darken(blue, .2);
+}
+```
+
+```scss
+p {
+   color: lighten(blue, .2);
+}
+```
+
+```scss
+p {
+   color: opacify(blue, .2);
+}
+```
+
+```scss
+p {
+   color: fade-in(blue, .2);
+}
+```
+
+```scss
+p {
+   color: transparentize(blue, .2);
+}
+```
+
+```scss
+p {
+   color: fade-out(blue, .2);
+}
+```
+
+The following patterns are _not_ considered violations:
+
+```scss
+ p {
+   color: scale-color(blue, $alpha: -40%);
+ }
+```
\ No newline at end of file
diff --git a/src/rules/function-scalar-color-use-always/__tests__/index.js b/src/rules/function-scalar-color-use-always/__tests__/index.js
new file mode 100644
index 00000000..f5eac8d8
--- /dev/null
+++ b/src/rules/function-scalar-color-use-always/__tests__/index.js
@@ -0,0 +1,93 @@
+import rule, { ruleName, messages } from "..";
+
+testRule(rule, {
+  ruleName,
+  config: [true],
+  syntax: "scss",
+
+  accept: [
+    {
+      code: `
+        p {
+          color: scale-color(blue, $alpha: -40%);
+        }
+      `,
+      description: "accepts the scalar-color function"
+    }
+  ],
+
+  reject: [
+    {
+      code: `
+        p {
+          color: saturate(blue, 20%);
+        }
+      `,
+      description: "does not accept the saturate function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: desaturate(blue, 20%);
+        }
+      `,
+      description: "does not accept the desaturate function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: darken(blue, .2);
+        }
+      `,
+      description: "does not accept the darken function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: lighten(blue, .2);
+        }
+      `,
+      description: "does not accept the lighten function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: opacify(blue, .2);
+        }
+      `,
+      description: "does not accept the opacify function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: fade-in(blue, .2);
+        }
+      `,
+      description: "does not accept the fade-in function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: transparentize(blue, .2);
+        }
+      `,
+      description: "does not accept the transparentize function",
+      message: messages.rejected
+    },
+    {
+      code: `
+        p {
+          color: fade-out(blue, .2);
+        }
+      `,
+      description: "does not accept the fade-out function",
+      message: messages.rejected
+    }
+  ]
+});
diff --git a/src/rules/function-scalar-color-use-always/index.js b/src/rules/function-scalar-color-use-always/index.js
new file mode 100644
index 00000000..7e390dc0
--- /dev/null
+++ b/src/rules/function-scalar-color-use-always/index.js
@@ -0,0 +1,52 @@
+import { utils } from "stylelint";
+import { namespace } from "../../utils";
+import valueParser from "postcss-value-parser";
+
+export const ruleName = namespace("function-scalar-color-use-always");
+
+export const messages = utils.ruleMessages(ruleName, {
+  rejected: "Use the scalar function."
+});
+
+const function_names = [
+  "saturate",
+  "desaturate",
+  "darken",
+  "lighten",
+  "opacify",
+  "fade-in",
+  "transparentize",
+  "fade-out"
+];
+
+function rule(primary) {
+  return (root, result) => {
+    const validOptions = utils.validateOptions(result, ruleName, {
+      actual: primary
+    });
+
+    if (!validOptions) {
+      return;
+    }
+
+    root.walkDecls(decl => {
+      valueParser(decl.value).walk(node => {
+        // Verify that we're only looking at functions.
+        if (node.type !== "function" || node.value === "") {
+          return;
+        }
+
+        if (function_names.includes(node.value)) {
+          utils.report({
+            message: messages.rejected,
+            node: decl,
+            result,
+            ruleName
+          });
+        }
+      });
+    });
+  };
+}
+
+export default rule;
diff --git a/src/rules/index.js b/src/rules/index.js
index 73a1bf75..8d8d9dcf 100644
--- a/src/rules/index.js
+++ b/src/rules/index.js
@@ -31,6 +31,7 @@ import doubleSlashCommentInline from "./double-slash-comment-inline";
 import doubleSlashCommentWhitespaceInside from "./double-slash-comment-whitespace-inside";
 import functionNoQuotedStrings from "./function-quote-no-quoted-strings-inside";
 import functionNoUnquotedStrings from "./function-unquote-no-unquoted-strings-inside";
+import functionScalar from "./function-scalar-color-use-always";
 import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable";
 import noDollarVariables from "./no-dollar-variables";
 import noDuplicateDollarVariables from "./no-duplicate-dollar-variables";
@@ -75,7 +76,11 @@ export default {
   "double-slash-comment-inline": doubleSlashCommentInline,
   "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside,
   "function-quote-no-quoted-strings-inside": functionNoQuotedStrings,
+<<<<<<< HEAD
   "function-unquote-no-unquoted-strings-inside": functionNoUnquotedStrings,
+=======
+  "function-scalar-color-use-always": functionScalar,
+>>>>>>> new rule
   "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable,
   "no-dollar-variables": noDollarVariables,
   "no-duplicate-dollar-variables": noDuplicateDollarVariables,