profile
viewpoint

Ask questionsBug: styles object using css variables and both a shorthand and a specific property renders incorrectly

React does not produce the correct css inline styles when using css variables for both the shorthand property and another specific one (like padding and paddingRight).

The styles object:

{
  padding: "calc(var(--spacing) * 1)",
  paddingRight: "calc(var(--spacing) * 3)",
  paddingBottom: "calc(var(--spacing) * 4)"
};

produces the following styles:

image

and the following html:

<span style="padding-top: ; padding-right: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 4); padding-left: ;">App</span>

even though the computed properties tab of the dev-tools appear to be correct and the padding is properly rendered in the screen:

image

If I remove the css-variable, everything works as expected.

React version: From v15.0.0 to 16.12.0

Note: Below v15.0.0 the styles are correctly produced:

<span style="padding:calc(var(--spacing) * 1);padding-right:calc(var(--spacing) * 3);padding-bottom:calc(var(--spacing) * 4);">App</span>

Steps To Reproduce

  1. Add a style object to a component that has both a property shorthand and a specific one (like padding and paddingRight) and uses a css variable (like var(--spacing).
  2. Render that component and inspect using dev-tools.

Link to code example: https://codesandbox.io/s/heuristic-wood-bjr1y

styles object:

{
  padding: "calc(var(--spacing) * 1)",
  paddingRight: "calc(var(--spacing) * 3)",
  paddingBottom: "calc(var(--spacing) * 4)"
};

The current behavior

React does not produces the correct css inline styles when using css variables for both the shorthand property and another specific one:

<span style="padding-top: ; padding-right: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 4); padding-left: ;">App</span>

The expected behavior

Inline styles using css variables that have both a shorthand and a specific one should produce the correct styles.

<span style="padding: calc(var(--spacing) * 1); padding-right: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 4);">App</span>
facebook/react

Answer questions syranide

Just to illustrate; it used to be, and I assume it still is, that setting a shorthand property incurs the same cost as if you individually set all the properties it decomposes into. So if you have e.g. font + font-size and change either of them, it would effectively incur something like 1+7 property updates instead of just 1, on-top of that you have the additional non-trivial cost of having React check for the overlap. And it is even worse when it comes to e.g. border which decomposes in several steps.

It could be that given the improved state of browsers nowadays that the cost might be negligible when compared to the related rendering costs. But I haven't done any tests lately so I wouldn't know.

useful!

Related questions

Disable react strict mode on third party libraries hot 4
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React@16.9 block `javascript:void(0);` hot 3
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Hooks API - hook breaks when exported from module hot 2
Feedback on useEffect depndencies change error hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
Github User Rank List