From f54811c675f9409587a202cd6d5eb55eb1c1209b Mon Sep 17 00:00:00 2001
From: John Otander <johnotander@gmail.com>
Date: Thu, 11 Jan 2018 07:58:00 -0700
Subject: [PATCH] Use styled-component template syntax

In order to support SSR, styled-components
requires string templates to be used since
that's what the babel plugin searches for.

https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/index.js#L16

---

c8r/lab#17
---
 lib/templates/styledComponents.js |  16 ++++++++------
 test/snapshots/modules.js.md      |  34 ++++++++++++++++++------------
 test/snapshots/modules.js.snap    | Bin 1060 -> 1174 bytes
 test/snapshots/templates.js.md    |  29 ++++++++++++-------------
 test/snapshots/templates.js.snap  | Bin 1006 -> 1031 bytes
 5 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/lib/templates/styledComponents.js b/lib/templates/styledComponents.js
index 8d92deb..b8de8f5 100644
--- a/lib/templates/styledComponents.js
+++ b/lib/templates/styledComponents.js
@@ -4,6 +4,7 @@ module.exports = ({
   styleString,
   propsString,
   systemFunctions,
+  systemExpressions = '',
   extensionImport
 }) => `import styled from 'styled-components'
 import {
@@ -15,13 +16,14 @@ import {
 } from 'styled-system'
 ${extensionImport}
 
-const ${name} = styled(${type})([], props => (${styleString}),
-  space,
-  fontSize,
-  width,
-  color,
-  ${systemFunctions}
-)
+const ${name} = styled(${type})\`
+  \${styleString}
+  \${space}
+  \${fontSize}
+  \${width}
+  \${color}
+  ${systemExpressions}
+\`
 
 ${name}.defaultProps = ${propsString}
 
diff --git a/test/snapshots/modules.js.md b/test/snapshots/modules.js.md
index 6b016f6..8c9992e 100644
--- a/test/snapshots/modules.js.md
+++ b/test/snapshots/modules.js.md
@@ -196,6 +196,8 @@ Generated by [AVA](https://ava.li).
         value: true␊
       });␊
       ␊
+      var _templateObject = _taggedTemplateLiteral(['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n'], ['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n']);␊
+      ␊
       var _styledComponents = require('styled-components');␊
       ␊
       var _styledComponents2 = _interopRequireDefault(_styledComponents);␊
@@ -204,9 +206,9 @@ Generated by [AVA](https://ava.li).
       ␊
       function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
       ␊
-      var Box = (0, _styledComponents2.default)('div')([], function (props) {␊
-        return {};␊
-      }, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
+      function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }␊
+      ␊
+      var Box = (0, _styledComponents2.default)('div')(_templateObject, styleString, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
       ␊
       Box.defaultProps = {};␊
       ␊
@@ -223,6 +225,8 @@ Generated by [AVA](https://ava.li).
         value: true␊
       });␊
       ␊
+      var _templateObject = _taggedTemplateLiteral(['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n'], ['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n']);␊
+      ␊
       var _styledComponents = require('styled-components');␊
       ␊
       var _styledComponents2 = _interopRequireDefault(_styledComponents);␊
@@ -231,9 +235,9 @@ Generated by [AVA](https://ava.li).
       ␊
       function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
       ␊
-      var Text = (0, _styledComponents2.default)('p')([], function (props) {␊
-        return {};␊
-      }, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
+      function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }␊
+      ␊
+      var Text = (0, _styledComponents2.default)('p')(_templateObject, styleString, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
       ␊
       Text.defaultProps = {␊
         m: 0␊
@@ -287,6 +291,8 @@ Generated by [AVA](https://ava.li).
         value: true␊
       });␊
       ␊
+      var _templateObject = _taggedTemplateLiteral(['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n'], ['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  \\n']);␊
+      ␊
       var _styledComponents = require('styled-components');␊
       ␊
       var _styledComponents2 = _interopRequireDefault(_styledComponents);␊
@@ -299,9 +305,9 @@ Generated by [AVA](https://ava.li).
       ␊
       function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
       ␊
-      var Beep = (0, _styledComponents2.default)(_Box2.default)([], function (props) {␊
-        return {};␊
-      }, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
+      function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }␊
+      ␊
+      var Beep = (0, _styledComponents2.default)(_Box2.default)(_templateObject, styleString, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color);␊
       ␊
       Beep.defaultProps = {␊
         p: 3,␊
@@ -321,6 +327,8 @@ Generated by [AVA](https://ava.li).
         value: true␊
       });␊
       ␊
+      var _templateObject = _taggedTemplateLiteral(['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n', '\\n', '\\n', '\\n'], ['\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n  ', '\\n', '\\n', '\\n', '\\n']);␊
+      ␊
       var _styledComponents = require('styled-components');␊
       ␊
       var _styledComponents2 = _interopRequireDefault(_styledComponents);␊
@@ -333,11 +341,9 @@ Generated by [AVA](https://ava.li).
       ␊
       function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }␊
       ␊
-      var Flex = (0, _styledComponents2.default)(_Box2.default)([], function (props) {␊
-        return {␊
-          display: 'flex'␊
-        };␊
-      }, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexDirection, _styledSystem.flexWrap);␊
+      function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }␊
+      ␊
+      var Flex = (0, _styledComponents2.default)(_Box2.default)(_templateObject, styleString, _styledSystem.space, _styledSystem.fontSize, _styledSystem.width, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexDirection, _styledSystem.flexWrap);␊
       ␊
       Flex.defaultProps = {};␊
       ␊
diff --git a/test/snapshots/modules.js.snap b/test/snapshots/modules.js.snap
index 3fdb07db3553c25518bdbfeb3e5a52522b889c2a..88e3842753b335ef12d5db48c6f295831d00a8a1 100644
GIT binary patch
literal 1174
zcmV;H1Zn$0RzV<BZeeh9Xm4~Nb}<S803<~zL5s*kB3ihE@teJ4s2__600000000y1
zSv`#0L=?7n_wL9l{2V$8Dn_R$wxwkgKs37`Brb^p0`YT^0Fh|r-F>_9$$!}6%l*iJ
zL`^|~L`4TZ5)vTMK$jMY3L2_(v{VS*%-FuO*Y-KmI=LubY1a0e_rCc&^WK{o&yFNX
zE$Q2r9{=^=@^@Dc-+4d0^TkhJuS)Fq?}{kDpAqGUM@9Mk2~mFA5ap|<CF!q6{`~v)
z>c{__{p`+jTUXBf+~U$NpAqHUCTnGlqsnV?`$fDCvHXGP8}izd^6FdT9hgvAPHxxN
z*IWO6BFSeZxh2Vup<3%Hxh=^Z)UcdsU_$iR`gBDJd>}scj0shS-L3%WPhn=*@V4i;
z;L&{*_FTuKevfR9M&Q56AvSyDuuI6UZU!(Q)C-^+YKX9_dt_wlWAZZb;G@9sKvnt|
zP@rfh<10*00D~P^;OS#CLhqq$4s<|ffjyyyW3wk!<GKW!qJd|VkzrFn)OSV8mtdv`
zCRG_9jWx=ihG-BT<4SLW1!=ZiREe+9tbs8HF68{GvzKO!f=YauUJYy!wvg*J*rRE(
zOj3z0SFC|9!!6`{6-?7f6Xv2yjD=<mlsRy*KLEHHhd@a+k6?;*xCG)B^1Wh0#(|ln
z5?`)Z17C)l$2Y+$Fm%Q{*g}ksPvrc0cIh9bO7aSq4^S<_A8<i9Bw;2$cWm8?v$MQn
z*i+ccOa4E$myrB#wChR!6fD=&DF`?m<`LEBbC_O><Zl?*kGiRTs9d)R!Lh7#y>2Tv
zdgShH5?VgpH(|QvSgvD(P5tBkC+eP^B$Y~`+4Jm$3VbN5n*rJ0_pxts+Vy#bau3|?
zcmw&P!rZ~0<8XWWtz#`kzA^Iv4nWQG6a)Mt<3nc77(_0THs{bG2{nyVVqGL=H1%RH
zr^n-{)Kq0^>?)d?aj_oZCfmI6Ub?sYzN=3lE1Wqt-8K#u<hP6|y_pqG9MkdG*dWK4
z3VUbfL5CsAqX>!XP>h<xvdC_uLS9_|vW&Q%HF4d<^=XOgX!UnuV7vD(tQp0HxW*{3
z2IOKlKfaksX@GZ_MqY$}-&#V1f6%HY!adL@skJ&6DCzpLK;a4}?^5F0GAOpCsIY}d
z>dUbBdjDPoA!8HoACktnKy{gCiM43F5*6JUyH$UJ&lE13xbd^8%Ga#ClVXJ)7ukVn
zio0@q(J6^7x6{xL`yt<_In7e1Ug0WvUVW~!1h2l`%v+~#-db89KdcjAv^76z0!&5v
z{afK8*}SRH9gr7T(izVOM4^tQQ%5OCBMhQ^YGfLDN#vVlB$3xU4^k2l*PQ>mPA$bq
zO~QG&5>E7O?er&{tWY<Nx&0d6`PrJCz^BG+e+!$yw^(QyU-%LZEFX-#%J)3oWgfwL
zrs4*ksg`FkrqP_sH0LtSxlD5|)11pR=Q2F`JInaGvr*I6ow=!7j^_lag<m367WK*&
oS&7nV{1%!yP&j&_g_DGYO3wEgwloMInB#>10h1YuCXONi0A(&wBme*a

literal 1060
zcmV+<1l#*TRzV<BZeeh9Xm4~Nb}<S8093#)o;S-$?%|R7o_(^LO&^O000000000y1
zSiNu4Koqx=ei15AQCX0XP917T3ZZ~lk|HGfp(2F%C=wuqDkr(Lu56#N&!uS<Kw@NK
zVna-b6{!mn6B~a6EKJ>4SwQ98U7XgA?PiEefmAxhe)qfge!lzN>$_W(Bq<}koj(3)
zWA6RJ=B<0p?Ux^34@vCr*Pv)yBcgdnMZ0!PG%_aI&bTCf8~OVE^U#wYqtCa`&CDP9
znBmr+r$l>knnfArUgcpqdl7!i(7u58ae4TJJanV7imOzX+mB;oW0{?&k~}KO8A(0{
zu*^w0E6D?ZFiFibaO*YmY*6uBj9lvIRjQP8IpLsK!*$)lHyvVQhc;BaZWD*P1vIg=
zgx%}h#Y6#Z<`7!b3=fwObv&GF=E1|7=Ab1*tDsBB!H+!M!KzX`3kD^>zkh|{gkx-Z
zCU&%n(ehpZ+cKslRQIeZ)rrO4)I7%`2t_@|LQA?uF?hW#BG2Nw<{4CFeDW+Pdn?0$
z<{qwe1)Dg?mYcfbE08HL=8j`IUm@#3#$f1*FT<t47Tm^iy@S_jkSw!w#g+q8pv(Nm
z@?F4&L4t(2sVl|;nF3|*I9?AJ+aW=Kr8`A1U>cGDzp;Gh4IC0MvvkFm15@D3{6_I@
z`-&MzDytB|_YQApa+3WNcT*+0%<UzBwfvX3p;<=FP<|e;G}F({@}O?j@Oo78f0gM$
z@}JJ6ll)!UFmP>#m^QJnMcus%E&9$>+nq}6u=6l3Zn47HkdwuROR*Ud*X13`0j#Uw
zBl5I5RfzaJUu$_)sp)G<UVZSeu&Z3v21>5bZi~Zavz%)dg5OwlZLNyK#yYX+qQ22#
zf2`N&O4wK>265Po09l_CTYR=|EM%@F0KX5+fGj5oHw%C$*}mz8Z0Gv2O<T6Df7$!$
z);<KPWn4RC3*pTYn#x7XmkmkO?*KzY33#g)0=}P;fE}z=1C<sxD8c?Dd2+!1HKyO2
z<cbx9T@--r{v=<#T01D|`_*4N7&k=dx;34?tcq25r+ChQvfZL8uQ>Q5`G5j9S)O5t
zr{wWsQrctrxIB!5d5G3Dr<o|~K@N#hbvD}rRlobM({j&t%)yi;;<&J1eh=vP&u4nZ
zIx5rKC3J!9smgK*4&=ntC{bc|33HL0`57W=kC0yMk@0MQkNhorq;*8?^&a85zoxsk
zp*29Rb#|I%ht2f1PS~g!`m%Kup4@QHs^?O@-k5<9@Rc2rf$A*GGXJ)y&by9gv*lqk
z*X2QiL6i3*L-emd``4fS>(Bo6XaD-MfBh+nv0fa*$5T46EE}3h9O4D4u(na@#3fZc
eZO~!8D%x|yx%)vKSDXLNwdQY4t*fr}9RL6fn;y*o

diff --git a/test/snapshots/templates.js.md b/test/snapshots/templates.js.md
index d561e87..17d4958 100644
--- a/test/snapshots/templates.js.md
+++ b/test/snapshots/templates.js.md
@@ -315,13 +315,14 @@ Generated by [AVA](https://ava.li).
     } from 'styled-system'␊
     import Div from './Div'␊
     ␊
-    const Box = styled(Div)([], props => ({}),␊
-      space,␊
-      fontSize,␊
-      width,␊
-      color,␊
+    const Box = styled(Div)`␊
+      ${styleString}␊
+      ${space}␊
+      ${fontSize}␊
+      ${width}␊
+      ${color}␊
       ␊
-    )␊
+    `␊
     ␊
     Box.defaultProps = {}␊
     ␊
@@ -341,16 +342,14 @@ Generated by [AVA](https://ava.li).
     } from 'styled-system'␊
     ␊
     ␊
-    const Hello = styled(h2)([], props => ((props, theme) => ({␊
-      fontFamily: 'inherit',␊
-      color: props.theme('colors.blue')␊
-    })),␊
-      space,␊
-      fontSize,␊
-      width,␊
-      color,␊
+    const Hello = styled(h2)`␊
+      ${styleString}␊
+      ${space}␊
+      ${fontSize}␊
+      ${width}␊
+      ${color}␊
       ␊
-    )␊
+    `␊
     ␊
     Hello.defaultProps = {␊
       p: 2␊
diff --git a/test/snapshots/templates.js.snap b/test/snapshots/templates.js.snap
index 46d83e7f452ff0707c51c4f46ddea09812e2138d..cd6cab90d7ad91e56b5b1cbeba52f02d49a5d54b 100644
GIT binary patch
literal 1031
zcmV+i1o-<wRzV<BZeeh9Xm4~Nb}<S80G;@=I2b5GzkfYk$l*$o0UwJ900000000x!
zmS0E|K^(_tRMOT|5TlTajf}m6>l7&pIj{d&Jy@t%M%0~qbKb_@?zKDG>2Xm#sPqqf
z>CYh*DE)tkUhLmX2K5jG(H{$w#2_e&B78{5YIgQ^J=03<?y7_1e)HX(`TgcI-<cZ)
z0+0<N7kaz0L3zQmtd{D}r5jHYk$h&6pW(%)%6rf6>v|0j=X5+y8H7|_mI6TGo4G~R
z-N*7zU-`8DIhy|!QuSym0G(M^GINx(E|7KW;hVEd+aXok(*Wo%ztP*|x;YTB&)xny
zuOkmqb>TDs%Fw&im)Q~5JNxWMC+c1uhg9{Z15kN?U`PHy+O{W=<$Y_@m$X8ve#ro!
zK}9w1=LDLwXY}v?{Px-hNYx4kfN8_KE;SDo_H;DdZR^~ax&>18OeO$rJ=a{Ft$qIP
zbC1sDwOlTOR2`fFz`enW{tcg6r#sudI~#jGB1lyN2OK?cr}XKW1qUlG9*JaJ?X986
z009Pu9t7v@z0lTOTGPx_zvx>5sVe0FaC+bBz0Fls`FnOd3T_{|J`+;)G5Mx|bV?Vd
zf!ve~DEI@if>{+eipaxy71_^ndSekUlV=i=u*xyf*Fp@-ssT5TY$Wi?60Q`QXuL=8
zV4oK7vM4KBz=TJSrZ%b=`8kGRcv(_0yB>+6%$7zoTYSY<7wJ_HqU}no2vS{G7qonO
zXk^q|G^ZZYtXjyp7>15)_aLvkUc{RfIiQj>TIGQfwwMVs3<}c8MBmUW8HFV``B<VO
ztq~fc&+UaI<_ub^<lqP^@*r-o$iQPzjYUM>8U?6qTtIcA+b=6}eUkiQ3FrkoS&JUp
zSnNZ7WTjFlnsJ@mFNlpLEGI}lqzITZvzD;5mz{R9a8y(6wPHQutW4NywN0XUYdmcC
z4J3`~WbGEiIuxEPnW=fKX<Uyf$j#$L$S-3-mPUw>%-C0@EhKBqSX)-IFB0iRGpXet
zb!A*^S^V!U#DwfSW_AA1$WwN53pDBQ1RF-HjlU3+kxtW#M0X<n`a|{+7Mp5!As*Y^
zsw&h;3GuB-S|8jRJE<6n&Ml@*hly!3RvSw;Sv+iAmgrT%D2P{z1gI^}>k|sciKba$
zRQnCxiBMhsx4b@~BO%#<HK5w5Gu4x0?YKuTA5;s?TWBmp17Qq71E9h0f4*kL=aw}*
z?ky`3Op|rVn))5<yuqSE+mo^T)2v>r(x{%qrd~zP4)cN5;C{5w$ZSZh4${}@(B5-~
zbU*MuLG&m{3Oi_br$Zawsm<lLOZb154Y&Th>R%R7FOe|?33+~&<vRs^a%x5q0084u
B@u~m-

literal 1006
zcmV<K0}=c|RzV<BZeeh9Xm4~Nb}<S80C!pd9lZ(dT~rlo^J(e%DIbdn00000000x+
zmP=?8K^Vtp+G2HUQ;`Z%R8|x=ftX5Bl#;|}t$L`^mTG-A-AtM-o87oOt!ZP5dT5I;
z=*3466<T~B#EZ|174#qoKC9GXsUlPqMLZ}{b#{_$(l%;allTaPeDj~#Z@&4>e<!0r
z01O~_ru&isl+1pT-BR(%w)zMW$)}q949q)L(tUd8rB`rYPW!{OkC3W6(g4WspFX#u
z^I+cb3m;ZKMKixbs@_irpd<T2R*rJA3S?iu*MD-sQApL^4Dv0x+TB=ntuJVqzUftN
zdoHA^Fb;rX^d|keAz1asGWEgXniq#4RnKMuP<E$pOI}~bhDX6gJw=)GTOm~!PXM4^
zMU`)-d7BLrdv|?$efb@v>Ols8aRasInm^}vwb$Qj>sXz>4pQ}H765Hsm#aEjdpw<|
z9-PW;IX@RtbzwFDw?CHluKLhA!G6@WwV~@hf>d2@0N}vxo3_U%X6-3GyFWPoVs|B^
z>KF3;eAhRl=}cRvt+JV^c-FHRQuSgE0LOPOYicep&)dGuI{U`nD^nm<r%nPO4P;Wf
zFau0ZD}#c^D=U~)af67QtV@wSEEj6b;bqb%AqlG-6CUPgSXT8qcw{DlOO|k%&`9I$
zf)l&7fR{yC(E=tgIGfs_V&vf%hT&yN#q3HXiZW{p&unxTn2Z}Yn^~_SdsWtEXN^W0
znpx~d9%Q1DKRoLSher?_3RzB&+(;2Hr_Wp%N?@T689Az{mTIvMaV92UGMPuQ029N|
zA}vnja@2`<ZKyN~!CS}{Fad@^KFTFLBDAPMgtJmlIGky@P#^BM<dc|-fL|*6qS#5t
zQ11S~Xep75!x#-`Lq-iEQyiB}jp*>mid>f}&;4(H`vy`*b<{pfy~i5kdQ3qM9?wA@
z84I!$B|>J#?s9D-*~p5uZ55=NWO`Ab)cBXWG9k7s`1>|uMD`uFJHKh<F*~^h>U4O5
z4Wng|{|=o|h^7mPj%50E$m~%TYpQDzk1Y;W6>6lU_*N$!N^Xi>RE$K|7SpC_V%m(!
z%#xQZ5w<Q)_O4*$!%IX0)STe`@dpw_Q?D?r{etdDs4n_bULVnskZQmhQ0>$i>&a0R
z_vqz)YQBE`jAa->7(*}uFv9O&zGfxnmNgLfmX!>qsk&s1{f>1y!lG1rCu84Fy?U+6
zNcAMv^>T7{=p9;v8)~8GYDleC@~qvejkEhhe&F4L=v0stu+qovRxQ0<TgxxE@ZT&O
cuK#h>KP{q8A~^*KIe#?EchT+@Pl^!$0LACoyZ`_I