From 9fe089ca21064dc8a7c7216bb57ee31aad6d9caa Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Sat, 17 Feb 2018 14:46:31 -0800 Subject: [PATCH] [add] development warning about using '!important' in styles React Native for Web may use '!important' as part of the internal resolving of styles. But user styles should never be allowed to include '!important' in the value. Print a warning to the console when they do. --- .../src/exports/StyleSheet/StyleSheetValidation.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheetValidation.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheetValidation.js index 5a435bae..694d7961 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleSheetValidation.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheetValidation.js @@ -25,6 +25,8 @@ const ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; export default class StyleSheetValidation { static validateStyleProp(prop: string, style: Object, caller: string) { if (process.env.NODE_ENV !== 'production') { + const value = style[prop]; + const isCustomProperty = prop.indexOf('--') === 0; if (isCustomProperty) return; @@ -34,6 +36,12 @@ export default class StyleSheetValidation { '\nValid style props: ' + JSON.stringify(Object.keys(allStylePropTypes).sort(), null, ' '); styleError(message1, style, caller, message2); + } else if (typeof value === 'string' && value.indexOf('!important') > -1) { + styleError( + `Invalid value of "${value}" set on prop "${prop}". Values cannot include "!important"`, + style, + caller + ); } else { const error = allStylePropTypes[prop]( style,