feat: support attributify usage with < sign

unocss · Feb 26, 2023 · 8942a52 · 8942a52
1 parent be6cf6b
commit 8942a52
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
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,24 +88,28 @@ export function getMatchedPositions(code: string, matched: string[], hasVariantG
   Array.from(matched)
     .forEach((v) => {
       const match = isAttributifySelector(v)
-
       if (!match) {
-        // highlight classes that includes `><`
-        if (v.match(/[><]/)) {
-          for (const match of code.matchAll(new RegExp(escapeRegExp(v), 'g'))) {
-            const start = match.index!
-            const end = start + match[0].length
-            result.push([start, end, match[0]])
-          }
-        }
+        highlightLessBiggerThanSign(v)
         plain.add(v)
       }
       else if (!match[2]) {
+        highlightLessBiggerThanSign(match[1])
         plain.add(match[1])
       }
       else { attributify.push(match) }
     })
 
+  // highlight classes that includes `><`
+  function highlightLessBiggerThanSign(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) => {

diff --git a/test/pos.test.ts b/test/pos.test.ts
@@ -303,6 +303,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