fix: when{} in the tag

unocss-applet · Aug 29, 2022 · 104a3f6 · 104a3f6
1 parent ae5768f
commit 104a3f6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/transformer-attributify/src/index.ts b/packages/transformer-attributify/src/index.ts
@@ -9,7 +9,8 @@ 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']

diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue
@@ -8,19 +8,22 @@ const bool = true
 <template>
   <div class="flex aaa flex-col justify-center items-center">
     <div text="4xl" class="rotate-180 i-carbon-campsite" :class="bg" />
-    <div class="border bg-blue-200 px-2 transition-all bg-red-500 font-(light mono) ">
+    <div class="border bg-blue-200 font-(light mono) ">
       <div class="hover:(!bg-gray-400 text-white font-medium)" text="#6f4">
         0123456789
       </div>
     </div>
+    <div :class="{ 'bg-blue': bool }" p-2>
+      class
+    </div>
     <div class="p-1" :class="bool ? 'text-yellow-500 px-2.5' : ''">
       {{ `index${index + 1}` }}
     </div>
-    <div class="bg-green" flex="~ col gap-2">
-      <div text-center w-10 h-10 flex="1" bg-red>
+    <div flex="~ col gap-2" border="2 blue">
+      <div text-center w-10 h-10 flex="1" text="red">
         1
       </div>
-      <div w-10 h-10 flex="1">
+      <div w-10 h-10 flex="1" text-blue>
         2
       </div>
     </div>

diff --git a/test/fixtures/attributify.vue b/test/fixtures/attributify.vue
@@ -8,6 +8,10 @@
     <button ref="sss" btn-block h-10 w-10 bg-blue block hhh>
       Button
     </button>
+    <div class="[&>*]:border-gray/50">
+      <div>a</div>
+      <div>b</div>
+    </div>
     <div mb-a block group peer-checked="text-4xl">
       <div
         font-100 text-4xl mb--3 p-10

diff --git a/test/transformer-attributify.test.ts b/test/transformer-attributify.test.ts
@@ -57,6 +57,9 @@ describe('transformer-attributify', () => {
           <button ref=\\"sss\\" btn-block h-10 w-10 bg-blue block hhh class=\\"btn-block h-10 w-10 bg-blue block\\">
             Button
           </button>
+          <div class=\\"[&>*]:border-gray/50\\">
+            &>
+          </div>
           <div mb-a block group peer-checked=\\"text-4xl\\" class=\\"mb-a block peer-checked-text-4xl\\">
             <div
               font-100 text-4xl mb--3 p-10
@@ -121,6 +124,7 @@ describe('transformer-attributify', () => {
       [peer=\\"\\"]:focus~.peer-focus-scale-75,
       [peer=\\"\\"]:not(:placeholder-shown)~.peer-not-placeholder-shown-scale-75{--un-scale-x:0.75;--un-scale-y:0.75;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));}
       .select-none{user-select:none;}
+      .\\\\[\\\\&\\\\>\\\\*\\\\]\\\\:border-gray\\\\/50>*{border-color:rgba(156,163,175,0.5);}
       .bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}
       .bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
       .bg-gradient-from-yellow-400,