fix(vscode): color preview with !important (#2787)

alias.ts

@@ -37,6 +37,7 @@ export const alias: Record<string, string> = {
   '@unocss/transformer-variant-group': r('./packages/transformer-variant-group/src/'),
   'unocss': r('./packages/unocss/src/'),
   '@unocss/vite': r('./packages/vite/src/'),
+  '@unocss/vscode': r('./packages/vscode/src/'),
   '@unocss/postcss': r('./packages/postcss/src/'),
   '@unocss/webpack': r('./packages/webpack/src/'),
 }

packages/vscode/src/utils.ts

@@ -42,7 +42,7 @@ export async function getPrettiedMarkdown(uno: UnoGenerator, util: string) {
 }
 
 function getCssVariables(code: string) {
-  const regex = /(?<key>--\S+?):\s*(?<value>.+?);/gm
+  const regex = /(?<key>--\S+?):\s*(?<value>.+?)\s*[!;]/gm
   const cssVariables = new Map<string, string>()
   for (const match of code.matchAll(regex)) {
     const key = match.groups?.key

test/utils.test.ts

@@ -1,6 +1,7 @@
 import { mergeDeep } from '@unocss/core'
 import { getComponent } from '@unocss/preset-mini/utils'
 import { expect, it } from 'vitest'
+import { getColorString } from '@unocss/vscode/utils'
 
 it('mergeDeep', () => {
   expect(mergeDeep<any>({
@@ -58,3 +59,39 @@ it('getComponents', () => {
   expect(fn1('comma(),separated(value)')).eql(['comma()', 'separated(value)'])
   expect(fn1('not(comma,separated)')).eql(['not(comma,separated)', ''])
 })
+
+it('getColorString', () => {
+  const textAmber = `
+  /* layer: default */
+  .text-amber {
+    --un-text-opacity: 1;
+    color: rgba(251, 191, 36, var(--un-text-opacity));
+  }`
+
+  const textAmberImportant = `
+  /* layer: default */
+  .\!text-amber {
+    --un-text-opacity: 1 !important;
+    color: rgba(251, 191, 36, var(--un-text-opacity)) !important;
+  }`
+
+  const bgAmber = `
+  /* layer: default */
+  .bg-amber {
+    --un-bg-opacity: 1;
+    background-color: rgba(251, 191, 36, var(--un-bg-opacity));
+  }`
+
+  const bgAmberImportant = `
+  /* layer: default */
+  .\!bg-amber {
+    --un-bg-opacity: 1 !important;
+    background-color: rgba(251, 191, 36, var(--un-bg-opacity)) !important;
+  }
+  `
+
+  expect(getColorString(textAmber)).eql('rgba(251, 191, 36, 1)')
+  expect(getColorString(textAmberImportant)).eql('rgba(251, 191, 36, 1)')
+  expect(getColorString(bgAmber)).eql('rgba(251, 191, 36, 1)')
+  expect(getColorString(bgAmberImportant)).eql('rgba(251, 191, 36, 1)')
+})

tsconfig.json

@@ -47,6 +47,7 @@
       "@unocss/transformer-attributify-jsx": ["./packages/transformer-attributify-jsx/src/index.ts"],
       "@unocss/transformer-attributify-jsx-babel": ["./packages/transformer-attributify-jsx-babel/src/index.ts"],
       "@unocss/vite": ["./packages/vite/src/index.ts"],
+      "@unocss/vscode/utils": ["./packages/vscode/src/utils.ts"],
       "@unocss/webpack": ["./packages/webpack/src/index.ts"],
       "@unocss/astro": ["./packages/astro/src/index.ts"],
       "@unocss/postcss": ["./packages/postcss/src/index.ts"],