sprinkle-values-are-literals

Use string, number, or boolean literals for each breakpoint value on a sprinkle prop from an imported Pluma component or a registered component alias. A value must be one of the prop's tokens, or a raw CSS value in square brackets, like px="[21px]" or display="[contents]". A raw value without brackets is reported, as are brackets on truncate, visuallyHidden, centerBaseline, centerBaselineBefore and wrap. Spacing and sizing props take only CSS lengths, percentages, calc() and var() in brackets.

Runtime-computed scalar values remain supported. Responsive objects and Ember hashes need static values and known breakpoint names. null and undefined omit a value, while false omits boolean utilities. The wrap alias accepts false as nowrap.

Incorrect

import { Box } from '@customerio/pluma-components/react';

<Box px={{ base: '400', md: padding }} />
<Box px="21px" />
<Box display={{ md: 'contents' }} />
<Box px={{ wide: '400' }} />

Correct

import { Box, Flex } from '@customerio/pluma-components/react';

<Box px={{ base: '400', md: '[21px]' }} />
<Box display={{ md: '[contents]' }} />
<Flex wrap={{ base: false, md: true }} />

Use named imports or default imports from public component subpaths. Sprinkle props on imported Pluma components and aliases on their supported components are checked. Namespace imports and custom wrappers are not checked.