Skip to content

Commit 74d2696

Browse files
felixfonfelixfon
committed
Add support for tss-react/mui
1 parent 420439c commit 74d2696

File tree

4 files changed

+374
-1
lines changed

4 files changed

+374
-1
lines changed

‎extract.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ const supports = {
8888

8989
// import { makeStyles } from '@material-ui/styles'
9090
styles: expectAdjacentSibling(['makeStyles']),
91+
92+
// import { makeStyles } from "tss-react/mui"
93+
mui: (i, nameSpace, parent) =>
94+
nameSpace[i + 1] === 'makeStyles' && parent.callee.name !== 'makeStyles',
9195
};
9296

9397
const plugins = [
@@ -299,7 +303,7 @@ function literalParser(source, opts, styles) {
299303

300304
switch (typeof result) {
301305
case 'function': {
302-
return result.apply(this, args);
306+
return result.apply(this, [...args, path.parent]);
303307
}
304308
case 'boolean': {
305309
return result;

‎test/fixtures/tss-react.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { makeStyles } from 'tss-react/mui';
3+
import Button from '@material-ui/core/Button';
4+
5+
const useStyles = makeStyles({
6+
name: {
7+
MyComponent,
8+
},
9+
})({
10+
root: {
11+
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
12+
border: 0,
13+
borderRadius: 3,
14+
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
15+
color: 'white',
16+
height: 48,
17+
padding: '0 30px',
18+
},
19+
});
20+
21+
export default function MyComponent() {
22+
const classes = useStyles();
23+
return <Button className={classes.root}>MyComponent</Button>;
24+
}

‎test/fixtures/tss-react.jsx.json‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
{
2+
"raws": {},
3+
"type": "root",
4+
"nodes": [
5+
{
6+
"raws": {},
7+
"source": {
8+
"input": {
9+
"file": "tss-react.jsx"
10+
},
11+
"start": {
12+
"line": 9,
13+
"column": 3
14+
},
15+
"inline": false,
16+
"lang": "object-literal",
17+
"syntax": {}
18+
},
19+
"type": "root",
20+
"nodes": [
21+
{
22+
"raws": {
23+
"after": "\n",
24+
"semicolon": true,
25+
"before": ""
26+
},
27+
"type": "object",
28+
"nodes": [
29+
{
30+
"raws": {
31+
"selector": {
32+
"prefix": "",
33+
"suffix": "",
34+
"raw": "root",
35+
"value": "root"
36+
},
37+
"between": ": ",
38+
"after": "\n ",
39+
"semicolon": true,
40+
"before": "\n "
41+
},
42+
"selector": "root",
43+
"type": "rule",
44+
"nodes": [
45+
{
46+
"raws": {
47+
"prop": {
48+
"prefix": "",
49+
"suffix": "",
50+
"raw": "background",
51+
"value": "background"
52+
},
53+
"value": {
54+
"prefix": "'",
55+
"suffix": "'",
56+
"raw": "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
57+
"value": "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
58+
},
59+
"between": ": ",
60+
"before": "\n "
61+
},
62+
"prop": "background",
63+
"value": "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
64+
"type": "decl",
65+
"source": {
66+
"input": {
67+
"file": "tss-react.jsx"
68+
},
69+
"start": {
70+
"line": 11,
71+
"column": 4,
72+
"index": 201
73+
},
74+
"end": {
75+
"line": 11,
76+
"column": 66,
77+
"index": 263
78+
}
79+
}
80+
},
81+
{
82+
"raws": {
83+
"prop": {
84+
"prefix": "",
85+
"suffix": "",
86+
"raw": "border",
87+
"value": "border"
88+
},
89+
"value": {
90+
"prefix": "",
91+
"suffix": "",
92+
"raw": "0",
93+
"value": "0"
94+
},
95+
"between": ": ",
96+
"before": "\n "
97+
},
98+
"prop": "border",
99+
"value": "0",
100+
"type": "decl",
101+
"source": {
102+
"input": {
103+
"file": "tss-react.jsx"
104+
},
105+
"start": {
106+
"line": 12,
107+
"column": 4,
108+
"index": 269
109+
},
110+
"end": {
111+
"line": 12,
112+
"column": 13,
113+
"index": 278
114+
}
115+
}
116+
},
117+
{
118+
"raws": {
119+
"prop": {
120+
"prefix": "",
121+
"suffix": "",
122+
"raw": "borderRadius",
123+
"value": "border-radius"
124+
},
125+
"value": {
126+
"prefix": "",
127+
"suffix": "",
128+
"raw": "3",
129+
"value": "3"
130+
},
131+
"between": ": ",
132+
"before": "\n "
133+
},
134+
"prop": "border-radius",
135+
"value": "3",
136+
"type": "decl",
137+
"source": {
138+
"input": {
139+
"file": "tss-react.jsx"
140+
},
141+
"start": {
142+
"line": 13,
143+
"column": 4,
144+
"index": 284
145+
},
146+
"end": {
147+
"line": 13,
148+
"column": 19,
149+
"index": 299
150+
}
151+
}
152+
},
153+
{
154+
"raws": {
155+
"prop": {
156+
"prefix": "",
157+
"suffix": "",
158+
"raw": "boxShadow",
159+
"value": "box-shadow"
160+
},
161+
"value": {
162+
"prefix": "'",
163+
"suffix": "'",
164+
"raw": "0 3px 5px 2px rgba(255, 105, 135, .3)",
165+
"value": "0 3px 5px 2px rgba(255, 105, 135, .3)"
166+
},
167+
"between": ": ",
168+
"before": "\n "
169+
},
170+
"prop": "box-shadow",
171+
"value": "0 3px 5px 2px rgba(255, 105, 135, .3)",
172+
"type": "decl",
173+
"source": {
174+
"input": {
175+
"file": "tss-react.jsx"
176+
},
177+
"start": {
178+
"line": 14,
179+
"column": 4,
180+
"index": 305
181+
},
182+
"end": {
183+
"line": 14,
184+
"column": 54,
185+
"index": 355
186+
}
187+
}
188+
},
189+
{
190+
"raws": {
191+
"prop": {
192+
"prefix": "",
193+
"suffix": "",
194+
"raw": "color",
195+
"value": "color"
196+
},
197+
"value": {
198+
"prefix": "'",
199+
"suffix": "'",
200+
"raw": "white",
201+
"value": "white"
202+
},
203+
"between": ": ",
204+
"before": "\n "
205+
},
206+
"prop": "color",
207+
"value": "white",
208+
"type": "decl",
209+
"source": {
210+
"input": {
211+
"file": "tss-react.jsx"
212+
},
213+
"start": {
214+
"line": 15,
215+
"column": 4,
216+
"index": 361
217+
},
218+
"end": {
219+
"line": 15,
220+
"column": 18,
221+
"index": 375
222+
}
223+
}
224+
},
225+
{
226+
"raws": {
227+
"prop": {
228+
"prefix": "",
229+
"suffix": "",
230+
"raw": "height",
231+
"value": "height"
232+
},
233+
"value": {
234+
"prefix": "",
235+
"suffix": "",
236+
"raw": "48",
237+
"value": "48"
238+
},
239+
"between": ": ",
240+
"before": "\n "
241+
},
242+
"prop": "height",
243+
"value": "48",
244+
"type": "decl",
245+
"source": {
246+
"input": {
247+
"file": "tss-react.jsx"
248+
},
249+
"start": {
250+
"line": 16,
251+
"column": 4,
252+
"index": 381
253+
},
254+
"end": {
255+
"line": 16,
256+
"column": 14,
257+
"index": 391
258+
}
259+
}
260+
},
261+
{
262+
"raws": {
263+
"prop": {
264+
"prefix": "",
265+
"suffix": "",
266+
"raw": "padding",
267+
"value": "padding"
268+
},
269+
"value": {
270+
"prefix": "'",
271+
"suffix": "'",
272+
"raw": "0 30px",
273+
"value": "0 30px"
274+
},
275+
"between": ": ",
276+
"before": "\n "
277+
},
278+
"prop": "padding",
279+
"value": "0 30px",
280+
"type": "decl",
281+
"source": {
282+
"input": {
283+
"file": "tss-react.jsx"
284+
},
285+
"start": {
286+
"line": 17,
287+
"column": 4,
288+
"index": 397
289+
},
290+
"end": {
291+
"line": 17,
292+
"column": 21,
293+
"index": 414
294+
}
295+
}
296+
}
297+
],
298+
"source": {
299+
"input": {
300+
"file": "tss-react.jsx"
301+
},
302+
"start": {
303+
"line": 10,
304+
"column": 2,
305+
"index": 189
306+
},
307+
"end": {
308+
"line": 18,
309+
"column": 3,
310+
"index": 419
311+
}
312+
}
313+
}
314+
],
315+
"source": {
316+
"input": {
317+
"file": "tss-react.jsx"
318+
},
319+
"start": {
320+
"line": 9,
321+
"column": 3,
322+
"index": 185
323+
},
324+
"end": {
325+
"line": 19,
326+
"column": 1,
327+
"index": 422
328+
}
329+
}
330+
}
331+
]
332+
}
333+
],
334+
"source": {
335+
"input": {
336+
"file": "tss-react.jsx"
337+
},
338+
"start": {
339+
"line": 1,
340+
"column": 1
341+
},
342+
"lang": "jsx"
343+
}
344+
}

‎test/supports.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ describe('should support for each CSS in JS package', () => {
5555
'tpl-selector.mjs',
5656
'tpl-special.mjs',
5757
'material-ui.jsx',
58+
'tss-react.jsx',
5859
].forEach((file) => {
5960
it(`${file}`, () => {
6061
file = require.resolve(`./fixtures/${file}`);

0 commit comments

Comments
 (0)