create

The create for defines static, component-scoped styles using plain JavaScript style objects.
It is type-safe keys, compile-time validation, and scoped class names through automatic hashing.

Only the styles you use in props() will be compiled.

Example

import * as css from '@plumeria/core'

const styles = css.create({
  container: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  text: {
    fontSize: '14px',
    textDecoration: 'none',
  },
})

const className = css.props(styles.container, styles.text)

If they are defined in the same file, they will be replaced directly with the hash.
The same is true if you are exporting a file boundary, which is safely extracted as a hash, the original create call is replaced with an empty string, and the reference is broken, so it statically resolves to zero in the bundle.

Compiled:

className: "xxp6epoh xwbwwha1 xbief8v4 xzllkng3"

Generated CSS:

.xxp6epoh {
  display: flex;
}
.xwbwwha1 {
  justify-content: space-between;
}
.xbief8v4:not(#\#) {
  font-size: 14px;
}
.xzllkng3 {
  text-decoration: none;
}

Plumeria compiles each style property into a unique, atomic, and hashed class name. This prevents style collisions and maximizes reusability.