Merge pull request #17 from styled-components/new-api

Switch to new API withConfig, fixes #16

src/index.js

@@ -1,7 +1,7 @@
 import hash from './utils/hash'
-import getTarget from './utils/get-target'
 import getName from './utils/get-name'
 import minify from './utils/minify'
+import path from 'path'
 
 const blockName = (file) => {
   return file.opts.basename !== 'index' ?
@@ -72,9 +72,6 @@ export default function({ types: t }) {
 
             if (!(isStyled(tag) && (options.ssr || options.displayName))) return
 
-            // Get target
-            const target = getTarget(path.node.tag)
-
             const componentName = getName(path)
 
             let displayName
@@ -89,22 +86,19 @@ export default function({ types: t }) {
             const identifier = `${displayName || 's'}-${hash(`${id}${displayName}`)}`
 
             // Put together the final code again
-            const styledCallProps = [ t.objectProperty(t.identifier('target'), target) ]
+            const withConfigProps = []
             if (options.displayName && displayName) {
-              styledCallProps.push(t.objectProperty(t.identifier('displayName'), t.stringLiteral(displayName)))
+              withConfigProps.push(t.objectProperty(t.identifier('displayName'), t.stringLiteral(displayName)))
             }
             if (options.ssr && identifier) {
-              styledCallProps.push(t.objectProperty(t.identifier('identifier'), t.stringLiteral(identifier)))
+              withConfigProps.push(t.objectProperty(t.identifier('componentId'), t.stringLiteral(identifier)))
             }
 
-            const call = t.callExpression(
-              t.identifier(importedVariableNames.default),
-              [ t.objectExpression(styledCallProps) ]
+            // Replace x`...` with x.withConfig({ })`...`
+            path.node.tag = t.callExpression(
+              t.memberExpression(tag, t.identifier('withConfig')),
+              [ t.objectExpression(withConfigProps) ]
             )
-
-            // Put together the styled call with the template literal
-            // to get the finished styled({ })`` form! 🎉
-            path.node.tag = call
           }
         }, state)
       }

test/fixtures/01-add-display-names/after.js

