Merge pull request #323 from ithinkdancan/main

merge existing withConfig arguments to allow SSR when using shouldForwardProp
styled-components · Jun 29, 2021 · 6a355b5 · 6a355b5
2 parents f4e4c94 + 04eed56
commit 6a355b5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 2 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "es5",
+  "arrowParens": "avoid"
 }
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,34 @@ const addConfig = t => (path, displayName, componentId) => {
     )
   }
 
+  const existingConfig = getExistingConfig(t)(path)
+
+  if (
+    existingConfig &&
+    existingConfig.arguments.length &&
+    !existingConfig.arguments[0].properties.some(prop =>
+      ['displayName', 'componentId'].includes(prop.key.name)
+    )
+  ) {
+    existingConfig.arguments[0].properties.push(...withConfigProps)
+    return
+  }
+
+  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(
@@ -53,6 +82,29 @@ const addConfig = t => (path, displayName, componentId) => {
   }
 }
 
+const getExistingConfig = t => path => {
+  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'
+  ) {
+    return path.node.callee
+  }
+
+  if (
+    path.node.callee &&
+    t.isMemberExpression(path.node.callee.callee) &&
+    path.node.callee.callee.object &&
+    path.node.callee.callee.object.callee &&
+    path.node.callee.callee.object.callee.property &&
+    path.node.callee.callee.object.callee.property.name === 'withConfig'
+  ) {
+    return path.node.callee.callee.object
+  }
+}
+
 const getBlockName = file => {
   const name = path.basename(
     file.opts.filename,
@@ -155,7 +207,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', 'componentId'].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,18 @@ 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: () => {},
+})({})
+
+const WrappedComponent8 = styled.div
+  .withConfig({
+    shouldForwardProp: () => {},
+  })
+  .attrs(() => ({ something: 'else' }))({})
+
+const WrappedComponent9 = styled.div
+  .attrs(() => ({ something: 'else' }))
+  .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,22 @@ const WrappedComponent6 = styled.div.attrs(() => ({
   displayName: "WrappedComponent6",
   componentId: "sc-1cza72q-10"
 })``;
+const WrappedComponent7 = styled.div.withConfig({
+  shouldForwardProp: () => {},
+  displayName: "WrappedComponent7",
+  componentId: "sc-1cza72q-11"
+})({});
+const WrappedComponent8 = styled.div.withConfig({
+  shouldForwardProp: () => {},
+  displayName: "WrappedComponent8",
+  componentId: "sc-1cza72q-12"
+}).attrs(() => ({
+  something: 'else'
+}))({});
+const WrappedComponent9 = styled.div.attrs(() => ({
+  something: 'else'
+})).withConfig({
+  shouldForwardProp: () => {},
+  displayName: "WrappedComponent9",
+  componentId: "sc-1cza72q-13"
+})({});