Merge pull request #518 from niksy/global-function-names-adjustments

Add adjustments for `no-global-function-names`
stylelint-scss · Sep 10, 2021 · c72ac92 · c72ac92
2 parents 7c0f68c + 7c6e64a
commit c72ac92
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 5 deletions.
diff --git a/src/rules/no-global-function-names/__tests__/index.js b/src/rules/no-global-function-names/__tests__/index.js
@@ -432,6 +432,30 @@ testRule(rule, {
       column: 14,
       message: messages.rejected("map-values"),
       description: "map-values"
+    },
+    {
+      code: `
+      a {
+        background: #{change-color(#6b717f, $red: 15)};
+      }
+    `,
+      line: 3,
+      column: 21,
+      message: messages.rejected("change-color"),
+      description: "change-color"
+    },
+    {
+      code: `
+      a {
+        background: lighten(#e1d7d2, 30%);
+      }
+    `,
+      line: 3,
+      column: 21,
+      message: messages.rejectedFullMessage(
+        "Expected color.adjust($color, $lightness: $amount) instead of lighten($color, $amount)"
+      ),
+      description: "lighten"
     }
   ]
 });
diff --git a/src/rules/no-global-function-names/index.js b/src/rules/no-global-function-names/index.js
@@ -2,6 +2,8 @@ import valueParser from "postcss-value-parser";
 import { utils } from "stylelint";
 import { declarationValueIndex, namespace } from "../../utils";
 
+const interpolationPrefix = /^#{\s*/m;
+
 const rules = {
   red: "color",
   blue: "color",
@@ -69,7 +71,14 @@ const rules = {
   "is-superselector": "selector",
   "simple-selectors": "selector",
   "selector-parse": "selector",
-  "selector-extend": "selector"
+  "selector-extend": "selector",
+  lighten: "color",
+  "adjust-hue": "color",
+  darken: "color",
+  desaturate: "color",
+  opacify: "color",
+  saturate: "color",
+  transparentize: "color"
 };
 
 const new_rule_names = {
@@ -94,20 +103,57 @@ const new_rule_names = {
   "selector-replace": "replace",
   "selector-unify": "unify",
   "selector-parse": "parse",
-  "selector-extend": "extend"
+  "selector-extend": "extend",
+  lighten: "adjust",
+  "adjust-hue": "adjust",
+  darken: "adjust",
+  desaturate: "adjust",
+  opacify: "adjust",
+  saturate: "adjust",
+  transparentize: "adjust"
+};
+
+const rule_mapping = {
+  lighten: ["lighten($color, $amount)", "adjust($color, $lightness: $amount)"],
+  "adjust-hue": [
+    "adjust-hue($color, $amount)",
+    "adjust($color, $hue: $amount)"
+  ],
+  darken: ["darken($color, $amount)", "adjust($color, $lightness: -$amount)"],
+  desaturate: [
+    "desaturate($color, $amount)",
+    "adjust($color, $saturation: -$amount)"
+  ],
+  opacify: ["opacify($color, $amount)", "adjust($color, $alpha: -$amount)"],
+  saturate: [
+    "saturate($color, $amount)",
+    "adjust($color, $saturation: $amount)"
+  ],
+  transparentize: [
+    "transparentize($color, $amount)",
+    "adjust($color, $alpha: -$amount)"
+  ]
 };
 
 export const ruleName = namespace("no-global-function-names");
 
 export const messages = utils.ruleMessages(ruleName, {
+  rejectedFullMessage: string => string,
   rejected: name => errorMessage(name)
 });
 
 function errorMessage(name) {
   const sass_package = rules[name];
   const rename = new_rule_names[name];
+  const map_rule = rule_mapping[name];
 
   if (rename) {
+    if (map_rule) {
+      const [old_rule, new_rule] = map_rule;
+
+      return `Expected ${sass_package}.${new_rule} instead of ${old_rule}`;
+    }
+
     return `Expected ${sass_package}.${rename} instead of ${name}`;
   } else {
     return `Expected ${sass_package}.${name} instead of ${name}`;
@@ -126,14 +172,16 @@ export default function(value) {
 
     root.walkDecls(decl => {
       valueParser(decl.value).walk(node => {
+        const cleanValue = node.value.replace(interpolationPrefix, "");
+
         // Verify that we're only looking at functions.
-        if (node.type !== "function" || node.value === "") {
+        if (node.type !== "function" || cleanValue === "") {
           return;
         }
 
-        if (Object.keys(rules).includes(node.value)) {
+        if (Object.keys(rules).includes(cleanValue)) {
           utils.report({
-            message: messages.rejected(node.value),
+            message: messages.rejected(cleanValue),
             node: decl,
             index: declarationValueIndex(decl) + node.sourceIndex,
             result,