Skip to content

Commit e318894

Browse files
mccleanpgucong3000
mccleanp
authored and
gucong3000
committed
Add support for material-ui/styles (stylelint#65)
1 parent 74c3f2a commit e318894

File tree

4 files changed

+351
-0
lines changed

4 files changed

+351
-0
lines changed

‎extract.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const supports = {
1414
// import { styled } from 'glamor/styled'
1515
// import { styled } from "styletron-react";
1616
// import { styled } from 'linaria/react';
17+
// import { styled } from '@material-ui/styles'
1718
styled: true,
1819

1920
// import { style } from "typestyle";
@@ -81,6 +82,9 @@ const supports = {
8182

8283
// const rule = superstyle({ color: 'blue' })
8384
"superstyle": true,
85+
86+
// import { makeStyles } from '@material-ui/styles'
87+
'styles': expectAdjacentSibling(["makeStyles"]),
8488
};
8589

8690
const plugins = [

‎test/fixtures/material-ui.jsx

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

‎test/fixtures/material-ui.jsx.json

Lines changed: 326 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,326 @@
1+
{
2+
"raws": {},
3+
"type": "root",
4+
"nodes": [
5+
{
6+
"raws": {},
7+
"source": {
8+
"input": {
9+
"file": "material-ui.jsx"
10+
},
11+
"start": {
12+
"line": 5,
13+
"column": 29
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": "material-ui.jsx"
68+
},
69+
"start": {
70+
"line": 7,
71+
"column": 4
72+
},
73+
"end": {
74+
"line": 7,
75+
"column": 66
76+
}
77+
}
78+
},
79+
{
80+
"raws": {
81+
"prop": {
82+
"prefix": "",
83+
"suffix": "",
84+
"raw": "border",
85+
"value": "border"
86+
},
87+
"value": {
88+
"prefix": "",
89+
"suffix": "",
90+
"raw": "0",
91+
"value": "0"
92+
},
93+
"between": ": ",
94+
"before": "\n "
95+
},
96+
"prop": "border",
97+
"value": "0",
98+
"type": "decl",
99+
"source": {
100+
"input": {
101+
"file": "material-ui.jsx"
102+
},
103+
"start": {
104+
"line": 8,
105+
"column": 4
106+
},
107+
"end": {
108+
"line": 8,
109+
"column": 13
110+
}
111+
}
112+
},
113+
{
114+
"raws": {
115+
"prop": {
116+
"prefix": "",
117+
"suffix": "",
118+
"raw": "borderRadius",
119+
"value": "border-radius"
120+
},
121+
"value": {
122+
"prefix": "",
123+
"suffix": "",
124+
"raw": "3",
125+
"value": "3"
126+
},
127+
"between": ": ",
128+
"before": "\n "
129+
},
130+
"prop": "border-radius",
131+
"value": "3",
132+
"type": "decl",
133+
"source": {
134+
"input": {
135+
"file": "material-ui.jsx"
136+
},
137+
"start": {
138+
"line": 9,
139+
"column": 4
140+
},
141+
"end": {
142+
"line": 9,
143+
"column": 19
144+
}
145+
}
146+
},
147+
{
148+
"raws": {
149+
"prop": {
150+
"prefix": "",
151+
"suffix": "",
152+
"raw": "boxShadow",
153+
"value": "box-shadow"
154+
},
155+
"value": {
156+
"prefix": "'",
157+
"suffix": "'",
158+
"raw": "0 3px 5px 2px rgba(255, 105, 135, .3)",
159+
"value": "0 3px 5px 2px rgba(255, 105, 135, .3)"
160+
},
161+
"between": ": ",
162+
"before": "\n "
163+
},
164+
"prop": "box-shadow",
165+
"value": "0 3px 5px 2px rgba(255, 105, 135, .3)",
166+
"type": "decl",
167+
"source": {
168+
"input": {
169+
"file": "material-ui.jsx"
170+
},
171+
"start": {
172+
"line": 10,
173+
"column": 4
174+
},
175+
"end": {
176+
"line": 10,
177+
"column": 54
178+
}
179+
}
180+
},
181+
{
182+
"raws": {
183+
"prop": {
184+
"prefix": "",
185+
"suffix": "",
186+
"raw": "color",
187+
"value": "color"
188+
},
189+
"value": {
190+
"prefix": "'",
191+
"suffix": "'",
192+
"raw": "white",
193+
"value": "white"
194+
},
195+
"between": ": ",
196+
"before": "\n "
197+
},
198+
"prop": "color",
199+
"value": "white",
200+
"type": "decl",
201+
"source": {
202+
"input": {
203+
"file": "material-ui.jsx"
204+
},
205+
"start": {
206+
"line": 11,
207+
"column": 4
208+
},
209+
"end": {
210+
"line": 11,
211+
"column": 18
212+
}
213+
}
214+
},
215+
{
216+
"raws": {
217+
"prop": {
218+
"prefix": "",
219+
"suffix": "",
220+
"raw": "height",
221+
"value": "height"
222+
},
223+
"value": {
224+
"prefix": "",
225+
"suffix": "",
226+
"raw": "48",
227+
"value": "48"
228+
},
229+
"between": ": ",
230+
"before": "\n "
231+
},
232+
"prop": "height",
233+
"value": "48",
234+
"type": "decl",
235+
"source": {
236+
"input": {
237+
"file": "material-ui.jsx"
238+
},
239+
"start": {
240+
"line": 12,
241+
"column": 4
242+
},
243+
"end": {
244+
"line": 12,
245+
"column": 14
246+
}
247+
}
248+
},
249+
{
250+
"raws": {
251+
"prop": {
252+
"prefix": "",
253+
"suffix": "",
254+
"raw": "padding",
255+
"value": "padding"
256+
},
257+
"value": {
258+
"prefix": "'",
259+
"suffix": "'",
260+
"raw": "0 30px",
261+
"value": "0 30px"
262+
},
263+
"between": ": ",
264+
"before": "\n "
265+
},
266+
"prop": "padding",
267+
"value": "0 30px",
268+
"type": "decl",
269+
"source": {
270+
"input": {
271+
"file": "material-ui.jsx"
272+
},
273+
"start": {
274+
"line": 13,
275+
"column": 4
276+
},
277+
"end": {
278+
"line": 13,
279+
"column": 21
280+
}
281+
}
282+
}
283+
],
284+
"source": {
285+
"input": {
286+
"file": "material-ui.jsx"
287+
},
288+
"start": {
289+
"line": 6,
290+
"column": 2
291+
},
292+
"end": {
293+
"line": 14,
294+
"column": 3
295+
}
296+
}
297+
}
298+
],
299+
"source": {
300+
"input": {
301+
"file": "material-ui.jsx"
302+
},
303+
"start": {
304+
"line": 5,
305+
"column": 29
306+
},
307+
"end": {
308+
"line": 15,
309+
"column": 1
310+
}
311+
}
312+
}
313+
]
314+
}
315+
],
316+
"source": {
317+
"input": {
318+
"file": "material-ui.jsx"
319+
},
320+
"start": {
321+
"line": 1,
322+
"column": 1
323+
},
324+
"lang": "jsx"
325+
}
326+
}

‎test/supports.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ describe("should support for each CSS in JS package", () => {
4242
"tpl-in-tpl.mjs",
4343
"tpl-selector.mjs",
4444
"tpl-special.mjs",
45+
"material-ui.jsx",
4546
].forEach(file => {
4647
it(file, () => {
4748
file = require.resolve("./fixtures/" + file);

0 commit comments

Comments
 (0)