CSS Specificity

For ordered priority

Plumeria adds :not(#\#) to longhand property atomic class, increasing priority.
To simplify things, we'll explain hash(xxxxxxxx) as xatom.

Override only that value

This ensures longhand properties always addtion to shorthand properties, regardless of merge order:

const styles = css.create({
  base: { margin: 10 },
  custom: { marginTop: 20 },
});

// Both produce the same result
css.props(styles.base, styles.custom);
css.props(styles.custom, styles.base);

// Result: margin 10px on all sides, except top is 20px

Normally, if a shorthand is below a longhand, it will override the all longhand, but if you raise its priority, the following CSS will return the same result:

xatom1 {
  padding: 20px
}

xatom2:not(#\#) {
  padding-top: 10px;
}

And this too

xatom2:not(#\#) {
  padding-top: 10px;
}

xatom1 {
  padding: 20px
}

This slightly increases bundle size, but is necessary to maintain for strict behavior.

Override all

Also, if a shorthand is written after a longhand in the same key, the previous longhand will be filtered and overridden.

const styles = css.create({
  base: {
    paddingTop: '20px', // filtered out
    padding: '10px' // override all padding-long-hand
  },
 });

As follows:

xatom {
  padding: 10px
}

css.props() merge styles

Also, when css.props() has duplicate properties on its arguments, the style properties on the right always take precedence and duplicate properties on the left are filtered. In that case no filtered hash is generated.

const styles = css.create({
  base: { fontSize: 10 },
  custom: { fontSize: 16 },
});

// The right always wins
css.props(styles.base, styles.custom); // 16px
css.props(styles.custom, styles.base); // 10px

Generated as follows:

xatom {
  font-size: 16px
}

Or:

xatom {
  font-size: 10px
}