fix(transformer-attributify-jsx): properly extract non-valued attributes (unocss#2291)

sibbng · web-flow · commit 7eab6e283a1e · 2023-03-06T06:49:18.000+01:00
diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
@@ -39,8 +39,8 @@ export interface TransformerAttributifyJsxOptions {
 
 const elementRE = /<([^>\s]*\s)((?:'.*?'|".*?"|`.*?`|\{.*?\}|[^>]*?)*)/g
 const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
-const classFilterRE = /(className|class)\s*=\s*\{[^\}]*\}/i
-const curlybraceRE = /\w+\s?=\s?\{.+?\}/g
+const valuedAttributeRE = /((?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~<]+)=(?:["]([^"]*)["]|[']([^']*)[']|[{]((?:[`(](?:[^`)]*)[`)]|[^}])+)[}])/gms
+
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
   const {
     blocklist = [],
@@ -74,12 +74,9 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
 
       for (const item of Array.from(code.original.matchAll(elementRE))) {
         // Get the length of the className part, and replace it with the equal length of empty string
-        const classNamePart = item[2].match(classFilterRE)
         let attributifyPart = item[2]
-        if (classNamePart)
-          attributifyPart = item[2].replace(classFilterRE, ' '.repeat(classNamePart[0].length))
-        if (curlybraceRE.test(attributifyPart))
-          attributifyPart = attributifyPart.replace(curlybraceRE, match => ' '.repeat(match.length))
+        if (valuedAttributeRE.test(attributifyPart))
+          attributifyPart = attributifyPart.replace(valuedAttributeRE, match => ' '.repeat(match.length))
         for (const attr of attributifyPart.matchAll(attributeRE)) {
           const matchedRule = attr[0].replace(/\:/i, '-')
           if (matchedRule.includes('=') || isBlocked(matchedRule))
diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
@@ -26,8 +26,11 @@ describe('transformerAttributifyJs', () => {
     </div>
   </div>
 </div>
-<section className={cn({ 'c-red': variable > 0 })}>
-</section>
+<section 
+  className={cn({ 'c-red': variable > 0 }, 'mr-10')} 
+  mr-10 
+  className={cn({ 'c-red': variable > 0 }, 'mr-10')}
+></section>
 <div absolute bottom-5 right-0 left-0 text-center op30 fw300>
   on-demand · instant · fully customizable
 </div>
@@ -64,8 +67,11 @@ describe('transformerAttributifyJs', () => {
           </div>
         </div>
       </div>
-      <section className={cn({ 'c-red': variable > 0 })}>
-      </section>
+      <section 
+        className={cn({ 'c-red': variable > 0 }, 'mr-10')} 
+        mr-10=\\"\\" 
+        className={cn({ 'c-red': variable > 0 }, 'mr-10')}
+      ></section>
       <div absolute=\\"\\" bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
         on-demand · instant · fully customizable
       </div>"
@@ -100,8 +106,11 @@ describe('transformerAttributifyJs', () => {
           </div>
         </div>
       </div>
-      <section className={cn({ 'c-red': variable > 0 })}>
-      </section>
+      <section 
+        className={cn({ 'c-red': variable > 0 }, 'mr-10')} 
+        mr-10=\\"\\" 
+        className={cn({ 'c-red': variable > 0 }, 'mr-10')}
+      ></section>
       <div absolute bottom-5=\\"\\" right-0=\\"\\" left-0=\\"\\" text-center=\\"\\" op30=\\"\\" fw300=\\"\\">
         on-demand · instant · fully customizable
       </div>"
