TypeScript

Out of the box TypeScript experience.

CSS Components provides typing out of the box, but this page contains some further utilities and tips.

Importing types

You can import all the types at once:

1import type * as CSSComponents from "@phantomstudios/css-components";
2

These include:

• CSSComponents.CSS - The case type of css values, a string or array of css selectors.
• CSSComponents.CSSComponentConfig - The type for the config object passed to styled.
• CSSComponents.VariantProps - A utility for extracting variant props from a component.

Extract variants from a component

You can use the VariantProps utility to extract variants from a component. This ensures your variants support responsive syntax.

1import { styled, VariantProps } from "@phantomstudios/css-components";
2
3const Button = styled("button", {
4  css: "button",
5  variants: {
6    size: {
7      1: "buttonSize1",
8      2: "buttonSize2",
9    },
10  },
11});
12
13type ButtonVariants = VariantProps<typeof Button>;
14type SizeValues = ButtonVariants["size"];
15