Merge pull request #94 from tenphi/feat/longhand-modifier

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

Author: tenphi

.changeset/gentle-pens-expand.md

@@ -0,0 +1,5 @@
+---
+'@tenphi/tasty': minor
+---
+
+Add `longhand` modifier to force longhand CSS output for radius, padding, margin, scroll-margin, inset, and border style handlers.

AGENTS.md

@@ -29,10 +29,9 @@ Follow the ordered steps in [`.cursor/commands/submit-changes.md`](.cursor/comma
 1. **Typecheck** — Run `pnpm typecheck`. If it fails, stop and fix errors before formatting or committing.
 2. **Lint** — Run `pnpm lint`. If it fails, stop and fix errors before formatting or committing.
 3. **Format** — Run `pnpm format` so committed code matches Prettier output.
-4. **Commit** — Use [Conventional Commits](https://www.conventionalcommits.org/) (`feat`, `fix`, `refactor`, `test`, `docs`, `chore`, `perf`, `ci`; optional scope). Keep the subject line short.
-5. **Push** — Do not push to `main`. Confirm the current branch, then push with `git push -u origin HEAD`.
-
-**Changesets:** When a change should trigger an npm release, add a changeset as described in `submit-changes.md` and include it in the same commit. When a change does not need a version bump (for example documentation or repo-only churn), skip the changeset but still run typecheck, lint, and format.
+4. **Changeset** — If the change affects published package behavior (features, fixes, refactors, perf), create a changeset file in `.changeset/` as described in `submit-changes.md` and include it in the commit. Use `patch` for fixes/small changes, `minor` for new features/non-breaking API changes, `major` for breaking changes. Skip the changeset only when the change is purely internal (docs, CI, repo-only churn, tests with no behavior change).
+5. **Commit** — Use [Conventional Commits](https://www.conventionalcommits.org/) (`feat`, `fix`, `refactor`, `test`, `docs`, `chore`, `perf`, `ci`; optional scope). Keep the subject line short. Include the changeset file in the same commit.
+6. **Push** — Do not push to `main`. Confirm the current branch, then push with `git push -u origin HEAD`.
 
 ## Stack
 

docs/styles.md

@@ -104,6 +104,8 @@ Element padding with directional modifiers and multi-group support. Use **comma-
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`) instead of the `padding` shorthand. Useful when children need to selectively inherit individual directions.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
@@ -112,6 +114,7 @@ Element padding with directional modifiers and multi-group support. Use **comma-
 | `"1x left right"` | Left and right `1x`, top/bottom `0` |
 | `"1x, 2x top"` | All sides `1x`, then top overridden to `2x` |
 | `"1x, 2x top bottom"` | Left/right `1x`, top/bottom `2x` |
+| `"2x longhand"` | All sides `2x`, output as 4 individual `padding-*` properties |
 | `true` | All sides `1x` |
 | Number | Converted to `px` |
 
@@ -129,6 +132,8 @@ Element margin. Same syntax, modifiers, and multi-group support as `padding`.
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`margin-top`, etc.) instead of the `margin` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"2x"` | All sides `2x` |
@@ -190,12 +195,15 @@ Positioning offsets with directional modifiers and multi-group support. Same dir
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`top`, `right`, `bottom`, `left`) instead of the `inset` shorthand.
+
 | Value | Effect |
 |-------|--------|
 | `"0"` | All sides `0` |
 | `"2x top"` | Top `2x`, right/bottom/left `auto` |
 | `"1x left right"` | Left and right `1x`, top/bottom `auto` |
 | `"0, 2x top"` | All sides `0`, then top overridden to `2x` |
+| `"0 longhand"` | All sides `0`, output as individual `top`/`right`/`bottom`/`left` |
 | `true` | All sides `0` |
 
 Later comma-separated groups override earlier groups for conflicting directions.
@@ -281,12 +289,15 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left`
 
+**Output modifier:** `longhand` — forces output as individual CSS properties (`border-top`, `border-right`, `border-bottom`, `border-left`) instead of the `border` shorthand. Useful when children need to selectively inherit individual sides.
+
 | Value | Effect |
 |-------|--------|
 | `true` | Default border (`1bw solid #border`) on all sides |
 | `"2bw dashed #purple"` | All sides: 2bw dashed purple |
 | `"2bw top"` | Top only: 2bw solid `#border`, others: 0 |
 | `"dotted #danger left right"` | Left/right: 1bw dotted `#danger`, others: 0 |
+| `"1bw longhand"` | All sides: 1bw solid `#border`, output as 4 individual `border-*` properties |
 | `"1bw #red, 2bw #blue top"` | All sides: 1bw solid `#red`, top overridden to 2bw solid `#blue` |
 | `"1bw, dashed top bottom, #purple left right"` | Base: 1bw solid `#border`, top/bottom: 1bw dashed `#border`, left/right: 1bw solid `#purple` |
 
@@ -310,6 +321,8 @@ Border radius with shape presets and directional modifiers.
 
 **Direction modifiers:** `top`, `right`, `bottom`, `left` — rounds only the specified corners.
 
+**Output modifier:** `longhand` — forces output as individual CSS longhand properties (`border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`) instead of the `border-radius` shorthand. Useful when children need to selectively inherit individual corners via `radius: 'inherit left'`.
+
 | Value | Effect |
 |-------|--------|
 | `"2r"` | All corners `2r` |
@@ -318,6 +331,7 @@ Border radius with shape presets and directional modifiers.
 | `"1r top"` | Top-left and top-right `1r`, bottom-left and bottom-right `0` |
 | `"leaf"` | Alternating sharp/round corners (top-left `0`, top-right `1r`, bottom-right `0`, bottom-left `1r`) |
 | `"backleaf"` | Inverse leaf (top-left `1r`, top-right `0`, bottom-right `1r`, bottom-left `0`) |
+| `"1r longhand"` | All corners `1r`, output as 4 individual `border-*-radius` properties |
 | `"inherit"` | All corners inherit from parent (`border-radius: inherit`) |
 | `"inherit right"` | Right corners inherit from parent (uses longhand properties) |
 

src/styles/border.test.ts

@@ -70,6 +70,48 @@ describe('borderStyle', () => {
     });
   });
 
