feat: add negative prefix support for positioning utilities

Add support for negative prefixes on top, right, bottom, and left
positioning utilities (e.g., -top-4, -right-2, -bottom-8, -left-1).

This brings these utilities in line with start/end positioning which
already supported negative prefixes. Works with standard spacing scale,
fractional values, arbitrary values, and custom spacing from tailwind
config.

Examples:
- -top-4 → { top: -16 }
- -right-0.5 → { right: -2 }
- -bottom-[20px] → { bottom: -20 }
- -left-[50%] → { left: "-50%" }

Author: mgcrea

src/parser/layout.test.ts

@@ -521,6 +521,39 @@ describe("parseLayout - positioning utilities", () => {
     expect(parseLayout("left-[12.5%]")).toEqual({ left: "12.5%" });
     expect(parseLayout("left-[-20px]")).toEqual({ left: -20 });
   });
+
+  it("should parse negative positioning prefixes", () => {
+    // Standard spacing scale
+    expect(parseLayout("-top-1")).toEqual({ top: -4 });
+    expect(parseLayout("-top-4")).toEqual({ top: -16 });
+    expect(parseLayout("-right-1")).toEqual({ right: -4 });
+    expect(parseLayout("-right-2")).toEqual({ right: -8 });
+    expect(parseLayout("-bottom-4")).toEqual({ bottom: -16 });
+    expect(parseLayout("-bottom-8")).toEqual({ bottom: -32 });
+    expect(parseLayout("-left-2")).toEqual({ left: -8 });
+    expect(parseLayout("-left-4")).toEqual({ left: -16 });
+  });
+
+  it("should parse negative positioning with fractional values", () => {
+    expect(parseLayout("-top-0.5")).toEqual({ top: -2 });
+    expect(parseLayout("-right-1.5")).toEqual({ right: -6 });
+    expect(parseLayout("-bottom-2.5")).toEqual({ bottom: -10 });
+    expect(parseLayout("-left-3.5")).toEqual({ left: -14 });
+  });
+
+  it("should parse negative positioning with arbitrary values", () => {
+    expect(parseLayout("-top-[10px]")).toEqual({ top: -10 });
+    expect(parseLayout("-right-[20px]")).toEqual({ right: -20 });
+    expect(parseLayout("-bottom-[30]")).toEqual({ bottom: -30 });
+    expect(parseLayout("-left-[40px]")).toEqual({ left: -40 });
+  });
+
+  it("should parse negative positioning with arbitrary percentages", () => {
+    expect(parseLayout("-top-[10%]")).toEqual({ top: "-10%" });
+    expect(parseLayout("-right-[25%]")).toEqual({ right: "-25%" });
+    expect(parseLayout("-bottom-[50%]")).toEqual({ bottom: "-50%" });
+    expect(parseLayout("-left-[100%]")).toEqual({ left: "-100%" });
+  });
 });
 
 describe("parseLayout - inset utilities", () => {
@@ -791,9 +824,11 @@ describe("parseLayout - custom spacing", () => {
     expect(parseLayout("inset-e-xl", customSpacing)).toEqual({ end: 64 });
   });
 
-  it("should support negative values with custom spacing for start/end", () => {
-    // Note: -top-*, -left-*, -right-*, -bottom-* negative prefixes are not supported
-    // Use arbitrary values like top-[-10px] for negative positioning
+  it("should support negative values with custom spacing for positioning", () => {
+    expect(parseLayout("-top-sm", customSpacing)).toEqual({ top: -8 });
+    expect(parseLayout("-right-md", customSpacing)).toEqual({ right: -16 });
+    expect(parseLayout("-bottom-lg", customSpacing)).toEqual({ bottom: -32 });
+    expect(parseLayout("-left-xl", customSpacing)).toEqual({ left: -64 });
     expect(parseLayout("-start-sm", customSpacing)).toEqual({ start: -8 });
     expect(parseLayout("-end-md", customSpacing)).toEqual({ end: -16 });
   });

src/parser/layout.ts

@@ -260,87 +260,127 @@ export function parseLayout(cls: string, customSpacing?: Record<string, number>)
     }
   }
 
-  // Top positioning: top-0, top-4, top-[10px], top-[50%], etc.
-  if (cls.startsWith("top-")) {
-    const topKey = cls.substring(4);
+  // Top positioning: top-0, top-4, top-[10px], top-[50%], -top-4, etc.
+  const topMatch = cls.match(/^(-?)top-(.+)$/);
+  if (topMatch) {
+    const [, negPrefix, topKey] = topMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (topKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: top-[123px], top-[50%], top-[-10px]
+    // Arbitrary values: top-[123px], top-[50%], -top-[10px]
     const arbitraryTop = parseArbitraryInset(topKey);
     if (arbitraryTop !== null) {
+      if (typeof arbitraryTop === "number") {
+        return { top: isNegative ? -arbitraryTop : arbitraryTop };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryTop.endsWith("%")) {
+        const numValue = parseFloat(arbitraryTop);
+        return { top: `${-numValue}%` };
+      }
       return { top: arbitraryTop };
     }
 
     const topValue = insetMap[topKey];
     if (topValue !== undefined) {
-      return { top: topValue };
+      return { top: isNegative ? -topValue : topValue };
     }
   }
 
-  // Right positioning: right-0, right-4, right-[10px], right-[50%], etc.
-  if (cls.startsWith("right-")) {
-    const rightKey = cls.substring(6);
+  // Right positioning: right-0, right-4, right-[10px], right-[50%], -right-4, etc.
+  const rightMatch = cls.match(/^(-?)right-(.+)$/);
+  if (rightMatch) {
+    const [, negPrefix, rightKey] = rightMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (rightKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: right-[123px], right-[50%], right-[-10px]
+    // Arbitrary values: right-[123px], right-[50%], -right-[10px]
     const arbitraryRight = parseArbitraryInset(rightKey);
     if (arbitraryRight !== null) {
+      if (typeof arbitraryRight === "number") {
+        return { right: isNegative ? -arbitraryRight : arbitraryRight };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryRight.endsWith("%")) {
+        const numValue = parseFloat(arbitraryRight);
+        return { right: `${-numValue}%` };
+      }
       return { right: arbitraryRight };
     }
 
     const rightValue = insetMap[rightKey];
     if (rightValue !== undefined) {
-      return { right: rightValue };
+      return { right: isNegative ? -rightValue : rightValue };
     }
   }
 
-  // Bottom positioning: bottom-0, bottom-4, bottom-[10px], bottom-[50%], etc.
-  if (cls.startsWith("bottom-")) {
-    const bottomKey = cls.substring(7);
+  // Bottom positioning: bottom-0, bottom-4, bottom-[10px], bottom-[50%], -bottom-4, etc.
+  const bottomMatch = cls.match(/^(-?)bottom-(.+)$/);
+  if (bottomMatch) {
+    const [, negPrefix, bottomKey] = bottomMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (bottomKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: bottom-[123px], bottom-[50%], bottom-[-10px]
+    // Arbitrary values: bottom-[123px], bottom-[50%], -bottom-[10px]
     const arbitraryBottom = parseArbitraryInset(bottomKey);
     if (arbitraryBottom !== null) {
+      if (typeof arbitraryBottom === "number") {
+        return { bottom: isNegative ? -arbitraryBottom : arbitraryBottom };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryBottom.endsWith("%")) {
+        const numValue = parseFloat(arbitraryBottom);
+        return { bottom: `${-numValue}%` };
+      }
       return { bottom: arbitraryBottom };
     }
 
     const bottomValue = insetMap[bottomKey];
     if (bottomValue !== undefined) {
-      return { bottom: bottomValue };
+      return { bottom: isNegative ? -bottomValue : bottomValue };
     }
   }
 
-  // Left positioning: left-0, left-4, left-[10px], left-[50%], etc.
-  if (cls.startsWith("left-")) {
-    const leftKey = cls.substring(5);
+  // Left positioning: left-0, left-4, left-[10px], left-[50%], -left-4, etc.
+  const leftMatch = cls.match(/^(-?)left-(.+)$/);
+  if (leftMatch) {
+    const [, negPrefix, leftKey] = leftMatch;
+    const isNegative = negPrefix === "-";
 
     // Auto value - return empty object (no-op, removes the property)
     if (leftKey === "auto") {
       return {};
     }
 
-    // Arbitrary values: left-[123px], left-[50%], left-[-10px]
+    // Arbitrary values: left-[123px], left-[50%], -left-[10px]
     const arbitraryLeft = parseArbitraryInset(leftKey);
     if (arbitraryLeft !== null) {
+      if (typeof arbitraryLeft === "number") {
+        return { left: isNegative ? -arbitraryLeft : arbitraryLeft };
+      }
+      // Percentage values with negative prefix
+      if (isNegative && arbitraryLeft.endsWith("%")) {
+        const numValue = parseFloat(arbitraryLeft);
+        return { left: `${-numValue}%` };
+      }
       return { left: arbitraryLeft };
     }
 
     const leftValue = insetMap[leftKey];
     if (leftValue !== undefined) {
-      return { left: leftValue };
+      return { left: isNegative ? -leftValue : leftValue };
     }
   }