merge withConfig arguments to allow for shouldForwardProp

styled-components · Apr 30, 2021 · 07da296 · 07da296
1 parent 950692b
commit 07da296
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameAndId.js
@@ -17,6 +17,7 @@ const addConfig = t => (path, displayName, componentId) => {
   }
 
   const withConfigProps = []
+
   if (displayName) {
     withConfigProps.push(
       t.objectProperty(
@@ -34,6 +35,21 @@ const addConfig = t => (path, displayName, componentId) => {
     )
   }
 
+  if (
+    path.node.callee &&
+    t.isMemberExpression(path.node.callee.callee) &&
+    path.node.callee.callee.property &&
+    path.node.callee.callee.property.name &&
+    path.node.callee.callee.property.name == 'withConfig' &&
+    path.node.callee.arguments.length &&
+    !path.node.callee.arguments[0].properties.some((prop) =>
+      ['displayName', 'componentId'].includes(prop.key.name)
+    )
+  ) {
+    path.node.callee.arguments[0].properties.push(...withConfigProps)
+    return
+  }
+
   if (path.node.tag) {
     // Replace x`...` with x.withConfig({ })`...`
     path.node.tag = t.callExpression(
@@ -155,7 +171,16 @@ export default t => (path, state) => {
           t.isMemberExpression(path.node.callee.callee) &&
           path.node.callee.callee.property &&
           path.node.callee.callee.property.name &&
-          path.node.callee.callee.property.name !== 'withConfig')
+          path.node.callee.callee.property.name !== 'withConfig') ||
+        // styled(x).withConfig({})
+        (isStyled(t)(path.node.callee, state) &&
+          t.isMemberExpression(path.node.callee.callee) &&
+          path.node.callee.callee.property &&
+          path.node.callee.callee.property.name &&
+          path.node.callee.callee.property.name == 'withConfig' &&
+          !path.node.callee.arguments[0].properties.some((prop) =>
+            ['displayName'].includes(prop.key.name)
+          ))
   ) {
     const displayName =
       useDisplayName(state) &&

diff --git a/test/fixtures/add-identifier-and-display-name/code.js b/test/fixtures/add-identifier-and-display-name/code.js
@@ -13,3 +13,6 @@ const WrappedComponent3 = styled(Inner)({})
 const WrappedComponent4 = styled(Inner).attrs(() => ({ something: 'else' }))({})
 const WrappedComponent5 = styled.div.attrs(() => ({ something: 'else' }))({})
 const WrappedComponent6 = styled.div.attrs(() => ({ something: 'else' }))``
+const WrappedComponent7 = styled.div.withConfig({
+  shouldForwardProp: () => {},
+})({})
diff --git a/test/fixtures/add-identifier-and-display-name/output.js b/test/fixtures/add-identifier-and-display-name/output.js
@@ -51,3 +51,8 @@ const WrappedComponent6 = styled.div.attrs(() => ({
   displayName: "WrappedComponent6",
   componentId: "sc-1cza72q-10"
 })``;
+const WrappedComponent7 = styled.div.withConfig({
+  shouldForwardProp: () => {},
+  displayName: "WrappedComponent7",
+  componentId: "sc-1cza72q-11"
+})({});