diff options
Diffstat (limited to 'node_modules/react-dom/lib/CSSPropertyOperations.js')
-rw-r--r-- | node_modules/react-dom/lib/CSSPropertyOperations.js | 22 |
1 files changed, 14 insertions, 8 deletions
diff --git a/node_modules/react-dom/lib/CSSPropertyOperations.js b/node_modules/react-dom/lib/CSSPropertyOperations.js index 03837d8c9..2d7c11438 100644 --- a/node_modules/react-dom/lib/CSSPropertyOperations.js +++ b/node_modules/react-dom/lib/CSSPropertyOperations.js @@ -75,7 +75,7 @@ if (process.env.NODE_ENV !== 'production') { } warnedStyleValues[value] = true; - process.env.NODE_ENV !== 'production' ? warning(false, 'Style property values shouldn\'t contain a semicolon.%s ' + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0; + process.env.NODE_ENV !== 'production' ? warning(false, "Style property values shouldn't contain a semicolon.%s " + 'Try "%s: %s" instead.', checkRenderMessage(owner), name, value.replace(badStyleValueWithSemicolonPattern, '')) : void 0; }; var warnStyleValueIsNaN = function (name, value, owner) { @@ -125,7 +125,6 @@ if (process.env.NODE_ENV !== 'production') { * Operations for dealing with CSS properties. */ var CSSPropertyOperations = { - /** * Serializes a mapping of style properties for use as inline styles: * @@ -145,13 +144,16 @@ var CSSPropertyOperations = { if (!styles.hasOwnProperty(styleName)) { continue; } + var isCustomProperty = styleName.indexOf('--') === 0; var styleValue = styles[styleName]; if (process.env.NODE_ENV !== 'production') { - warnValidStyle(styleName, styleValue, component); + if (!isCustomProperty) { + warnValidStyle(styleName, styleValue, component); + } } if (styleValue != null) { serialized += processStyleName(styleName) + ':'; - serialized += dangerousStyleValue(styleName, styleValue, component) + ';'; + serialized += dangerousStyleValue(styleName, styleValue, component, isCustomProperty) + ';'; } } return serialized || null; @@ -179,14 +181,19 @@ var CSSPropertyOperations = { if (!styles.hasOwnProperty(styleName)) { continue; } + var isCustomProperty = styleName.indexOf('--') === 0; if (process.env.NODE_ENV !== 'production') { - warnValidStyle(styleName, styles[styleName], component); + if (!isCustomProperty) { + warnValidStyle(styleName, styles[styleName], component); + } } - var styleValue = dangerousStyleValue(styleName, styles[styleName], component); + var styleValue = dangerousStyleValue(styleName, styles[styleName], component, isCustomProperty); if (styleName === 'float' || styleName === 'cssFloat') { styleName = styleFloatAccessor; } - if (styleValue) { + if (isCustomProperty) { + style.setProperty(styleName, styleValue); + } else if (styleValue) { style[styleName] = styleValue; } else { var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName]; @@ -202,7 +209,6 @@ var CSSPropertyOperations = { } } } - }; module.exports = CSSPropertyOperations;
\ No newline at end of file |