defineConsts

The defineConsts function defines static constant values (not CSS variables) that can be used inside create() or defineTokens() for conditions like media queries or other static references.

It is useful for creating values such as breakpoints, spacing scales, or other fixed design constants that don't rely on CSS variable resolution.

Example

TypeScript

// lib/mediaQuery.ts
import { css } from '@plumeria/core';
 
export const breakpoints = css.defineConsts({
  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)',
});

These constants are fully type-safe, readonly, and enforced as as const.

Using constants in styles

import { css } from "@plumeria/core";
import { breakpoints } from "lib/mediaQuery";
 
export const styles = css.create({
  container: {
    [breakpoints.sm]: {
      padding: 16,
    },
    [breakpoints.lg]: {
      padding: 32,
    },
  },
});

You can use these constants for any static keys inside styles or tokens.

Good to know

When using RSC with Next.js etc., webpack-plugin is used inside next-plugin, and variables are AST analyzed and inlined.

defineConsts

Example

Using constants in styles

On this page