Fix issue with className extraction when spread operator is used

dimitribarbot · Jan 22, 2023 · 4d55083 · 4d55083
1 parent 37239cc
commit 4d55083
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [0.4.3] - 2023-01-22
+
+### Fixed
+
+- Fix issue with className extraction when spread operator is used
+
 ## [0.4.2] - 2023-01-22
 
 ### Changed
@@ -34,7 +40,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add missing props to extracted components when expressions are used
 
-[unreleased]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.2...HEAD
+[unreleased]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.3...HEAD
+[0.4.3]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.2...v0.4.3
 [0.4.2]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.1...v0.4.2
 [0.4.1]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.0...v0.4.1
 [0.4.0]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.3.2...v0.4.0

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tailwind-styled-components-extractor",
   "displayName": "Tailwind Styled-Components Extractor",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Generate tailwind styled-components from JSX tags. A faster tailwind styled-component workflow.",
   "license": "MIT",
   "publisher": "dimitribarbot",

diff --git a/src/lib/extractor.test.ts b/src/lib/extractor.test.ts
@@ -22,6 +22,7 @@ describe("collectUnboundComponents", () => {
           <Efg className={c ? "justify-center" : "justify-start"} />
           <Ghi className={\`flex flex-col \${c(a?.e) && "flex"} \${(a && b) || c ? "justify-center" : "justify-start"}\`} b={b} />
           <Efg className="justify-center" />
+          <Efg className={{ ...(a || {}) }.b ?? ""} />
           <Ghi />
           <section />
         </Def>
@@ -61,6 +62,12 @@ describe("collectUnboundComponents", () => {
         className: "justify-center",
         classNameOffsets: { start: 393, end: 419 }
       },
+      {
+        name: "Efg",
+        propNames: ["a"],
+        className: '${({ a }) => { ...(a || {}) }.b ?? ""}',
+        classNameOffsets: { start: 438, end: 474 }
+      },
       {
         name: "Ghi",
         propNames: [],

diff --git a/src/lib/extractor.ts b/src/lib/extractor.ts
@@ -13,7 +13,9 @@ import {
   isJSXOpeningElement,
   isLogicalExpression,
   isMemberExpression,
+  isObjectExpression,
   isOptionalMemberExpression,
+  isSpreadElement,
   isStringLiteral,
   isTemplateLiteral,
   JSXAttribute,
@@ -207,6 +209,14 @@ const fillExpressionIdentifiers = (
     for (const argument of expression.arguments) {
       if (isExpression(argument)) {
         fillExpressionIdentifiers(argument, identifiers);
+      } else if (isSpreadElement(argument)) {
+        fillExpressionIdentifiers(argument.argument, identifiers);
+      }
+    }
+  } else if (isObjectExpression(expression)) {
+    for (const property of expression.properties) {
+      if (isSpreadElement(property)) {
+        fillExpressionIdentifiers(property.argument, identifiers);
       }
     }
   } else if (isConditionalExpression(expression)) {