use scalar-color function instead of other color adjustment functions

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

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

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;

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,