AtomicClassNameFor

type AtomicClassNameFor<P extends string, V>;
export type { AtomicClassNameFor };

AtomicClassNameFor is the type of a single atomic class name, which is what reading one property off a created style gives you. It is a string that carries the property it was generated for, so a class name generated for one property is not assignable to another.

Example

TypeScript

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

const styles = css.create({
  text: {
    color: 'red',
    fontSize: '12px',
  },
});

const color: css.AtomicClassNameFor<'color', 'red'> = styles.text.color; // ok
const wrong: css.AtomicClassNameFor<'color', 'red'> = styles.text.fontSize; // Type error

Because it is a string, an atomic class name can be handed anywhere a class name is expected:

<ExternalComponent className={styles.text.color} />

An entry of a dynamic style is AtomicClassStyleFor, which is this type with the mark that says it reaches the element through classStyle. It satisfies AtomicClassNameFor, so a prop written this way takes either kind:

const styles = css.create({
  sized: (width: number) => ({ width }),
});

const width: css.AtomicClassNameFor<'width', number> = styles.sized(120).width; // ok

Good to know

Most code can type these as string. Reach for AtomicClassNameFor when a prop has to accept one atomic class name rather than a whole style, which Style and its narrowed forms describe.

Example

On this page