Merge pull request #134 from styled-components/prepare/babel-seven

Pass-through babel-types in visitors to be version agnostic

Author: quantizor

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": {

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)
       },
     },
   }

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)

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 => {

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

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"
      */

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)

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

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')
   }

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