css.createStatic

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

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

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,
    },
  },
});

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.

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",
  },
});

Good to know

Internal API variables such as keyframes and viewTransition and createTheme are inlined at parse time.

css.createStatic

Example

Usage

Spreading Static Styles

On this page