Skip to content

Commit 61df05c

Browse files
abalmosgucong3000
authored andcommitted
Add support for emotion 10 (stylelint#44)
1 parent 860808b commit 61df05c

File tree

5 files changed

+113
-3
lines changed

5 files changed

+113
-3
lines changed

extract.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ const supports = {
2828

2929
// https://github.com/emotion-js/emotion
3030
emotion: true,
31+
"@emotion/core": true,
32+
"@emotion/styled": true,
3133
"react-emotion": true,
3234
"preact-emotion": true,
3335

@@ -56,6 +58,10 @@ const supports = {
5658
typestyle: true,
5759
};
5860

61+
const cssPropImpliesStyle = {
62+
"@emotion/core": true
63+
};
64+
5965
const plugins = [
6066
"jsx",
6167
"typescript",
@@ -113,6 +119,7 @@ function literalParser (source, opts, styles) {
113119
let objLiteral = new Set();
114120
let tplLiteral = new Set();
115121
const jobs = [];
122+
let cssPropIsStyle = false;
116123

117124
function addObjectJob (path) {
118125
jobs.push(() => {
@@ -221,13 +228,16 @@ function literalParser (source, opts, styles) {
221228
nameSpace.push(specifier.imported.name);
222229
}
223230
setSpecifier(specifier.local, nameSpace);
231+
if (cssPropImpliesStyle[moduleId]) {
232+
cssPropIsStyle = true;
233+
}
224234
});
225235
},
226236
JSXAttribute: (path) => {
227237
const attrName = path.node.name.name;
228238
if (attrName === "css") {
229239
const elePath = path.findParent(p => p.isJSXOpeningElement());
230-
if (!isStylePath(elePath)) {
240+
if (!cssPropIsStyle && !isStylePath(elePath)) {
231241
return;
232242
}
233243
} else if (attrName !== "style") {

test/emotion.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,36 @@ describe("javascript tests", () => {
3535
});
3636
});
3737
});
38+
39+
it("emotion-10", () => {
40+
const filename = require.resolve("./fixtures/emotion-10.jsx");
41+
let code = fs.readFileSync(filename);
42+
43+
const document = syntax.parse(code, {
44+
from: filename,
45+
});
46+
47+
code = code.toString();
48+
49+
expect(document.toString()).to.equal(code);
50+
expect(document.nodes).to.lengthOf(6);
51+
52+
document.nodes.forEach(root => {
53+
expect(root.last.toString()).to.be.a("string");
54+
expect(root.source).to.haveOwnProperty("input");
55+
56+
expect(code).to.includes(root.source.input.css);
57+
expect(root.source.input.css.length).lessThan(code.length);
58+
expect(root.source).to.haveOwnProperty("start").to.haveOwnProperty("line").to.greaterThan(1);
59+
60+
root.walk(node => {
61+
expect(node).to.haveOwnProperty("source");
62+
63+
expect(node.source).to.haveOwnProperty("input").to.haveOwnProperty("css").equal(root.source.input.css);
64+
65+
expect(node.source).to.haveOwnProperty("start").to.haveOwnProperty("line");
66+
expect(node.source).to.haveOwnProperty("end").to.haveOwnProperty("line");
67+
});
68+
});
69+
});
3870
});

test/fixtures/emotion-10.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* global render */
2+
/** @jsx jsx */
3+
4+
import { jsx, css } from '@emotion/core';
5+
import styled from '@emotion/styled';
6+
7+
const SomeComponent = styled.div`
8+
display: flex;
9+
background-color: ${props => props.color};
10+
`;
11+
12+
const AnotherComponent = styled.h1(
13+
{
14+
color: "hotpink",
15+
},
16+
props => ({ flex: props.flex })
17+
);
18+
19+
render(
20+
<SomeComponent color="#DA70D6">
21+
<AnotherComponent flex={1}>
22+
<span css={css`
23+
color: sarahgreen;
24+
`}>
25+
Some text.
26+
</span>
27+
<span css={{
28+
color: 'sarahgreen'
29+
}}>
30+
Some other text.
31+
</span>
32+
</AnotherComponent>
33+
</SomeComponent>
34+
);
35+
const app = document.getElementById("root");
36+
const myStyle = css`
37+
color: rebeccapurple;
38+
`;
39+
app.classList.add(myStyle);
40+
41+
export default {
42+
SomeComponent,
43+
AnotherComponent,
44+
};

test/fixtures/non-styled.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+
3+
const App = props => (
4+
<div
5+
fontSize={{
6+
someProps: props.someValue, // must not trigger any warnings
7+
}}
8+
css={{
9+
display: "flex",
10+
paddingTop: 6,
11+
padding: "8px 12px", // shorthand prop override
12+
":hover": {
13+
flexDirectionn: "row", // prop error
14+
color: props.color,
15+
backgroundColor: props.big ? "#fff" : "#000x",
16+
},
17+
}} />
18+
);
19+
20+
export default {
21+
React,
22+
Div,
23+
App,
24+
};

test/non-style.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
"use strict";
22
const spawnSync = require("child_process").spawnSync;
33
const fs = require("fs");
4-
const files = spawnSync("git", ["ls-files"], { encoding: "utf8" }).stdout.match(/^.+$/gm).filter(file => file.endsWith(".js"));
4+
const files = spawnSync("git", ["ls-files"], { encoding: "utf8" }).stdout.match(/^.+$/gm).filter(file => file.endsWith(".js")).concat('test/fixtures/non-styled.jsx');
55
const syntax = require("../");
66
const expect = require("chai").expect;
77

8-
describe("non-style js files", () => {
8+
describe("non-styled js|jsx files", () => {
99
files.forEach(file => {
1010
it(file, () => {
1111
const code = fs.readFileSync(file);

0 commit comments

Comments
 (0)