<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug<br>
<strong>What is the current behavior?</strong><br>
style attribute is not updated correctly when we set <code class="notranslate">padding</code> and <code class="notranslate">paddingTop</code> at the same time and then re-render with only <code class="notranslate">padding</code>. Same issue with <code class="notranslate">border</code>. I suppose that it would be the same with <code class="notranslate">margin</code> (not tested)</p>
<p dir="auto">Example: <a href="http://codepen.io/testerez/pen/pNRQjW?editors=0010" rel="nofollow">http://codepen.io/testerez/pen/pNRQjW?editors=0010</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The DOM element style should be the last rendered one and should not be affected by the previous style value.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
Tested on chrome 54 with React 15.4 and 15.3.2</p>
<h1 dir="auto">This "good first bug" is taken by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/YongPilMoon/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/YongPilMoon">@YongPilMoon</a>. Don't work on it unless that's you!</h1>
<p dir="auto">This has been discussed a few times before but I don’t think there was any conclusion, and PRs intending to solve the issue were not merged for various reasons.</p>
<p dir="auto">I would like to close those PRs as outdated, and reboot the discussion about this.<br>
Performance considered, the conclusion from <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmarkbage/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sebmarkbage">@sebmarkbage</a> and <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/syranide/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/syranide">@syranide</a> seems to be:</p>
<blockquote>
<p dir="auto">We should consider not allowing conflicting style rules at all.</p>
</blockquote>
<p dir="auto">— <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="39882472" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2013" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/2013/hovercard?comment_id=57338177&amp;comment_type=issue_comment" href="https://github.com/facebook/react/pull/2013#issuecomment-57338177">#2013 (comment)</a></p>
<blockquote>
<p dir="auto">IMHO, all things considered it's better to just disallow overlapping and warn in dev.</p>
</blockquote>
<p dir="auto">— <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="101949360" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/4661" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/4661/hovercard?comment_id=132996649&amp;comment_type=issue_comment" href="https://github.com/facebook/react/pull/4661#issuecomment-132996649">#4661 (comment)</a></p>
<p dir="auto">Radium by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ianobermiller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ianobermiller">@ianobermiller</a> came to the same conclusion in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="64869638" data-permission-text="Title is private" data-url="https://github.com/FormidableLabs/radium/issues/95" data-hovercard-type="issue" data-hovercard-url="/FormidableLabs/radium/issues/95/hovercard" href="https://github.com/FormidableLabs/radium/issues/95">FormidableLabs/radium#95</a> but there was some backlash afterwards. React Native seems to allow style expansions but only for a few attributes (e.g. <code class="notranslate">margin</code> and <code class="notranslate">padding</code>, but not <code class="notranslate">border</code>).</p>
<p dir="auto">I’m closing old pull requests about this, and creating this issue to track implementation of the behavior we seem to agree upon: we should warn in <code class="notranslate">__DEV__</code> when <code class="notranslate">border</code> and <code class="notranslate">borderBottom</code> are used at the same time. We can discuss more specifics (should either be ignored? should we allow a few whitelisted properties but warn for others?) in this issue.</p>
<p dir="auto">As a migration strategy, we can suggest people to use something like <a href="https://github.com/ActionIQ/style-builder">https://github.com/ActionIQ/style-builder</a> if they really need those shortcuts. It’s also something we’ll need to decide upon when implementing integrated styling.</p>
<hr>
<p dir="auto">Related issues:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="43612695" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2231" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/2231/hovercard" href="https://github.com/facebook/react/issues/2231">#2231</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="46729516" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2407" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/2407/hovercard" href="https://github.com/facebook/react/issues/2407">#2407</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109359892" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/5030" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/5030/hovercard" href="https://github.com/facebook/react/issues/5030">#5030</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="64869638" data-permission-text="Title is private" data-url="https://github.com/FormidableLabs/radium/issues/95" data-hovercard-type="issue" data-hovercard-url="/FormidableLabs/radium/issues/95/hovercard" href="https://github.com/FormidableLabs/radium/issues/95">FormidableLabs/radium#95</a></li>
</ul>
<p dir="auto">Related PRs:</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="39882472" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/2013" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/2013/hovercard" href="https://github.com/facebook/react/pull/2013">#2013</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="101949360" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/4661" data-hovercard-type="pull_request" data-hovercard-url="/facebook/react/pull/4661/hovercard" href="https://github.com/facebook/react/pull/4661">#4661</a></li>
</ul>