fix: parse ${}

unocss-applet · Aug 15, 2022 · ada0f72 · ada0f72
1 parent e2803ad
commit ada0f72
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/packages/transformer-rename-class/src/index.ts b/packages/transformer-rename-class/src/index.ts
@@ -55,6 +55,7 @@ export default function transformerRenameClass(options: RenameClassOptions = {})
     async transform(s, _, ctx) {
       const classMatches = [...s.original.matchAll(classRE)]
       for (const match of classMatches) {
+        // skip `... ? ... : ...`
         if (/\?.*:/g.test(match[0]))
           continue
         const start = match.index!
@@ -69,6 +70,9 @@ export default function transformerRenameClass(options: RenameClassOptions = {})
       }
       const stringMatches = [...s.original.matchAll(stringRE)]
       for (const match of stringMatches) {
+        // skip `${...}`
+        if (match[0].includes('${'))
+          continue
         const start = match.index!
         const body = match[0].slice(1, -1)
         if (charReg.test(body)) {

diff --git a/test/__snapshots__/preset-applet.test.ts.snap b/test/__snapshots__/preset-applet.test.ts.snap
@@ -3,37 +3,37 @@
 exports[`targets 1`] = `
 "/* layer: default */
 .border-custom-b{border-color:rgba(var(--custom), 1);}
-.border-custom-b-div-0{border-color:rgba(var(--custom), 0);}
-.border-custom-b-div-10{border-color:rgba(var(--custom), 0.1);}
+.border-custom-b\\\\/0{border-color:rgba(var(--custom), 0);}
+.border-custom-b\\\\/10{border-color:rgba(var(--custom), 0.1);}
 .bg-custom-b{background-color:rgba(var(--custom), 1);}
 .bg-custom-c{--un-bg-opacity:1;background-color:rgba(var(--custom-c),var(--un-bg-opacity));}
-.bg-custom-c-div-10{background-color:rgba(var(--custom-c),0.1);}
+.bg-custom-c\\\\/10{background-color:rgba(var(--custom-c),0.1);}
 .bg-custom-d{background-color:hsl(var(--custom-d), 1);}
-.bg-custom-d-div-20{background-color:hsl(var(--custom-d), 0.2);}
+.bg-custom-d\\\\/20{background-color:hsl(var(--custom-d), 0.2);}
 .bg-custom-e{--un-bg-opacity:1;background-color:hsla(var(--custom-e),var(--un-bg-opacity));}
-.bg-custom-e-div-30{background-color:hsla(var(--custom-e),0.3);}
+.bg-custom-e\\\\/30{background-color:hsla(var(--custom-e),0.3);}
 .bg-custom-f{--un-bg-opacity:1;background-color:lch(var(--custom-f) / var(--un-bg-opacity));}
-.bg-custom-f-div-30{background-color:lch(var(--custom-f) / 0.3);}
-.bg-custom-f-div-l-varp---f-op-q-r{background-color:lch(var(--custom-f) / var(--f-op));}
+.bg-custom-f\\\\/\\\\[var\\\\(--f-op\\\\)\\\\]{background-color:lch(var(--custom-f) / var(--f-op));}
+.bg-custom-f\\\\/30{background-color:lch(var(--custom-f) / 0.3);}
 .bg-info{--un-bg-opacity:1;background-color:hsla(200.1,100%,54.3%,var(--un-bg-opacity));}
-.bg-info-div-10{background-color:hsla(200.1,100%,54.3%,0.1);}
-.bg-info-div-l-10-pct-r{background-color:hsla(200.1,100%,54.3%,10%);}
+.bg-info\\\\/\\\\[10\\\\%\\\\]{background-color:hsla(200.1,100%,54.3%,10%);}
+.bg-info\\\\/10{background-color:hsla(200.1,100%,54.3%,0.1);}
 .mix-shade-50-c-red-400{--un-text-opacity:1;color:rgba(calc(248 + (0 - 248) * 50 / 100),calc(113 + (0 - 113) * 50 / 100),calc(113 + (0 - 113) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .mix-shift--50-c-red-600{--un-text-opacity:1;color:rgba(calc(220 + (255 - 220) * 50 / 100),calc(38 + (255 - 38) * 50 / 100),calc(38 + (255 - 38) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .mix-shift-50-c-red-600{--un-text-opacity:1;color:rgba(calc(220 + (0 - 220) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(38 + (0 - 38) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .mix-tint-50-c-red-400{--un-text-opacity:1;color:rgba(calc(248 + (255 - 248) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(113 + (255 - 113) * 50 / 100),calc(var(--un-text-opacity) + (1 - var(--un-text-opacity)) * 50 / 100));}
 .text-custom-a{color:var(--custom);}
-.focus-c-placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgba(252,165,165,var(--un-placeholder-opacity));}
+.focus\\\\:placeholder-red-300:focus::placeholder{--un-placeholder-opacity:1;color:rgba(252,165,165,var(--un-placeholder-opacity));}
 .placeholder-inherit::placeholder{color:inherit;}
 .placeholder-red-400::placeholder{--un-placeholder-opacity:1;color:rgba(248,113,113,var(--un-placeholder-opacity));}
-.hover-c-placeholder-op90:hover::placeholder,
+.hover\\\\:placeholder-op90:hover::placeholder,
 .placeholder-op90::placeholder{--un-placeholder-opacity:0.9;}
 .placeholder-opacity-10::placeholder{--un-placeholder-opacity:0.1;}
 @media (hover: none) and (pointer: coarse){
-.media-touch-c-p-4{padding:1rem;}
+.media-touch\\\\:p-4{padding:1rem;}
 }
 @media (prefers-reduced-transparency: reduce){
-.media-opacity_not_ok-c-opacity-0{opacity:0;}
+.media-opacity_not_ok\\\\:opacity-0{opacity:0;}
 }"
 `;
 

diff --git a/test/transformer-rename-class.test.ts b/test/transformer-rename-class.test.ts
@@ -39,7 +39,7 @@ describe('transformer-rename-class', () => {
           </div>
         </div>
         <div class="p-1" :class="true ? 'text-yellow-500' : ''">
-          abckefghijklmnopqrstuvwxyz
+          {{ \`index\${index + 1}\` }}
         </div>
         <div class="py-3.5 grid-cols-[0.7fr_repeat(7,1fr)]">
           py-3
@@ -69,7 +69,7 @@ describe('transformer-rename-class', () => {
                 </div>
               </div>
               <div class=\\"p-1\\" :class=\\"true ? 'text-yellow-500' : ''\\">
-                abckefghijklmnopqrstuvwxyz
+                {{ \`index\${index + 1}\` }}
               </div>
               <div class=\\"uno-0tr0xg\\">
                 py-3