fix(vscode): color preview with !important

[varugasu]

fix #2708

Problem

The problem was happening because of the regex in getCssVariables

const regex = /(?<key>--\S+?):\s*(?<value>.+?);/gm

For the given str:

/* layer: default */
.\!text-amber {
  --un-text-opacity: 1 !important;
  color: rgba(251, 191, 36, var(--un-text-opacity)) !important;
}

When match.groups?.key is --un-text-opacity, its match.groups?.value would be 1 !important. Finally, the resulting colorString is rgba(251, 191, 36, 1 !important), which breaks the CSS and wrongly previews the color:

Solution

Use the following regex to stop the capturing group until it finds either an ! or ;

const regex = /(?<key>--\S+?):\s*(?<value>.+?).*[!]{0,1}.*;/gm

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9de452a
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/6495834fdea2e60008d19f34
😎 Deploy Preview	https://deploy-preview-2787--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[varugasu]

Another solution would be to create a sanitizer/cleaner for match.groups?.value. Let me know what is best.

[antfu]

I am ok with the regex fix. Can you help adding some unit test for that function? Thanks

[varugasu]

@antfu done! The function getCssVariables is not exportable, so I tested getColorString instead.

I had to update alias.ts and tsconfig.json as well to test it from tests/utils.test.ts. Let me know if there is anything else you wanna me to do.

[varugasu]

Also, I have updated the regex to make it more readable. From

/(?<key>--\S+?):\s*(?<value>.+?).*[!]{0,1}.*;/gm

to

/(?<key>--\S+?):\s*(?<value>.+?)\s*[!;]/gm