[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.
This commit is contained in:
Nicolas Gallagher
2018-02-17 14:46:31 -08:00
parent a314d5b2e4
commit 9fe089ca21

View File

@@ -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,