Add the ability to use numerical values when specifying font sizes. (#59

)
ClutchEngineering · Aug 3, 2024 · b7c01a3 · b7c01a3
1 parent 8a7fc4d
commit b7c01a3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift b/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift
@@ -29,5 +29,38 @@ extension View {
   public func fontSize(_ fontSize: FontSize) -> some View {
     return self.modifier(ClassModifier(add: "text-" + fontSize.rawValue))
   }
+
+  /// Set the font size to the closest equivalent Tailwind CSS font size.
+  ///
+  /// - Parameter fontSize: A font size in `pt` units. if the size is exactly between
+  /// two font classes, then the smaler font will be used.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontSize(_ ptSize: Int) -> some View {
+    return fontSize(closestTailwindFontSize(ptSize: ptSize))
+  }
+
+  private func closestTailwindFontSize(ptSize: Int) -> FontSize {
+    // Mapping of Tailwind CSS font size classes to their point sizes.
+    let fontSizeMapping: [(fontSize: FontSize, ptSize: Int)] = [
+      (.extraSmall, 12),            // 0.75rem (12pt)
+      (.small, 14),                 // 0.875rem (14pt)
+      (.base, 16),                  // 1rem (16pt)
+      (.large, 18),                 // 1.125rem (18pt)
+      (.extraLarge, 20),            // 1.25rem (20pt)
+      (.extraExtraLarge, 24),       // 1.5rem (24pt)
+      (.extraExtraExtraLarge, 30),  // 1.875rem (30pt)
+      (.fourXLarge, 36),            // 2.25rem (36pt)
+      (.fiveXLarge, 48),            // 3rem (48pt)
+      (.sixXLarge, 60),             // 3.75rem (60pt)
+      (.sevenXLarge, 72),           // 4.5rem (72pt)
+      (.eightXLarge, 96),           // 6rem (96pt)
+      (.nineXLarge, 128)            // 8rem (128pt)
+    ]
+    // Find the closest matching font size
+    let closestFontSize = fontSizeMapping.min { abs($0.ptSize - ptSize) < abs($1.ptSize - ptSize) }
+    return closestFontSize?.fontSize ?? .base
+  }
 }
 
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -25,6 +25,7 @@ private struct CatalogSite: View {
           H2 {
             Text("Heading 2")
           }
+          .fontSize(32)
           .textAlignment(.center)
           H3("Heading 3")
             .textAlignment(.trailing)
@@ -54,7 +55,7 @@ struct CatalogSiteTests {
    Hello
    <br />world!
    <h1 class="text-xl text-start">Heading 1</h1>
-   <h2 class="text-center">Heading 2</h2>
+   <h2 class="text-3xl text-center">Heading 2</h2>
    <h3 class="text-end">Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>

diff --git a/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift
@@ -3,10 +3,7 @@ import Testing
 import Slipstream
 
 struct FontSizeTests {
-  @Test func alignments() throws {
-    try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(.small)) == #"<div class="text-sm"></div>"#)
-
+  @Test func enumFontSizes() throws {
     try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"<div class="text-xs"></div>"#)
     try #expect(renderHTML(Div {}.fontSize(.small)) == #"<div class="text-sm"></div>"#)
     try #expect(renderHTML(Div {}.fontSize(.base)) == #"<div class="text-base"></div>"#)
@@ -21,4 +18,27 @@ struct FontSizeTests {
     try #expect(renderHTML(Div {}.fontSize(.eightXLarge)) == #"<div class="text-8xl"></div>"#)
     try #expect(renderHTML(Div {}.fontSize(.nineXLarge)) == #"<div class="text-9xl"></div>"#)
   }
+
+  @Test func numericalFontSizes() throws {
+    try #expect(renderHTML(Div {}.fontSize(6)) == #"<div class="text-xs"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(12)) == #"<div class="text-xs"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(13)) == #"<div class="text-xs"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(14)) == #"<div class="text-sm"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(15)) == #"<div class="text-sm"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(16)) == #"<div class="text-base"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(17)) == #"<div class="text-base"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(18)) == #"<div class="text-lg"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(19)) == #"<div class="text-lg"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(20)) == #"<div class="text-xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(22)) == #"<div class="text-xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(24)) == #"<div class="text-2xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(30)) == #"<div class="text-3xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(36)) == #"<div class="text-4xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(48)) == #"<div class="text-5xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(60)) == #"<div class="text-6xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(72)) == #"<div class="text-7xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(96)) == #"<div class="text-8xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(128)) == #"<div class="text-9xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(200)) == #"<div class="text-9xl"></div>"#)
+  }
 }