diff --git a/src/rules/function-color-relative/__tests__/index.js b/src/rules/function-color-relative/__tests__/index.js index f037c7f6..ba9c5cf7 100644 --- 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 index 1fa962e5..fea5e253 100644 --- 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 + }); }); } });