Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve false positives with eslint no color rule #204848

Merged
merged 1 commit into from
Dec 19, 2024
+32 −15
Merged

Resolve false positives with eslint no color rule #204848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 28 additions & 11 deletions packages/kbn-eslint-plugin-css/src/rules/no_css_color.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';

function TestComponent() {
return (
<EuiCode style={{ color: '#dd4040' }}>This is a test</EuiCode>
Expand Down Expand Up @@ -86,7 +86,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';

function TestComponent() {
const baseStyle = { background: 'rgb(255, 255, 255)' };

Expand Down Expand Up @@ -116,7 +116,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
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>
Expand All @@ -129,7 +129,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';

function TestComponent() {
return (
<EuiCode css={{ color: '#dd4040' }}>This is a test</EuiCode>
Expand All @@ -153,7 +153,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
code: `
import React from 'react';
import { css } from '@emotion/css';

function TestComponent() {
return (
<EuiCode css={css\` color: #dd4040; \`}>This is a test</EuiCode>
Expand All @@ -171,7 +171,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
const codeCss = css({
color: '#dd4040',
})

function TestComponent() {
return (
<EuiCode css={codeCss}>This is a test</EuiCode>
Expand All @@ -187,7 +187,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
import { css } from '@emotion/css';

const codeCss = css\` color: #dd4040; \`

function TestComponent() {
return (
<EuiCode css={codeCss}>This is a test</EuiCode>
Expand All @@ -200,7 +200,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';

function TestComponent() {
return (
<EuiCode css={() => ({ color: '#dd4040' })}>This is a test</EuiCode>
Expand All @@ -213,7 +213,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';

function TestComponent() {
return (
<EuiCode css={function () { return { color: '#dd4040' }; }}>This is a test</EuiCode>
Expand All @@ -227,7 +227,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
code: `
import React from 'react';
import { css } from '@emotion/css';

function TestComponent() {
return (
<EuiCode className={css\` color: #dd4040; \`}>This is a test</EuiCode>
Expand All @@ -237,7 +237,24 @@ const invalid: RuleTester.InvalidTestCase[] = [
},
];

const valid: RuleTester.ValidTestCase[] = [];
const valid: RuleTester.ValidTestCase[] = [
{
name: 'Does not raise an error when a CSS color is not used in a JSX css prop attribute',
filename: '/x-pack/plugins/observability_solution/observability/public/test_component.tsx',
code: `
import React from 'react';
import { EuiCode } from '@elastic/eui';
import { css } from '@emotion/react';
function TestComponent() {
return (
<EuiCode css={css\`
border-top: none;
border-radius: 0 0 6px 6px;
\`}>This is a test</EuiCode>
Comment on lines +250 to +253
Copy link
Contributor Author

@eokoneyo eokoneyo Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously code like this would throw an error because of how we check if properties that set colors are provided hardcoded values, please read the PR description for further explanation.

)
}`,
},
];

for (const [name, tester] of [tsTester, babelTester]) {
describe(name, () => {
Expand Down
8 changes: 4 additions & 4 deletions packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const checkPropertySpecifiesInvalidCSSColor = ([property, value]: string[]) => {

const style = new CSSStyleDeclaration();

// @ts-ignore the types for this packages specifics an index signature of number, alongside other valid CSS properties
style[property] = value;
// @ts-ignore the types for this packages specifies an index signature of number, alongside other valid CSS properties
style[property.trim()] = typeof value === 'string' ? value.trim() : value;

const anchor = propertiesSupportingCssColor.find((resolvedProperty) =>
property.includes(resolvedProperty)
Expand All @@ -42,9 +42,9 @@ const checkPropertySpecifiesInvalidCSSColor = ([property, value]: string[]) => {
// build the resolved color property to check if the value is a string after parsing the style declaration
const resolvedColorProperty = anchor === 'color' ? 'color' : anchor + 'Color';

// in trying to keep this rule simple, it's enough if a string is used to define a color to mark it as invalid
// in trying to keep this rule simple, it's enough if we get a value back, because if it was an identifier we would have been able to set a value within this invocation
// @ts-ignore the types for this packages specifics an index signature of number, alongside other valid CSS properties
return typeof style[resolvedColorProperty] === 'string';
return Boolean(style[resolvedColorProperty]);
};

const resolveMemberExpressionRoot = (node: TSESTree.MemberExpression): TSESTree.Identifier => {
Expand Down
Loading