fix(transformer-attributify-jsx): skip curlybrace expression (#1867)

Co-authored-by: liuxinqi <liuxinqi@zdns.cn>
Co-authored-by: Frozen FIsh <976499226@qq.com>

packages/transformer-attributify-jsx/src/index.ts

@@ -40,6 +40,7 @@ export interface TransformerAttributifyJsxOptions {
 const elementRE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][-.:0-9_a-zA-Z]*)((?:\s+[^>]*?(?:(?:'[^']*')|(?:"[^"]*"))?)*)\s*(\/?)>/gs
 const attributeRE = /([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
 const classFilterRE = /(className|class)\s*=\s*\{[^\}]*\}/i
+const curlybraceRE = /\{.+\}/g
 
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
   const {
@@ -78,7 +79,8 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
         let attributifyPart = item[3]
         if (classNamePart)
           attributifyPart = item[3].replace(classFilterRE, ' '.repeat(classNamePart[0].length))
-
+        if (curlybraceRE.test(attributifyPart))
+          continue
         for (const attr of attributifyPart.matchAll(attributeRE)) {
           const matchedRule = attr[0].replace(/\:/i, '-')
           if (matchedRule.includes('=') || isBlocked(matchedRule))

test/transformer-attributify-jsx.test.ts

@@ -8,6 +8,7 @@ import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/s
 describe('transformerAttributifyJs', () => {
   const originalCode = `
 <div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
+  <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
   <div ma>
     <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
       unocss
@@ -43,6 +44,7 @@ describe('transformerAttributifyJs', () => {
 
     expect(code.toString()).toMatchInlineSnapshot(`
       "<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
+        <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
         <div ma=\\"\\">
           <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
             unocss
@@ -76,6 +78,7 @@ describe('transformerAttributifyJs', () => {
 
     expect(code.toString()).toMatchInlineSnapshot(`
       "<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
+        <input value={ target ? '10px' : '20px'} style={{ height: '100px' }}>
         <div ma=\\"\\">
           <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
             unocss