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

Good to know

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

css.createStatic

Example

Usage

On this page