fix: when tag content have >

unocss-applet · Aug 31, 2022 · d5cf30a · d5cf30a
1 parent 1eebc97
commit d5cf30a
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 224 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
     "**/.DS_Store": true,
     "**/Thumbs.db": true,
     "**/node_modules": true
-  }
+  },
+  "unocss.root": "./playground"
 }
diff --git a/packages/transformer-applet/src/index.ts b/packages/transformer-applet/src/index.ts
@@ -3,7 +3,7 @@ import MagicString from 'magic-string'
 import type { TransformerAppletOptions } from './types'
 import { compileApplet } from './compile'
 
-const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((\&>)|.*?)*?)\/?>/gs
+const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((".*?>?.*?")|.*?)*?)\/?>/gs
 const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g
 
 // Regular expression of characters to be escaped
@@ -33,14 +33,19 @@ export default function transformerApplet(options: TransformerAppletOptions = {}
 
           if (!content)
             continue
+
           if (['class', 'className', 'hover-class'].includes(name)) {
-            if (!name.includes(':')) {
+            if (name.includes(':'))
+              continue
+
+            if (charReg.test(content)) {
               const replacements = await compileApplet(content, ctx, options)
               matchStrTemp = matchStrTemp.replace(content, replacements.join(' '))
             }
           }
         }
-        code.overwrite(start, start + eleMatch[0].length, matchStrTemp)
+        if (eleMatch[0] !== matchStrTemp)
+          code.overwrite(start, start + eleMatch[0].length, matchStrTemp)
       }
       code = new MagicString(code.toString())
 

diff --git a/packages/transformer-attributify/src/index.ts b/packages/transformer-attributify/src/index.ts
@@ -10,7 +10,7 @@ const strippedPrefixes = [
 
 const splitterRE = /[\s'"`;]+/g
 // const elementRE = /<\w(?=.*>)[\w:\.$-]*\s((?:['"`\{].*?['"`\}]|.*?)*?)>/gs
-const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((\&>)|.*?)*?)\/?>/gs
+const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((".*?>?.*?")|.*?)*?)\/?>/gs
 const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g
 
 export const defaultIgnoreAttributes = ['placeholder', 'setup', 'lang', 'scoped']
