From 0be1b2c14e38d818217f435c25fda83742955e36 Mon Sep 17 00:00:00 2001
From: Hanxx <hanlueng@gmail.com>
Date: Mon, 17 Jan 2022 16:21:27 +0800
Subject: [PATCH] fix: ClassParser incorrectly end group with jsx functional
 component content (#660)

---
 src/utils/parser/class.ts                   |  5 +-
 test/parser/__snapshots__/class.test.ts.yml | 93 +++++++++++++++++++++
 test/parser/class.test.ts                   |  9 ++
 3 files changed, 106 insertions(+), 1 deletion(-)

diff --git a/src/utils/parser/class.ts b/src/utils/parser/class.ts
index 69687038..140a16da 100644
--- a/src/utils/parser/class.ts
+++ b/src/utils/parser/class.ts
@@ -29,6 +29,7 @@ export default class ClassParser {
     let ignoreSpace = false;
     let ignoreBracket = false;
     let insideSquareBracket = false;
+    let brackets = 0;
     const sepLength = this.separator.length;
     const parts: Element[] = [];
     const length = this.classNames.length;
@@ -73,6 +74,7 @@ export default class ClassParser {
         } else if (ignoreSpace) {
           group = this._handle_group();
         } else {
+          brackets += 1;
           func = this.classNames.slice(groupStart, this.index);
           while (!isSpace(this.classNames.charAt(this.index))) {
             this.index++;
@@ -125,7 +127,8 @@ export default class ClassParser {
         ignoreSpace = false;
       }
       if (char === ')') {
-        if (!ignoreBracket) break; // end group
+        brackets -= 1;
+        if (!ignoreBracket && brackets < 0) break; // end group
         ignoreBracket = false;
       }
     }
diff --git a/test/parser/__snapshots__/class.test.ts.yml b/test/parser/__snapshots__/class.test.ts.yml
index c5580856..69d0f3fe 100644
--- a/test/parser/__snapshots__/class.test.ts.yml
+++ b/test/parser/__snapshots__/class.test.ts.yml
@@ -507,6 +507,99 @@ Tools / parse bad class with quotes / bad classes / 0: |-
       "important": false
     }
   ]
+Tools / parse function with parameter deconstruction / jsx function component / 0: |-
+  [
+    {
+      "raw": "function",
+      "start": 0,
+      "end": 8,
+      "variants": [],
+      "content": "function",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "ComponentA({",
+      "start": 9,
+      "end": 21,
+      "variants": [],
+      "content": "ComponentA({",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "name",
+      "start": 22,
+      "end": 26,
+      "variants": [],
+      "content": "name",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "}",
+      "start": 27,
+      "end": 28,
+      "variants": [],
+      "content": "}",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "Props",
+      "start": 29,
+      "end": 34,
+      "variants": [],
+      "content": "Props",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "{",
+      "start": 36,
+      "end": 37,
+      "variants": [],
+      "content": "{",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "return",
+      "start": 38,
+      "end": 44,
+      "variants": [],
+      "content": "return",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "div",
+      "start": 45,
+      "end": 48,
+      "variants": [],
+      "content": "div",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "className=",
+      "start": 49,
+      "end": 59,
+      "variants": [],
+      "content": "className=",
+      "type": "utility",
+      "important": false
+    },
+    {
+      "raw": "grid",
+      "start": 60,
+      "end": 64,
+      "variants": [],
+      "content": "grid",
+      "type": "utility",
+      "important": false
+    }
+  ]
 Tools / parse important / parse important / 0: |-
   [
     {
diff --git a/test/parser/class.test.ts b/test/parser/class.test.ts
index 55c61689..102c587a 100644
--- a/test/parser/class.test.ts
+++ b/test/parser/class.test.ts
@@ -49,4 +49,13 @@ describe('ClassParser', () => {
     const parser = new ClassParser(classes, ':', []);
     expect(parser.parse()).toMatchSnapshot('bad half bracket');
   });
+
+  it('parse function with parameter deconstruction', () => {
+    const classes = 'function ComponentA({ name } Props) { return div className= grid }';
+    const result = new ClassParser(classes, ':', []).parse();
+
+    const findGrid = (els: any[]) => els.find(item => item.raw === 'grid');
+    expect(findGrid(result)).toBeTruthy();
+    expect(result).toMatchSnapshot('jsx function component');
+  });
 });