chore: Eslint custom plugin to warn about hex and literal colors

[geido]

SUMMARY

Warns about the usage of rgba, hex and literal colors over the preferred theme variables.

TESTING INSTRUCTIONS

1. Launch npm run _lint in superset-frontend
2. Check all the warnings

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[zhaoyongjie]

Thanks for adding this plugin, I left a few comments. I have tried it and it works fine, but there is a limitation that it isn't able to check the color in Styled. Is it expected?

[geido]

Thanks for adding this plugin, I left a few comments. I have tried it and it works fine, but there is a limitation that it isn't able to check the color in Styled. Is it expected?

Yes, that's the current limitation that I am trying to resolve. Thanks for your comments!

[codecov]

Codecov Report

Merging #19239 (62fe81e) into master (d46a550) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #19239   +/-   ##
=======================================
  Coverage   66.48%   66.48%           
=======================================
  Files        1670     1670           
  Lines       63952    63952           
  Branches     6506     6506           
=======================================
  Hits        42519    42519           
  Misses      19747    19747           
  Partials     1686     1686           

Flag	Coverage Δ
javascript	51.32% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d46a550...62fe81e. Read the comment docs.

[michael-s-molina]

I'm worried about the execution time. Even with the suggestion to improve hasLiteralColor the time is still high. Here's npm run _lint execution times (in minutes:seconds):

With rule disabled: 1:44
With original rule enabled: 27:41
With code suggestions: 25:54

I also found a false positive in src/visualizations/TimeTable/TimeTable.jsx.

Maybe we can invest some time to make it faster?

[geido]

I'm worried about the execution time. Even with the suggestion to improve hasLiteralColor the time is still high. Here's npm run _lint execution times (in minutes:seconds):

With rule disabled: 1:44 With original rule enabled: 27:41 With code suggestions: 25:54

I also found a false positive in src/visualizations/TimeTable/TimeTable.jsx.

Maybe we can invest some time to make it faster?

I am looking into the performance and see what we can do.

As for the false-positive in src/visualizations/TimeTable/TimeTable.jsx, I am not sure why you think it is a false positive. This is what I see at line 247 where it complains. Lmk!

borderRight: '2px solid #fff',

[michael-s-molina]

This is what I see at line 247 where it complains. Lmk!

Oh, I missed that! Thanks!

[michael-s-molina]

@geido Wow nice improvements! Really reduced the execution time. One way we can test it is to compare the output with the previous version.

[michael-s-molina]

LGTM. Thank you for the awesome tool. It will really help our efforts to make Superset themeable.