From 5d885d47ab3ee6ee974e95005102fa892fc32190 Mon Sep 17 00:00:00 2001
From: Neil <zguolee@foxmail.com>
Date: Mon, 15 Aug 2022 22:41:36 +0800
Subject: [PATCH] fix: arbitrary values

---
 packages/transformer-rename-class/src/index.ts | 13 ++++++++++++-
 test/transformer-rename-class.test.ts          | 13 ++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/transformer-rename-class/src/index.ts b/packages/transformer-rename-class/src/index.ts
index 114c2cd..20fcf42 100644
--- a/packages/transformer-rename-class/src/index.ts
+++ b/packages/transformer-rename-class/src/index.ts
@@ -37,6 +37,8 @@ export default function transformerRenameClass(options: RenameClassOptions = {})
     const result = await Promise.all(body.split(/\s+/).filter(Boolean).map(async i => [i, !!await uno.parseToken(i)] as const))
     const known = result.filter(([, matched]) => matched).map(([i]) => i)
     const unknown = result.filter(([, matched]) => !matched).map(([i]) => i)
+    console.log('known', known)
+    console.log('unknown', unknown)
     replacements.push(...unknown)
     body = known.join(' ')
     if (body) {
@@ -64,15 +66,24 @@ export default function transformerRenameClass(options: RenameClassOptions = {})
         const body = matchSplit[1].slice(1, -1)
 
         if (charReg.test(body)) {
+          console.log(body)
           const replacements = await compileApplet(body, ctx)
+          console.log(replacements)
           s.overwrite(start, start + match[0].length, `${matchSplit[0]}="${replacements.join(' ')}"`)
         }
       }
       const stringMatches = [...s.original.matchAll(stringRE)]
       for (const match of stringMatches) {
         // skip `${...}`
-        if (match[0].includes('${'))
+        if (/\$\{.*\}/g.test(match[0]))
           continue
+        // skip all the image formats in HTML
+        if (/\.(png|jpg|jpeg|gif|svg)/g.test(match[0]))
+          continue
+        // skip http(s)://
+        if (/^http(s)?:\/\//g.test(match[0]))
+          continue
+
         const start = match.index!
         const body = match[0].slice(1, -1)
         if (charReg.test(body)) {
diff --git a/test/transformer-rename-class.test.ts b/test/transformer-rename-class.test.ts
index 558c3fa..a98c82b 100644
--- a/test/transformer-rename-class.test.ts
+++ b/test/transformer-rename-class.test.ts
@@ -44,7 +44,10 @@ describe('transformer-rename-class', () => {
         <div class="py-3.5 grid-cols-[0.7fr_repeat(7,1fr)]">
           py-3
         </div>
-        <div hover-class="text-green-500/50">
+        <div class="bg-[url('/img/hero-pattern.svg')]">
+          uniapp
+        </div>
+        <div class="bg-[url('https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg')]">
           uniapp
         </div>
         <div class="m-0.5 p-1 text-2xl" :class="true ? '' : 'text-yellow-500 p-2.5'">
@@ -74,7 +77,10 @@ describe('transformer-rename-class', () => {
               <div class=\\"uno-0tr0xg\\">
                 py-3
               </div>
-              <div hover-class=\\"uno-cteohy\\">
+              <div class=\\"uno-qdng63\\">
+                uniapp
+              </div>
+              <div class=\\"uno-exs88i\\">
                 uniapp
               </div>
               <div class=\\"uno-tw4biu\\" :class=\\"true ? '' : 'uno-qju0i9'\\">
@@ -88,9 +94,10 @@ describe('transformer-rename-class', () => {
       .uno-tw4biu{margin:0.125rem;padding:0.25rem;font-size:1.5rem;line-height:2rem;}
       .uno-2gzdpm{border-width:1px;border-style:solid;--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));--un-bg-opacity:1 !important;background-color:rgba(239,68,68,var(--un-bg-opacity)) !important;padding-left:0.5rem;padding-right:0.5rem;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
       .uno-98db2v{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));}
+      .uno-exs88i{--un-url:url('https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg');background-image:var(--un-url);}
+      .uno-qdng63{--un-url:url('/img/hero-pattern.svg');background-image:var(--un-url);}
       .uno-qju0i9{padding:0.625rem;--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));}
       .uno-2zpnl9{color:rgba(187,247,208,0.5);}
-      .uno-cteohy{color:rgba(34,197,94,0.5);}
       /* layer: default */
       .flex{display:flex;}
       .flex-col{flex-direction:column;}