Skip to content

Commit

Permalink
add improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
@eokoneyo
eokoneyo committed Nov 20, 2024
1 parent a91ae07 commit d231fe0
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 25 deletions.
1 change: 0 additions & 1 deletion packages/kbn-eslint-config/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,6 @@ module.exports = {
'@kbn/imports/no_group_crossing_manifests': 'error',
'@kbn/imports/no_group_crossing_imports': 'error',
'@kbn/css/no_css_color': 'warn',
'@kbn/css/prefer_css_attributes_for_eui_components': 'warn',
'no-new-func': 'error',
'no-implied-eval': 'error',
'no-prototype-builtins': 'error',
Expand Down
34 changes: 31 additions & 3 deletions packages/kbn-eslint-plugin-css/src/rules/no_css_color.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,36 @@ const invalid: RuleTester.InvalidTestCase[] = [
<EuiCode style={{ color: '#dd4040' }}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColorSpecific' }],
},
{
name: 'Raises an error when a CSS color is used in a JSX style attribute with template literals',
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';
function TestComponent() {
return (
<EuiCode style={\`{ color: '#dd4040', margin: '${Math.floor(
Math.random() * 5
)}px' }\`}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColor' }],
},
{
name: 'Raises an error when a CSS color is used for the background property in a JSX style attribute',
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';
function TestComponent() {
return (
<EuiCode style={{ background: '#dd4040' }}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColorSpecific' }],
},
{
name: 'Raises an error when a CSS color for the color property is used in a JSX css attribute for EuiComponents',
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
Expand All @@ -64,7 +92,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
<EuiCode css={{ color: '#dd4040' }}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColor' }],
errors: [{ messageId: 'noCssColorSpecific' }],
},
{
name: 'Raises an error when a CSS color for the color property is used in a JSX css attribute for EuiComponents with the css template function',
Expand All @@ -90,7 +118,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
<EuiCode css={() => ({ color: '#dd4040' })}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColor' }],
errors: [{ messageId: 'noCssColorSpecific' }],
},
{
name: 'Raises an error when a CSS color for the color property is used in a JSX css attribute for EuiComponents with a regular function',
Expand All @@ -103,7 +131,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
<EuiCode css={function () { return { color: '#dd4040' }; }}>This is a test</EuiCode>
)
}`,
errors: [{ messageId: 'noCssColor' }],
errors: [{ messageId: 'noCssColorSpecific' }],
},
];

Expand Down
61 changes: 40 additions & 21 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 @@ -22,7 +22,8 @@ const cssColorRegex = /(#|rgb|hsl|hwb|lab|lch|oklab).*/;
const propertiesSupportingCssColor = ['color', 'background', 'backgroundColor', 'border'];

/**
* @description Builds off the existing color definition regex to match css declarations that can apply color to html elements and text nodes
* @description Builds off the existing color definition regex to match css declarations that can apply color to
* html elements and text nodes for string declarations
*/
const htmlElementColorDeclarationRegex = RegExp(
String.raw`(${propertiesSupportingCssColor.join('|')})\:\s?(\'|\")?${cssColorRegex.source}`
Expand All @@ -46,7 +47,11 @@ const raiseReportIfPropertyHasCssColor = (
) {
context.report({
loc: node.loc,
messageId: 'noCssColor',
messageId: 'noCssColorSpecific',
data: {
// @ts-expect-error the key name is always pretty else this code will not execute
property: node.key.name,
},
});
}

Expand All @@ -63,7 +68,9 @@ export const NoCssColor: Rule.RuleModule = {
url: 'https://eui.elastic.co/#/theming/colors/values',
},
messages: {
noCssColor: 'Avoid using CSS colors',
noCssColorSpecific:
'Avoid using a literal CSS color value for {{property}}, use an EUI theme color instead',
noCssColor: 'Avoid using a literal CSS color value, use an EUI theme color instead',
},
schema: [],
},
Expand All @@ -83,13 +90,17 @@ export const NoCssColor: Rule.RuleModule = {
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'TemplateLiteral'
) {
const declarationTemplateNode = node.value.expression.quasis[0];
for (let i = 0; i < node.value.expression.quasis.length; i++) {
const declarationTemplateNode = node.value.expression.quasis[i];

if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
node: declarationTemplateNode,
messageId: 'noCssColor',
});
if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
loc: declarationTemplateNode.loc,
messageId: 'noCssColor',
});

break;
}
}
}

Expand Down Expand Up @@ -126,13 +137,17 @@ export const NoCssColor: Rule.RuleModule = {
node.value.type === 'JSXExpressionContainer' &&
node.value.expression.type === 'TemplateLiteral'
) {
const declarationTemplateNode = node.value.expression.quasis[0];
for (let i = 0; i < node.value.expression.quasis.length; i++) {
const declarationTemplateNode = node.value.expression.quasis[i];

if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
node: declarationTemplateNode,
messageId: 'noCssColor',
});
if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
node: declarationTemplateNode,
messageId: 'noCssColor',
});

break;
}
}
}

Expand Down Expand Up @@ -169,13 +184,17 @@ export const NoCssColor: Rule.RuleModule = {
node.value.expression.tag.type === 'Identifier' &&
node.value.expression.tag.name === 'css'
) {
const declarationTemplateNode = node.value.expression.quasi.quasis[0];
for (let i = 0; i < node.value.expression.quasi.quasis.length; i++) {
const declarationTemplateNode = node.value.expression.quasi.quasis[i];

if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
node: declarationTemplateNode,
messageId: 'noCssColor',
});
if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
context.report({
loc: declarationTemplateNode.loc,
messageId: 'noCssColor',
});

break;
}
}
}

Expand Down

0 comments on commit d231fe0

Please sign in to comment.