New media query type

Author: tib

Sources/SwiftHtml/MediaQuery.swift

@@ -0,0 +1,47 @@
+//
+//  MediaQuery.swift
+//  SwiftHtml
+//
+//  Created by Tibor Bodecs on 2022. 01. 24..
+//
+
+public struct MediaQuery {
+    
+    public enum Orientation: String {
+        case portrait
+        case landscape
+    }
+    
+    public enum ColorScheme: String {
+        case light
+        case dark
+    }
+
+    var value: String
+        
+}
+
+public extension MediaQuery {
+
+    static let screen = MediaQuery(value: "screen")
+    
+    static func deviceWidth(px: Int) -> MediaQuery {
+        .init(value: "(device-width: \(px)px)")
+    }
+    
+    static func deviceHeight(px: Int) -> MediaQuery {
+        .init(value: "(device-height: \(px)px)")
+    }
+    
+    static func webkitDevicePixelRatio(_ value: Int) -> MediaQuery {
+        .init(value: "(-webkit-device-pixel-ratio: \(value))")
+    }
+    
+    static func orientation(_ value: Orientation) -> MediaQuery {
+        .init(value: "(orientation: \(value.rawValue))")
+    }
+    
+    static func prefersColorScheme(_ value: ColorScheme) -> MediaQuery {
+        .init(value: "(prefers-color-scheme: \(value.rawValue))")
+    }
+}

Sources/SwiftHtml/Tags/A.swift

@@ -77,6 +77,10 @@ public extension A {
         attribute("media", value)
     }
 
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
+    }
+    
     /// Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background).
     ///
     /// Typically used for tracking.

Sources/SwiftHtml/Tags/Area.swift

