feat(styles): add longhand modifier to force longhand CSS output

[tenphi]

Summary

Adds a longhand modifier to style handlers that use CSS shorthand properties. When present, the handler outputs individual CSS longhand properties instead of the shorthand form.

This is useful when parent elements need to set styles in a way that allows children to selectively inherit individual directions/corners — e.g., a parent uses radius: '10px longhand' so a child can do radius: 'inherit left' without shorthand/longhand specificity conflicts.

Affected handlers

• radius — border-radius expands to border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
• padding — padding expands to padding-top, padding-right, padding-bottom, padding-left
• margin — margin expands to margin-top, margin-right, margin-bottom, margin-left
• scroll-margin — scroll-margin expands to scroll-margin-top, etc.
• inset — inset expands to top, right, bottom, left
• border — border expands to border-top, border-right, border-bottom, border-left

Examples

radius: '10px longhand'
// → border-top-left-radius: 10px; border-top-right-radius: 10px;
//   border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;

padding: '2x longhand'
// → padding-top: 16px; padding-right: 16px;
//   padding-bottom: 16px; padding-left: 16px;

border: '1bw longhand'
// → border-top: 1px solid var(--border-color, currentColor); ...

radius: 'inherit longhand'
// → border-top-left-radius: inherit; border-top-right-radius: inherit;
//   border-bottom-right-radius: inherit; border-bottom-left-radius: inherit;

Changes

• src/styles/radius.ts — detect longhand mod, output per-corner properties
• src/styles/directional.ts — detect longhand mod, bypass optimizeShorthand and output individual direction properties (affects padding, margin, scroll-margin, inset)
• src/styles/border.ts — detect longhand mod, output per-side border properties; also added extractCSSWideKeyword handling for parsed groups
• src/styles/radius.test.ts — new test file (14 tests)
• src/styles/{padding,margin,border,inset}.test.ts — added longhand modifier test sections
• docs/styles.md — documented longhand output modifier for all affected handlers

Test plan

• All existing tests pass (1483 tests, 44 files)
• New tests cover: plain values, CSS-wide keywords (inherit), shape mods (round, ellipse, leaf), directional combos, multi-group, and priority overrides with longhand
• Typecheck passes
• Lint passes
• Format passes

Made with Cursor

[github-actions]

📦 Snapshot release

Published 0.0.0-snapshot.7a4d0bf.

pnpm add @tenphi/tasty@0.0.0-snapshot.7a4d0bf