create

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

Plumeria statically extracts styles at build time, so there's no runtime cost or CSS injection overhead.

🧪 Example

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

⚙️ Usage

<div className={css.props(styles.container, styles.text)}>text<div>

⚠️ Beware of 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.