API
css.createStatic
Constants such as breakpoints that styles and themes can refer to.
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
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,
},
},
});Numeric keys
Quote a numeric key, as in a color scale. An unquoted number stops the build:
import * as css from "@plumeria/core";
export const blue = css.createStatic({
'500': '#3b82f6',
});Read it as blue[500] or blue['500'].
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.
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",
},
});Sharing
Values can be imported from another module, or from a package that opts in with a plumeria export condition; see Across packages. @plumeria/wind ships the Tailwind CSS design values this way.
Good to know
Internal API variables such as keyframes and viewTransitionClass and createTheme are inlined at parse time.