# css.createStatic

Source: https://plumeria.dev/docs/api-reference/javascript/createStatic





```ts
export type createStatic = <const T extends CreateStatic>(rule: T)=> T;
export const createStatic: createStatic;
```

`createStatic` defines **static values** and inlines them at build time. These can be used inside `create` or `createTheme` for conditions like media queries or other static references.

## Example [#example]

```ts title="TypeScript"
import * as css from '@plumeria/core';

export const breakpoints = css.createStatic({
  xs: '@media (max-width: 480px)',
  sm: '@media (max-width: 640px)',
  md: '@media (max-width: 768px)',
  lg: '@media (max-width: 1024px)',
  xl: '@media (max-width: 1280px)',
});
```

## Usage [#usage]

```ts
import * as css from "@plumeria/core";
import { breakpoints } from "lib/mediaQuery";

export const styles = css.create({
  container: {
    [breakpoints.sm]: {
      padding: 16,
    },
    [breakpoints.lg]: {
      padding: 32,
    },
  },
});
```

## Spreading Static Styles [#spreading-static-styles]

Since `createStatic` returns static values that are inlined at build time, you can also use it to define shared styles and spread them inside `create`. To ensure type safety, you can use the TypeScript `satisfies` operator with Plumeria's `css.CSSProperties` type.

```ts title="TypeScript"
import * as css from "@plumeria/core";

const flexBox = css.createStatic({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
} satisfies css.CSSProperties);

export const styles = css.create({
  container: {
    ...flexBox,
    backgroundColor: "red",
  },
});
```

<Callout title="Good to know">
  Internal API variables such as keyframes and viewTransition and createTheme are inlined at parse time.
</Callout>