in packages/eslint-plugin/src/rules/no_css_color.ts [344:425]
line: String(property.loc.start.line),
},
});
});
}
}
}
return;
}
/**
*
* @description Accounts for instances where a style object is inlined in the JSX attribute
*
* @example
* <EuiCode style={{ color: '#dd4040' }}>This is an example</EuiCode>
*
* @example
* <EuiCode css={{ color: '#dd4040' }}>This is an example</EuiCode>
*
* @example
* const styleRules = { color: '#dd4040' };
* <EuiCode style={{ color: styleRules.color }}>This is an example</EuiCode>
*
* @example
* const styleRules = { color: '#dd4040' };
* <EuiCode css={{ color: styleRules.color }}>This is an example</EuiCode>
*/
if (
node.value?.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'ObjectExpression'
) {
const declarationPropertiesNode = node.value.expression.properties;
declarationPropertiesNode?.forEach((property) => {
handleObjectProperties(context, node, property, {
loc: property.loc,
messageId: 'noCssColorSpecific',
data: {
property:
property.type === 'SpreadElement'
? // @ts-expect-error the key name is always present else this code will not execute
String(property.argument.name)
: // @ts-expect-error the key name is always present else this code will not execute
String(property.key.name),
},
});
});
return;
}
if (
node.name.name === 'css' &&
node.value?.type === 'JSXExpressionContainer'
) {
/**
* @example
* <EuiCode css={`{ color: '#dd4040' }`}>This is an example</EuiCode>
*/
if (node.value.expression.type === 'TemplateLiteral') {
for (let i = 0; i < node.value.expression.quasis.length; i++) {
const declarationTemplateNode = node.value.expression.quasis[i];
if (
htmlElementColorDeclarationRegex.test(
declarationTemplateNode.value.raw
)
) {
const cssText = declarationTemplateNode.value.raw
.replace(/(\{|\}|\\n)/g, '')
.trim();
cssText.split(';').forEach((declaration) => {
if (
declaration.length > 0 &&
checkPropertySpecifiesInvalidCSSColor(
declaration.split(':')
)
) {
context.report({