Handle object shorthand (stylelint#67)

* Ensure expectations run

* Handle object shorthand

Objects that use the shorthand notation should be stringified as such.

This stops `<div style={{color}} />` being converted to
`<div style={{color:color}} />`

Co-authored-by: 刘祺 <gucong@gmail.com>

Author: BPScott

object-stringifier.js

@@ -25,9 +25,14 @@ class ObjectStringifier extends Stringifier {
 		if (prop === "float") {
 			prop = "cssFloat";
 		}
-		const between = this.raw(node, "between", "colon");
-		const value = this.rawValue(node, "value");
-		let string = prop + between + value;
+		let string = prop;
+
+		const isObjectShorthand = node.raws.node && node.raws.node.shorthand;
+		if (!isObjectShorthand) {
+			const between = this.raw(node, "between", "colon");
+			const value = this.rawValue(node, "value");
+			string += between + value;
+		} 
 
 		if (semicolon) string += ",";
 		this.builder(string, node);

test/fixtures/jsx.jsx

@@ -41,8 +41,13 @@ const App = props => (
 	/>
 );
 
+function ObjectShorthandComponent({color}) {
+	return <div style={{color}}/>
+}
+
 export default {
 	HelloWorldComponent,
 	React,
-	App
+	App,
+	ObjectShorthandComponent
 };

test/fixtures/jsx.jsx.json

@@ -568,6 +568,81 @@
 					}
 				}
 			]
+		},
+		{
+			"raws": {},
+			"source": {
+				"input": {
+					"file": "jsx.jsx"
+				},
+				"start": {
+					"line": 45,
+					"column": 20
+				},
+				"inline": false,
+				"lang": "object-literal",
+				"syntax": {}
+			},
+			"type": "root",
+			"nodes": [
+				{
+					"raws": {
+						"after": "",
+						"semicolon": false,
+						"before": ""
+					},
+					"type": "object",
+					"nodes": [
+						{
+							"raws": {
+								"prop": {
+									"prefix": "",
+									"suffix": "",
+									"raw": "color",
+									"value": "color"
+								},
+								"value": {
+									"prefix": "",
+									"suffix": "",
+									"raw": "color",
+									"value": "color"
+								},
+								"between": "",
+								"before": ""
+							},
+							"prop": "color",
+							"value": "color",
+							"type": "decl",
+							"source": {
+								"input": {
+									"file": "jsx.jsx"
+								},
+								"start": {
+									"line": 45,
+									"column": 21
+								},
+								"end": {
+									"line": 45,
+									"column": 26
+								}
+							}
+						}
+					],
+					"source": {
+						"input": {
+							"file": "jsx.jsx"
+						},
+						"start": {
+							"line": 45,
+							"column": 20
+						},
+						"end": {
+							"line": 45,
+							"column": 27
+						}
+					}
+				}
+			]
 		}
 	],
 	"source": {

test/non-style.js

@@ -13,7 +13,7 @@ describe("not throw error for non-style js file", () => {
 				from: file,
 			});
 			expect(document.source).to.haveOwnProperty("lang", "jsx");
-			expect(document.toString(), code.toString());
+			expect(document.toString()).to.equal(code.toString());
 		});
 	});
 });

test/supports.js

@@ -51,7 +51,7 @@ describe("should support for each CSS in JS package", () => {
 				from: file,
 			});
 			expect(document.source).to.haveOwnProperty("lang", "jsx");
-			expect(document.toString(), code.toString());
+			expect(document.toString()).to.equal(code.toString());
 			expect(document.nodes.length).to.greaterThan(0);
 			const parsed = JSON.stringify(clean(document), 0, "\t");
 			// fs.writeFileSync(file + ".json", parsed + "\n");