@@ -54,60 +54,65 @@ open class Area: Tag {
     public init() {
         super.init(Node(type: .empty, name: "area"))
     }
-    
+}
+
+public extension Area {
     /// Specifies an alternate text for the area. Required if the href attribute is present
-    public func alt(_ value: String) -> Self {
+    func alt(_ value: String) -> Self {
         attribute("alt", value)
     }
 
     /// Specifies the coordinates of the area
-    public func coords(_ values: Double...) -> Self {
+    func coords(_ values: Double...) -> Self {
         attribute("coords", values.map {String($0) }.joined(separator: ","))
     }
 
     /// Specifies that the target will be downloaded when a user clicks on the hyperlink
-    public func download(_ value: String) -> Self {
+    func download(_ value: String) -> Self {
         attribute("download", value)
     }
 
     /// Specifies the hyperlink target for the area
-    public func href(_ value: String) -> Self {
+    func href(_ value: String) -> Self {
         attribute("href", value)
     }
 
     /// Specifies the language of the target URL
-    public func hreflang(_ value: String) -> Self {
+    func hreflang(_ value: String) -> Self {
         attribute("hreflang", value)
     }
 
     /// Specifies what media/device the target URL is optimized for
-    public func media(_ value: String) -> Self {
+    func media(_ value: String) -> Self {
         attribute("media", value)
     }
 
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
+    }
+    
     /// Specifies which referrer information to send with the link
-    public func refererPolicy(_ value: RefererPolicy = .origin) -> Self {
+    func refererPolicy(_ value: RefererPolicy = .origin) -> Self {
         attribute("referrerpolicy", value.rawValue)
     }
 
     /// Specifies the relationship between the current document and the target URL
-    public func rel(_ value: Rel) -> Self {
+    func rel(_ value: Rel) -> Self {
         attribute("rel", value.rawValue)
     }
 
     /// Specifies the shape of the area
-    public func shape(_ value: Shape) -> Self {
+    func shape(_ value: Shape) -> Self {
         attribute("shape", value.rawValue)
     }
 
     /// Specifies where to open the target URL
-    public func target(_ value: TargetFrame) -> Self {
+    func target(_ value: TargetFrame) -> Self {
         attribute("target", value.rawValue)
     }
 
     /// Specifies the media type of the target URL
-    public func type(_ value: String) -> Self {
+    func type(_ value: String) -> Self {
         attribute("type", value)
     }
 }
-

Sources/SwiftHtml/Tags/Link.swift

@@ -93,6 +93,10 @@ public extension Link {
         attribute("media", value)
     }
 
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
+    }
+    
     /// Specifies which referrer to use when fetching the resource
     func refererPolicy(_ value: RefererPolicy = .origin) -> Self {
         attribute("referrerpolicy", value.rawValue)
@@ -122,4 +126,7 @@ public extension Link {
     func type(_ value: String) -> Self {
         attribute("type", value)
     }
+    
+    
 }
+

Sources/SwiftHtml/Tags/Meta.swift

@@ -87,11 +87,7 @@ public extension Meta {
         attribute("media", value)
     }
 
-    func mediaPrefersColorSchemeLight() -> Self {
-        media("(prefers-color-scheme: light)")
-    }
-
-    func mediaPrefersColorSchemeDark() -> Self {
-        media("(prefers-color-scheme: dark)")
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
     }
 }

Sources/SwiftHtml/Tags/Source.swift

@@ -24,12 +24,8 @@ public extension Source {
         attribute("media", value)
     }
 
-    func mediaPrefersColorSchemeLight() -> Self {
-        media("(prefers-color-scheme: light)")
-    }
-
-    func mediaPrefersColorSchemeDark() -> Self {
-        media("(prefers-color-scheme: dark)")
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
     }
 
     /// Specifies image sizes for different page layouts

Sources/SwiftHtml/Tags/Style.swift

@@ -22,6 +22,10 @@ public extension Style {
     func media(_ value: String) -> Self {
         attribute("media", value)
     }
+
+    func media(_ queries: [MediaQuery]) -> Self {
+        return media(queries.map(\.value).joined(separator: " and "))
+    }
 
     /// Specifies the media type (text/css) of the `<style>` tag
     func css() -> Self {

Tests/SwiftHtmlTests/Tags/LinkTagTests.swift

@@ -0,0 +1,30 @@
+//
+//  File.swift
+//  
+//
+//  Created by Tibor Bodecs on 2022. 01. 24..
+//
+
+import XCTest
+@testable import SwiftHtml
+
+final class LinkTagTests: XCTestCase {
+
+    func testMediaQuery() {
+        let doc = Document {
+            Link(rel: .appleTouchStartupImage)
+                .media([
+                    .screen,
+                    .deviceWidth(px: 320),
+                    .deviceHeight(px: 568),
+                    .webkitDevicePixelRatio(2),
+                    .orientation(.portrait)
+                ])
+                .href("/img/apple/splash/1136x640.png")
+        }
+        let html = DocumentRenderer(minify: true).render(doc)
+        XCTAssertEqual(#"<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/img/apple/splash/1136x640.png">"#, html)
+    }
+    
+
+}

Tests/SwiftHtmlTests/Tags/MetaTagTests.swift

@@ -25,7 +25,7 @@ final class MetaTagTests: XCTestCase {
             Meta()
                 .name(.themeColor)
                 .content("#fff")
-                .mediaPrefersColorSchemeLight()
+                .media([.prefersColorScheme(.light)])
         }
         let html = DocumentRenderer(minify: true).render(doc)
         XCTAssertEqual(##"<meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">"##, html)

Tests/SwiftHtmlTests/Tags/SourceTagTests.swift

@@ -15,7 +15,7 @@ final class SourceTagTests: XCTestCase {
         let doc = Document {
             Source()
                 .srcset("img.png")
-                .mediaPrefersColorSchemeDark()
+                .media([.prefersColorScheme(.dark)])
         }
         let html = DocumentRenderer(minify: true).render(doc)
         XCTAssertEqual(#"<source srcset="img.png" media="(prefers-color-scheme: dark)">"#, html)