StyleProps

type StyleProps<K extends StyleKey> = StyleList<AllowedNamespace<K>>;
export type { StyleProps };

StyleProps enumerates the properties a component accepts through a style prop. A style that sets anything outside the list is rejected.

Example

TypeScript

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

const styles = css.create({
  base: {
    fontSize: '14px',
  },
});

type TextProps = {
  classStyle?: css.StyleProps<'color' | 'fontSize'>;
};

export function Text({ classStyle }: TextProps) {
  return <span classStyle={[styles.base, classStyle]} />;
}

<Text classStyle={styles.tinted} />  // ok when tinted only sets color
<Text classStyle={styles.pinned} />  // Type error when pinned sets position

Nested blocks are covered

The enumeration reaches into pseudo classes and at-rules, so a property that is only set inside a nested block is checked the same way:

// Type error, position is not enumerated
<Text classStyle={styles.hoverPinned} />

const styles = css.create({
  hoverPinned: {
    ':hover': {
      position: 'fixed',
    },
  },
});

A marker sets no property

css.marker() writes a custom property behind a pseudo class rather than a CSS property, so a style built from one carries nothing for the enumeration to reject and passes through any of these types:

const styles = css.create({
  badge: css.marker('badge', ':hover'),
});

<Text classStyle={styles.badge} />  // ok under any enumeration

The block css.extended() guards is checked as usual. The at-rule it returns is a nested block like any other, and the properties inside it are enumerated the same way.

Good to know

When a component only needs to protect a few properties, WithoutProperties is the shorter way to say the same thing.

Example

Nested blocks are covered

A marker sets no property

On this page