CSSProperties

View as Markdown

type CSSProperties;
export type { CSSProperties };

CSSProperties is the shape of the style objects handed to css.create. Use it with satisfies, which checks the object while leaving its inferred type intact.

Example

TypeScript

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

const flexBox = css.createStatic({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
} satisfies css.CSSProperties);

export const styles = css.create({
  container: {
    ...flexBox,
    backgroundColor: 'red',
  },
});

See createStatic for what the spread compiles to.

Use satisfies, not an annotation

Annotating a variable with css.CSSProperties widens every value to its declared type and makes each generated class name optional, because the properties of CSSProperties are themselves optional. Write satisfies css.CSSProperties so the literal types survive.

CSSProperties

Example

On this page