@compiled/react/src/create-strict-api/__tests__/__fixtures__/strict-api-recursive.ts

A familiar and performant compile time CSS-in-JS library for React.

import { createStrictAPI } from '../../index';

type Color = 'var(--ds-text)';
type ColorHovered = 'var(--ds-text-hovered)';
type ColorPressed = 'var(--ds-text-pressed)';
type Background = 'var(--ds-bold)' | 'var(--ds-success)';
type BackgroundHovered = 'var(--ds-bold-hovered)' | 'var(--ds-success-hovered)';
type BackgroundPressed = 'var(--ds-bold-pressed)' | 'var(--ds-success-pressed)';
type Space = 'var(--ds-space-050)' | 'var(--ds-space-0)';

interface Properties {
  color: Color;
  backgroundColor: Background;
  padding: Space;
}

interface HoveredProperties {
  color: ColorHovered;
  backgroundColor: BackgroundHovered;
}

interface PressedProperties {
  color: ColorPressed;
  backgroundColor: BackgroundPressed;
}

interface ChainedProperties {
  color: ColorPressed;
  backgroundColor: BackgroundPressed;
}

interface CSSPropertiesSchema extends Properties {
  '&:hover': HoveredProperties;
  '&:active': PressedProperties;
  '&:hover::after': ChainedProperties;
}

const { css, cssMap, cx, XCSSProp } = createStrictAPI<CSSPropertiesSchema>();

export { css, XCSSProp, cssMap, cx };