CSS Specificity

Use :not(#\#) for Predictable Longhand Behavior

Plumeria adds :not(#\#) to longhand property atoms, increasing their specificity to (0,1,1).

Additive Override Behavior

This ensures longhand properties always add 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

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

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

const styles = css.create({
  base: {
    paddingTop: "12px", // filtered out
    padding: '8px' // overrides all padding
  },
 });

When the ESLint rule is enabled, in the key longhand properties will always after shorthand properties.

How css.props() Merges 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