+  describe('longhand modifier', () => {
+    it('expands single value to 4 individual border-* properties', () => {
+      const result = borderStyle({ border: '1bw longhand' });
+      expect(result['border-top']).toContain('1px');
+      expect(result['border-top']).toContain('solid');
+      expect(result['border-right']).toContain('1px');
+      expect(result['border-bottom']).toContain('1px');
+      expect(result['border-left']).toContain('1px');
+      expect(result).not.toHaveProperty('border');
+    });
+
+    it('expands border with style and color to longhands', () => {
+      const result = borderStyle({ border: '2bw dashed #purple longhand' });
+      expect(result['border-top']).toContain('2px');
+      expect(result['border-top']).toContain('dashed');
+      expect(result['border-top']).toContain('var(--purple-color)');
+      expect(result['border-right']).toEqual(result['border-top']);
+      expect(result['border-bottom']).toEqual(result['border-top']);
+      expect(result['border-left']).toEqual(result['border-top']);
+      expect(result).not.toHaveProperty('border');
+    });
+
+    it('expands CSS-wide keyword with longhand', () => {
+      const result = borderStyle({ border: 'inherit longhand' });
+      expect(result).toEqual({
+        'border-top': 'inherit',
+        'border-right': 'inherit',
+        'border-bottom': 'inherit',
+        'border-left': 'inherit',
+      });
+    });
+
+    it('expands multi-group with longhand to longhands', () => {
+      const result = borderStyle({ border: '1bw longhand, 2bw top' });
+      expect(result['border-top']).toContain('2px');
+      expect(result['border-right']).toContain('1px');
+      expect(result['border-bottom']).toContain('1px');
+      expect(result['border-left']).toContain('1px');
+      expect(result).not.toHaveProperty('border');
+    });
+  });
+
   // Multi-group support tests
   describe('multi-group support', () => {
     it('handles multiple groups with base and direction override', () => {

src/styles/border.ts

@@ -1,6 +1,7 @@
 import { CSS_WIDE_KEYWORDS } from '../parser/const';
 import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
 import { BORDER_STYLES } from './const';
+import { extractCSSWideKeyword } from './shared';
 
 type Direction = (typeof DIRECTIONS)[number];
 
@@ -75,21 +76,42 @@ export function borderStyle({
   }
 
   const processed = parseStyle(strBorder);
-  const groups: GroupData[] = processed.groups ?? [];
+  const groups = processed.groups ?? [];
 
   if (!groups.length) return null;
 
+  const useLonghand = groups.some((g) => (g.mods ?? []).includes('longhand'));
+
   // Single group - use original logic for backward compatibility
   if (groups.length === 1) {
+    const group = groups[0];
+    const keyword = extractCSSWideKeyword(group);
+
+    if (keyword) {
+      if (useLonghand) {
+        return Object.fromEntries(
+          DIRECTIONS.map((dir) => [`border-${dir}`, keyword]),
+        );
+      }
+
+      return { border: keyword };
+    }
+
     const { directions, borderValue } = processGroup({
-      values: groups[0].values ?? [],
-      mods: groups[0].mods ?? [],
-      colors: groups[0].colors ?? [],
+      values: group.values ?? [],
+      mods: group.mods ?? [],
+      colors: group.colors ?? [],
     });
 
     const styleValue = formatBorderValue(borderValue);
 
     if (!directions.length) {
+      if (useLonghand) {
+        return Object.fromEntries(
+          DIRECTIONS.map((dir) => [`border-${dir}`, styleValue]),
+        );
+      }
+
       return { border: styleValue };
     }
 
@@ -149,9 +171,17 @@ export function borderStyle({
   }
 
   // If no group specified any directions and we have an all-directions value,
-  // return the simple `border` shorthand
+  // return the simple `border` shorthand (or longhands if requested)
   if (!hasAnyDirections && allDirectionsValue) {
-    return { border: formatBorderValue(allDirectionsValue) };
+    const formatted = formatBorderValue(allDirectionsValue);
+
+    if (useLonghand) {
+      return Object.fromEntries(
+        DIRECTIONS.map((dir) => [`border-${dir}`, formatted]),
+      );
+    }
+
+    return { border: formatted };
   }
 
   // Otherwise, output individual border-* properties

src/styles/directional.ts

@@ -172,6 +172,8 @@ export function processDirectionalStyle(
     left: defaultInit,
   };
 
+  let useLonghand = false;
+
   if (main != null) {
     if (typeof main === 'number') {
       const v = `${main}px`;
@@ -189,6 +191,10 @@ export function processDirectionalStyle(
           const groups = processed.groups ?? [];
 
           for (const group of groups) {
+            if (group.mods.includes('longhand')) {
+              useLonghand = true;
+            }
+
             const kw = extractCSSWideKeyword(group);
 
             if (kw) {
@@ -243,5 +249,14 @@ export function processDirectionalStyle(
     if (val) dirs.left = val;
   }
 
+  if (useLonghand) {
+    return {
+      [dirProp('top')]: dirs.top,
+      [dirProp('right')]: dirs.right,
+      [dirProp('bottom')]: dirs.bottom,
+      [dirProp('left')]: dirs.left,
+    };
+  }
+
   return optimizeShorthand(property, dirs);
 }

src/styles/inset.test.ts

@@ -88,6 +88,44 @@ describe('insetStyle', () => {
     });
   });
 
+  describe('longhand modifier', () => {
+    it('expands inset to individual top/right/bottom/left properties', () => {
+      expect(insetStyle({ inset: '0 longhand' })).toEqual({
+        top: '0',
+        right: '0',
+        bottom: '0',
+        left: '0',
+      });
+    });
+
+    it('expands inset with value to individual properties', () => {
+      expect(insetStyle({ inset: '1x longhand' })).toEqual({
+        top: '8px',
+        right: '8px',
+        bottom: '8px',
+        left: '8px',
+      });
+    });
+
+    it('expands directional inset with longhand', () => {
+      expect(insetStyle({ inset: '2x top longhand' })).toEqual({
+        top: '16px',
+        right: 'auto',
+        bottom: 'auto',
+        left: 'auto',
+      });
+    });
+
+    it('expands CSS-wide keyword with longhand', () => {
+      expect(insetStyle({ inset: 'inherit longhand' })).toEqual({
+        top: 'inherit',
+        right: 'inherit',
+        bottom: 'inherit',
+        left: 'inherit',
+      });
+    });
+  });
+
   describe('multi-group (comma-separated)', () => {
     it('base value with directional override', () => {
       expect(insetStyle({ inset: '0, 2x top' })).toEqual({

src/styles/margin.test.ts

@@ -261,6 +261,53 @@ describe('marginStyle', () => {
     });
   });
 
+  describe('longhand modifier', () => {
+    it('expands single value to 4 individual properties', () => {
+      expect(marginStyle({ margin: '2x longhand' })).toEqual({
+        'margin-top': '16px',
+        'margin-right': '16px',
+        'margin-bottom': '16px',
+        'margin-left': '16px',
+      });
+    });
+
+    it('expands two-value string to 4 individual properties', () => {
+      expect(marginStyle({ margin: '1x 2x longhand' })).toEqual({
+        'margin-top': '8px',
+        'margin-right': '16px',
+        'margin-bottom': '8px',
+        'margin-left': '16px',
+      });
+    });
+
+    it('expands directional value with longhand', () => {
+      expect(marginStyle({ margin: '2x top longhand' })).toEqual({
+        'margin-top': '16px',
+        'margin-right': '0',
+        'margin-bottom': '0',
+        'margin-left': '0',
+      });
+    });
+
+    it('respects individual direction overrides with longhand', () => {
+      expect(marginStyle({ margin: '1x longhand', marginTop: '3x' })).toEqual({
+        'margin-top': '24px',
+        'margin-right': '8px',
+        'margin-bottom': '8px',
+        'margin-left': '8px',
+      });
+    });
+
+    it('expands CSS-wide keyword with longhand', () => {
+      expect(marginStyle({ margin: 'inherit longhand' })).toEqual({
+        'margin-top': 'inherit',
+        'margin-right': 'inherit',
+        'margin-bottom': 'inherit',
+        'margin-left': 'inherit',
+      });
+    });
+  });
+
   describe('auto values', () => {
     it('handles auto values for centering', () => {
       const result = marginStyle({