Feature: add HSL Without Function + fix RGB double matching + support floats

[LucasMatuszewski]

Hey :)

First, many thanks for your plugin! It's exactly what I needed. I appreciate the way you organized the files, it was very easy to understand how it works and add a new functionality.

Motivation for this PR

Many people use Tailwind right now, with CSS variables containing HSL color format without function name, like this:

--navy: 208 100% 25%;

It's a huge pain for many that there is no plugin supporting this format, here you can find some complaints:

• https://github.com/tailwindlabs/tailwindcss-intellisense/issues/409
• https://github.com/shadcn-ui/ui/issues/199#issuecomment-1602739537

My changes

• replication of your rgbWithoutFunction logic as new hslWithoutFunction + configs
• support for floating-point numbers in HSL and RGB (it's quite common in Tailwind, probably because of automation)
• bugfix for double-matching when hsl/rgb without function is enabled - I had double "dot" (color square) for rgb(...) and hsl(...) with function (one inside brackets, and one after brackets). If you use a "background" color you may not notice it.
• Changelog and version update (in the lock file is 2.5.0 but I guess it should be 2.6.0 so the new version is 2.7.0 ?)

Here is how it looks after my changes:

And here is a link to download the packaged VSIX file: https://we.tl/t-VHTnVChsMR

To install it we can just go to "Extension", click three dots icon (up-right corner of extensions), and select Install from VSIX... or with CLI: code --install-extension myextension.vsix.

How to test

I'm new to VSCode plugins so maybe this is not the best way to test it, but maybe this will be helpful:

• either make a new build on my branch (but there are version issues, so I had to use nvm and switch to Node 16.14 to make it work - the package needs updates, but it's out of the scope of this PR, I may start a new one if you want)
• or just install my VSIX file (I guess you have to uninstall your plugin first?)
• you can test on some variables like here:

    --navy: 208 100% 25%;
    --red: 360 87% 44%;
    --redRGB: 255, 0, 0;
    --test: hsl(360 87% 44%);

Here you can test my RegEx and modify it if you want:

• https://regex101.com/r/1LyWW4/1

If the link expired: Regex ([.\d]{1,5})[^\S\n]*(?<commaOrSpace>[^\S\n]|,)[^\S\n]*([.\d]{1,5}%)[^\S\n]*\k<commaOrSpace>[^\S\n]*([.\d]{1,5}%)(?:;| |$)

My testing values:

--navy: 208 100% 25%;
--dark-blue: 208, 100%, 25%;
--navy_blue: 208, 100%, 25%;
--red: 360 87% 44%;
 --foreground: 224 71.4% 4.1%
--popover-foreground: 224 71.4% 4.1%;
    --background: 224 100% 4.1%;
    --primary-foreground: 220.9 39.3% 100%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;   --ring: 224 71.4% 4.1%;
    --muted-foreground: 217.9 10.6% 64.9%;
--navy: 360 100% 100%;

// correct but will fail (out of scope for the plugin):
--navy_blue: hsla(208, 100%, 25%);
--navy_blue: hsl(208, 100%, 25% / 50%);
--navy_blue: hsla(0.3turn 100% 25% / .7);
  --red: hsl(360 87% 44%);

// Should fail:
--navy: 208% 100% 25%;
--navy: 208 100 25%;
--navy: 208 100 25;
--navy: 208 dfdf100% 25%;
--navy: #00ff33;
--foreground: 224 71.4% 4.1%dsfsf
--max-width: 1100px;
--radius: 0.5rem;
h1:hover { weight: bold };

Other suggestions

• I would change activationEvents option in package.json - it's bad for performance to use * - IMHO it would be best to make an array of all languages/files we can expect color definitions. Now it's triggering EVERYWHERE, terminal, sidebar, everywhere. The minimum option is to set onStartupFinished to don't slow down starting of VSCode.
  • onLanguage: https://code.visualstudio.com/api/references/activation-events#onLanguage
  • List of langages: https://code.visualstudio.com/docs/languages/identifiers
  • onStartupFinis: https://code.visualstudio.com/api/references/activation-events#onStartupFinished
  • not recommended startup: https://code.visualstudio.com/api/references/activation-events#Start-up
• I would update packages, for example vscode is deprecated, we should use @types/vscode now, and if you plan to use tests then vscode electron tests are a new way to do this. It should fix issues on build and let us use Node 18
• personally, I would set the dot after (or square after?) option as default, it's less invasive and looks better with build-in VSCode CSS color feature (the square on the left of the color)
• I would also disable colors on the scrollbar by default, it's too much for me ;)

Separate Extension for Tailwind

Do you mind if I would create a separate extension named "Color Highlight Tailwind"? With full credentials and links to your extension of course.

I guess many people using Tailwind would like to use it only for CSS variables without function names, and/or only in CSS files. It would be much better for performance.

Do you mind if I create this minimalistic version based on your extension (by just removing unnecessary parts)? I have already created a Regex for this ;) https://regex101.com/r/h1nY7R/1

Unapprove?

If you would not approve this PR for any reason I would really like to create a separate forked plugin - we really need that plugin for Tailwind :)

[boan-anbo]

Great work and do need the feat. but this repo looks unmaintained for a long time. The last merged PR was from two years ago..

[LucasMatuszewski]

Great work and do need the feat. but this repo looks unmaintained for a long time. The last merged PR was from two years ago..

Thanks @boan-anbo ! We will see :) I can update the packages here in the separate pr if @enyancc will agree.

In the meantime you can install my VSIX file: https://we.tl/t-VHTnVChsMR

It works just fine. Or you can clone the repo with my branch and make your own build and vsix package if you don't install files from unknown sources 😂 I would totally understand this ;)

[enyancc]

Hi Lucas, thanks for your contribution, I will deploy it today

[LucasMatuszewski]

Hi Lucas, thanks for your contribution, I will deploy it today

Hi @enyancc - thank you very much! :)

Please let me know what you think about my other suggestions/questions.

Especially the activationEvents option - imho it would be best to set it now to onStartupFinished, maybe even in this PR, to optimize performance a little bit.

And in a separate PR I would consider creating a list of triggering languages. But it would require good research and testing.

If I understand correctly setting languages in activationEvents should be better for performance than your list of languages in configs, because it will not trigger your plugin at all in places where we don't want this plugin (like bash scripts, yaml, dockerfile, gitignore etc.). Now, it's triggering everywhere.

[LucasMatuszewski]

ahh, BTW @enyancc - on my screen --redRGB var is not colored because I didn't activate the "RGB without function" option. It works fine, I have just tested it - here is a screen:

But of course, it's better to test everything one more time :)

[LucasMatuszewski]

@enyancc - Thanks a lot for merging and mentioning me in the "contributors" section. It was a small contribution but I'm honored :)

[jamesone]

I needed to goto my Color Highlight settings and enable this :)

Thank you!

[paulovictor237]

settings.json

"color-highlight.matchHslWithNoFunction": true,