From acc34ab2954e95e48c18241d40286826de570462 Mon Sep 17 00:00:00 2001 From: Vladimir Danchenkov Date: Mon, 19 Dec 2016 17:54:23 +0200 Subject: [PATCH] Switch to new API withConfig, fixes #16 --- src/index.js | 21 +++++++------------ src/utils/get-target.js | 21 ------------------- test/fixtures/01-add-display-names/after.js | 21 +++++++------------ test/fixtures/02-add-identifier/after.js | 18 ++++++---------- .../after.js | 18 ++++++---------- .../04-track-the-imported-variable/after.js | 18 ++++++---------- test/fixtures/05-use-file-name/after.js | 9 +++----- .../after.js | 3 +-- 8 files changed, 36 insertions(+), 93 deletions(-) delete mode 100644 src/utils/get-target.js diff --git a/src/index.js b/src/index.js index 3e93ffe..630926b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ import hash from './utils/hash' -import getTarget from './utils/get-target' import getName from './utils/get-name' import minify from './utils/minify' @@ -72,9 +71,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 +85,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('identifier'), 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) } diff --git a/src/utils/get-target.js b/src/utils/get-target.js deleted file mode 100644 index f98ebbf..0000000 --- a/src/utils/get-target.js +++ /dev/null @@ -1,21 +0,0 @@ -import * as t from 'babel-types' - -/** - * Get the target (i.e. tagname or component variable) from a styled call - * - * @param {Node} node - * - * @return {String} The target - */ -const getTarget = (node) => { - // styled.div`` => "div" - if (t.isMemberExpression(node)) { - return t.stringLiteral(node.property.name) - } - // styled(Bla) => Bla - if (t.isCallExpression(node)) { - return node.arguments[0] - } -} - -export default getTarget diff --git a/test/fixtures/01-add-display-names/after.js b/test/fixtures/01-add-display-names/after.js index ee9029f..b0fb92a 100644 --- a/test/fixtures/01-add-display-names/after.js +++ b/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' })``; diff --git a/test/fixtures/02-add-identifier/after.js b/test/fixtures/02-add-identifier/after.js index 37ba8e0..b5fc971 100644 --- a/test/fixtures/02-add-identifier/after.js +++ b/test/fixtures/02-add-identifier/after.js @@ -1,24 +1,18 @@ -const Test = styled({ - target: "div", +const Test = styled.div.withConfig({ identifier: "Test-137hlza" })`width: 100%;`; -const Test2 = true ? styled({ - target: "div", +const Test2 = true ? styled.div.withConfig({ identifier: "Test2-bjbly" -})`` : styled({ - target: "div", +})`` : styled.div.withConfig({ identifier: "Test2-3rtkrg" })``; -const styles = { One: styled({ - target: "div", +const styles = { One: styled.div.withConfig({ identifier: "One-1sf086v" })`` }; let Component; -Component = styled({ - target: "div", +Component = styled.div.withConfig({ identifier: "Component-1uo0y5n" })``; -const WrappedComponent = styled({ - target: Inner, +const WrappedComponent = styled(Inner).withConfig({ identifier: "WrappedComponent-1hk71jk" })``; diff --git a/test/fixtures/03-add-identifier-and-display-name/after.js b/test/fixtures/03-add-identifier-and-display-name/after.js index 80097ff..2844804 100644 --- a/test/fixtures/03-add-identifier-and-display-name/after.js +++ b/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" })`width: 100%;`; -const Test2 = true ? styled({ - target: "div", +const Test2 = true ? styled.div.withConfig({ displayName: "Test2", identifier: "Test2-1hn2b5r" -})`` : styled({ - target: "div", +})`` : styled.div.withConfig({ displayName: "Test2", identifier: "Test2-1hl3gfs" })``; -const styles = { One: styled({ - target: "div", +const styles = { One: styled.div.withConfig({ displayName: "One", identifier: "One-1r8uh7y" })`` }; let Component; -Component = styled({ - target: "div", +Component = styled.div.withConfig({ displayName: "Component", identifier: "Component-1e47qp" })``; -const WrappedComponent = styled({ - target: Inner, +const WrappedComponent = styled(Inner).withConfig({ displayName: "WrappedComponent", identifier: "WrappedComponent-kam0ab" })``; diff --git a/test/fixtures/04-track-the-imported-variable/after.js b/test/fixtures/04-track-the-imported-variable/after.js index cd590e5..7246ae2 100644 --- a/test/fixtures/04-track-the-imported-variable/after.js +++ b/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" })`width: 100%;`; -const Test2 = true ? s({ - target: "div", +const Test2 = true ? s.div.withConfig({ displayName: "Test2", identifier: "Test2-1rmo90j" -})`` : s({ - target: "div", +})`` : s.div.withConfig({ displayName: "Test2", identifier: "Test2-1e44ey5" })``; -const styles = { One: s({ - target: "div", +const styles = { One: s.div.withConfig({ displayName: "One", identifier: "One-amesrd" })`` }; let Component; -Component = s({ - target: "div", +Component = s.div.withConfig({ displayName: "Component", identifier: "Component-ohabty" })``; -const WrappedComponent = s({ - target: Inner, +const WrappedComponent = s(Inner).withConfig({ displayName: "WrappedComponent", identifier: "WrappedComponent-1f8r9pi" })``; diff --git a/test/fixtures/05-use-file-name/after.js b/test/fixtures/05-use-file-name/after.js index 00548e6..21380c0 100644 --- a/test/fixtures/05-use-file-name/after.js +++ b/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" })`color: red;`; -styled({ - target: "div", +styled.div.withConfig({ displayName: "before", identifier: "before-hxqpa7" })``; -export default styled({ - target: "button", +export default styled.button.withConfig({ displayName: "before", identifier: "before-17r4qjq" })``; diff --git a/test/fixtures/06-work-with-hoisted-default-as-import/after.js b/test/fixtures/06-work-with-hoisted-default-as-import/after.js index 4c5a961..19c538c 100644 --- a/test/fixtures/06-work-with-hoisted-default-as-import/after.js +++ b/test/fixtures/06-work-with-hoisted-default-as-import/after.js @@ -1,5 +1,4 @@ -const Test = s({ - target: 'div', +const Test = s.div.withConfig({ displayName: 'before__Test', identifier: 'before__Test-1ex1ta1' })`width: 100%;`;