no-ineffective-stack-props

Github

Disallow flex props that Stack and InlineStack silently override.


Stack and InlineStack forward a fixed flexDirection, justifyContent, and alignItems to their underlying Box after spreading consumer props, so those props are silently ignored. Use the axis-based alignInline and alignBlock props instead, and pick the component whose direction you need.

Alignment fixes are applied automatically. flexDirection is reported without a fix because the direction is fixed by the component itself — switch components instead.

Incorrect

import { Stack, InlineStack } from '@customerio/pluma-components/react';

<Stack alignItems="center" justifyContent="space-between">…</Stack>
<InlineStack alignItems="center" justifyContent="flex-end">…</InlineStack>
<Stack flexDirection="row">…</Stack>

Correct

import { Stack, InlineStack } from '@customerio/pluma-components/react';

<Stack alignInline="center" alignBlock="space-between">…</Stack>
<InlineStack alignBlock="center" alignInline="flex-end">…</InlineStack>
<InlineStack>…</InlineStack>

What is checked

The rule resolves Pluma imports and aliases before matching Stack and InlineStack usage. It reports alignItems and justifyContent with an autofix that renames them to the correct axis-based prop for the component's direction, and reports flexDirection without a fix.

On this page