fix(transformer-attributify-jsx): ignore the className part (#1582)

unocss · Sep 14, 2022 · 52cdd7e · 52cdd7e
1 parent 1f536b0
commit 52cdd7e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
@@ -39,6 +39,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
 
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
   const {
@@ -72,7 +73,13 @@ export default function transformerAttributifyJsx(options: TransformerAttributif
       const tasks: Promise<void>[] = []
 
       for (const item of Array.from(code.original.matchAll(elementRE))) {
-        for (const attr of item[3].matchAll(attributeRE)) {
+        // Get the length of the className part, and replace it with the equal length of empty string
+        const classNamePart = item[3].match(classFilterRE)
+        let attributifyPart = item[3]
+        if (classNamePart)
+          attributifyPart = item[3].replace(classFilterRE, ' '.repeat(classNamePart[0].length))
+
+        for (const attr of attributifyPart.matchAll(attributeRE)) {
           const matchedRule = attr[0].replace(/\:/i, '-')
           if (matchedRule.includes('=') || isBlocked(matchedRule))
             continue

diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
@@ -7,12 +7,12 @@ import transformerAttributifyJsx from '../packages/transformer-attributify-jsx/s
 
 describe('transformerAttributifyJs', () => {
   const originalCode = `
-<div h-full text-center flex select-none>
+<div h-full text-center flex select-none className={red ? 'text-red': 'text-green'}>
   <div ma>
     <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
       unocss
     </div>
-    <div op30 text-lg fw300 m1>
+    <div op30 text-lg fw300 m1 className={hidden && 'op0'}>
       The instant on-demand Atomic CSS engine.
     </div>
     <div m2 flex justify-center text-2xl op30 hover:op80 hover:text-2xl>
@@ -42,12 +42,12 @@ describe('transformerAttributifyJs', () => {
     await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any)
 
     expect(code.toString()).toMatchInlineSnapshot(`
-      "<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\">
+      "<div h-full=\\"\\" text-center=\\"\\" flex=\\"\\" select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
         <div ma=\\"\\">
           <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
             unocss
           </div>
-          <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
+          <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
             The instant on-demand Atomic CSS engine.
           </div>
           <div m2=\\"\\" flex=\\"\\" justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">
@@ -75,12 +75,12 @@ describe('transformerAttributifyJs', () => {
     }).transform(code, 'app.jsx', { uno, tokens: new Set() } as any)
 
     expect(code.toString()).toMatchInlineSnapshot(`
-      "<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\">
+      "<div h-full=\\"\\" text-center=\\"\\" flex select-none=\\"\\" className={red ? 'text-red': 'text-green'}>
         <div ma=\\"\\">
           <div text-5xl=\\"\\" fw100=\\"\\" animate-bounce-alt=\\"\\" animate-count-infinite=\\"\\" animate-duration-1s=\\"\\">
             unocss
           </div>
-          <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\">
+          <div op30=\\"\\" text-lg=\\"\\" fw300=\\"\\" m1=\\"\\" className={hidden && 'op0'}>
             The instant on-demand Atomic CSS engine.
           </div>
           <div m2=\\"\\" flex justify-center=\\"\\" text-2xl=\\"\\" op30=\\"\\" hover-op80=\\"\\" hover-text-2xl=\\"\\">