Merge pull request #16 from ephetic/feat_styled-components-support

[Feat] support styled-components

Author: David Sancho

package.json

@@ -30,6 +30,7 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "babel-types": "^6.26.0",
     "husky": "^1.1.2",
     "mocha": "^3.1.2",
     "semantic-release": "^15.10.3",

src/index.js

@@ -1,4 +1,5 @@
 import checkValidOptions from './options'
+import TaggedTemplateExpression from './styled-components'
 
 function isReactFragment (openingElement) {
   return (
@@ -44,6 +45,7 @@ function functionBodyPushAttributes (t, path, options, componentName) {
 export default function ({types: t}) {
   return {
     visitor: {
+      TaggedTemplateExpression,
       FunctionDeclaration (path, state) {
         if (!path.node.id || !path.node.id.name) return;
 

src/styled-components.js

@@ -0,0 +1,76 @@
+import * as _path from 'path'
+import * as t from 'babel-types'
+
+import checkValidOptions from './options'
+
+export default function TaggedTemplateExpression(path, state) {
+  const options = checkValidOptions(state)
+  const scope = path.scope
+
+  try {
+    // simple case
+    if (isStyledPrefix(path.node.tag)) {
+      const id = getIdFrom(path.parentPath)
+      if (!id) return
+      path.node.tag = insertBefore(path.node.tag, id)
+      return
+    }
+
+    // chained case.  traverse until prefix found.
+    // NB: styled-component chain api is always CallExpression+MemberExpression pairs.
+    let node = path.node.tag
+    while (true) {
+      if (!node || !node.callee) break
+      if (isStyledPrefix(node.callee.object)) {
+        const id = getIdFrom(path.parentPath)
+        if (!id) return
+        node.callee.object = insertBefore(node.callee.object, id)
+        break
+      }
+      node = node.callee.object
+    }
+  } catch (e) {}
+
+  return
+
+  // hoisted helpers in closure
+  function insertBefore(node, id) {
+    return t.callExpression(t.memberExpression(node, t.identifier('attrs')), [
+      t.objectExpression([
+        t.objectProperty(t.StringLiteral(options.attribute), t.StringLiteral(options.format(id)))
+      ])
+    ])
+  }
+  function isStyledPrefix(node) {
+    // handle two forms: styled.div and styled(Comp)
+    return (
+      (t.isMemberExpression(node) && isStyledComponentsBinding(node.object)) ||
+      (t.isCallExpression(node) && isStyledComponentsBinding(node.callee))
+    )
+    function isStyledComponentsBinding(node) {
+      if (!t.isIdentifier(node)) return false
+      const binding = scope.getBinding(node.name)
+      if (!binding || binding.kind !== 'module') return false
+      return binding.path.parent.source.value == 'styled-components'
+    }
+  }
+  function getIdFrom(parentPath) {
+    if (t.isVariableDeclarator(parentPath.node)) {
+      return parentPath.node.id.name
+    }
+    if (t.isArrowFunctionExpression(parentPath.node)) {
+      if (t.isVariableDeclarator(parentPath.parentPath.node)) {
+        return parentPath.parentPath.node.id.name
+      }
+    }
+    if (t.isExportDefaultDeclaration(parentPath.node)) {
+      const path = state.file.opts.filename
+      const filename = _path.parse(path).name
+      if (filename === 'index') {
+        const parent = _path.basename(_path.dirname(filename))
+        return parent
+      }
+      return filename
+    }
+  }
+}

test/fixtures/react/styled-components/actual.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+
+/* should be transformed */
+
+const basic = styled.div`
+  color: black;
+`
+
+const withChain = styled.div.withConfig()`
+  color: black;
+`
+
+const withInterpolation = styled.div`
+  color: ${Colors.black};
+`
+
+const el = styled(El)`
+  color: black;
+`
+
+const arrowExpr = () => styled.div`
+  color: black;
+`
+
+// covered by VariableDeclaraion cases
+export const exported = styled.div`
+  color: black;
+`
+
+export default styled.div`
+  color: black;
+`
+
+/* should not be transformed */
+
+let assigned
+assigned = styled.div`
+  color: black;
+`
+
+const arrowReturn = () => {
+  return styled.div`
+    color: black;
+  `
+}
+
+function fnReturn(){
+  return styled.div`
+    color: black;
+  `
+}
+
+const fnExprReturn = function(){
+  return styled.div`
+    color: black;
+  `
+}
+
+const namedFnExprReturn = function namedFnExpr(){
+  return styled.div`
+    color: black;
+  `
+}
+
+const ternary = cond ? styled.div`color: black;` : null
+
+const conditional = cond && styled.div`color: black;`
+
+const map = {
+  comp: styled.div`color: black;`
+}
+
+const comps = [styled.div`color: black;`]

test/fixtures/react/styled-components/expected.js

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+/* should be transformed */
+
+const basic = styled.div.attrs({
+  'data-qa': 'basic'
+})`
+  color: black;
+`;
+
+const withChain = styled.div.attrs({
+  'data-qa': 'with-chain'
+}).withConfig()`
+  color: black;
+`;
+
+const withInterpolation = styled.div.attrs({
+  'data-qa': 'with-interpolation'
+})`
+  color: ${Colors.black};
+`;
+
+const el = styled(El).attrs({
+  'data-qa': 'el'
+})`
+  color: black;
+`;
+
+const arrowExpr = () => styled.div.attrs({
+  'data-qa': 'arrow-expr'
+})`
+  color: black;
+`;
+
+// covered by VariableDeclaraion cases
+export const exported = styled.div.attrs({
+  'data-qa': 'exported'
+})`
+  color: black;
+`;
+
+export default styled.div.attrs({
+  'data-qa': 'actual'
+})`
+  color: black;
+`;
+
+/* should not be transformed */
+
+let assigned;
+assigned = styled.div`
+  color: black;
+`;
+
+const arrowReturn = () => {
+  return styled.div`
+    color: black;
+  `;
+};
+
+function fnReturn() {
+  return styled.div`
+    color: black;
+  `;
+}
+
+const fnExprReturn = function () {
+  return styled.div`
+    color: black;
+  `;
+};
+
+const namedFnExprReturn = function namedFnExpr() {
+  return styled.div`
+    color: black;
+  `;
+};
+
+const ternary = cond ? styled.div`color: black;` : null;
+
+const conditional = cond && styled.div`color: black;`;
+
+const map = {
+  comp: styled.div`color: black;`
+};
+
+const comps = [styled.div`color: black;`];

test/fixtures/react/styled-components/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+      "syntax-jsx",
+      ["../../../../src"]
+  ]
+}

yarn.lock

@@ -1564,7 +1564,7 @@ babel-traverse@^6.24.1, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.19.0, babel-types@^6.24.1:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -1573,6 +1573,15 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -2200,7 +2209,7 @@ debug@^4.0.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
 
@@ -3095,7 +3104,7 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
@@ -3649,36 +3658,18 @@ lodash._basecreate@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz#1bc661614daa7fc311b7d03bf16806a0213cf821"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
   dependencies:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
 
@@ -3746,10 +3737,6 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
 lodash.snakecase@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
@@ -5029,7 +5016,7 @@ readable-stream@~1.1.10:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
   dependencies: