diff --git a/src/parsers/index.js b/src/parsers/index.js index 63e642b..54952fd 100644 --- a/src/parsers/index.js +++ b/src/parsers/index.js @@ -6,8 +6,8 @@ const { isStyled, isHelper, isStyledImport, - hasAttrsCall, - getAttrsObject, + hasMethodsCall, + getMethodsObject, isExtendCall } = require('../utils/styled') const { @@ -54,8 +54,8 @@ const processStyledComponentsFile = (ast, absolutePath, options) => { ? isHelper(node, importedNames) : isHelper(node, [importedNames[options.importName]]) const processedNode = { ...node } - if (hasAttrsCall(node)) { - processedNode.tag = getAttrsObject(node) + while (hasMethodsCall(processedNode)) { + processedNode.tag = getMethodsObject(processedNode) } if ( !helper && diff --git a/src/utils/styled.js b/src/utils/styled.js index bb2707f..275e56f 100644 --- a/src/utils/styled.js +++ b/src/utils/styled.js @@ -37,16 +37,16 @@ const isStyledCall = (node, styledVariableName) => /** * Check if it has a .attrs postfix which we in that case handle specially */ -const hasAttrsCall = node => +const hasMethodsCall = node => // Check that it's a function call node.tag && node.tag.callee && // Check that the last member of the call is attrs node.tag.callee.property && - node.tag.callee.property.name === 'attrs' + (node.tag.callee.property.name === 'attrs' || node.tag.callee.property.name === 'withConfig') -// We don't need the checks here as they were checked in hasAttrsCall -const getAttrsObject = node => node.tag.callee.object +// We don't need the checks here as they were checked in hasMethodsCall +const getMethodsObject = node => node.tag.callee.object /** * Check if something is a styled component call @@ -85,6 +85,6 @@ exports.isStyledShorthand = isStyledShorthand exports.isStyledCall = isStyledCall exports.isStyled = isStyled exports.isHelper = isHelper -exports.hasAttrsCall = hasAttrsCall -exports.getAttrsObject = getAttrsObject +exports.hasMethodsCall = hasMethodsCall +exports.getMethodsObject = getMethodsObject exports.isExtendCall = isExtendCall diff --git a/test/fixtures/simple/identify-styled.js b/test/fixtures/simple/identify-styled.js index 6f12f4e..615f560 100644 --- a/test/fixtures/simple/identify-styled.js +++ b/test/fixtures/simple/identify-styled.js @@ -18,7 +18,7 @@ const Image1 = styled.img.attrs({ src: 'url' })` } `; -const Image2 = styled(Image1).attrs({ src: 'newUrl' })` +const Image2 = styled(Image1).withConfig({ shouldForwardProp: prop => prop }).attrs({ src: 'url' })` bad-selector { color: red; }