function-color-relative: handle filter property

stylelint-scss · Apr 17, 2020 · efe5bc8 · efe5bc8
1 parent 69a0c16
commit efe5bc8
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 7 deletions.
diff --git a/src/rules/function-color-relative/__tests__/index.js b/src/rules/function-color-relative/__tests__/index.js
@@ -13,6 +13,23 @@ testRule(rule, {
         }
       `,
       description: "accepts the scalar-color function"
+    },
+    {
+      code: `
+        p {
+          filter: saturate(50%);
+        }
+      `,
+      description: "ignores a color function inside the filter property"
+    },
+    {
+      code: `
+        p {
+          filter: drop-shadow(0 0 5px black) saturate(50%);
+        }
+      `,
+      description:
+        "ignores a color function inside the filter property when multiple values are used"
     }
   ],
 
@@ -104,6 +121,54 @@ testRule(rule, {
       message: messages.rejected,
       line: 3,
       column: 18
+    },
+    {
+      code: `
+        p {
+          filter: drop-shadow(0 0 5px saturate(red, 50%));
+        }
+      `,
+      description:
+        "does not acccept color functions inside a drop-shadow filter",
+      message: messages.rejected,
+      line: 3,
+      column: 39
+    },
+    {
+      code: `
+        p {
+          filter: contrast(175%) drop-shadow(0 0 5px saturate(red, 50%));
+        }
+      `,
+      description:
+        "does not acccept color functions inside a drop-shadow filter when multiple filters are used",
+      message: messages.rejected,
+      line: 3,
+      column: 54
+    },
+    {
+      code: `
+        p {
+          filter: saturate(50%) drop-shadow(0 0 5px saturate(red, 50%));
+        }
+      `,
+      description:
+        "does not acccept color functions inside a drop-shadow filter when multiple filters are used",
+      message: messages.rejected,
+      line: 3,
+      column: 53
+    },
+    {
+      code: `
+        p {
+          filter: drop-shadow(0 0 5px saturate(red, 50%)) saturate(50%);
+        }
+      `,
+      description:
+        "does not acccept color functions inside a drop-shadow filter when multiple filters are used",
+      message: messages.rejected,
+      line: 3,
+      column: 39
     }
   ]
 });
diff --git a/src/rules/function-color-relative/index.js b/src/rules/function-color-relative/index.js
@@ -19,6 +19,10 @@ const function_names = [
   "fade-out"
 ];
 
+function isColorFunction(node) {
+  return node.type === "function" && function_names.includes(node.value);
+}
+
 function rule(primary) {
   return (root, result) => {
     const validOptions = utils.validateOptions(result, ruleName, {
@@ -36,13 +40,26 @@ function rule(primary) {
           return;
         }
 
-        if (function_names.includes(node.value)) {
-          utils.report({
-            message: messages.rejected,
-            node: decl,
-            index: declarationValueIndex(decl) + node.sourceIndex,
-            result,
-            ruleName
+        const isFilter = decl.prop === "filter";
+        const isSassColorFunction = !isFilter && isColorFunction(node);
+        const isDSFilterColorFunction =
+          isFilter &&
+          node.value === "drop-shadow" &&
+          node.nodes.some(isColorFunction);
+
+        if (isSassColorFunction || isDSFilterColorFunction) {
+          const nodes = isDSFilterColorFunction
+            ? node.nodes.filter(isColorFunction)
+            : [node];
+
+          nodes.forEach(node => {
+            utils.report({
+              message: messages.rejected,
+              node: decl,
+              index: declarationValueIndex(decl) + node.sourceIndex,
+              result,
+              ruleName
+            });
           });
         }
       });