Fix style properties that are not identifiers

Closes GH-8.

Reviewed-by: Christian Murphy <[email protected]>
Reviewed-by: Remco Haszing <[email protected]>

Author: DaniGuardiola

lib/handlers/element.js

@@ -16,7 +16,8 @@ import {svg, find, hastToReact} from 'property-information'
 import {stringify as spaces} from 'space-separated-tokens'
 import {
   start as identifierStart,
-  cont as identifierCont
+  cont as identifierCont,
+  name as identifierName
 } from 'estree-util-is-identifier-name'
 import styleToObject from 'style-to-object'
 
@@ -105,7 +106,9 @@ export function element(node, state) {
               method: false,
               shorthand: false,
               computed: false,
-              key: {type: 'Identifier', name: cssProp},
+              key: identifierName(cssProp)
+                ? {type: 'Identifier', name: cssProp}
+                : {type: 'Literal', value: cssProp},
               value: {type: 'Literal', value: String(styleObject[cssProp])},
               kind: 'init'
             })

test.js

@@ -627,7 +627,7 @@ test('toEstree', () => {
       }),
       {handlers: jsx}
     ).value,
-    '<h1 style={{\n  background-color: "red"\n}}>{"x"}</h1>;\n',
+    '<h1 style={{\n  "background-color": "red"\n}}>{"x"}</h1>;\n',
     "should support `stylePropertyNameCase: 'css'`"
   )
 
@@ -641,7 +641,7 @@ test('toEstree', () => {
       ),
       {handlers: jsx}
     ).value,
-    '<h1 style={{\n  WebkitTransform: "rotate(0.01turn)",\n  msTransform: "rotate(0.01turn)",\n  --fg: "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
+    '<h1 style={{\n  WebkitTransform: "rotate(0.01turn)",\n  msTransform: "rotate(0.01turn)",\n  "--fg": "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
     'should support vendor prefixes and css variables (dom)'
   )
 
@@ -656,7 +656,7 @@ test('toEstree', () => {
       ),
       {handlers: jsx}
     ).value,
-    '<h1 style={{\n  -webkit-transform: "rotate(0.01turn)",\n  -ms-transform: "rotate(0.01turn)",\n  --fg: "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
+    '<h1 style={{\n  "-webkit-transform": "rotate(0.01turn)",\n  "-ms-transform": "rotate(0.01turn)",\n  "--fg": "#0366d6",\n  color: "var(--fg)"\n}} />;\n',
     'should support vendor prefixes and css variables (css)'
   )
 })