kstyled 0.4.1

0.4.1 fixes dynamic padding and margin values that contain multiple CSS tokens. React Native does not accept values such as "12px 24px" directly, so kstyled now normalizes them into explicit top, right, bottom, and left properties before they reach Fabric.

Install

Keep the runtime and compiler versions aligned:

pnpm add kstyled@0.4.1
pnpm add -D babel-plugin-kstyled@0.4.1

Affected patterns

The patch applies when one interpolation returns an entire shorthand value:

const spacing = compact ? '8px 16px' : '12px 24px';

const style = css`
  padding: ${spacing};
`;

It also covers the equivalent prop-driven styled component:

const Control = styled.Pressable<{ $spacing: string }>`
  padding: ${(props) => props.$spacing};
`;

Both forms now produce React Native-compatible longhand properties. Static shorthands and dynamic declarations that interpolate each side separately were already compiled correctly in 0.4.0.

Compatibility

This is a source-compatible patch with no public API changes. Applications using 0.4.0 should upgrade the runtime and Babel plugin together, clear the Metro cache once, and verify representative controls on iOS, Android, and web.