Support pre-transpiled code (#379)

Author: rbong

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) &&

src/utils/getSequenceExpressionValue.js

@@ -0,0 +1,4 @@
+export default path =>
+  path.expressions && path.expressions.length
+    ? path.expressions[path.expressions.length - 1]
+    : undefined

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
   }

test/fixtures/pre-transpiled/.babelrc

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "fileName": false,
+        "transpileTemplateLiterals": false,
+        "ssr": true
+      }
+    ],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
+}

test/fixtures/pre-transpiled/code.js

@@ -0,0 +1,5 @@
+var _styled = _interopRequireDefault(require("styled-components"));
+
+const Test = (0, _styled.default)('div')({
+  width: '100%',
+});

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-1m3e07f-0"
+})({
+  width: '100%'
+});