diff --git a/package.json b/package.json index 9c19a6e..9679d0d 100644 --- a/package.json +++ b/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": { diff --git a/src/__tests__/autoprefix-test.js b/src/__tests__/autoprefix-test.js index fa5ef0a..54f81e8 100644 --- a/src/__tests__/autoprefix-test.js +++ b/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( diff --git a/src/autoprefix.js b/src/autoprefix.js index dd12f44..f427fdb 100644 --- a/src/autoprefix.js +++ b/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 diff --git a/src/getSupportedCSSValue.js b/src/getSupportedCSSValue.js new file mode 100644 index 0000000..4f84182 --- /dev/null +++ b/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