typescript.md

CCM with Typescript

CCM is fully compatible with Typescript. When using CCM, there are a couple things that are exposed from the CSS files to Typescript.

The only imports available from any CCM file is the Components themselves.

All component names, class modifiers, and custom properties are all checked and verified by Typescript so you can get immediate and safe feedback while developing.

/* ./Feature.ccm.css */

AppButton {
  font-size: 1em;
  color: var(--color);
}

AppButton.large {
  font-size: 2em;
}

AppButton:hover {
  color: var(--hoverColor);
}

// Something *similar* autogenerated types for this component

interface AppButtonProps {
  /**
   * $color prop is a required string,
   * since it is a CSS custom prop
   */
  $color: string;

  /**
   * $hoverColor prop is a required string,
   * since it is a CSS custom prop
   */
  $hoverColor: string;

  /**
   * May or may not be specified, when specified this component
   * has the `.large` css class.
   */
  $large?: boolean;
}

export interface AppButton {
  [DOMElementName]: React.FC<AppButtonProps & DOMAttributesOf[DOMElementName]>;
}