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', // xhash1x
    justifyContent: 'space-between', // xhash2x
  },
  text: {
    fontSize: '14px', // xhash3x
    textDecoration: 'none', // xhash4x
  },
})

⚙️ Usage

<h2 className={styles.$text}>heading</h2>
// $text is "xhash3x xhash4x"
 
<div className={css.props(styles.container, styles.text)}>text</div> // object to string
// css.props of return "xhash1x xhash2x xhash3x xhash4x"

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