Merge pull request #333 from rambleraptor/use-scale-color

use scalar-color function instead of other color adjustment functions

src/rules/function-color-relative/README.md

@@ -0,0 +1,83 @@
+# function-color-relative
+
+Encourage the use of the [scale-color](https://sass-lang.com/documentation/functions/color#scale-color) over:
+
+* [darken](https://sass-lang.com/documentation/functions/color#darken)
+* [desaturate](https://sass-lang.com/documentation/functions/color#desaturate)
+* [fade-in](https://sass-lang.com/documentation/functions/color#fade-in)
+* [fade-out](https://sass-lang.com/documentation/functions/color#fade-out)
+* [lighten](https://sass-lang.com/documentation/functions/color#lighten)
+* [opacify](https://sass-lang.com/documentation/functions/color#opacify)
+* [saturate](https://sass-lang.com/documentation/functions/color#saturate)
+* [transparentize](https://sass-lang.com/documentation/functions/color#transparentize)
+
+```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-color-relative/__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-color-relative/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-color-relative");
+
+export const messages = utils.ruleMessages(ruleName, {
+  rejected: "Expected the scale-color function to be used"
+});
+
+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

@@ -32,6 +32,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 functionColorRelative from "./function-color-relative";
 import mediaFeatureValueDollarVariable from "./media-feature-value-dollar-variable";
 import noDollarVariables from "./no-dollar-variables";
 import mapKeysQuotes from "./map-keys-quotes";
@@ -80,6 +81,7 @@ export default {
   "double-slash-comment-whitespace-inside": doubleSlashCommentWhitespaceInside,
   "function-quote-no-quoted-strings-inside": functionNoQuotedStrings,
   "function-unquote-no-unquoted-strings-inside": functionNoUnquotedStrings,
+  "function-color-relative": functionColorRelative,
   "map-keys-quotes": mapKeysQuotes,
   "media-feature-value-dollar-variable": mediaFeatureValueDollarVariable,
   "no-dollar-variables": noDollarVariables,