diff --git a/src/utils/detectors.js b/src/utils/detectors.js index 834b77f..6fc5f37 100644 --- a/src/utils/detectors.js +++ b/src/utils/detectors.js @@ -1,3 +1,4 @@ +import getSequenceExpressionValue from './getSequenceExpressionValue' import { useTopLevelImportPathMatchers } from './options' const VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS = [ @@ -81,6 +82,15 @@ export const isStyled = t => (tag, state) => { ) { // styled.something() return isStyled(t)(tag.callee.object, state) + } else if ( + t.isCallExpression(tag) && + t.isSequenceExpression(tag.callee) && + t.isMemberExpression(getSequenceExpressionValue(tag.callee)) && + getSequenceExpressionValue(tag.callee).property.name !== + 'default' /** ignore default for #93 below */ + ) { + // (..., styled).something() + return isStyled(t)(getSequenceExpressionValue(tag.callee), state) } else { return ( (t.isMemberExpression(tag) && @@ -94,6 +104,12 @@ export const isStyled = t => (tag, state) => { importLocalName('default', state, { cacheIdentifier: tag.callee.name, })) || + (t.isCallExpression(tag) && + t.isSequenceExpression(tag.callee) && + getSequenceExpressionValue(tag.callee).name === + importLocalName('default', state, { + cacheIdentifier: getSequenceExpressionValue(tag.callee).name, + })) || /** * #93 Support require() * styled-components might be imported using a require() @@ -111,6 +127,13 @@ export const isStyled = t => (tag, state) => { t.isMemberExpression(tag.callee) && tag.callee.property.name === 'default' && tag.callee.object.name === state.styledRequired) || + (state.styledRequired && + t.isCallExpression(tag) && + t.isSequenceExpression(tag.callee) && + t.isMemberExpression(getSequenceExpressionValue(tag.callee)) && + getSequenceExpressionValue(tag.callee).property.name === 'default' && + getSequenceExpressionValue(tag.callee).object.name === + state.styledRequired) || (importLocalName('default', state) && t.isMemberExpression(tag) && t.isMemberExpression(tag.object) && diff --git a/src/utils/getSequenceExpressionValue.js b/src/utils/getSequenceExpressionValue.js new file mode 100644 index 0000000..3a2f69c --- /dev/null +++ b/src/utils/getSequenceExpressionValue.js @@ -0,0 +1,4 @@ +export default path => + path.expressions && path.expressions.length + ? path.expressions[path.expressions.length - 1] + : undefined diff --git a/src/visitors/assignStyledRequired.js b/src/visitors/assignStyledRequired.js index 80c5413..72d5bb4 100644 --- a/src/visitors/assignStyledRequired.js +++ b/src/visitors/assignStyledRequired.js @@ -1,14 +1,27 @@ import { isValidTopLevelImport } from '../utils/detectors' export default t => (path, state) => { + let init = path.node.init; + if ( t.isCallExpression(path.node.init) && t.isIdentifier(path.node.init.callee) && - path.node.init.callee.name === 'require' && - path.node.init.arguments && - path.node.init.arguments[0] && - t.isLiteral(path.node.init.arguments[0]) && - isValidTopLevelImport(path.node.init.arguments[0].value, state) + init.callee.name === '_interopRequireDefault' && + init.arguments && + init.arguments[0] + ) { + // _interopRequireDefault(require()) + init = path.node.init.arguments[0]; + } + + if ( + t.isCallExpression(init) && + t.isIdentifier(init.callee) && + init.callee.name === 'require' && + init.arguments && + init.arguments[0] && + t.isLiteral(init.arguments[0]) && + isValidTopLevelImport(init.arguments[0].value, state) ) { state.styledRequired = path.node.id.name } diff --git a/test/fixtures/pre-transpiled/.babelrc b/test/fixtures/pre-transpiled/.babelrc new file mode 100644 index 0000000..2c1e821 --- /dev/null +++ b/test/fixtures/pre-transpiled/.babelrc @@ -0,0 +1,13 @@ +{ + "plugins": [ + [ + "../../../src", + { + "fileName": false, + "transpileTemplateLiterals": false, + "ssr": true + } + ], + ["@babel/plugin-proposal-class-properties", { "loose": true }] + ] +} diff --git a/test/fixtures/pre-transpiled/code.js b/test/fixtures/pre-transpiled/code.js new file mode 100644 index 0000000..d662b17 --- /dev/null +++ b/test/fixtures/pre-transpiled/code.js @@ -0,0 +1,5 @@ +var _styled = _interopRequireDefault(require("styled-components")); + +const Test = (0, _styled.default)('div')({ + width: '100%', +}); diff --git a/test/fixtures/pre-transpiled/output.js b/test/fixtures/pre-transpiled/output.js new file mode 100644 index 0000000..2bbb581 --- /dev/null +++ b/test/fixtures/pre-transpiled/output.js @@ -0,0 +1,8 @@ +var _styled = _interopRequireDefault(require("styled-components")); + +const Test = (0, _styled.default)('div').withConfig({ + displayName: "Test", + componentId: "sc-vsmau2-0" +})({ + width: '100%' +});