Repository: styled-components/babel-plugin-styled-components
Pull request #134 (2018-03-30 14:49:36)

Pass-through babel-types in visitors to be version agnostic
Alternative to https://github.com/styled-components/babel-plugin-styled-components/pull/128

cc @existentialism


Patch:
diff --git a/package.json b/package.json
index f0b718e..6d6c2c4 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
-    "babel-types": "^6.26.0",
     "lodash": "^4.17.10"
   },
   "peerDependencies": {
diff --git a/src/index.js b/src/index.js
index 3df568c..5be8bf2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,18 +9,18 @@ export default function({ types: t }) {
   return {
     visitor: {
       ImportDeclaration(path, state) {
-        rewriteStyledImport(path, state)
+        rewriteStyledImport(t)(path, state)
       },
       MemberExpression(path, state) {
-        desugarStyled(path, state)
+        desugarStyled(t)(path, state)
       },
       TaggedTemplateExpression(path, state) {
-        minify(path, state)
-        displayNameAndId(path, state)
-        templateLiterals(path, state)
+        minify(t)(path, state)
+        displayNameAndId(t)(path, state)
+        templateLiterals(t)(path, state)
       },
       VariableDeclarator(path, state) {
-        assignStyledRequired(path, state)
+        assignStyledRequired(t)(path, state)
       },
     },
   }
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
index 5ae1c0b..3162eec 100644
--- a/src/utils/detectors.js
+++ b/src/utils/detectors.js
@@ -1,5 +1,3 @@
-import * as t from 'babel-types'
-
 const VALID_TOP_LEVEL_IMPORT_PATHS = [
   'styled-components',
   'styled-components/no-tags',
@@ -43,14 +41,14 @@ const importLocalName = (name, state) => {
   return localName
 }
 
-export const isStyled = (tag, state) => {
+export const isStyled = t => (tag, state) => {
   if (
     t.isCallExpression(tag) &&
     t.isMemberExpression(tag.callee) &&
     tag.callee.property.name !== 'default' /** ignore default for #93 below */
   ) {
     // styled.something()
-    return isStyled(tag.callee.object, state)
+    return isStyled(t)(tag.callee.object, state)
   } else {
     return (
       (t.isMemberExpression(tag) &&
@@ -78,18 +76,18 @@ export const isStyled = (tag, state) => {
   }
 }
 
-export const isCSSHelper = (tag, state) =>
+export const isCSSHelper = t => (tag, state) =>
   t.isIdentifier(tag) && tag.name === importLocalName('css', state)
 
-export const isCreateGlobalStyleHelper = (tag, state) =>
+export const isCreateGlobalStyleHelper = t => (tag, state) =>
   t.isIdentifier(tag) &&
   tag.name === importLocalName('createGlobalStyle', state)
 
-export const isInjectGlobalHelper = (tag, state) =>
+export const isInjectGlobalHelper = t => (tag, state) =>
   t.isIdentifier(tag) && tag.name === importLocalName('injectGlobal', state)
 
-export const isKeyframesHelper = (tag, state) =>
+export const isKeyframesHelper = t => (tag, state) =>
   t.isIdentifier(tag) && tag.name === importLocalName('keyframes', state)
 
-export const isHelper = (tag, state) =>
-  isCSSHelper(tag, state) || isKeyframesHelper(tag, state)
+export const isHelper = t => (tag, state) =>
+  isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state)
diff --git a/src/utils/getName.js b/src/utils/getName.js
index 43e1eba..a155f1d 100644
--- a/src/utils/getName.js
+++ b/src/utils/getName.js
@@ -1,5 +1,3 @@
-import * as t from 'babel-types'
-
 /**
  * Get the name of variable that contains node
  *
@@ -8,7 +6,7 @@ import * as t from 'babel-types'
  * @return {String}   The target
  */
 
-export default path => {
+export default t => path => {
   let namedNode
 
   path.find(path => {
diff --git a/src/visitors/assignStyledRequired.js b/src/visitors/assignStyledRequired.js
index 02b3908..adc30d0 100644
--- a/src/visitors/assignStyledRequired.js
+++ b/src/visitors/assignStyledRequired.js
@@ -1,7 +1,6 @@
-import * as t from 'babel-types'
 import { isValidTopLevelImport } from '../utils/detectors'
 
-export default (path, state) => {
+export default t => (path, state) => {
   if (
     t.isCallExpression(path.node.init) &&
     t.isIdentifier(path.node.init.callee) &&
diff --git a/src/visitors/desugarStyled.js b/src/visitors/desugarStyled.js
index 7ac2ab9..bf3c867 100644
--- a/src/visitors/desugarStyled.js
+++ b/src/visitors/desugarStyled.js
@@ -1,12 +1,11 @@
-import * as t from 'babel-types'
 import get from 'lodash/get'
 import { isStyled } from '../utils/detectors'
 
-export default (path, state) => {
+export default t => (path, state) => {
   /**
    * Handles both "styled.div" and "styled_default.default.div" (transpiled output)
    */
-  if (isStyled(path.node, state)) {
+  if (isStyled(t)(path.node, state)) {
     /**
      * e.g. "div"
      */
diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameAndId.js
index c13a057..456baad 100644
--- a/src/visitors/displayNameAndId.js
+++ b/src/visitors/displayNameAndId.js
@@ -1,13 +1,12 @@
-import * as t from 'babel-types'
+import path from 'path'
+import fs from 'fs'
 import { useFileName, useDisplayName, useSSR } from '../utils/options'
 import getName from '../utils/getName'
 import prefixLeadingDigit from '../utils/prefixDigit'
-import path from 'path'
-import fs from 'fs'
 import hash from '../utils/hash'
 import { isStyled } from '../utils/detectors'
 
-const addConfig = (path, displayName, componentId) => {
+const addConfig = t => (path, displayName, componentId) => {
   if (!displayName && !componentId) {
     return
   }
@@ -47,9 +46,9 @@ const getBlockName = file => {
     : path.basename(path.dirname(file.opts.filename))
 }
 
-const getDisplayName = (path, state) => {
+const getDisplayName = t => (path, state) => {
   const { file } = state
-  const componentName = getName(path)
+  const componentName = getName(t)(path)
   if (file) {
     const blockName = getBlockName(file)
     if (blockName === componentName) {
@@ -122,12 +121,13 @@ const getComponentId = state => {
   return `${prefixLeadingDigit(getFileHash(state))}-${getNextId(state)}`
 }
 
-export default (path, state) => {
-  if (isStyled(path.node.tag, state)) {
+export default t => (path, state) => {
+  if (isStyled(t)(path.node.tag, state)) {
     const displayName =
-      useDisplayName(state) && getDisplayName(path, useFileName(state) && state)
+      useDisplayName(state) &&
+      getDisplayName(t)(path, useFileName(state) && state)
 
-    addConfig(
+    addConfig(t)(
       path,
       displayName && displayName.replace(/[^_a-zA-Z0-9-]/g, ''),
       useSSR(state) && getComponentId(state)
diff --git a/src/visitors/minify.js b/src/visitors/minify.js
index 070f34b..f484631 100644
--- a/src/visitors/minify.js
+++ b/src/visitors/minify.js
@@ -1,16 +1,11 @@
-import * as t from 'babel-types'
-
 import { useMinify } from '../utils/options'
 import { isStyled, isHelper } from '../utils/detectors'
 import { minifyRawValues, minifyCookedValues } from '../minify'
 
-export default (path, state) => {
+export default t => (path, state) => {
   if (
     useMinify(state) &&
-    (
-      isStyled(path.node.tag, state) ||
-      isHelper(path.node.tag, state)
-    )
+    (isStyled(t)(path.node.tag, state) || isHelper(t)(path.node.tag, state))
   ) {
     const templateLiteral = path.node.quasi
     const quasisLength = templateLiteral.quasis.length
diff --git a/src/visitors/templateLiterals/index.js b/src/visitors/templateLiterals/index.js
index 4f008fe..9ff8a2f 100644
--- a/src/visitors/templateLiterals/index.js
+++ b/src/visitors/templateLiterals/index.js
@@ -1,9 +1,8 @@
 import { useTranspileTemplateLiterals } from '../../utils/options'
-
 import transpile from './transpile'
 
-export default (path, state) => {
+export default t => (path, state) => {
   if (useTranspileTemplateLiterals(state)) {
-    transpile(path, state)
+    transpile(t)(path, state)
   }
 }
diff --git a/src/visitors/templateLiterals/transpile.js b/src/visitors/templateLiterals/transpile.js
index d495501..2f0202a 100644
--- a/src/visitors/templateLiterals/transpile.js
+++ b/src/visitors/templateLiterals/transpile.js
@@ -1,13 +1,16 @@
-import * as t from 'babel-types'
 import { isStyled, isHelper } from '../../utils/detectors'
 
-export default (path, state) => {
-  if (
-    isStyled(path.node.tag, state) ||
-    isHelper(path.node.tag, state)
-  ) {
-    const { tag: callee, quasi: { quasis, expressions }} = path.node
-    const values = t.arrayExpression(quasis.map(quasi => t.stringLiteral(quasi.value.cooked)))
-    path.replaceWith(t.callExpression(callee, [ values, ...expressions ]))
+export default t => (path, state) => {
+  if (isStyled(t)(path.node.tag, state) || isHelper(t)(path.node.tag, state)) {
+    const {
+      tag: callee,
+      quasi: { quasis, expressions },
+    } = path.node
+
+    const values = t.arrayExpression(
+      quasis.map(quasi => t.stringLiteral(quasi.value.cooked))
+    )
+
+    path.replaceWith(t.callExpression(callee, [values, ...expressions]))
   }
 }


Test patch:
diff --git a/src/visitors/rewriteStyledImport.js b/src/visitors/rewriteStyledImport.js
index 5b91276..20ed792 100644
--- a/src/visitors/rewriteStyledImport.js
+++ b/src/visitors/rewriteStyledImport.js
@@ -1,13 +1,9 @@
-import * as t from 'babel-types'
-import get from 'lodash/get'
-import { isStyled } from '../utils/detectors'
-
 /**
  * When using the Babel plugin, we desugar styled.div to styled('div'), which means we can
  * then use a lighter-weight version of s-c since those element names don't need to be kept around
  * ahead of time.
  */
-export default path => {
+export default t => path => {
   if (path.node.source.value === 'styled-components') {
     path.node.source = t.stringLiteral('styled-components/no-tags')
   }