create

Define local component-scoped styles with full type-safety and static generation.

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

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

Atomic API

Unique atom classes are reused without duplication, keeping the amount of class names constant.

Example

TypeScript

import { css } from '@plumeria/core'
 
const styles = css.create({
  container: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  text: {
    fontSize: '14px',
    textDecoration: 'none',
  },
})
 
// css.props combines styles into a single className string
const className = css.props(styles.container, styles.text)

Output:

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

Generated CSS:

.x1x6w4y4 {
  display: flex;
}
.x1hayll7 {
  justify-content: space-between;
}
.x17c3vyy {
  font-size: 14px;
}
.xhjydpd0 {
  text-decoration: none;
}

Resulting:

className: "x1x6w4y4 x1hayll7 x17c3vyy xhjydpd0"

Circular references

If modules reference each other circularly, the compiler will fail to compile them correctly. This design encourages a local, linear style structure that's easier to understand, faster to compile, and less error-prone across large codebases and bundlers like rscute.

create

Example

On this page