diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5d89c9..ab930f9 100644
--- 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
index b60d952..ace68b3 100644
--- 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
index 3d3a43b..40926dd 100644
--- 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 (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
`;
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
index 6c591b5..e87a020 100644
--- 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
index 32e7f64..4423b33 100644
--- 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
Test
;
+type Props = {
+ className?: string;
};
+const Component: React.FC = ({ className }) => (
+
+);
+
export default Component;