fix(vscode): fix the regressions caused by #2256 (#2265)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Mar 1, 2023 · c8f57b4 · c8f57b4
1 parent 2fe9ea7
commit c8f57b4
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 11 deletions.
diff --git a/packages/core/src/utils/variantGroup.ts b/packages/core/src/utils/variantGroup.ts
@@ -6,7 +6,7 @@ const regexCache: Record<string, RegExp> = {}
 export function makeRegexClassGroup(separators = ['-', ':']) {
   const key = separators.join('|')
   if (!regexCache[key])
-    regexCache[key] = new RegExp(`((?:[!@\\w+:_/-]|\\[&?>?:?\\S*\\])+?)(${key})\\(((?:[~!\\w\\s:/\\\\,%#.$?-]|\\[.*?\\])+?)\\)(?!\\s*?=>)`, 'gm')
+    regexCache[key] = new RegExp(`((?:[!@\\w+:_/-]|\\[&?>?:?\\S*\\])+?)(${key})\\(((?:[~!<>\\w\\s:/\\\\,%#.$?-]|\\[.*?\\])+?)\\)(?!\\s*?=>)`, 'gm')
   regexCache[key].lastIndex = 0
   return regexCache[key]
 }

diff --git a/packages/preset-attributify/src/extractor.ts b/packages/preset-attributify/src/extractor.ts
@@ -9,7 +9,7 @@ const strippedPrefixes = [
 
 const splitterRE = /[\s'"`;]+/g
 const elementRE = /<[^>\s]*\s((?:'.*?'|".*?"|`.*?`|\{.*?\}|[^>]*?)*)/g
-const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~]+)=?(?:["]([^"]*)["]|[']([^']*)[']|[{]([^}]*)[}])?/gms
+const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~<]+)=?(?:["]([^"]*)["]|[']([^']*)[']|[{]([^}]*)[}])?/gms
 
 export const defaultIgnoreAttributes = ['placeholder', 'fill', 'opacity']
 

diff --git a/packages/shared-common/src/index.ts b/packages/shared-common/src/index.ts
@@ -88,17 +88,31 @@ export function getMatchedPositions(code: string, matched: string[], hasVariantG
   Array.from(matched)
     .forEach((v) => {
       const match = isAttributifySelector(v)
-      if (!match)
+      if (!match) {
+        highlightLessGreaterThanSign(v)
         plain.add(v)
-      else if (!match[2])
+      }
+      else if (!match[2]) {
+        highlightLessGreaterThanSign(match[1])
         plain.add(match[1])
-      else
-        attributify.push(match)
+      }
+      else { attributify.push(match) }
     })
 
+  // highlight classes that includes `><`
+  function highlightLessGreaterThanSign(str: string) {
+    if (str.match(/[><]/)) {
+      for (const match of code.matchAll(new RegExp(escapeRegExp(str), 'g'))) {
+        const start = match.index!
+        const end = start + match[0].length
+        result.push([start, end, match[0]])
+      }
+    }
+  }
+
   // highlight for plain classes
   let start = 0
-  code.split(/([\s"'`;*]|:\(|\)"|\)\s)/g).forEach((i) => {
+  code.split(/([\s"'`;<>*]|:\(|\)"|\)\s)/g).forEach((i) => {
     const end = start + i.length
     if (isPug) {
       result.push(...getPlainClassMatchedPositionsForPug(i, plain, start))

diff --git a/test/pos.test.ts b/test/pos.test.ts
@@ -18,7 +18,7 @@ describe('matched-positions', async () => {
       ],
     })
 
-    expect(await match(uno, '<div border="b gray4 2 [&_span]:white"></div>'))
+    expect(await match(uno, '<div border="b gray4 2 [&_span]:white" hover="[&>span]:text-white" border></div>'))
       .toMatchInlineSnapshot(`
         [
           [
@@ -41,6 +41,16 @@ describe('matched-positions', async () => {
             37,
             "[border=\\"[&_span]:white\\"]",
           ],
+          [
+            46,
+            65,
+            "[hover=\\"[&>span]:text-white\\"]",
+          ],
+          [
+            67,
+            73,
+            "border",
+          ],
         ]
       `)
   })
@@ -176,12 +186,15 @@ describe('matched-positions', async () => {
       presets: [
         presetUno(),
       ],
+      shortcuts: {
+        '<custom-shortcut': 'text-lg',
+      },
       transformers: [
         transformerVariantGroup(),
       ],
     })
 
-    expect(await match(uno, '<div class="hover:(h-4 w-4 bg-green-300) disabled:opacity-50"></div>'))
+    expect(await match(uno, '<div class="hover:(h-4 w-4 bg-green-300 <custom-shortcut) disabled:opacity-50"></div>'))
       .toMatchInlineSnapshot(`
         [
           [
@@ -200,8 +213,13 @@ describe('matched-positions', async () => {
             "hover:bg-green-300",
           ],
           [
-            41,
-            60,
+            40,
+            56,
+            "hover:<custom-shortcut",
+          ],
+          [
+            58,
+            77,
             "disabled:opacity-50",
           ],
         ]
@@ -309,6 +327,34 @@ describe('matched-positions-pug', async () => {
     `)
   })
 
+  test('attributify `><`', async () => {
+    const uno = createGenerator({
+      presets: [
+        presetAttributify(),
+        presetUno(),
+      ],
+      shortcuts: {
+        '<custom-shortcut': 'text-teal',
+      },
+    })
+
+    expect(await match(uno, '<div border></div><div <custom-shortcut></div>'))
+      .toMatchInlineSnapshot(`
+        [
+          [
+            5,
+            11,
+            "border",
+          ],
+          [
+            23,
+            39,
+            "<custom-shortcut",
+          ],
+        ]
+      `)
+  })
+
   test('@unocss/transformer-directives', async () => {
     // \n could not be include
     // div.p2(class="btn-center{@apply p1 m1;\n}") -> pug parse error