diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameAndId.js index 42c1c1ff..738fb219 100644 --- 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 index a451c72e..3d925bb8 100644 --- 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 index 1b3376b3..d97e373d 100644 --- 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" +})({});