Merge branch main

Sources/TokamakCore/Modifiers/FlexFrameLayout.swift

@@ -26,11 +26,11 @@ public struct _FlexFrameLayout: ViewModifier {
   // These are special cases in SwiftUI, where the child
   // will request the entire width/height of the parent.
   public var fillWidth: Bool {
-    minWidth == 0 && maxWidth == .infinity
+    (minWidth == 0 || minWidth == nil) && maxWidth == .infinity
   }
 
   public var fillHeight: Bool {
-    minHeight == 0 && maxHeight == .infinity
+    (minHeight == 0 || minHeight == nil) && maxHeight == .infinity
   }
 
   init(

Sources/TokamakCore/Views/Containers/List/List.swift

@@ -81,12 +81,14 @@ public struct List<SelectionValue, Content>: View
   @_spi(TokamakCore)
   public var body: some View {
     if let style = style as? ListStyleDeferredToRenderer {
-      style.listBody(ScrollView {
-        HStack { Spacer() }
-        listStack
-          .environment(\._outlineGroupStyle, _ListOutlineGroupStyle())
-      })
-        .frame(minHeight: 0, maxHeight: .infinity)
+      ScrollView {
+        style.listBody(Group {
+          HStack { Spacer() }
+          listStack
+            .environment(\._outlineGroupStyle, _ListOutlineGroupStyle())
+        })
+      }
+      .frame(maxHeight: .infinity, alignment: .topLeading)
     } else {
       ScrollView {
         HStack { Spacer() }

Sources/TokamakCore/Views/Containers/Section.swift

@@ -86,7 +86,7 @@ extension Section: View, SectionView where Parent: View, Content: View, Footer:
         sectionContent(style)
         footerView(style)
       }
-      .frame(minWidth: 0, maxWidth: .infinity)
+      .frame(maxWidth: .infinity, alignment: .leading)
     )
   }
 }

Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift

@@ -33,7 +33,28 @@ private extension DOMViewModifier {
   }
 }
 
+private extension VerticalAlignment {
+  var flexAlignment: String {
+    switch self {
+    case .top: return "flex-start"
+    case .center: return "center"
+    case .bottom: return "flex-end"
+    }
+  }
+}
+
+private extension HorizontalAlignment {
+  var flexAlignment: String {
+    switch self {
+    case .leading: return "flex-start"
+    case .center: return "center"
+    case .trailing: return "flex-end"
+    }
+  }
+}
+
 extension _FrameLayout: DOMViewModifier {
+  public var isOrderDependent: Bool { true }
   public var attributes: [HTMLAttribute: String] {
     ["style": """
     \(unwrapToStyle(\.width, property: "width"))
@@ -43,11 +64,15 @@ extension _FrameLayout: DOMViewModifier {
     white-space: nowrap;
     flex-grow: 0;
     flex-shrink: 0;
+    display: flex;
+    align-items: \(alignment.vertical.flexAlignment);
+    justify-content: \(alignment.horizontal.flexAlignment);
     """]
   }
 }
 
 extension _FlexFrameLayout: DOMViewModifier {
+  public var isOrderDependent: Bool { true }
   public var attributes: [HTMLAttribute: String] {
     ["style": """
     \(unwrapToStyle(\.minWidth, property: "min-width"))
@@ -61,6 +86,9 @@ extension _FlexFrameLayout: DOMViewModifier {
     white-space: nowrap;
     flex-grow: 0;
     flex-shrink: 0;
+    display: flex;
+    align-items: \(alignment.vertical.flexAlignment);
+    justify-content: \(alignment.horizontal.flexAlignment);
     """]
   }
 }

Sources/TokamakStaticHTML/Sanitizer.swift

