fix: arbitrary values

unocss-applet · Aug 15, 2022 · 5d885d4 · 5d885d4
1 parent 4c7372e
commit 5d885d4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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;}