Skip to content

Commit 5b14379

Browse files
quantizorquantizor
committed
handle simple key interpolation as well
1 parent 86caf02 commit 5b14379

File tree

5 files changed

+266
-31
lines changed

5 files changed

+266
-31
lines changed

‎src/visitors/transpileCssProp.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -148,20 +148,27 @@ export default t => (path, state) => {
148148
*/
149149
if (
150150
t.isMemberExpression(property.key) ||
151-
t.isCallExpression(property.key)
151+
t.isCallExpression(property.key) ||
152+
// checking for css={{[something]: something}}
153+
(t.isIdentifier(property.key) &&
154+
path.scope.hasBinding(property.key.name) &&
155+
// but not a object reference shorthand like css={{ color }}
156+
(t.isIdentifier(property.value)
157+
? property.key.name !== property.value.name
158+
: true))
152159
) {
153160
replaceObjectWithPropFunction = true
154161

155-
const name = getLocalIdentifier(path)
162+
const identifier = getLocalIdentifier(path)
156163

157164
elem.node.attributes.push(
158165
t.jSXAttribute(
159-
t.jSXIdentifier(name.name),
166+
t.jSXIdentifier(identifier.name),
160167
t.jSXExpressionContainer(property.key)
161168
)
162169
)
163170

164-
property.key = t.memberExpression(p, name)
171+
property.key = t.memberExpression(p, identifier)
165172
}
166173

167174
if (t.isObjectExpression(property.value)) {
@@ -193,16 +200,18 @@ export default t => (path, state) => {
193200
) {
194201
replaceObjectWithPropFunction = true
195202

196-
const name = getLocalIdentifier(path)
203+
const identifier = getLocalIdentifier(path)
197204

198205
elem.node.attributes.push(
199206
t.jSXAttribute(
200-
t.jSXIdentifier(name.name),
207+
t.jSXIdentifier(identifier.name),
201208
t.jSXExpressionContainer(property.value)
202209
)
203210
)
204211

205-
acc.push(t.objectProperty(property.key, t.memberExpression(p, name)))
212+
acc.push(
213+
t.objectProperty(property.key, t.memberExpression(p, identifier))
214+
)
206215
} else {
207216
// some sort of primitive which is safe to pass through as-is
208217
acc.push(property)
@@ -227,17 +236,19 @@ export default t => (path, state) => {
227236
) {
228237
acc.push(ex)
229238
} else {
230-
const name = getLocalIdentifier(path)
239+
const identifier = getLocalIdentifier(path)
231240
const p = t.identifier('p')
232241

233242
elem.node.attributes.push(
234243
t.jSXAttribute(
235-
t.jSXIdentifier(name.name),
244+
t.jSXIdentifier(identifier.name),
236245
t.jSXExpressionContainer(ex)
237246
)
238247
)
239248

240-
acc.push(t.arrowFunctionExpression([p], t.memberExpression(p, name)))
249+
acc.push(
250+
t.arrowFunctionExpression([p], t.memberExpression(p, identifier))
251+
)
241252
}
242253

243254
return acc

‎test/fixtures/transpile-css-prop-all-options-on/code.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,3 +179,79 @@ function Thing4(props) {
179179

180180
const ImportedComponentUsage = p => <SomeComponent css="color: red;" />
181181
const RequiredComponentUsage = p => <SomeOtherComponent css="color: red;" />
182+
183+
const ObjectInterpolation = p => {
184+
const theme = useTheme()
185+
186+
return (
187+
<p
188+
css={{
189+
color: theme.colors.red,
190+
}}
191+
>
192+
H
193+
</p>
194+
)
195+
}
196+
197+
const ObjectInterpolationCustomComponent = p => {
198+
const theme = useTheme()
199+
200+
return (
201+
<Thing3
202+
css={{
203+
color: theme.colors.red,
204+
}}
205+
>
206+
H
207+
</Thing3>
208+
)
209+
}
210+
211+
const ObjectInterpolationInKey = p => {
212+
const theme = useTheme()
213+
214+
return (
215+
<Thing3
216+
css={{
217+
[theme.breakpoints.md]: {
218+
color: 'red',
219+
},
220+
}}
221+
>
222+
H
223+
</Thing3>
224+
)
225+
}
226+
227+
const ObjectFnInterpolationInKey = p => {
228+
const theme = useTheme()
229+
230+
return (
231+
<Thing3
232+
css={{
233+
[theme.breakpoints.md()]: {
234+
color: 'red',
235+
},
236+
}}
237+
>
238+
H
239+
</Thing3>
240+
)
241+
}
242+
243+
const ObjectFnSimpleInterpolationInKey = p => {
244+
const foo = '@media screen and (max-width: 600px)'
245+
246+
return (
247+
<Thing3
248+
css={{
249+
[foo]: {
250+
color: 'red',
251+
},
252+
}}
253+
>
254+
H
255+
</Thing3>
256+
)
257+
}

‎test/fixtures/transpile-css-prop-all-options-on/output.js‎

Lines changed: 101 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -152,9 +152,45 @@ var Thing3 = _styledComponents["default"].div.withConfig({
152152
componentId: "sc-7evkve-3"
153153
})(["color:blue;"]);
154154

155+
var _StyledThing6 = (0, _styledComponents["default"])(Thing3).withConfig({
156+
displayName: "code___StyledThing6",
157+
componentId: "sc-7evkve-4"
158+
})(function (p) {
159+
return _defineProperty({}, p.$_css19, {
160+
color: 'red'
161+
});
162+
});
163+
164+
var _StyledThing5 = (0, _styledComponents["default"])(Thing3).withConfig({
165+
displayName: "code___StyledThing5",
166+
componentId: "sc-7evkve-5"
167+
})(function (p) {
168+
return _defineProperty({}, p.$_css18, {
169+
color: 'red'
170+
});
171+
});
172+
173+
var _StyledThing4 = (0, _styledComponents["default"])(Thing3).withConfig({
174+
displayName: "code___StyledThing4",
175+
componentId: "sc-7evkve-6"
176+
})(function (p) {
177+
return _defineProperty({}, p.$_css17, {
178+
color: 'red'
179+
});
180+
});
181+
182+
var _StyledThing3 = (0, _styledComponents["default"])(Thing3).withConfig({
183+
displayName: "code___StyledThing3",
184+
componentId: "sc-7evkve-7"
185+
})(function (p) {
186+
return {
187+
color: p.$_css16
188+
};
189+
});
190+
155191
var _StyledThing = (0, _styledComponents["default"])(Thing3).withConfig({
156192
displayName: "code___StyledThing",
157-
componentId: "sc-7evkve-4"
193+
componentId: "sc-7evkve-8"
158194
})(["color:red;"]);
159195

160196
var EarlyUsageComponent2 = function EarlyUsageComponent2(p) {
@@ -169,7 +205,7 @@ function Thing4(props) {
169205

170206
var _StyledThing2 = (0, _styledComponents["default"])(Thing4).withConfig({
171207
displayName: "code___StyledThing2",
172-
componentId: "sc-7evkve-5"
208+
componentId: "sc-7evkve-9"
173209
})(["color:red;"]);
174210

175211
var ImportedComponentUsage = function ImportedComponentUsage(p) {
@@ -180,101 +216,136 @@ var RequiredComponentUsage = function RequiredComponentUsage(p) {
180216
return <_StyledSomeOtherComponent />;
181217
};
182218

219+
var ObjectInterpolation = function ObjectInterpolation(p) {
220+
var theme = useTheme();
221+
return <_StyledP14 $_css15={theme.colors.red}>
222+
H
223+
</_StyledP14>;
224+
};
225+
226+
var ObjectInterpolationCustomComponent = function ObjectInterpolationCustomComponent(p) {
227+
var theme = useTheme();
228+
return <_StyledThing3 $_css16={theme.colors.red}>
229+
H
230+
</_StyledThing3>;
231+
};
232+
233+
var ObjectInterpolationInKey = function ObjectInterpolationInKey(p) {
234+
var theme = useTheme();
235+
return <_StyledThing4 $_css17={theme.breakpoints.md}>
236+
H
237+
</_StyledThing4>;
238+
};
239+
240+
var ObjectFnInterpolationInKey = function ObjectFnInterpolationInKey(p) {
241+
var theme = useTheme();
242+
return <_StyledThing5 $_css18={theme.breakpoints.md()}>
243+
H
244+
</_StyledThing5>;
245+
};
246+
247+
var ObjectFnSimpleInterpolationInKey = function ObjectFnSimpleInterpolationInKey(p) {
248+
var foo = '@media screen and (max-width: 600px)';
249+
return <_StyledThing6 $_css19={foo}>
250+
H
251+
</_StyledThing6>;
252+
};
253+
183254
var _StyledP = (0, _styledComponents["default"])("p").withConfig({
184255
displayName: "code___StyledP",
185-
componentId: "sc-7evkve-6"
256+
componentId: "sc-7evkve-10"
186257
})(["flex:1;"]);
187258

188259
var _StyledP2 = (0, _styledComponents["default"])("p").withConfig({
189260
displayName: "code___StyledP2",
190-
componentId: "sc-7evkve-7"
261+
componentId: "sc-7evkve-11"
191262
})(["flex:1;"]);
192263

193264
var _StyledP3 = (0, _styledComponents["default"])("p").withConfig({
194265
displayName: "code___StyledP3",
195-
componentId: "sc-7evkve-8"
266+
componentId: "sc-7evkve-12"
196267
})({
197268
color: 'blue'
198269
});
199270

200271
var _StyledP4 = (0, _styledComponents["default"])("p").withConfig({
201272
displayName: "code___StyledP4",
202-
componentId: "sc-7evkve-9"
273+
componentId: "sc-7evkve-13"
203274
})(["flex:1;"]);
204275

205276
var _StyledP5 = (0, _styledComponents["default"])("p").withConfig({
206277
displayName: "code___StyledP5",
207-
componentId: "sc-7evkve-10"
278+
componentId: "sc-7evkve-14"
208279
})(["color:blue;"]);
209280

210281
var _StyledParagraph = (0, _styledComponents["default"])(Paragraph).withConfig({
211282
displayName: "code___StyledParagraph",
212-
componentId: "sc-7evkve-11"
283+
componentId: "sc-7evkve-15"
213284
})(["flex:1"]);
214285

215286
var _StyledP6 = (0, _styledComponents["default"])("p").withConfig({
216287
displayName: "code___StyledP6",
217-
componentId: "sc-7evkve-12"
288+
componentId: "sc-7evkve-16"
218289
})(["", ""], function (p) {
219290
return p.$_css;
220291
});
221292

222293
var _StyledP7 = (0, _styledComponents["default"])("p").withConfig({
223294
displayName: "code___StyledP7",
224-
componentId: "sc-7evkve-13"
295+
componentId: "sc-7evkve-17"
225296
})(["background:", ";"], function (p) {
226297
return p.$_css2;
227298
});
228299

229300
var _StyledP8 = (0, _styledComponents["default"])("p").withConfig({
230301
displayName: "code___StyledP8",
231-
componentId: "sc-7evkve-14"
302+
componentId: "sc-7evkve-18"
232303
})(["color:", ";"], function (props) {
233304
return props.theme.a;
234305
});
235306

236307
var _StyledP9 = (0, _styledComponents["default"])("p").withConfig({
237308
displayName: "code___StyledP9",
238-
componentId: "sc-7evkve-15"
309+
componentId: "sc-7evkve-19"
239310
})(["border-radius:", "px;"], radius);
240311

241312
var _StyledP10 = (0, _styledComponents["default"])("p").withConfig({
242313
displayName: "code___StyledP10",
243-
componentId: "sc-7evkve-16"
314+
componentId: "sc-7evkve-20"
244315
})(["color:", ";"], function (p) {
245316
return p.$_css3;
246317
});
247318

248319
var _StyledP11 = (0, _styledComponents["default"])("p").withConfig({
249320
displayName: "code___StyledP11",
250-
componentId: "sc-7evkve-17"
321+
componentId: "sc-7evkve-21"
251322
})(["color:", ";"], function (props) {
252323
return props.theme.color;
253324
});
254325

255326
var _StyledButtonGhost = (0, _styledComponents["default"])(Button.Ghost).withConfig({
256327
displayName: "code___StyledButtonGhost",
257-
componentId: "sc-7evkve-18"
328+
componentId: "sc-7evkve-22"
258329
})(["flex:1"]);
259330

260331
var _StyledButtonGhostNew = (0, _styledComponents["default"])(Button.Ghost.New).withConfig({
261332
displayName: "code___StyledButtonGhostNew",
262-
componentId: "sc-7evkve-19"
333+
componentId: "sc-7evkve-23"
263334
})(["flex:1"]);
264335

265336
var _StyledButtonGhost2 = (0, _styledComponents["default"])(button.ghost).withConfig({
266337
displayName: "code___StyledButtonGhost2",
267-
componentId: "sc-7evkve-20"
338+
componentId: "sc-7evkve-24"
268339
})(["flex:1"]);
269340

270341
var _StyledButtonGhost3 = (0, _styledComponents["default"])("button-ghost").withConfig({
271342
displayName: "code___StyledButtonGhost3",
272-
componentId: "sc-7evkve-21"
343+
componentId: "sc-7evkve-25"
273344
})(["flex:1"]);
274345

275346
var _StyledP12 = (0, _styledComponents["default"])("p").withConfig({
276347
displayName: "code___StyledP12",
277-
componentId: "sc-7evkve-22"
348+
componentId: "sc-7evkve-26"
278349
})(function (p) {
279350
return {
280351
background: p.$_css4,
@@ -291,7 +362,7 @@ var _StyledP12 = (0, _styledComponents["default"])("p").withConfig({
291362

292363
var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
293364
displayName: "code___StyledP13",
294-
componentId: "sc-7evkve-23"
365+
componentId: "sc-7evkve-27"
295366
})(function (p) {
296367
return _objectSpread(_objectSpread({}, _objectSpread({
297368
'::before': {
@@ -321,5 +392,14 @@ var _StyledP13 = (0, _styledComponents["default"])("p").withConfig({
321392

322393
var _StyledSomeComponent = (0, _styledComponents["default"])(_SomeComponentPath["default"]).withConfig({
323394
displayName: "code___StyledSomeComponent",
324-
componentId: "sc-7evkve-24"
395+
componentId: "sc-7evkve-28"
325396
})(["color:red;"]);
397+
398+
var _StyledP14 = (0, _styledComponents["default"])("p").withConfig({
399+
displayName: "code___StyledP14",
400+
componentId: "sc-7evkve-29"
401+
})(function (p) {
402+
return {
403+
color: p.$_css15
404+
};
405+
});

0 commit comments

Comments
 (0)