CSS variables is now supported in Chromium, which we use for rendering. They enable us to write cleaner, more flexible code. Sadly, I cannot seem to use them in React without resorting to various tricks. Ideally, I would like to be able to use them like `<div style={{"--color": "hotpink"}} />`, which would make the variable available inside the scope of the div.

I am able to add them using the following syntax `<div style={{["--color"]: "hotpink"}} />`, but then they aren't updated if I try assigning a new value—which ruins much of the point of using a variable.

I am able to add and remove them using ReactDOM and `ReactDOM.findDOMNode(this).style.setProperty("--color", "hotpink")`, but that gets it out of sync with the DOM updates, in addition to not being pretty.

If there are any questions on the usefulness of CSS variables I'll be more than happy to explain.

}
      var styleValue = dangerousStyleValue(
        styleName,
        styles[styleName],
        component,
      );
      if (styleName === 'float') {
        styleName = 'cssFloat';
      }
      if (styleValue) {
        style[styleName] = styleValue;
      } else {
        var expansion =
          hasShorthandPropertyBug &&
          CSSProperty.shorthandPropertyExpansions[styleName];
        if (expansion) {
          
          
          for (var individualStyleName in expansion) {
            style[individualStyleName] = '';
          }
        } else {
          style[styleName] = '';
        }
      }
    }
  },
};
module.exports = CSSPropertyOperations;