fix(transformer-attributify-jsx): transform error when html element is like a atomic class (#3147)

evanryuu · web-flow · commit 5908c786a3f4 · 2023-09-22T02:09:50.000+08:00
diff --git a/packages/transformer-attributify-jsx/src/index.ts b/packages/transformer-attributify-jsx/src/index.ts
@@ -38,7 +38,7 @@ export interface TransformerAttributifyJsxOptions {
 }
 
 const elementRE = /(<\w[\w:\.$-]*\s)([\s\S]*?)(?=>[\s\S]?<\/[\s\w:\.$-]*>|\/>)/g
-const attributeRE = /(?<!<)([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
+const attributeRE = /(?<!<\/?)([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?]*)(?:\s*=\s*((?:'[^']*')|(?:"[^"]*")|\S+))?/g
 const valuedAttributeRE = /((?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~<]+)=(?:["]([^"]*)["]|[']([^']*)[']|[{]((?:[`(](?:[^`)]*)[`)]|[^}])+)[}])/gms
 
 export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {
diff --git a/test/transformer-attributify-jsx.test.ts b/test/transformer-attributify-jsx.test.ts
@@ -43,6 +43,18 @@ const originalCode = `
 </div>
   `.trim()
 
+const tagCouldBeAttrCode = `
+<div>
+  <b text-red>Test</b>
+  <h1 text-red>Test</h1>
+  <h2 text-red>Test</h2>
+  <h3 text-red>Test</h3>
+  <h4 text-red>Test</h4>
+  <h5 text-red>Test</h5>
+  <h6 text-red>Test</h6>
+</div>
+`.trim()
+
 describe('transformerAttributifyJsx', () => {
   const uno = createGenerator({
     presets: [
@@ -146,6 +158,23 @@ describe('transformerAttributifyJsx', () => {
         expect(codeToString).not.toMatch(`${rule}=""`)
     })
   })
+
+  test('if class-like tag do not cause error', async () => {
+    const code = new MagicString(tagCouldBeAttrCode)
+    await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any)
+
+    expect(code.toString()).toMatchInlineSnapshot(`
+      "<div>
+        <b text-red=\\"\\">Test</b>
+        <h1 text-red=\\"\\">Test</h1>
+        <h2 text-red=\\"\\">Test</h2>
+        <h3 text-red=\\"\\">Test</h3>
+        <h4 text-red=\\"\\">Test</h4>
+        <h5 text-red=\\"\\">Test</h5>
+        <h6 text-red=\\"\\">Test</h6>
+      </div>"
+    `)
+  })
 })
 
 describe('transformerAttributifyJsxBabel', () => {
@@ -237,4 +266,21 @@ describe('transformerAttributifyJsxBabel', () => {
         expect(codeToString).not.toMatch(`${rule}=""`)
     })
   })
+
+  test('if class-like tag do not cause error', async () => {
+    const code = new MagicString(tagCouldBeAttrCode)
+    await transformerAttributifyJsx().transform(code, 'app.tsx', { uno, tokens: new Set() } as any)
+
+    expect(code.toString()).toMatchInlineSnapshot(`
+      "<div>
+        <b text-red=\\"\\">Test</b>
+        <h1 text-red=\\"\\">Test</h1>
+        <h2 text-red=\\"\\">Test</h2>
+        <h3 text-red=\\"\\">Test</h3>
+        <h4 text-red=\\"\\">Test</h4>
+        <h5 text-red=\\"\\">Test</h5>
+        <h6 text-red=\\"\\">Test</h6>
+      </div>"
+    `)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ export interface TransformerAttributifyJsxOptions {`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`const elementRE = /(<\w[\w:\.$-]\s)([\s\S]?)(?=>[\s\S]?<\/[\s\w:\.$-]*>\|\/>)/g`
`41`		`-const attributeRE = /(?<!<)([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?])(?:\s=\s((?:'[^']')\|(?:"[^"]*")\|\S+))?/g`
	`41`	`+const attributeRE = /(?<!<\/?)([a-zA-Z()#][\[?a-zA-Z0-9-_:()#%\]?])(?:\s=\s((?:'[^']')\|(?:"[^"]*")\|\S+))?/g`
`42`	`42`	const valuedAttributeRE = /((?!\d\|-{2}\|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-.~<]+)=(?:["]([^"])["]\|[']([^'])[']\|[{]((?:[`(](?:[^`)]*)[`)]\|[^}])+)[}])/gms
`43`	`43`
`44`	`44`	`export default function transformerAttributifyJsx(options: TransformerAttributifyJsxOptions = {}): SourceCodeTransformer {`