create

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.

Example

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

Usage

<div className={css.props(styles.container, styles.text)}>text</div> // object to string
//   className="zxxxxxx1 zxxxxxx2 zxxxxxx3 zxxxxxx4"

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.