@@ -61,7 +61,7 @@ enum Sanitizers {
       static let h: RegularExpression = #"[0-9a-f]"#
 
       /// `[\240-\377]`
-      static let nonAscii: RegularExpression = #"[\240-\377]"#
+      static let nonAscii: RegularExpression = #"[\0240-\0377]"#
 
       /// `\\{h}{1,6}(\r\n|[ \t\r\n\f])?`
       static let unicode: RegularExpression = #"\\\#(h){1,6}(\r\n|[ \t\r\n\f])?"#
@@ -75,9 +75,11 @@ enum Sanitizers {
       static let nmChar: RegularExpression = #"[_a-z0-9-]|\#(nonAscii)|\#(escape)"#
 
       /// `\"([^\n\r\f\\"]|\\{nl}|{escape})*\"`
-      static let string1: RegularExpression = #"\"([^\n\r\f\\"]|\\\#(nl)|\#(escape))*\""#
+      static let string1Content: RegularExpression = #"([^\n\r\f\\"]|\\\#(nl)|\#(escape))*"#
+      static let string1: RegularExpression = #""\#(string1Content)""#
       /// `\'([^\n\r\f\\']|\\{nl}|{escape})*\'`
-      static let string2: RegularExpression = #"\'([^\n\r\f\\']|\\\#(nl)|\#(escape))*\'"#
+      static let string2Content: RegularExpression = #"([^\n\r\f\\']|\\\#(nl)|\#(escape))*"#
+      static let string2: RegularExpression = #"'\#(string2Content)'"#
 
       /// `-?{nmstart}{nmchar}*`
       static let ident: RegularExpression = #"-?\#(nmStart)\#(nmChar)*"#
@@ -105,12 +107,13 @@ enum Sanitizers {
       }
 
       static func sanitize(_ input: String) -> String {
-        (
+        """
+        '\(
           Parsers.string1.matches(input)
-            ? Parsers.string1.filter(input)
-            : Parsers.string2.filter(input)
-        )
-        .replacingOccurrences(of: "\"", with: """)
+            ? Parsers.string1Content.filter(input)
+            : Parsers.string2Content.filter(input)
+            .replacingOccurrences(of: "\"", with: """))'
+        """
       }
     }
   }

Sources/TokamakStaticHTML/Views/Containers/List.swift

@@ -133,7 +133,7 @@ extension InsetGroupedListStyle: ListStyleDeferredToRenderer {
         .font(.caption)
         .padding([.top, .leading])
         .padding(.leading)
-        .frame(minWidth: 0, maxWidth: .infinity)
+        .frame(maxWidth: .infinity, alignment: .leading)
     )
   }
 
@@ -144,7 +144,7 @@ extension InsetGroupedListStyle: ListStyleDeferredToRenderer {
         .background(Color.listGroupBackground)
         .cornerRadius(10)
         .padding([.horizontal, .top])
-        .frame(minWidth: 0, maxWidth: .infinity)
+        .frame(maxWidth: .infinity, alignment: .leading)
     )
   }
 
@@ -180,7 +180,7 @@ extension SidebarListStyle: ListStyleDeferredToRenderer {
   }
 
   public func listRow<Row>(_ row: Row) -> AnyView where Row: View {
-    AnyView(row.frame(minWidth: 0, maxWidth: .infinity))
+    AnyView(row.frame(maxWidth: .infinity, alignment: .leading))
   }
 
   public func listBody<ListBody>(_ content: ListBody) -> AnyView where ListBody: View {

Tests/TokamakStaticHTMLTests/RenderingTests.swift

@@ -245,6 +245,16 @@ final class RenderingTests: XCTestCase {
     )
   }
 
+  func testFrames() {
+    assertSnapshot(
+      matching: Color.red
+        .frame(width: 20, height: 20)
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing),
+      as: .image(size: .init(width: 50, height: 50)),
+      timeout: defaultSnapshotTimeout
+    )
+  }
+
   func testAspectRatio() {
     assertSnapshot(
       matching: Ellipse()

Tests/TokamakStaticHTMLTests/SanitizerTests.swift

@@ -22,12 +22,13 @@ final class SanitizerTests: XCTestCase {
     XCTAssertTrue(Sanitizers.CSS.validate(string: "\'hello\'"))
 
     XCTAssertEqual(Sanitizers.CSS.sanitize(string: "'hello world'"), "'hello world'")
-    XCTAssertEqual(Sanitizers.CSS.sanitize(string: "\"hello world\""), ""hello world"")
-    XCTAssertEqual(Sanitizers.CSS.sanitize(string: "hello'''world"), "''")
+    XCTAssertEqual(Sanitizers.CSS.sanitize(string: "\"hello world\""), "'hello world'")
+    XCTAssertEqual(Sanitizers.CSS.sanitize(string: "hello'''world"), "'helloworld'")
   }
 
   func testCSSIdentifier() {
     XCTAssertFalse(Sanitizers.CSS.validate(identifier: "\"hey there\""))
+    XCTAssertFalse(Sanitizers.CSS.validate(identifier: "1hey-there"))
     XCTAssertTrue(Sanitizers.CSS.validate(identifier: "hey-there"))
     XCTAssertTrue(Sanitizers.CSS.validate(identifier: "-hey-there2"))
 
@@ -38,5 +39,6 @@ final class SanitizerTests: XCTestCase {
 
   func testCSSSanitizer() {
     XCTAssertEqual(Sanitizers.CSS.sanitize("hello world"), "'hello world'")
+    XCTAssertEqual(Sanitizers.CSS.sanitize("hello-world"), "hello-world")
   }
 }