Add support for negative margins. (#194)

ClutchEngineering · Sep 15, 2024 · 96d70cc · 96d70cc
1 parent 4384a7d
commit 96d70cc
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/Sources/Slipstream/TailwindCSS/Edge.swift b/Sources/Slipstream/TailwindCSS/Edge.swift
@@ -74,6 +74,8 @@ public enum Edge: Int8, CaseIterable {
   /// - Parameter size: The size in points to be mapped.
   /// - Returns: The Tailwind CSS spacing class.
   static func pointToTailwindSpacingClass(ptLength: Double) -> String {
+    let ptLength = abs(ptLength)
+
     // Tailwind spacing classes and their corresponding sizes in points.
     let mapping: [(name: String, ptLength: Double)] = [
       ("0", 0),    // 0pt

diff --git a/Sources/Slipstream/TailwindCSS/Spacing/View+margin.swift b/Sources/Slipstream/TailwindCSS/Spacing/View+margin.swift
@@ -23,6 +23,15 @@ public struct MarginValue {
   }
   fileprivate let storage: Storage
 
+  var isNegative: Bool {
+    switch storage {
+    case .rawValue(let value):
+      return value < 0
+    case .auto:
+      return false
+    }
+  }
+
   /// Returns the margin value as the closest Tailwind CSS spacing class.
   ///
   /// - Returns: The Tailwind CSS spacing class string.
@@ -75,6 +84,9 @@ extension View {
         }
       }
     }
+    if length.isNegative {
+      classes = classes.map { "-" + $0 }
+    }
     return modifier(TailwindClassModifier(add: classes.joined(separator: " "), condition: condition))
   }
 

diff --git a/Tests/SlipstreamTests/TailwindCSS/Spacing/MarginTests.swift b/Tests/SlipstreamTests/TailwindCSS/Spacing/MarginTests.swift
@@ -52,6 +52,19 @@ struct MarginTests {
     try #expect(renderHTML(Div {}.margin(.top, 0).margin(.top, 4)) == #"<div class="mt-0 mt-1"></div>"#)
   }
 
+  @Test func negativeMargins() throws {
+    try #expect(renderHTML(Div {}.margin(-8)) == #"<div class="-m-2"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.all, -16)) == #"<div class="-m-4"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.horizontal, -8)) == #"<div class="-mx-2"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.vertical, -12)) == #"<div class="-my-3"></div>"#)
+    try #expect(renderHTML(Div {}.margin([.top, .left], -24)) == #"<div class="-ml-6 -mt-6"></div>"#)
+
+    try #expect(renderHTML(Div {}.margin(.top, -0)) == #"<div class="mt-0"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.left, -4)) == #"<div class="-ml-1"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.bottom, -32)) == #"<div class="-mb-8"></div>"#)
+    try #expect(renderHTML(Div {}.margin(.right, -64)) == #"<div class="-mr-16"></div>"#)
+  }
+
   @Test func condition() throws {
     try #expect(renderHTML(Div {}.margin(8, condition: .init(startingAt: .large))) == #"<div class="lg:m-2"></div>"#)
     try #expect(renderHTML(Div {}.margin(8, condition: .within(Breakpoint.small..<Breakpoint.large))) == #"<div class="max-lg:m-2"></div>"#)