props

The css.props() function returns styleObject as hashedClassName 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);

Prohibit intermediate code

Props compilation is performed by strictly deleting all intermediate code except import css.create() css.props(). For example, if you define and use a global variable like the following, a reference error will occur because the variable will be deleted during the compilation phase.

const MD = "@media (max-width: 768px)" // removed at compile time
 
const styles = css.create({
  responsive: {
    [MD]: {  // Reference Error
      scale: 0.8,
    },
  },
});
 
return (
    <div className={css.props(styles.responsive)} />
)

If you want to define a variable and use intermediate code, you can assign a value directly or via an import statement.

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

import { css, media } from "@plumeria/core";
 
const styles = css.create({
  responsive: {
    [media.maxWidth(768)]: {  // Work
      scale: 0.8,
    },
  },
});
 
return (
    <div className={css.props(styles.responsive)} />
)

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

Therefore, keyframes() etc. cannot be defined in the same file scope as props and must be saved as files and used via import.

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

Prohibit intermediate code

Extract

Usage Patterns

Conditional styles

With ternary

Return value

See Also

More

See more about css.create

See more about css.pseudo

On this page