Skip to content

Commit

Permalink
consolidate logic where possible
Browse files Browse the repository at this point in the history
  • Loading branch information
@eokoneyo
eokoneyo committed Dec 2, 2024
1 parent 3ade9d2 commit 17f22f9
Showing 1 changed file with 83 additions and 106 deletions.
189 changes: 83 additions & 106 deletions packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,86 +194,90 @@ export const NoCssColor: Rule.RuleModule = {
return;
}

if (node.name.name === 'style') {
/**
* @example <EuiCode style={{ color: '#dd4040' }}>This is an example</EuiCode>
*/
if (
node.value &&
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: {
// @ts-expect-error the key name is always present else this code will not execute
property: property.key.name,
},
});
/**
* @example
* const codeStyle = { color: '#dd4040' };
* <EuiCode style={codeStyle}>This is an example</EuiCode>
*
* @example
* const codeStyle = { color: '#dd4040' };
* <EuiCode css={codeStyle}>This is an example</EuiCode>
*/
if (
node.name.name !== 'className' &&
node.value?.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'Identifier'
) {
const styleVariableName = node.value.expression.name;

const styleVariableDeclaration = context.sourceCode
.getScope(node.value.expression)
.variables.find((variable) => variable.name === styleVariableName);

// we assume there's only one definition of the variable
(
styleVariableDeclaration?.defs[0].node.init as TSESTree.ObjectExpression
)?.properties.forEach((property) => {
handleObjectProperties(context, node, property, {
loc: node.loc,
messageId: 'noCSSColorSpecificDeclaredVariable',
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),
variableName: styleVariableName,
line: String(property.loc.start.line),
},
});
});

return;
}

/**
* @example
*
* const codeStyle = { color: '#dd4040' };
*
* <EuiCode style={codeStyle}>This is an example</EuiCode>
*/
if (
node.value &&
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'Identifier'
) {
const styleVariableName = node.value.expression.name;

const styleVariableDeclaration = context.sourceCode
.getScope(node.value.expression)
.variables.find((variable) => variable.name === styleVariableName);
return;
}

if (!styleVariableDeclaration) {
return;
}
/**
* @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;

// assuming there's only one definition of the variable, eslint would catch other occurrences of this
(
styleVariableDeclaration.defs[0].node.init as TSESTree.ObjectExpression
)?.properties.forEach((property) => {
handleObjectProperties(context, node, property, {
loc: node.loc,
messageId: 'noCSSColorSpecificDeclaredVariable',
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),
variableName: styleVariableName,
line: String(property.loc.start.line),
},
});
declarationPropertiesNode?.forEach((property) => {
handleObjectProperties(context, node, property, {
loc: property.loc,
messageId: 'noCssColorSpecific',
data: {
// @ts-expect-error the key name is always present else this code will not execute
property: property.key.name,
},
});
});

return;
}
return;
}

if (node.name.name === 'css') {
if (node.name.name === 'css' && node.value?.type === 'JSXExpressionContainer') {
/**
* @example <EuiCode css={`{ color: '#dd4040' }`}>This is an example</EuiCode>
* @example
* <EuiCode css={`{ color: '#dd4040' }`}>This is an example</EuiCode>
*/
if (
node.value &&
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'TemplateLiteral'
) {
if (node.value.expression.type === 'TemplateLiteral') {
for (let i = 0; i < node.value.expression.quasis.length; i++) {
const declarationTemplateNode = node.value.expression.quasis[i];

Expand All @@ -288,37 +292,12 @@ export const NoCssColor: Rule.RuleModule = {
}
}

/**
* @example <EuiCode css={{ color: '#dd4040' }}>This is an example</EuiCode>
*/
if (
node.value &&
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: {
// @ts-expect-error the key name is always present else this code will not execute
property: property.key.name,
},
});
});

return;
}

/**
* @description check if css prop is a tagged template literal from emotion
* @example <EuiCode css={css`{ color: #dd4040 }`}>This is an example</EuiCode>
* @example
* <EuiCode css={css`color: '#dd4040'`}>This is an example</EuiCode>
*/
if (
node.value &&
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'TaggedTemplateExpression' &&
node.value.expression.tag.type === 'Identifier' &&
node.value.expression.tag.name === 'css'
Expand All @@ -340,13 +319,12 @@ export const NoCssColor: Rule.RuleModule = {
}

/**
* @example <EuiCode css={() => ({ color: '#dd4040' })}>This is an example</EuiCode>
* @example
* <EuiCode css={() => ({ color: '#dd4040' })}>This is an example</EuiCode>
*/
if (
node.value &&
node.value.type === 'JSXExpressionContainer' &&
(node.value.expression.type === 'FunctionExpression' ||
node.value.expression.type === 'ArrowFunctionExpression')
node.value.expression.type === 'FunctionExpression' ||
node.value.expression.type === 'ArrowFunctionExpression'
) {
let declarationPropertiesNode: TSESTree.Property[] = [];

Expand Down Expand Up @@ -387,14 +365,13 @@ export const NoCssColor: Rule.RuleModule = {
}
}

if (node.name.name === 'className') {
if (node.name.name === 'className' && node.value?.type === 'JSXExpressionContainer') {
/**
* @description check if css prop is a tagged template literal from emotion
* @example <EuiCode className={css`{ color: #dd4040 }`}>This is an example</EuiCode>
* @example
* <EuiCode className={css`{ color: #dd4040 }`}>This is an example</EuiCode>
*/
if (
node.value &&
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'TaggedTemplateExpression' &&
node.value.expression.tag.type === 'Identifier' &&
node.value.expression.tag.name === 'css'
Expand Down

0 comments on commit 17f22f9

Please sign in to comment.