fixes issue that resulted in false positives

elastic · Dec 19, 2024 · 4922aad · 4922aad
1 parent 9b0879c
commit 4922aad
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/packages/kbn-eslint-plugin-css/src/rules/no_css_color.test.ts b/packages/kbn-eslint-plugin-css/src/rules/no_css_color.test.ts
@@ -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>
@@ -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)' };
 
@@ -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>
@@ -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>
@@ -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>
@@ -171,7 +171,7 @@ const invalid: RuleTester.InvalidTestCase[] = [
     const codeCss = css({
       color: '#dd4040',
     })
-    
+
     function TestComponent() {
       return (
         <EuiCode css={codeCss}>This is a test</EuiCode>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
+      )
+    }`,
+  },
+];
 
 for (const [name, tester] of [tsTester, babelTester]) {
   describe(name, () => {

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
@@ -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)
@@ -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 => {