Skip to content

Commit bade2c2

Browse files
Merge pull request stylelint#42 from stylelint/vue-emotion
2 parents 0b4beda + 4820376 commit bade2c2

File tree

2 files changed

+116
-0
lines changed

2 files changed

+116
-0
lines changed

extract.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ const supports = {
4343
// import styled from "react-emotion";
4444
'react-emotion': true,
4545

46+
// import styled from 'vue-emotion';
47+
// Also see:
48+
// - https://github.com/stylelint/stylelint/issues/4247
49+
// - https://github.com/gucong3000/postcss-jsx/issues/63
50+
// - https://github.com/stylelint/postcss-css-in-js/issues/22
51+
'vue-emotion': true,
52+
4653
// import styled from 'preact-emotion'
4754
'preact-emotion': true,
4855

@@ -198,6 +205,16 @@ function literalParser(source, opts, styles) {
198205

199206
return path;
200207
}
208+
// If this is not an object but a function returning an object, we want to parse the
209+
// object that is in the body of the function. We will only parse it if the body only
210+
// consist of an object and nothing else.
211+
else if (path.isArrowFunctionExpression()) {
212+
const body = path.get('body');
213+
214+
if (body) {
215+
addObjectExpression(body);
216+
}
217+
}
201218
}
202219

203220
function setSpecifier(id, nameSpace) {

test/emotion.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,103 @@ describe('javascript tests', () => {
6767
});
6868
});
6969
});
70+
71+
it('works with vue-emotion', () => {
72+
// Related issues:
73+
// - https://github.com/stylelint/stylelint/issues/4247
74+
// - https://github.com/gucong3000/postcss-jsx/issues/63
75+
// - https://github.com/stylelint/postcss-css-in-js/issues/22
76+
const parsed = syntax.parse(`
77+
import styled from 'vue-emotion';
78+
79+
const Wrapper = styled('div')\`
80+
left: 0;
81+
top: 0;
82+
width: 100%;
83+
height: 100%;
84+
\`;
85+
`);
86+
87+
expect(parsed.nodes).toHaveLength(1);
88+
});
89+
90+
it('works with @emotion/styled', () => {
91+
const parsed = syntax.parse(`
92+
import styled from '@emotion/styled';
93+
94+
const Wrapper = styled.div\`
95+
left: 0;
96+
\`;
97+
`);
98+
99+
expect(parsed.nodes).toHaveLength(1);
100+
});
101+
102+
it('works with css objects', () => {
103+
// It should parse:
104+
// - Inline objects (inside of the JSX)
105+
// - Variables that are referenced inside of the JSX
106+
// - Variables that are referenced as spread
107+
const parsed = syntax.parse(`
108+
import React from 'react';
109+
110+
const spreaded = {
111+
width: 100,
112+
padding: 40,
113+
};
114+
115+
const notInline = {
116+
...spreaded,
117+
margin: 60,
118+
};
119+
120+
const Component = () => (
121+
<div css={{
122+
...spreaded,
123+
margin: 60,
124+
}}>
125+
some other text
126+
<span css={notInline}>Hello</span>
127+
</div>
128+
);
129+
`);
130+
131+
expect(parsed.nodes).toHaveLength(3);
132+
});
133+
134+
it('works with css object functions', () => {
135+
// Just like the previous test, both inline and variable styles should be parsed. It should
136+
// also parse objects if they are defined in a arrow function, which is for example what is
137+
// used by emotion-theming.
138+
// See also:
139+
// - https://github.com/gucong3000/postcss-jsx/issues/69
140+
// - https://github.com/stylelint/postcss-css-in-js/issues/22
141+
const parsed = syntax.parse(`
142+
import React from 'react';
143+
144+
const spreaded = {
145+
width: 100,
146+
padding: 40,
147+
}
148+
149+
const notInline = theme => ({
150+
...spreaded,
151+
margin: 60,
152+
color: theme.color.primary,
153+
});
154+
155+
const Component = () => (
156+
<div css={theme => ({
157+
...spreaded,
158+
margin: 60,
159+
color: theme.color.primary,
160+
})}>
161+
some other text
162+
<span css={notInline}>Hello</span>
163+
</div>
164+
);
165+
`);
166+
167+
expect(parsed.nodes).toHaveLength(3);
168+
});
70169
});

0 commit comments

Comments
 (0)