css.use / classStyle

To apply styles defined in Plumeria to a component, use the classStyle prop or the css.use() function.

classStyle

type Style = StyleList<StyleNamespace>;

declare global {
  namespace React {
    interface HTMLAttributes<T> {
      classStyle?: Style;
    }
    interface SVGAttributes<T> {
      classStyle?: Style;
    }
  }
}

export type { Style };

classStyle is a special prop for applying styles to components such as React. It is converted to className by the plugin at build time.

Features

• Accepts a single style, or an array of styles. Arrays can be nested.
• Ignores false, null, and undefined wherever a style is accepted, which is what makes inline conditional branching work.
• Within an array, a later style takes precedence over an earlier one.

Example

import * as css from '@plumeria/core';

const styles = css.create({
  base: { color: 'red' },
  active: { fontWeight: 'bold' }
});

function Component({ active }) {
  return (
    <div classStyle={[styles.base, active && styles.active]}>
      Hello
    </div>
  );
}

css.use()

export type use = (...rules: Style[]) => string;
export const use: use;

css.use() converts styles into a string of class names. Use it where the classStyle prop is not available, for example when passing a class name to an external component that only accepts className.

Pass every style to one css.use() call; a later argument takes precedence. Strings from separate calls are not merged when joined, so which rule wins depends on stylesheet order.

A function key cannot go through css.use(), and the build stops on it: its values reach the element as CSS variables on style, which a class name string cannot carry. Apply it with classStyle. A prop that ends up in css.use() can reject one at the call site with StaticStyles.

Example

import * as css from '@plumeria/core';

const styles = css.create({
  text: { fontSize: '16px' }
});

// Get the class name as a string
const className = css.use(styles.text);

// Apply to an external component
<ExternalComponent className={css.use(styles.text)} />