props

The css.props() function returns style object as hashed classes together while filtering out falsy values like undefined, false, or null. It is useful when conditionally combining styles.

TypeScript

import { css } from '@plumeria/core';
 
const styles = css.create({
  one: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  two: {
    fontSize: '14px',
    color: '#606060',
  },
});
 
const className = css.props(styles.one, styles.two);

// Allowed static string literal variables
const MD = "@media (max-width: 768px)"
 
const styles = css.create({
  responsive: {
    [MD]: {
      scale: 0.8,
    },
  },
});
 
return (
    <div className={css.props(styles.responsive)} />
)

The easiest way to follow the DRY principle is to make it a constant using defineConsts.

import { css } from "@plumeria/core";
import { breakpoints } from "lib/mediaQuery";
 
const styles = css.create({
  responsive: {
    [breakpoints.md]: {
      scale: 0.8,
    },
  },
});
 
return (
    <div className={css.props(styles.responsive)} />
)

Extract

The following is extracted at compile time and executed as ts code. (Vue and Svelte also execute as ts.)

import { css } from "@plumeria/core";
 
const styless = css.create({
  responsive: {
    ["@media (max-width: 768px)"]: {
      scale: 0.8,
    },
  },
});
 
css.props(styless.responsive);

Usage Patterns

Conditional styles

Only truthy values are preserved.

const isActive = true;
 
const className = css.props(
  styles.one,
  isActive && styles.two
);

With ternary

const className = css.props(
  isDark ? styles.dark : styles.light,
  isHovered && styles.hovered
);

Return value

Returns a single hashes string of space-separated styleObject, ignoring falsy inputs:

css.props(styles.one, false, undefined, styles.two);

props

Extract

Usage Patterns

Conditional styles

With ternary

Return value

See Also

More

See more about create

See more about defineConsts

On this page