Warn when using overlapping styles (e.g. border and borderBottom)

[gaearon]

This "good first bug" is taken by @YongPilMoon. Don't work on it unless that's you!

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.

I would like to close those PRs as outdated, and reboot the discussion about this.
Performance considered, the conclusion from @sebmarkbage and @syranide seems to be:

We should consider not allowing conflicting style rules at all.

— #2013 (comment)

IMHO, all things considered it's better to just disallow overlapping and warn in dev.

— #4661 (comment)

Radium by @ianobermiller came to the same conclusion in FormidableLabs/radium#95 but there was some backlash afterwards. React Native seems to allow style expansions but only for a few attributes (e.g. margin and padding, but not border).

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 __DEV__ when border and borderBottom 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.

As a migration strategy, we can suggest people to use something like https://github.com/ActionIQ/style-builder if they really need those shortcuts. It’s also something we’ll need to decide upon when implementing integrated styling.

---

Related issues:

• marginBottom gets dropped sometimes #2231
• Adding and then removing "background" from style attribute creates unwanted styles #2407
• CSS backgroundSize property lost when re-rendering an image URL inside of an adjacent background property #5030
• Decompose shorthand/compound styles to their constituent parts FormidableLabs/radium#95

Related PRs:

• Restores 'border' when 'borderColor' is removed #2013
• fixed the issue that inline-styles updating could lose style properties #4661

[mattborn]

@gaearon Thank you for resurfacing this! Crazy that it has been a year since I opened the Radium issue.

I like the idea of warning about shorthand properties like border, but not borderBottom. There shouldn’t be any surprises when merging style objects using the longer property names.

Question. Is the intent of this issue to address only the analysis of individual style objects or is there also a desire to analyze and warn about possible collisions of properties that are conditionally applied?

[gaearon]

Question. Is the intent of this issue to address only the analysis of individual style objects or is there also a desire to analyze and warn about possible collisions of properties that are conditionally applied?

Not sure I understand the question, can you elaborate?

[mattborn]

Sure. If it is invalid to have both border and borderColor on the same element, then it makes sense to warn about this. In my experience, this combination is easy to avoid, but it is more difficult to anticipate and debug when styles are being applied dynamically (conditional logic based on props or state, media queries, Radium, etc.) or passed down as props and merged with lower order style objects. If a warning for the shorthand border attribute occurs when there are no other attributes that might affect the border involved, then the warning seems more like a dogmatic rule than a helpful debugging tool since shorthand border is still technically valid. However, if there is an attribute in a separate style object—like changing borderColor on hover for example—that would affect the border involved and will get applied at runtime to the node that already has shorthand border on it, I’d like to be warned as early as possible as this is where things tend to break for me.

[gaearon]

Ah, good point. I’d probably warn only if we know the styles overlap but I’m not sure how easy it is to tell. I haven’t thought about it much and I don’t have a good solution.

[jimfb]

@gaearon An alternate solution that I like better is to use csstext as per #5397, which IIRC cleanly solves a superset of these issues.

[aweary]

What about situations where a third-party component defines styles and allows overrides? Say a component defines its own border style and I want to just override the borderBottom style?

[rtsao]

I've started working on dead-simple helper functions to convert shorthand properties to longform (among other things): https://github.com/rtsao/lostyle/tree/master/src (docs)