feat: add prefix handling for shortcuts (#4)

* feat: add prefix handling for shortcuts * chore: update --------- Co-authored-by: Chris <[email protected]>
unocss-community · Jul 4, 2024 · 009699f · 009699f
1 parent 08774cb
commit 009699f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -53,7 +53,7 @@ export async function transformAlias(
   if (typeof keep === 'string')
     keep = { prefix: keep, block: true }
 
-  const extraRE = new RegExp(`(${escapeRegExp(prefix)}|${escapeRegExp(keep.prefix)})([\\w-]+)`, 'g')
+  const extraRE = new RegExp(`(${escapeRegExp(prefix)}|${escapeRegExp(keep.prefix)})([\\w-:]+)`, 'g')
   const map = new Map<string, ShortcutValue | false>()
 
   for (const item of Array.from(code.original.matchAll(extraRE))) {

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -8,6 +8,7 @@ const uno = createGenerator({
   shortcuts: [
     ['btn', 'text-(white xl) font-bold py-2 px-4 rounded cursor-pointer'],
     [/^btn-(.+)$/, ([,d]) => `bg-${d}-500 hover:bg-${d}-700 btn`],
+    [/^tapped:(.*)$/, ([, c]) => `hover:${c} active:${c}`],
   ],
 })
 
@@ -31,6 +32,7 @@ describe('transformer alias', () => {
   <div *btn>
     <div text-xl class="*btn-red" />
     <div *btn-teal />
+    <div text-red *tapped:text-blue />
   </div>
 </template>
     `.trim()
@@ -40,6 +42,7 @@ describe('transformer alias', () => {
         <div text-white text-xl font-bold py-2 px-4 rounded cursor-pointer>
           <div text-xl class="bg-red-500 hover:bg-red-700 text-white text-xl font-bold py-2 px-4 rounded cursor-pointer" />
           <div bg-teal-500 hover:bg-teal-700 text-white text-xl font-bold py-2 px-4 rounded cursor-pointer />
+          <div text-red hover:text-blue active:text-blue />
         </div>
       </template>"
     `)
@@ -53,6 +56,8 @@ describe('transformer alias', () => {
   <div &test-none>
     <div text-xl class="&btn-red" />
     <div *btn-red />
+    <div *tapped:text-blue />
+    <div &tapped:text-blue />
   </div>
 </template>
     `.trim()
@@ -62,6 +67,8 @@ describe('transformer alias', () => {
         <div &test-none>
           <div text-xl class="bg-red-500 hover:bg-red-700 text-white text-xl font-bold py-2 px-4 rounded cursor-pointer" />
           <div *btn-red />
+          <div *tapped:text-blue />
+          <div hover:text-blue active:text-blue />
         </div>
       </template>"
     `)
@@ -72,6 +79,8 @@ describe('transformer alias', () => {
     <template>
         <div class="*btn-red" />
         <div *btn-red />
+        <div class="*tapped:text-blue" />
+        <div *tapped:text-blue />
     </template>
         `.trim()
     const transform = createTransformer()
@@ -80,6 +89,8 @@ describe('transformer alias', () => {
       "<template>
               <div class="bg-red-500 hover:bg-red-700 text-white text-xl font-bold py-2 px-4 rounded cursor-pointer" />
               <div bg-red-500 hover:bg-red-700 text-white text-xl font-bold py-2 px-4 rounded cursor-pointer />
+              <div class="hover:text-blue active:text-blue" />
+              <div hover:text-blue active:text-blue />
           </template>"
     `)