WithoutProperties

View as Markdown

type WithoutProperties<K extends StyleKey> = StyleProps<Exclude<StyleKey, K>>;
export type { WithoutProperties };

WithoutProperties is the inverse of StyleProps. Every property is accepted except the ones named, which is the shorter way to write a component that has to protect a few properties from being overridden while leaving the rest open.

Example

TypeScript

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

const styles = css.create({
  base: {
    display: 'flex',
    padding: '8px',
  },
});

type PanelProps = {
  classStyle?: css.WithoutProperties<'position' | 'top' | 'left'>;
};

export function Panel({ classStyle }: PanelProps) {
  return <div classStyle={[styles.base, classStyle]} />;
}

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

Nested blocks are covered

The exclusion reaches into pseudo classes and at-rules, so a layout property cannot slip in behind a selector:

// Both are rejected by WithoutProperties<'position'>
const styles = css.create({
  hoverPinned: {
    ':hover': {
      position: 'fixed',
    },
  },
  widePinned: {
    '@media (min-width: 640px)': {
      position: 'sticky',
    },
  },
});

WithoutProperties

Example

Nested blocks are covered

On this page