use
API reference for the use()
export type use = (...rules: (false | CSSProperties | null | undefined)[])=> string;
export const use: use;The use() returns style object as hashed classes together while filtering out falsy values like undefined, false, or null. It is useful when conditionally combining styles.
Example
import * as css from '@plumeria/core';
const styles = css.create({
one: {
display: 'flex',
justifyContent: 'space-between',
},
two: {
fontSize: '14px',
color: '#606060',
},
});<div className={css.use(styles.one, styles.two)}>
{/* ... */}
</div>Usage Patterns
Conditional styles
Only truthy values are preserved.
const isActive = true;
const className = css.use(
styles.one,
isActive && styles.two
);With ternary
const className = css.use(
isDark ? styles.dark : styles.light,
isHovered && styles.hovered
);Return value
Returns a single hashes string of space-separated styleObject, ignoring falsy inputs:
css.use(styles.one, false, undefined, styles.two);See Also
Good to know
use(), like all APIs, have no runtime. They are controlled at build time by plugins, so functions themselves are replaced by hashes.