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

@bvaughn Hey! I can't speak for the CSS-variable part of this question. But not supporting overlapping styles is simply put a performance/complexity problem. If React does not support overlapping styles it can naively iterate the prev/next and apply any changes as a property, very quick and simple. If overlapping styles are supported then React must have knowledge of how shorthand properties are decomposed and to be able to figure out whether a changed property shadows/overlaps another property and apply them in correct order. This is significantly slower, more complex and rather fragile. I'm not aware of any way of solving this issue without incurring significant overhead costs given the current set of features exposed by browsers, which depending on what kind of performance/use-case one expects out of React makes it unacceptable.

Since I'm not actively involved nowadays I can't speak for why there still isn't a warning, but I would positively think it's because "no one has got around to building it" as you say. The warning should be rather straightforward to implement for at least the current/common set of properties.

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