CSS shorthand properties do not work well when styles are overwritten

[bmdalex]

CSS shorthand properties do not work well when styles are overwritten

Steps

I'm using the Divider component and want to change the default CSS margin to another value.

In marginStyles.tsx, the default margin is set using marginTop and marginBottom, like this:

const dividerStyles = {
  root: (): => ({
    marginTop: pxToRem(5 + size * 7.5),
    marginBottom: pxToRem(5 + size * 7.5),
  }),
}

What I did was to overwrite the margin using margin CSS shorthand like this:

<Divider styles={{ root: { margin: 0 }}} />

Expected Result

The Divider margin is overwritten to 0.

Actual Result

The Divider margin is not overwritten. We are using shorthand margin in order to attempt that but our mechanism merges the Provider componentStyles and the component's styles JS objects together so margin property cannot override a different property (marginTop or marginBottom in our case).

To unblock the user, the correct way to override CSS margin in this case is:

<Divider styles={{ root: { marginTop: 0, marginBottom: 0 }}} />

However, this is undesirable and we should come up with better merging strategy for CSS in JS.

Version

0.5.2

[kuzhelov]

Thanks for a very nicely structured post, as well as for the appealing example provided - absolutely agree with your concerns on that 👍

This is a known limitation of CSS-in-JS approach, this is nicely described here: https://fela.js.org/docs/introduction/Caveats.html#2-shorthand--longhand-properties

Also, there is a general hint provided there that we could consider as a way to solve this problem:

To solve this problem, you should not use shorthand and longhand properties together in a single rule. Perhaps the best is to avoid them at all. ... It might be more code to type, but its also more self-explanatory and descriptive.

Thus, to address this problem I might suggest an approach where we will ensure that shorthand CSS properties are always 'expanded' before style objects are merged/applied. It turns out to be a fairly easy task to solve, as we might reap OSS community's experience here and pipe it into our processing logic: https://www.npmjs.com/package/css-shorthand-expand

[kuzhelov]

closing as this issue is fixed starting from v0.19.0

[mnajdova]

This is still an issue. Most simple repro:

  <>
    <Segment content="First Segment" styles={{marginBottom: '10px', margin: '0px'}} />
    <Segment content="Second Segment" />
  </>

Result:

Expected result:

The margin: '0px should override marginBottom: '10px'