Add support for CSS variables in style attributes

[henrikhelmers]

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.

[gaearon]

What are your thoughts on using JavaScript for this? Conceptually React’s experimental-and-subject-to-change context feature allows you to define variables local to a subtree of components. Your parent might look like

class BlueBar extends Component {
  getChildContext() {
    return {
      color: '#f00'
    };
  }

  render() {
    return (
      <div>
        <Background>
          <NotificationBadge />
          <SearchBox />
        </Background>
      </div>
    );
  }
}
BlueBar.childContextTypes = {
  color: PropTypes.string.isRequired
};

and your child components could read it like this:

class Background extends Component {
  render() {
    return (
      <div style={{ backgroundColor: this.context.color }}>
        {this.props.children}
      </div>
    );
  }
}  
Background.contextTypes = {
  color: PropTypes.string.isRequired
};

I understand this is orthogonal to whether we want to support CSS variables, but it could be a good solution in the meantime.

[henrikhelmers]

We have a large codebase(user interface for the Vivaldi browser) in Less. I have looked at some JavaScript-ways of managing our styles, but so far we've decided to not make the switch. Using context looks nice, and would solve some issues, but not all. Using CSS variables would let us simplify our existing Less codebase without a full rewrite.

[gaearon]

Thanks for sharing the context (pun totally intended).
Let’s wait for my DOM-savvy colleagues to reply now.
Have you had a chance to look at what doesn’t work now and what it would take to fix it?

[zpao]

As long as the spec is stable enough (haven't looked at it recently), it seems like this should be doable, but not sure at what cost. Basically we can use node.style.setProperty('--color', 'hotpink'). But if we need to look at every style property to see if the key starts with '--' then it could get costly.

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.

Yea, that's a result of us using innerHTML to do the first render and then updating properties after that. This will stop working in v15, even for initial render, so heads up.

[henrikhelmers]

We're in a bit of a unique position perhaps, since we only need to relate to Chromium. But support for CSS variables is maturing, according to http://caniuse.com/#feat=css-variables. I would not mind setting the variables differently from the rest of the inline style declaration, I would just love a way to do this with React.

[zpao]

I think the short-term plan for this is probably to just leave the status quo and not change what we do for styles. As we continue to explore js styles, I think we're likely to end up changing how we end up doing styles. !important is another feature which has the same problem where it would work for initial render when using innerHTML but wouldn't update and now doesn't work at all v15 for client rendered. That is also possible to set using a DOM API but would be expensive to look at every value, so we might want an alternative way to express that.

For now if you want to use CSS variables you'll want to just break out of the declarative approach and manage setting these yourself with the lifecycle hooks (eg set refs and then in componentDidMount componentDidUpdate, use the ref to call node.style.setProperty(...) directly)

[henrikhelmers]

By using the lifecycle hooks correctly, I got it working. It does seem to cause trouble with using React style attributes, but setting style with JS instead worked fine.

[kevinSuttle]

From what I understand, the trick is hooking the refs up so that the non-virtual DOM nodes will be known at the time the style is applied.

Relevant thread: postcss/postcss-custom-properties#1

[henrikhelmers]

I've successfully converted most of our internal variables to CSS variables, using a wrapper to calculate them before they're applied. By giving the user control of 4 higher level colors, I can calculate relevant palettes. This allowed for theming our product (https://vivaldi.net/en-US/teamblog/121-snapshot-1-3-501-6-customizable-ui-themes).

I insert the variables at the top of each window, and can optionally override them further down the DOM tree. The top component is passed theme as a prop, and the the componentDidUpdate function looks like so:

componentDidUpdate: function(prevProps, prevState) {
  if (this.props.theme) {
    Object.keys(this.props.theme).forEach((key) => {
      const cssKey = `--${key}`;
      const cssValue = this.props.theme[key];

      document.body.style.removeProperty(cssKey);
      document.body.style.setProperty(cssKey, cssValue);
    });
  }
},

I found that setting the property would not replace the old one, so it needs to be removed first. The theme prop only contains the changed variables, keeping overhead down. The performance of the variables are good, and it has allowed us to remove a large amount of CSS.