createStatic

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

createStatic defines static values that can be used inside create or createTheme for conditions like media queries or other static references.

Example

TypeScript

// lib/mediaQuery.ts
import * as style from '@plumeria/core';

export const breakpoints = style.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 style from "@plumeria/core";
import { breakpoints } from "lib/mediaQuery";

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

Good to know

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

createStatic

Example

Usage

On this page