@@ -40,6 +40,7 @@ export default function transformerAttributify(options: TransformerAttributifyOp
           const matchStr = attribute[0]
           const name = attribute[1]
           const content = attribute[3]
+          // console.log('name', name, 'content', content)
           let _name = prefixedOnly ? name.replace(prefix, '') : name
 
           if (!ignoreAttributes.includes(_name)) {
@@ -80,7 +81,7 @@ export default function transformerAttributify(options: TransformerAttributifyOp
             matchStrTemp = `${matchStrTemp.slice(0, sliceNum)} class="${attrSelectors.join(' ')}"${matchStrTemp.slice(sliceNum)}`
           }
           else {
-            matchStrTemp = matchStrTemp.replace(existsClass, `${existsClass} ${attrSelectors.join(' ')}`)
+            matchStrTemp = matchStrTemp.replace(`"${existsClass}"`, `"${existsClass} ${attrSelectors.join(' ')}"`)
           }
           code.overwrite(start, start + eleMatch[0].length, matchStrTemp)
         }

diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue
@@ -1,43 +1,39 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 const bg = 'bg-[hsl(2.7,81.9%,69.6%)]'
 const index = 1
 const customClass = 'text-red'
-const bool = true
+const bool = ref<boolean>()
 </script>
 
 <template>
-  <div class="flex aaa flex-col justify-center items-center">
+  <div class="text-center aaa" p="4">
     <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" />
     <div class="border bg-blue-200 font-(light mono) ">
-      <div class="hover:(!bg-gray-400 text-white font-medium)" text="#6f4">
+      <div class="hover:(!bg-gray-600 text-white font-medium)" text="#fff">
         0123456789
       </div>
     </div>
     <div :class="{ 'bg-blue': bool }" p-2 :hover-class="['!bg-green']">
       class="hover:bg-green"
     </div>
-    <div class="p-1" :class="bool ? 'text-yellow-500 px-2.5' : ''">
+    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
+      <div i-carbon-campsite inline-block color="blue" text="xl" />
       {{ `index${index + 1}` }}
     </div>
-    <div i-carbon-campsite inline-block color="blue" />
-    <div flex="~ col gap-2" border="2 blue">
-      <div text-center w-10 h-10 flex="1" text="red">
-        1
+    <div flex="~ col" border="2 blue">
+      <div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
+        0123456789
       </div>
-      <div w-10 h-10 flex="1" text-blue>
-        2
+      <div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
+        0123456789
       </div>
     </div>
-    <uni-easyinput />
-    <div class="bg-[url(https://static.runoob.com/images/demo/demo3.jpg)]" w-20 h-10>
+    <div class="bg-[url(https://static.runoob.com/images/demo/demo2.jpg)]" w-40 h-20 ma color="white" bg="center cover">
       bg-img
     </div>
     <div class="m-0.5 p-1 text-2xl" :class="bool ? '' : 'text-yellow-500 p-2.5'">
       abckefghijklmnopqrstuvwxyz
     </div>
-    <!-- eslint-disable-next-line vue/prefer-separate-static-class -->
-    <view :class="['underline', customClass]">
-      aaa
-    </view>
   </div>
 </template>
diff --git a/test/fixtures/attributify.vue b/test/fixtures/attributify.vue
diff --git a/test/fixtures/rules.vue b/test/fixtures/rules.vue
@@ -1,44 +1,40 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 const bg = 'bg-[hsl(2.7,81.9%,69.6%)]'
 const index = 1
 const customClass = 'text-red'
-const bool = true
+const bool = ref<boolean>()
 </script>
 
 <template>
-  <div class="flex aaa flex-col justify-center items-center">
+  <div class="text-center aaa" p="4">
     <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" />
     <div class="border bg-blue-200 font-(light mono) ">
-      <div class="hover:(!bg-gray-400 text-white font-medium)" text="#6f4">
+      <div class="hover:(!bg-gray-600 text-white font-medium)" text="#fff">
         0123456789
       </div>
     </div>
     <div :class="{ 'bg-blue': bool }" p-2 :hover-class="['!bg-green']">
       class="hover:bg-green"
     </div>
-    <div class="p-1" :class="bool ? 'text-yellow-500 px-2.5' : ''">
+    <div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
+      <div i-carbon-campsite inline-block color="blue" text="xl" />
       {{ `index${index + 1}` }}
     </div>
-    <div i-carbon-campsite inline-block color="blue" />
-    <div flex="~ col gap-2" border="2 blue">
-      <div text-center w-10 h-10 flex="1" text="red">
-        1
+    <div flex="~ col" border="2 blue">
+      <div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
+        0123456789
       </div>
-      <div w-10 h-10 flex="1" text-blue>
-        2
+      <div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
+        0123456789
       </div>
     </div>
-    <uni-easyinput />
-    <div class="bg-[url(https://static.runoob.com/images/demo/demo3.jpg)]" w-20 h-10>
+    <div class="bg-[url(https://static.runoob.com/images/demo/demo2.jpg)]" w-40 h-20 ma color="white" bg="center cover">
       bg-img
     </div>
     <div class="m-0.5 p-1 text-2xl" :class="bool ? '' : 'text-yellow-500 p-2.5'">
       abckefghijklmnopqrstuvwxyz
     </div>
-    <!-- eslint-disable-next-line vue/prefer-separate-static-class -->
-    <view :class="['underline', customClass]">
-      aaa
-    </view>
   </div>
 </template>
 
diff --git a/test/transformer-applet.test.ts b/test/transformer-applet.test.ts
@@ -34,76 +34,75 @@ describe('transformer-applet', () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "code": "<script setup lang=\\"ts\\">
+      import { ref } from 'vue'
       const bg = 'uno-98db2v'
       const index = 1
       const customClass = 'text-red'
-      const bool = true
+      const bool = ref<boolean>()
       </script>
 
       <template>
-        <div class=\\"uno-j2nj36 aaa\\">
-          <div text=\\"4xl\\" class=\\"uno-e22fjo i-carbon-campsite\\" :class=\\"bg\\" />
+        <div class=\\"text-center aaa\\" p=\\"4\\">
+          <div text=\\"4xl\\" class=\\"rotate-180 i-carbon-campsite\\" :class=\\"bg\\" />
           <div class=\\"uno-1lreki font-(light mono)\\">
-            <div class=\\"uno-4oaq3e hover:(!bg-gray-400 font-medium)\\" text=\\"#6f4\\">
+            <div class=\\"uno-4oaq3e hover:(!bg-gray-600 font-medium)\\" text=\\"#fff\\">
               0123456789
             </div>
           </div>
           <div :class=\\"{ 'bg-blue': bool }\\" p-2 :hover-class=\\"['uno-y5ng0p']\\">
             class=\\"hover:bg-green\\"
           </div>
-          <div class=\\"uno-82knp1\\" :class=\\"bool ? 'uno-2z589z' : ''\\">
+          <div flex=\\"~ col gap-1\\" class=\\"p-1\\" items-center :class=\\"bool ? 'uno-2z589z' : ''\\">
+            <div i-carbon-campsite inline-block color=\\"blue\\" text=\\"xl\\" />
             {{ \`index\${index + 1}\` }}
           </div>
-          <div i-carbon-campsite inline-block color=\\"blue\\" />
-          <div flex=\\"~ col gap-2\\" border=\\"2 blue\\">
-            <div text-center w-10 h-10 flex=\\"1\\" text=\\"red\\">
-              1
+          <div flex=\\"~ col\\" border=\\"2 blue\\">
+            <div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\">
+              0123456789
             </div>
-            <div w-10 h-10 flex=\\"1\\" text-blue>
-              2
+            <div h-10 flex=\\"1\\" text-blue :class=\\"[index > 1 ? 'text' : '']\\" :style=\\"[index > 1 ? '' : '']\\" :type=\\"index > 1\\">
+              0123456789
             </div>
           </div>
-          <uni-easyinput />
-          <div class=\\"uno-gdmskp\\" w-20 h-10>
+          <div class=\\"uno-w33epq\\" w-40 h-20 ma color=\\"white\\" bg=\\"center cover\\">
             bg-img
           </div>
           <div class=\\"uno-tw4biu\\" :class=\\"bool ? '' : 'uno-qju0i9'\\">
             abckefghijklmnopqrstuvwxyz
           </div>
-          <!-- eslint-disable-next-line vue/prefer-separate-static-class -->
-          <view :class=\\"['underline', customClass]\\">
-            aaa
-          </view>
         </div>
       </template>
 
       ",
         "css": "/* layer: applet_shortcuts */
       .uno-tw4biu{margin:0.125rem;padding:0.25rem;font-size:1.5rem;line-height:2rem;}
-      .uno-j2nj36{display:flex;flex-direction:column;align-items:center;justify-content:center;}
-      .uno-e22fjo{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
       .uno-1lreki{border-width:1px;border-style:solid;--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));}
       .uno-98db2v{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));}
       .uno-y5ng0p{--un-bg-opacity:1 !important;background-color:rgba(74,222,128,var(--un-bg-opacity)) !important;}
-      .uno-gdmskp{--un-url:url(https://static.runoob.com/images/demo/demo3.jpg);background-image:var(--un-url);}
-      .uno-82knp1{padding:0.25rem;}
+      .uno-w33epq{--un-url:url(https://static.runoob.com/images/demo/demo2.jpg);background-image:var(--un-url);}
       .uno-qju0i9{padding:0.625rem;--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));}
       .uno-2z589z{padding-left:0.625rem;padding-right:0.625rem;--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));}
       .uno-4oaq3e{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
       /* layer: default */
+      .ma{margin:auto;}
       .inline-block{display:inline-block;}
       .h-10{height:2.5rem;}
-      .w-10{width:2.5rem;}
-      .w-20{width:5rem;}
+      .h-20{height:5rem;}
+      .w-40{width:10rem;}
       .flex{display:flex;}
-      .gap-2{grid-gap:0.5rem;gap:0.5rem;}
+      .rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+      .items-center{align-items:center;}
+      .gap-1{grid-gap:0.25rem;gap:0.25rem;}
       .border{border-width:1px;border-style:solid;}
       .bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
       .hover\\\\:bg-green:hover{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));}
+      .p-1{padding:0.25rem;}
       .p-2{padding:0.5rem;}
       .text-center{text-align:center;}
-      .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
-      .underline{text-decoration-line:underline;}",
+      .text-right{text-align:right;}
+      .text-sm{font-size:0.875rem;line-height:1.25rem;}
+      .text-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
+      .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}",
       }
     `)
   })