2.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stile",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "stylesheet creator for js inline-styles",
   "main": "./lib/index.js",
   "scripts": {

src/__tests__/autoprefix-test.js

@@ -19,7 +19,7 @@ tape("autoprefix", (test) => {
       display: "flex",
     }),
     {
-      display: "flex;display:-webkit-flex;display:-ms-flexbox",
+      display: "flex",
     }
   )
   test.deepEqual(

src/autoprefix.js

@@ -1,3 +1,15 @@
+import getSupportedCSSValue from "./getSupportedCSSValue"
+
+const FLEX_VALUE = getSupportedCSSValue(
+  "display",
+  ["flex", "-webkit-flex", "-ms-flexbox"]
+)
+
+const INLINE_FLEX_VALUE = getSupportedCSSValue(
+  "display",
+  ["inline-flex", "-webkit-inline-flex", "-ms-inline-flexbox"]
+)
+
 // from https://github.com/petehunt/jsxstyle/blob/master/lib/autoprefix.js
 export default function autoprefix(style) {
 
@@ -98,12 +110,11 @@ export default function autoprefix(style) {
   }
 
   if (style.display === "flex") {
-    style.display = style.display + ";display:-webkit-flex;display:-ms-flexbox"
+    style.display = FLEX_VALUE
   }
 
   if (style.display === "inline-flex") {
-    style.display =
-      style.display + ";display:-webkit-inline-flex;display:-ms-inline-flexbox"
+    style.display = INLINE_FLEX_VALUE
   }
 
   return style

src/getSupportedCSSValue.js

@@ -0,0 +1,9 @@
+const dummy = document.createElement("div")
+
+const getSupportedCSSValue = (property, values) => values.find((item) => {
+  dummy.style[property] = ""
+  dummy.style[property] = item
+  return dummy.style[property] !== ""
+})
+
+export default getSupportedCSSValue