fix: ClassParser incorrectly end group with jsx functional component …

…content (#660)
windicss · Jan 17, 2022 · 0be1b2c · 0be1b2c
1 parent a755743
commit 0be1b2c
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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');
+  });
 });