Do not replace className if there is only a simple identifier mapping…

… such as
dimitribarbot · Jul 21, 2023 · a9ec85c · a9ec85c
1 parent 8caccf4
commit a9ec85c
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 27 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.5] - 2023-07-21
+
+### Fixed
+
+- Do not replace className if there is only a simple identifier mapping such as `className={className}`
+
 ## [0.4.4] - 2023-02-03
 
 ### Fixed
@@ -46,7 +52,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.4...HEAD
+[unreleased]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.5...HEAD
+[0.4.5]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.3...v0.4.4
 [0.4.4]: https://github.com/dimitribarbot/tailwind-styled-components-extractor/compare/v0.4.3...v0.4.4
 [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

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.4",
+  "version": "0.4.5",
   "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
@@ -13,60 +13,68 @@ describe("collectUnboundComponents", () => {
     const code = `
   const Def = 1 as any
   
-  const TestComponent: React.FC = ({ a }) => {
+  const TestComponent: React.FC = ({ a, className }) => {
     const b = a?.b
     const c = b ?? a?.d
     return (
-      <Abc className="flex flex-col">
-        <Def>
-          <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>
-        <ul>
-          <li>123</li>
-          <li>456</li>
-          <li>789</li>
-        </ul>
-      </Abc>
+      <Fih className={className}>
+        <Abc className="flex flex-col">
+          <Def>
+            <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>
+          <ul>
+            <li>123</li>
+            <li>456</li>
+            <li>789</li>
+          </ul>
+        </Abc>
+      </Fih>
     )
   }
     `;
 
     const expectedUnboundComponents: UnboundComponent[] = [
+      {
+        name: "Fih",
+        propNames: ["className"],
+        className: "",
+        classNameOffsets: { start: 152, end: 173 }
+      },
       {
         name: "Abc",
         propNames: [],
         className: "flex flex-col",
-        classNameOffsets: { start: 141, end: 166 }
+        classNameOffsets: { start: 188, end: 213 }
       },
       {
         name: "Efg",
         propNames: ["c"],
         className: '${({ c }) => c ? "justify-center" : "justify-start"}',
-        classNameOffsets: { start: 197, end: 247 }
+        classNameOffsets: { start: 248, end: 298 }
       },
       {
         name: "Ghi",
         propNames: ["c", "a"],
         className:
           '${({ c, a }) => c(a?.e) && "flex"} ${({ c, a, b }) => (a && b) || c ? "justify-center" : "justify-start"} flex flex-col',
-        classNameOffsets: { start: 266, end: 368 }
+        classNameOffsets: { start: 319, end: 421 }
       },
       {
         name: "Efg",
         propNames: [],
         className: "justify-center",
-        classNameOffsets: { start: 393, end: 419 }
+        classNameOffsets: { start: 448, end: 474 }
       },
       {
         name: "Efg",
         propNames: ["a"],
         className: '${({ a }) => { ...(a || {}) }.b ?? ""}',
-        classNameOffsets: { start: 438, end: 474 }
+        classNameOffsets: { start: 495, end: 531 }
       },
       {
         name: "Ghi",
@@ -81,7 +89,7 @@ describe("collectUnboundComponents", () => {
   it("should return collected unbound components in case of syntax error", async () => {
     const code = `
   const Def = 1 as any
-  
+
   const TestComponent: React.SFC = () => {
     const c = a?.b ?? c
     return (

diff --git a/src/lib/extractor.ts b/src/lib/extractor.ts
@@ -317,7 +317,8 @@ const filterExistingAttributesFromClassNameIdentifiers = (
     .filter(
       attribute => isJSXAttribute(attribute) && isJSXIdentifier(attribute.name)
     )
-    .map(attribute => ((attribute as JSXAttribute).name as JSXIdentifier).name);
+    .map(attribute => ((attribute as JSXAttribute).name as JSXIdentifier).name)
+    .filter(name => name !== "className");
   return Array.from(classNameIdentifiers).filter(
     classNameIdentifier => !attributeNames.includes(classNameIdentifier)
   );
@@ -338,6 +339,11 @@ const extractClassName = (
       return "";
     }
 
+    if (isIdentifier(expression)) {
+      identifiers.add(expression.name);
+      return "";
+    }
+
     if (isTemplateLiteral(expression)) {
       const expressionText = expression.expressions
         .filter(expr => isExpression(expr))

diff --git a/src/test/suite/component/Component.tsx b/src/test/suite/component/Component.tsx
@@ -1,7 +1,15 @@
 import * as React from "react";
 
-const Component: React.FC = () => {
-  return <div className="flex flex-row"><span className="flex flex-col">Test</span></div>;
+type Props = {
+  className?: string;
 };
 
+const Component: React.FC<Props> = ({ className }) => (
+  <div className={className}>
+    <div className="flex flex-row">
+      <span className="flex flex-col">Test</span>
+    </div>
+  </div>
+);
+
 export default Component;