function-no-unknown: handle functions inside interpolation (#970)

Co-authored-by: Krister Kari <musky_heating0p@icloud.com>

src/rules/function-no-unknown/__tests__/index.js

@@ -97,6 +97,15 @@ testRule({
       $str-index: string.index('string', 'i');
       `,
       description: "@use built-in function."
+    },
+    {
+      code: `
+      --background-mark-yellow: #{color.adjust(
+        $mdn-color-light-theme-yellow-30,
+        $alpha: -0.6
+      )};
+      `,
+      description: "built-in function inside interpolation, issue #817"
     }
   ],
 
@@ -151,6 +160,18 @@ testRule({
       line: 5,
       column: 16,
       description: "@use without a namespace"
+    },
+    {
+      code: `
+      --background-mark-yellow: #{some-fn(
+        $mdn-color-light-theme-yellow-30,
+        $alpha: -0.6
+      )};
+      `,
+      description: "unknown function inside interpolation, issue #817",
+      message: messages.rejected("some-fn"),
+      line: 2,
+      column: 35
     }
   ]
 });
@@ -172,6 +193,15 @@ testRule({
     },
     {
       code: "a { color: bar(1); }"
+    },
+    {
+      code: `
+      --background-mark-yellow: #{bar(
+        $mdn-color-light-theme-yellow-30,
+        $alpha: -0.6
+      )};
+      `,
+      description: "ignored function inside interpolation, issue #817"
     }
   ],
 

src/rules/function-no-unknown/index.js

@@ -6,6 +6,7 @@ const { ALL_FUNCTIONS } = require("../../utils/functions");
 const namespace = require("../../utils/namespace");
 const { isRegExp, isString } = require("../../utils/validateTypes");
 const ruleUrl = require("../../utils/ruleUrl");
+const hasInterpolation = require("../../utils/hasInterpolation");
 
 const ruleToCheckAgainst = "function-no-unknown";
 
@@ -123,12 +124,17 @@ function rule(primaryOption, secondaryOptions) {
     if (namespaceWarnings.size === 0) {
       root.walkDecls(decl => {
         valueParser(decl.value).walk(valueNode => {
-          const { type, value: funcName } = valueNode;
+          const { type, value } = valueNode;
 
-          if (type !== "function" || funcName.trim() === "") return;
+          if (type !== "function" || value.trim() === "") return;
+
+          const interpolationRegex = /^#{/;
+          const funcName = value.replace(interpolationRegex, "");
 
           const namespace = extractNamespaceFromFunction(funcName);
-          if (!namespace) return;
+
+          if (!namespace && !hasInterpolation(decl.value)) return;
+
           if (atUseNamespaces.has(namespace)) return;
 
           if (ignoreFunctionsAsSet.has(funcName)) return;

src/utils/__tests__/hasInterpolation.test.js

@@ -6,7 +6,31 @@ it("hasInterpolation", () => {
   expect(hasInterpolation("(min-width#{$value}: 10px)")).toBeTruthy();
   expect(hasInterpolation("(@{value}min-width : 10px)")).toBeTruthy();
   expect(hasInterpolation("#{$Attr}-color")).toBeTruthy();
+  expect(
+    hasInterpolation(`
+    #{color.adjust(
+      $mdn-color-light-theme-yellow-30,
+      $alpha: -0.6
+    )}
+    `)
+  ).toBe(true);
   expect(hasInterpolation("@{Attr}-color")).toBeTruthy();
+  expect(
+    hasInterpolation(`
+    @{color.adjust(
+      $mdn-color-light-theme-yellow-30,
+      $alpha: -0.6
+    )}
+  `)
+  ).toBe(true);
+  expect(
+    hasInterpolation(`
+    $(color.adjust(
+      $mdn-color-light-theme-yellow-30,
+      $alpha: -0.6
+    ))
+  `)
+  ).toBe(true);
   expect(hasInterpolation("#{50% - $n}")).toBeTruthy();
   expect(hasInterpolation(".n-#{$n}")).toBeTruthy();
   expect(hasInterpolation(":n-#{$n}")).toBeTruthy();

src/utils/hasLessInterpolation.js

@@ -7,5 +7,5 @@
  * @return {boolean} If `true`, a string has less interpolation
  */
 module.exports = function (string) {
-  return /@{.+?}/.test(string);
+  return /@{[\s\S]*?}/.test(string);
 };

src/utils/hasPsvInterpolation.js

@@ -6,5 +6,5 @@
  * @param {string} string
  */
 module.exports = function (string) {
-  return /\$\(.+?\)/.test(string);
+  return /\$\([\s\S]*?\)/.test(string);
 };

src/utils/hasScssInterpolation.js

@@ -6,5 +6,5 @@
  * @param {string} string
  */
 module.exports = function (string) {
-  return /#{.+?}/.test(string);
+  return /#{[\s\S]*?}/.test(string);
 };