diff --git a/object-parser.js b/object-parser.js
index bf58f8c..1406c2f 100644
--- a/object-parser.js
+++ b/object-parser.js
@@ -252,6 +252,16 @@ class objectParser {
}
rule = atRule;
+ } else if (node.computed) {
+ // for computed property name
+
+ rule = postcss.rule({
+ selector: key.value,
+ });
+ // recalculate trivial spaces
+ const [prefix, postfix] = rawKey.split(key.value);
+
+ defineRaws(rule, 'selector', prefix, postfix);
} else {
// rule = this.rule(key, keyWrap, node.value, parent);
rule = postcss.rule({
diff --git a/test/emotion.js b/test/emotion.js
index d82e89c..41d2c5e 100644
--- a/test/emotion.js
+++ b/test/emotion.js
@@ -16,7 +16,7 @@ describe('javascript tests', () => {
code = code.toString();
expect(document.toString()).to.equal(code);
- expect(document.nodes).to.lengthOf(4);
+ expect(document.nodes).to.lengthOf(5);
document.nodes.forEach((root) => {
expect(root.last.toString()).to.be.a('string');
@@ -51,7 +51,7 @@ describe('javascript tests', () => {
code = code.toString();
expect(document.toString()).to.equal(code);
- expect(document.nodes).to.lengthOf(6);
+ expect(document.nodes).to.lengthOf(7);
document.nodes.forEach((root) => {
expect(root.last.toString()).to.be.a('string');
diff --git a/test/fixtures/emotion-10.jsx b/test/fixtures/emotion-10.jsx
index 8b84d94..b1e346f 100644
--- a/test/fixtures/emotion-10.jsx
+++ b/test/fixtures/emotion-10.jsx
@@ -8,9 +8,18 @@ const SomeComponent = styled.div`
background-color: ${props => props.color};
`;
+const YetAnotherComponent = styled.p(
+ {
+ backgroundColor: "black",
+ }
+);
+
const AnotherComponent = styled.h1(
{
color: "hotpink",
+ [YetAnotherComponent]: {
+ color: "white",
+ },
},
props => ({ flex: props.flex })
);
@@ -28,6 +37,7 @@ render(
}}>
Some other text.
+ Yet another text.
);
diff --git a/test/fixtures/emotion-10.jsx.json b/test/fixtures/emotion-10.jsx.json
index f4b9935..f663906 100644
--- a/test/fixtures/emotion-10.jsx.json
+++ b/test/fixtures/emotion-10.jsx.json
@@ -112,6 +112,81 @@
"syntax": {}
},
"type": "root",
+ "nodes": [
+ {
+ "raws": {
+ "after": "\n\t",
+ "semicolon": true,
+ "before": "\t"
+ },
+ "type": "object",
+ "nodes": [
+ {
+ "raws": {
+ "prop": {
+ "prefix": "",
+ "suffix": "",
+ "raw": "backgroundColor",
+ "value": "background-color"
+ },
+ "value": {
+ "prefix": "\"",
+ "suffix": "\"",
+ "raw": "black",
+ "value": "black"
+ },
+ "between": ": ",
+ "before": "\n\t\t"
+ },
+ "prop": "background-color",
+ "value": "black",
+ "type": "decl",
+ "source": {
+ "input": {
+ "file": "emotion-10.jsx"
+ },
+ "start": {
+ "line": 13,
+ "column": 2
+ },
+ "end": {
+ "line": 13,
+ "column": 26
+ }
+ }
+ }
+ ],
+ "source": {
+ "input": {
+ "file": "emotion-10.jsx"
+ },
+ "start": {
+ "line": 12,
+ "column": 1
+ },
+ "end": {
+ "line": 14,
+ "column": 2
+ }
+ }
+ }
+ ]
+ },
+ {
+ "raws": {},
+ "source": {
+ "input": {
+ "file": "emotion-10.jsx"
+ },
+ "start": {
+ "line": 18,
+ "column": 1
+ },
+ "inline": false,
+ "lang": "object-literal",
+ "syntax": {}
+ },
+ "type": "root",
"nodes": [
{
"raws": {
@@ -146,14 +221,79 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 13,
+ "line": 19,
"column": 2
},
"end": {
- "line": 13,
+ "line": 19,
"column": 18
}
}
+ },
+ {
+ "raws": {
+ "selector": {
+ "prefix": "[",
+ "suffix": "]",
+ "raw": "YetAnotherComponent",
+ "value": "YetAnotherComponent"
+ },
+ "between": ": ",
+ "after": "\n\t\t",
+ "semicolon": true,
+ "before": "\n\t\t"
+ },
+ "selector": "YetAnotherComponent",
+ "type": "rule",
+ "nodes": [
+ {
+ "raws": {
+ "prop": {
+ "prefix": "",
+ "suffix": "",
+ "raw": "color",
+ "value": "color"
+ },
+ "value": {
+ "prefix": "\"",
+ "suffix": "\"",
+ "raw": "white",
+ "value": "white"
+ },
+ "between": ": ",
+ "before": "\n\t\t\t"
+ },
+ "prop": "color",
+ "value": "white",
+ "type": "decl",
+ "source": {
+ "input": {
+ "file": "emotion-10.jsx"
+ },
+ "start": {
+ "line": 21,
+ "column": 3
+ },
+ "end": {
+ "line": 21,
+ "column": 17
+ }
+ }
+ }
+ ],
+ "source": {
+ "input": {
+ "file": "emotion-10.jsx"
+ },
+ "start": {
+ "line": 20,
+ "column": 2
+ },
+ "end": {
+ "line": 22,
+ "column": 3
+ }
+ }
}
],
"source": {
@@ -161,11 +301,11 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 12,
+ "line": 18,
"column": 1
},
"end": {
- "line": 14,
+ "line": 23,
"column": 2
}
}
@@ -179,7 +319,7 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 15,
+ "line": 24,
"column": 11
},
"inline": false,
@@ -221,11 +361,11 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 15,
+ "line": 24,
"column": 13
},
"end": {
- "line": 15,
+ "line": 24,
"column": 29
}
}
@@ -236,11 +376,11 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 15,
+ "line": 24,
"column": 11
},
"end": {
- "line": 15,
+ "line": 24,
"column": 31
}
}
@@ -262,14 +402,14 @@
"type": "decl",
"source": {
"start": {
- "line": 22,
+ "line": 31,
"column": 5
},
"input": {
"file": "emotion-10.jsx"
},
"end": {
- "line": 22,
+ "line": 31,
"column": 22
}
},
@@ -282,7 +422,7 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 21,
+ "line": 30,
"column": 19
},
"inline": false,
@@ -297,7 +437,7 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 26,
+ "line": 35,
"column": 14
},
"inline": false,
@@ -339,11 +479,11 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 27,
+ "line": 36,
"column": 4
},
"end": {
- "line": 27,
+ "line": 36,
"column": 23
}
}
@@ -354,11 +494,11 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 26,
+ "line": 35,
"column": 14
},
"end": {
- "line": 28,
+ "line": 37,
"column": 4
}
}
@@ -380,14 +520,14 @@
"type": "decl",
"source": {
"start": {
- "line": 36,
+ "line": 46,
"column": 2
},
"input": {
"file": "emotion-10.jsx"
},
"end": {
- "line": 36,
+ "line": 46,
"column": 22
}
},
@@ -400,7 +540,7 @@
"file": "emotion-10.jsx"
},
"start": {
- "line": 35,
+ "line": 45,
"column": 21
},
"inline": false,
diff --git a/test/fixtures/react-emotion.jsx b/test/fixtures/react-emotion.jsx
index cde6cf1..6a15121 100644
--- a/test/fixtures/react-emotion.jsx
+++ b/test/fixtures/react-emotion.jsx
@@ -6,9 +6,18 @@ const SomeComponent = styled("div")`
background-color: ${props => props.color};
`;
+const YetAnotherComponent = styled.p(
+ {
+ backgroundColor: "black",
+ },
+);
+
const AnotherComponent = styled("h1")(
{
color: "hotpink",
+ [YetAnotherComponent]: {
+ color: "white",
+ },
},
props => ({ flex: props.flex })
);
@@ -18,6 +27,7 @@ render(
Some text.
+ Yet another text.
);
const app = document.getElementById("root");
diff --git a/test/fixtures/react-emotion.jsx.json b/test/fixtures/react-emotion.jsx.json
index a4e3c65..48850c2 100644
--- a/test/fixtures/react-emotion.jsx.json
+++ b/test/fixtures/react-emotion.jsx.json
@@ -112,6 +112,81 @@
"syntax": {}
},
"type": "root",
+ "nodes": [
+ {
+ "raws": {
+ "after": "\n\t",
+ "semicolon": true,
+ "before": "\t"
+ },
+ "type": "object",
+ "nodes": [
+ {
+ "raws": {
+ "prop": {
+ "prefix": "",
+ "suffix": "",
+ "raw": "backgroundColor",
+ "value": "background-color"
+ },
+ "value": {
+ "prefix": "\"",
+ "suffix": "\"",
+ "raw": "black",
+ "value": "black"
+ },
+ "between": ": ",
+ "before": "\n\t\t"
+ },
+ "prop": "background-color",
+ "value": "black",
+ "type": "decl",
+ "source": {
+ "input": {
+ "file": "react-emotion.jsx"
+ },
+ "start": {
+ "line": 11,
+ "column": 2
+ },
+ "end": {
+ "line": 11,
+ "column": 26
+ }
+ }
+ }
+ ],
+ "source": {
+ "input": {
+ "file": "react-emotion.jsx"
+ },
+ "start": {
+ "line": 10,
+ "column": 1
+ },
+ "end": {
+ "line": 12,
+ "column": 2
+ }
+ }
+ }
+ ]
+ },
+ {
+ "raws": {},
+ "source": {
+ "input": {
+ "file": "react-emotion.jsx"
+ },
+ "start": {
+ "line": 16,
+ "column": 1
+ },
+ "inline": false,
+ "lang": "object-literal",
+ "syntax": {}
+ },
+ "type": "root",
"nodes": [
{
"raws": {
@@ -146,14 +221,79 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 11,
+ "line": 17,
"column": 2
},
"end": {
- "line": 11,
+ "line": 17,
"column": 18
}
}
+ },
+ {
+ "raws": {
+ "selector": {
+ "prefix": "[",
+ "suffix": "]",
+ "raw": "YetAnotherComponent",
+ "value": "YetAnotherComponent"
+ },
+ "between": ": ",
+ "after": "\n\t\t",
+ "semicolon": true,
+ "before": "\n\t\t"
+ },
+ "selector": "YetAnotherComponent",
+ "type": "rule",
+ "nodes": [
+ {
+ "raws": {
+ "prop": {
+ "prefix": "",
+ "suffix": "",
+ "raw": "color",
+ "value": "color"
+ },
+ "value": {
+ "prefix": "\"",
+ "suffix": "\"",
+ "raw": "white",
+ "value": "white"
+ },
+ "between": ": ",
+ "before": "\n\t\t\t"
+ },
+ "prop": "color",
+ "value": "white",
+ "type": "decl",
+ "source": {
+ "input": {
+ "file": "react-emotion.jsx"
+ },
+ "start": {
+ "line": 19,
+ "column": 3
+ },
+ "end": {
+ "line": 19,
+ "column": 17
+ }
+ }
+ }
+ ],
+ "source": {
+ "input": {
+ "file": "react-emotion.jsx"
+ },
+ "start": {
+ "line": 18,
+ "column": 2
+ },
+ "end": {
+ "line": 20,
+ "column": 3
+ }
+ }
}
],
"source": {
@@ -161,11 +301,11 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 10,
+ "line": 16,
"column": 1
},
"end": {
- "line": 12,
+ "line": 21,
"column": 2
}
}
@@ -179,7 +319,7 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 13,
+ "line": 22,
"column": 11
},
"inline": false,
@@ -221,11 +361,11 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 13,
+ "line": 22,
"column": 13
},
"end": {
- "line": 13,
+ "line": 22,
"column": 29
}
}
@@ -236,11 +376,11 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 13,
+ "line": 22,
"column": 11
},
"end": {
- "line": 13,
+ "line": 22,
"column": 31
}
}
@@ -262,14 +402,14 @@
"type": "decl",
"source": {
"start": {
- "line": 25,
+ "line": 35,
"column": 2
},
"input": {
"file": "react-emotion.jsx"
},
"end": {
- "line": 25,
+ "line": 35,
"column": 22
}
},
@@ -282,7 +422,7 @@
"file": "react-emotion.jsx"
},
"start": {
- "line": 24,
+ "line": 34,
"column": 21
},
"inline": false,