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.

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

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

Merged
merged 9 commits into from
Mar 28, 2022
Merged

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

merged 9 commits into from
Mar 28, 2022

Conversation

geido
Copy link
Member

@geido geido commented Mar 17, 2022

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

Copy link
Member

@zhaoyongjie zhaoyongjie left a comment

Choose a reason for hiding this comment

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

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?

superset-frontend/package.json Outdated Show resolved Hide resolved
@geido
Copy link
Member Author

geido commented Mar 18, 2022

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!

@geido geido marked this pull request as ready for review March 21, 2022 15:06
@codecov
Copy link

codecov bot commented Mar 21, 2022

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.

Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

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

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?

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
@geido
Copy link
Member Author

geido commented Mar 23, 2022

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
Copy link
Member

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

Oh, I missed that! Thanks!

@michael-s-molina
Copy link
Member

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

geido and others added 2 commits March 25, 2022 15:21
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

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

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

@geido geido merged commit 6b9113a into apache:master Mar 28, 2022
villebro pushed a commit that referenced this pull request Apr 3, 2022
)

* wip

* Add eslint custom plugin

* Refactor

* Clean up

* Update superset-frontend/buildtools/eslint-plugin-theme-colors/index.js

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Refactor

* Update superset-frontend/buildtools/eslint-plugin-theme-colors/index.js

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Clean up

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
(cherry picked from commit 6b9113a)
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
…che#19239)

* wip

* Add eslint custom plugin

* Refactor

* Clean up

* Update superset-frontend/buildtools/eslint-plugin-theme-colors/index.js

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Refactor

* Update superset-frontend/buildtools/eslint-plugin-theme-colors/index.js

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Clean up

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
@mistercrunch mistercrunch added 🍒 1.5.2 🍒 1.5.3 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels lts-v1 size/L 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants