diff --git a/packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts b/packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts index a6f014a2a0fe2..0ce9ada110981 100644 --- a/packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts +++ b/packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts @@ -29,23 +29,25 @@ const htmlElementColorDeclarationRegex = RegExp( String.raw`(${propertiesSupportingCssColor.join('|')})\:\s?(\'|\")?${cssColorRegex.source}` ); -// in trying to keep this rule simple, if a string is used to define a color, we mark it as invalid for this particular use case const raiseReportIfPropertyHasInvalidCssColor = ( context: Rule.RuleContext, - propertyNode: TSESTree.ObjectLiteralElement, + propertyNode: TSESTree.Property, messageToReport: Rule.ReportDescriptor ) => { let didReport: boolean; if ( - (didReport = Boolean( - propertyNode.type === 'Property' && - propertyNode.key.type === 'Identifier' && - propertyNode.value.type === 'Literal' && - propertiesSupportingCssColor.indexOf(propertyNode.key.name) > -1 - )) + propertyNode.key.type === 'Identifier' && + propertiesSupportingCssColor.indexOf(propertyNode.key.name) < 0 ) { + return; + } + + if ((didReport = Boolean(propertyNode.value.type === 'Literal'))) { + // in trying to keep this rule simple, if a string is used to define a color we simply mark it as invalid context.report(messageToReport); + } else if ((didReport = Boolean(propertyNode.value.type === 'MemberExpression'))) { + // TODO: handle member expression ie. style.color.red } return didReport;