profile
viewpoint
João Moleiro joaomoleiro @Talkdesk Lisbon, Portugal

talkdesk-sandbox/hackathon-cobalt-spider 0

Compare your cobalt dependencies with Cobalt's latest version

startedinfusionsoft/sleuth-sketch

started time in 2 months

issue commentfacebook/react

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

In this case it seems that it works OK if I do not use a css variable.

This:

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

translates to:

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

But this:

{
  padding: "calc(10px * 1)",
  paddingRight: "calc(10px * 3)",
  paddingBottom: "calc(10px * 4)"
};

translates to:

<div style="padding: calc(10px) calc(30px) calc(40px) calc(10px);">App</div>

Nevertheless a DEV warning would be nice (if supporting the expected behavior is too costly).

joaomoleiro

comment created time in 2 months

issue openedfacebook/react

Bug: 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:

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

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:

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

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:

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

The expected behavior

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

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

created time in 2 months

more