@@ -1,28 +1,21 @@
-const Test = styled({
-  target: 'div',
+const Test = styled.div.withConfig({
   displayName: 'Test'
 })`width: 100%;`;
-const Test2 = styled({
-  target: 'div',
+const Test2 = styled('div').withConfig({
   displayName: 'Test2'
 })``;
-const Test3 = true ? styled({
-  target: 'div',
+const Test3 = true ? styled.div.withConfig({
   displayName: 'Test3'
-})`` : styled({
-  target: 'div',
+})`` : styled.div.withConfig({
   displayName: 'Test3'
 })``;
-const styles = { One: styled({
-    target: 'div',
+const styles = { One: styled.div.withConfig({
     displayName: 'One'
   })`` };
 let Component;
-Component = styled({
-  target: 'div',
+Component = styled.div.withConfig({
   displayName: 'Component'
 })``;
-const WrappedComponent = styled({
-  target: Inner,
+const WrappedComponent = styled(Inner).withConfig({
   displayName: 'WrappedComponent'
 })``;

test/fixtures/02-add-identifier/after.js

@@ -1,24 +1,18 @@
-const Test = styled({
-  target: "div",
-  identifier: "Test-137hlza"
+const Test = styled.div.withConfig({
+  componentId: "Test-137hlza"
 })`width: 100%;`;
-const Test2 = true ? styled({
-  target: "div",
-  identifier: "Test2-bjbly"
-})`` : styled({
-  target: "div",
-  identifier: "Test2-3rtkrg"
+const Test2 = true ? styled.div.withConfig({
+  componentId: "Test2-bjbly"
+})`` : styled.div.withConfig({
+  componentId: "Test2-3rtkrg"
 })``;
-const styles = { One: styled({
-    target: "div",
-    identifier: "One-1sf086v"
+const styles = { One: styled.div.withConfig({
+    componentId: "One-1sf086v"
   })`` };
 let Component;
-Component = styled({
-  target: "div",
-  identifier: "Component-1uo0y5n"
+Component = styled.div.withConfig({
+  componentId: "Component-1uo0y5n"
 })``;
-const WrappedComponent = styled({
-  target: Inner,
-  identifier: "WrappedComponent-1hk71jk"
+const WrappedComponent = styled(Inner).withConfig({
+  componentId: "WrappedComponent-1hk71jk"
 })``;

test/fixtures/03-add-identifier-and-display-name/after.js

@@ -1,30 +1,24 @@
-const Test = styled({
-  target: "div",
+const Test = styled.div.withConfig({
   displayName: "Test",
-  identifier: "Test-18z24ew"
+  componentId: "Test-18z24ew"
 })`width: 100%;`;
-const Test2 = true ? styled({
-  target: "div",
+const Test2 = true ? styled.div.withConfig({
   displayName: "Test2",
-  identifier: "Test2-1hn2b5r"
-})`` : styled({
-  target: "div",
+  componentId: "Test2-1hn2b5r"
+})`` : styled.div.withConfig({
   displayName: "Test2",
-  identifier: "Test2-1hl3gfs"
+  componentId: "Test2-1hl3gfs"
 })``;
-const styles = { One: styled({
-    target: "div",
+const styles = { One: styled.div.withConfig({
     displayName: "One",
-    identifier: "One-1r8uh7y"
+    componentId: "One-1r8uh7y"
   })`` };
 let Component;
-Component = styled({
-  target: "div",
+Component = styled.div.withConfig({
   displayName: "Component",
-  identifier: "Component-1e47qp"
+  componentId: "Component-1e47qp"
 })``;
-const WrappedComponent = styled({
-  target: Inner,
+const WrappedComponent = styled(Inner).withConfig({
   displayName: "WrappedComponent",
-  identifier: "WrappedComponent-kam0ab"
+  componentId: "WrappedComponent-kam0ab"
 })``;

test/fixtures/04-track-the-imported-variable/after.js

@@ -1,32 +1,26 @@
 import s from "styled-components";
 
-const Test = s({
-  target: "div",
+const Test = s.div.withConfig({
   displayName: "Test",
-  identifier: "Test-62sgar"
+  componentId: "Test-62sgar"
 })`width: 100%;`;
-const Test2 = true ? s({
-  target: "div",
+const Test2 = true ? s.div.withConfig({
   displayName: "Test2",
-  identifier: "Test2-1rmo90j"
-})`` : s({
-  target: "div",
+  componentId: "Test2-1rmo90j"
+})`` : s.div.withConfig({
   displayName: "Test2",
-  identifier: "Test2-1e44ey5"
+  componentId: "Test2-1e44ey5"
 })``;
-const styles = { One: s({
-    target: "div",
+const styles = { One: s.div.withConfig({
     displayName: "One",
-    identifier: "One-amesrd"
+    componentId: "One-amesrd"
   })`` };
 let Component;
-Component = s({
-  target: "div",
+Component = s.div.withConfig({
   displayName: "Component",
-  identifier: "Component-ohabty"
+  componentId: "Component-ohabty"
 })``;
-const WrappedComponent = s({
-  target: Inner,
+const WrappedComponent = s(Inner).withConfig({
   displayName: "WrappedComponent",
-  identifier: "WrappedComponent-1f8r9pi"
+  componentId: "WrappedComponent-1f8r9pi"
 })``;

test/fixtures/05-use-file-name/after.js

@@ -1,17 +1,14 @@
 import styled from "styled-components";
 
-const Test = styled({
-  target: "div",
+const Test = styled.div.withConfig({
   displayName: "before__Test",
-  identifier: "before__Test-102oti6"
+  componentId: "before__Test-102oti6"
 })`color: red;`;
-styled({
-  target: "div",
+styled.div.withConfig({
   displayName: "before",
-  identifier: "before-hxqpa7"
+  componentId: "before-hxqpa7"
 })``;
-export default styled({
-  target: "button",
+export default styled.button.withConfig({
   displayName: "before",
-  identifier: "before-17r4qjq"
+  componentId: "before-17r4qjq"
 })``;

test/fixtures/06-work-with-hoisted-default-as-import/after.js

@@ -1,6 +1,5 @@
-const Test = s({
-  target: 'div',
+const Test = s.div.withConfig({
   displayName: 'before__Test',
-  identifier: 'before__Test-1ex1ta1'
+  componentId: 'before__Test-1ex1ta1'
 })`width: 100%;`;
 import { default as s, css } from 'styled-components';