From b7270ef298980e5351f8e73aa022e13879fd2cbc Mon Sep 17 00:00:00 2001
From: Flower-F <78215016+Flower-F@users.noreply.github.com>
Date: Fri, 2 Sep 2022 12:26:16 +0800
Subject: [PATCH] feat(attributify-jsx): support rewriting colon operator
 (#1524)

---
 packages/transformer-attributify-jsx/README.md    |  4 ----
 packages/transformer-attributify-jsx/src/index.ts |  2 +-
 test/transformer-attributify-jsx.test.ts          | 12 ++++++------
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/transformer-attributify-jsx/README.md b/packages/transformer-attributify-jsx/README.md
index ad5111b09d..8df15d5d6b 100644
--- a/packages/transformer-attributify-jsx/README.md
+++ b/packages/transformer-attributify-jsx/README.md
@@ -73,8 +73,6 @@ export default defineConfig({
 ```html
 <div translate-x-100% /> <!-- cannot end with `%` -->
 
-<div hover:text-2xl /> <!-- cannot contain `:` -->
-
 <div translate-x-[100px] /> <!-- cannot contain `[` or `]` -->
 ```
 
@@ -83,8 +81,6 @@ Instead, you may want to use valued attributes instead:
 ```html
 <div translate="x-100%" />
 
-<div hover="text-2xl" />
-
 <div translate="x-[100px]" />
 ```
 
diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
index 59ea69df27..6bcb415c6e 100644
--- a/packages/transformer-attributify-jsx/src/index.ts
+++ b/packages/transformer-attributify-jsx/src/index.ts
@@ -73,7 +73,7 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
 
       for (const item of Array.from(code.original.matchAll(elementRE))) {
         for (const attr of item[3].matchAll(attributeRE)) {
-          const matchedRule = attr[0]
+          const matchedRule = attr[0].replace(/\:/i, '-')
           if (matchedRule.includes('=') || isBlocked(matchedRule))
             continue
 
diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
index 9a28678226..a831a095aa 100644
--- a/test/transformer-attributify-jsx.test.ts
+++ b/test/transformer-attributify-jsx.test.ts
@@ -15,7 +15,7 @@ describe('transformerAttributifyJs', () => {
     <div op30 text-lg fw300 m1>
       The instant on-demand Atomic CSS engine.
     </div>
-    <div m2 flex justify-center text-2xl op30 hover="op80">
+    <div m2 flex justify-center text-2xl op30 hover:op80 hover:text-2xl>
       <a
         i-carbon-logo-github
         text-inherit
@@ -50,7 +50,7 @@ describe('transformerAttributifyJs', () => {
           <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
             The instant on-demand Atomic CSS engine.
           </div>
-          <div m2=\\"\\" flex=\\"\\" justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover=\\"op80\\">
+          <div m2=\\"\\" flex=\\"\\" justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
             <a
               i-carbon-logo-github
               text-inherit=\\"\\"
@@ -68,7 +68,7 @@ describe('transformerAttributifyJs', () => {
 
   test('blocklist', async () => {
     const code = new MagicString(originalCode)
-    const blocklist = ['flex', 'absolute', /op[0-9]+/]
+    const blocklist: (string | RegExp)[] = ['flex', 'absolute']
 
     await transformerAttributifyJsx({
       blocklist,
@@ -80,10 +80,10 @@ describe('transformerAttributifyJs', () => {
           <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
             unocss
           </div>
-          <div op30 text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
+          <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
             The instant on-demand Atomic CSS engine.
           </div>
-          <div m2=\\"\\" flex justify-center=\\"\\" text-2xl=\\"\\" op30 hover=\\"op80\\">
+          <div m2=\\"\\" flex justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
             <a
               i-carbon-logo-github
               text-inherit=\\"\\"
@@ -93,7 +93,7 @@ describe('transformerAttributifyJs', () => {
           </div>
         </div>
       </div>
-      <div absolute bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30 fw300=\\"\\">
+      <div absolute bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
         on-demand · instant · fully customizable
       </div>"
     `)