diff --git a/package.json b/package.json index f98bfb37..f09f87d4 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "dependencies": { "babel-runtime": "^6.9.2", "fbjs": "^0.8.1", - "inline-style-prefix-all": "1.0.5", + "inline-style-prefix-all": "^2.0.2", "lodash": "^4.13.1", "react-textarea-autosize": "^4.0.2", "react-timer-mixin": "^0.13.3" diff --git a/src/apis/Dimensions/index.js b/src/apis/Dimensions/index.js index 6105011d..430e3ad2 100644 --- a/src/apis/Dimensions/index.js +++ b/src/apis/Dimensions/index.js @@ -6,7 +6,7 @@ * @flow */ -import debounce from 'lodash.debounce' +import debounce from 'lodash/debounce' import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment' import invariant from 'fbjs/lib/invariant' diff --git a/src/apis/StyleSheet/StyleSheetRegistry.js b/src/apis/StyleSheet/StyleSheetRegistry.js index 97b01d87..b6ebe04c 100644 --- a/src/apis/StyleSheet/StyleSheetRegistry.js +++ b/src/apis/StyleSheet/StyleSheetRegistry.js @@ -26,7 +26,14 @@ const createCssDeclarations = (style) => { return Object.keys(style).map((prop) => { const property = hyphenate(prop) const value = style[prop] - return `${property}:${value};` + if (Array.isArray(value)) { + return value.reduce((acc, curr) => { + acc += `${property}:${curr};` + return acc + }, '') + } else { + return `${property}:${value};` + } }).sort().join('') } @@ -91,9 +98,20 @@ class StyleSheetRegistry { } } + /** + * React 15 removed undocumented support for fallback values in + * inline-styles. For now, pick the last value and regress browser support + * for CSS features like flexbox. + */ + const finalStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => { + const value = style[prop] + acc[prop] = Array.isArray(value) ? value[value.length - 1] : value + return acc + }, {}) + return { className: classList.join(' '), - style: prefixAll(style) + style: finalStyle } } }