emotion-utils.md

Home > @asl-19/emotion-utils

emotion-utils package

A collection of Emotion utility functions.

Functions

Function	Description
createBreakpointStyles({ breakpoints, })	Create function that applies styles when viewport width is greater than or equal to and/or less than the specified breakpoints.
devLabel(label)	Returns CSSObject containing provided label, but only in development.
gridContainer({ columnGap, columns, gap, rowGap, })	Create grid container with provided gap (or separate columnGap and rowGap values).
hoverStyles(styles)	Apply provided styles on hover.
insetInlineEnd(value)	Equivalent to the inset-inline-end CSS property.
insetInlineStart(value)	Equivalent to the inset-inline-start CSS property.
lineClampedText({ fontSize, height, lineCount, lineHeight, })	Clamp with ellipsis when text extends past the provided number of lines.
marginBlock(value)	Equivalent to the margin-block CSS property.
marginInline(value)	Equivalent to the margin-inline CSS property.
paddingBlock(value)	Equivalent to the padding-block CSS property.
transitionDurationWithPrefersReducedMotion(transitionDuration)	Set a transition duration with override to 0 if the user has enabled an OS/browser setting to request sites to reduce motion.

Variables

Variable	Description
hiddenWhenJs	Hide when JavaScript loaded.
hiddenWhenNoJs	Hide when JavaScript not loaded.
hiddenWhenPointerCoarseOrNone	Hide when pointer media feature is coarse or none (not fine).
hiddenWhenPointerFine	Hide when pointer media feature is fine (not coarse or none).
invisible	Visually hide element while keeping it accessible to keyboard and screen reader navigation.

Type Aliases

Type Alias	Description
Styles	Emotion CSSObject or SerializedStyles (or array containing them).