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
}

Why Plumeria is order-independent

Plumeria maintains predictable styling regardless of the order. This behavior is achieved through a deliberate specificity hierarchy.

Plugin Compiler (Complete order independence)

The Plumeria optimizer automatically moves all @rule to the bottom of the CSS bundle. Since rules at the bottom of a CSS file naturally take precedence, a lower specificity level is sufficient to maintain low bundle size while keeping styles consistent.

- shorthand:             0 - :not(#\#) ✖️ 0
- longhand:              1 - :not(#\#) ✖️ 1
- shorthand in query:    1 - :not(#\#) ✖️ 1
- longhand in query:     2 - :not(#\#) ✖️ 2

This design provides:

• ✅ HMR reliability: Consistent behavior between development and production.
• ✅ Predictable Media Overrides: Media query styles always take precedence over base styles.
• ✅ Optimized Production: Minimal specificity adjustments in production to keep bundle sizes small.