github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Resolve false positives with eslint no color rule (#204848)

Browse source 
## Summary

Fixes error in lint rule that resulted in false positives, also added a
test case to ascertain the issue has been fixed. For context the error
happens in instances where specific CSS declarations that are
derivatives of shorthand declarations that can apply color to the HTML
element or text nodes where found, because the check we had simply
checked if we got a string back instead of asserting that it was a falsy
value.

## Before
![Screenshot 2024-12-17 at 10 27
18 PM](https://github.com/user-attachments/assets/b0918d37-22f6-4778-a6d0-2cafe11b18e1)

![Screenshot 2024-12-17 at 8 03
33 PM](https://github.com/user-attachments/assets/d70c733d-e88f-42d6-956a-e266d53724f9)

## After

<img width="755" alt="Screenshot 2024-12-19 at 10 25 41"
src="https://github.com/user-attachments/assets/3e334785-d657-46ac-86c7-59d37f176c86"
/>


<img width="915" alt="Screenshot 2024-12-19 at 10 23 33"
src="https://github.com/user-attachments/assets/87860189-92c5-4807-b5b0-2520b9e75778"
/>

<!--
### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...


-->
This commit is contained in:
Eyo O. Eyo 2024-12-19 10:26:48 +00:00 • committed by GitHub
parent ba35b4ebb0
commit 7cbd9b0c1d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/kbn-eslint-plugin-css/src/rules/no_css_color.test.ts
View file

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

8
packages/kbn-eslint-plugin-css/src/rules/no_css_color.ts
View file

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