Web components

Makefile

@@ -42,7 +42,7 @@ test:
 	swift test --parallel
 
 docker-test:
-	docker build -t tests . -f ./docker/Dockerfile.testing && docker run --rm tests
+	docker build -t swift-web-standards-tests . -f ./docker/tests/Dockerfile && docker run --rm swift-web-standards-tests
 
 
 

Package.swift

@@ -2,16 +2,15 @@
 import PackageDescription
 
 // NOTE: https://github.com/swift-server/swift-http-server/blob/main/Package.swift
-var defaultSwiftSettings: [SwiftSetting] =
-[
+var defaultSwiftSettings: [SwiftSetting] = [
     // https://github.com/swiftlang/swift-evolution/blob/main/proposals/0441-formalize-language-mode-terminology.md
     .swiftLanguageMode(.v6),
     // https://github.com/swiftlang/swift-evolution/blob/main/proposals/0444-member-import-visibility.md
     .enableUpcomingFeature("MemberImportVisibility"),
     // https://forums.swift.org/t/experimental-support-for-lifetime-dependencies-in-swift-6-2-and-beyond/78638
     .enableExperimentalFeature("Lifetimes"),
     // https://github.com/swiftlang/swift/pull/65218
-    .enableExperimentalFeature("AvailabilityMacro=swift-web-standards 1.0:macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0"),
+    .enableExperimentalFeature("AvailabilityMacro=swiftWebStandards 1.0:macOS 15.0, iOS 18.0, tvOS 18.0, watchOS 11.0, visionOS 2.0"),
 ]
 
 #if compiler(>=6.2)
@@ -37,7 +36,10 @@ let package = Package(
     ],
     dependencies: [
         // [docc-plugin-placeholder]
-        .package(url: "https://github.com/apple/swift-collections", .upToNextMinor(from: "1.3.0")),
+        .package(
+            url: "https://github.com/apple/swift-collections",
+            from: "1.3.0"
+        ),
     ],
     targets: [
         .target(

README.md

@@ -2,7 +2,11 @@
 
 An awesome Swift library that closely follows the [W3C web standards](https://www.w3.org/standards/).
 
-[![Release: 1.0.0-beta.2](https://img.shields.io/badge/Release-1.0.0--beta.2-F05138)]( https://github.com/binarybirds/swift-web-standards/releases/tag/1.0.0-beta.2)
+[
+    ![Release: 1.0.0-beta.1](https://img.shields.io/badge/Release-1.0.0--beta.1-F05138)
+](
+    https://github.com/binarybirds/swift-web-standards/releases/tag/1.0.0-beta.1
+)
 
 ## Features
 
@@ -46,7 +50,7 @@ The Swift Web Standards package is distributed through **Swift Package Manager**
 Add this package to your `Package.swift` dependencies:
 
 ```swift
-.package(url: "https://github.com/binarybirds/swift-web-standards", from: "1.0.0-beta.2"),
+.package(url: "https://github.com/binarybirds/swift-web-standards", from: "1.0.0-beta.1"),
 ```
 
 Then include the required product as a dependency for your target:
@@ -325,7 +329,11 @@ let css = Stylesheet {
 print(StylesheetRenderer(minify: false, indent: 4).render(css))
 ```
 
-[![DocC API documentation](https://img.shields.io/badge/DocC-API_documentation-F05138)](https://binarybirds.github.io/swift-web-standards)
+[
+    ![DocC API documentation](https://img.shields.io/badge/DocC-API_documentation-F05138)
+](
+    https://binarybirds.github.io/swift-web-standards
+)
 
 API documentation is available at the following link.
 

Sources/CSS/Properties/BackdropFilter.swift

@@ -7,31 +7,13 @@
 /// CSS `backdrop-filter` property.
 /// Provides typed values for this declaration.
 public struct BackdropFilter: Property {
-    /// Supported length value for `backdrop-filter: blur(...)`.
-    public struct BlurLength: UnitRepresentable, Sendable {
-        public let rawValue: String
-
-        /// Creates a blur length from a CSS `Unit`.
-        /// Returns `nil` for unsupported units (for example `%`).
-        public init?<T>(
-            _ unit: Unit<T>
-        ) where T: Numeric & Sendable {
-            switch unit.type {
-            case .cm, .mm, .in, .px, .pt, .pc, .em, .ex, .ch, .rem, .vw, .vh,
-                .vmin, .vmax:
-                self.rawValue = unit.rawValue
-            case .percent:
-                return nil
-            }
-        }
-    }
 
     /// Value options for the `backdrop-filter` property.
     public enum Value: Sendable {
         /// Default value. Specifies no effects.
         case none
         /// Applies a blur effect to the backdrop.
-        case blur(BlurLength)
+        case blur(UnitRepresentable)
         /// Sets this property to its default value.
         case initial
         /// Inherits this property from its parent element.
@@ -65,17 +47,6 @@ public struct BackdropFilter: Property {
         self.isImportant = false
     }
 
-    /// Convenience initializer for `backdrop-filter: blur(...)` using `Unit`.
-    /// Returns `nil` when the supplied unit is unsupported by blur().
-    public init?<T>(
-        blur unit: Unit<T>
-    ) where T: Numeric & Sendable {
-        guard let blurLength = BlurLength(unit) else {
-            return nil
-        }
-        self.init(.blur(blurLength))
-    }
-
     // TODO: add support for the remaining backdrop-filter functions:
     // - brightness()
     // - contrast()

Sources/CSS/Properties/Border.swift

@@ -11,7 +11,8 @@
 public struct Border: Property {
     /// Value options for the `border` property.
     public enum Value: Sendable {
-        case values(BorderWidth.Value, BorderStyle.Value, CSSColor)
+
+        case values(BorderWidth.Value, BorderStyle.Value?, CSSColor?)
         /// Sets this property to its default value.
         case initial
         /// Inherits this property from its parent element.
@@ -20,8 +21,9 @@ public struct Border: Property {
         var rawValue: String {
             switch self {
             case .values(let width, let style, let color):
-                return width.rawValue + " " + style.rawValue + " "
-                    + color.rawValue
+                return [width.rawValue, style?.rawValue, color?.rawValue]
+                    .compactMap { $0 }
+                    .joined(separator: " ")
             case .initial:
                 return "initial"
             case .inherit:
@@ -43,4 +45,21 @@ public struct Border: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
+
 }

Sources/CSS/Properties/BorderBottom.swift

@@ -19,4 +19,20 @@ public struct BorderBottom: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderLeft.swift

@@ -19,4 +19,20 @@ public struct BorderLeft: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderRadius.swift

@@ -53,6 +53,15 @@ public struct BorderRadius: Property {
         self.isImportant = false
     }
 
+    public init(
+        _ v1: UnitRepresentable,
+        _ v2: UnitRepresentable? = nil,
+        _ v3: UnitRepresentable? = nil,
+        _ v4: UnitRepresentable? = nil
+    ) {
+        self.init(.length(v1, v2, v3, v4))
+    }
+
     // @TODO: better API for all value cases
     // https://www.w3schools.com/cssref/css3_pr_border-radius.asp
 }

Sources/CSS/Properties/BorderRight.swift

@@ -19,4 +19,20 @@ public struct BorderRight: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/BorderTop.swift

@@ -19,4 +19,20 @@ public struct BorderTop: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ width: BorderWidth.Value,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.values(width, style, color))
+    }
+
+    public init(
+        _ width: UnitRepresentable,
+        _ style: BorderStyle.Value? = nil,
+        _ color: CSSColor? = nil
+    ) {
+        self.init(.length(width), style, color)
+    }
 }

Sources/CSS/Properties/Bottom.swift

@@ -7,6 +7,7 @@
 /// CSS `bottom` property.
 /// Provides typed values for this declaration.
 public struct Bottom: Property {
+
     /// Value options for the `bottom` property.
     public enum Value: Sendable {
         /// Lets the browser calculate the bottom edge position. This is default.
@@ -45,4 +46,10 @@ public struct Bottom: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ value: UnitRepresentable
+    ) {
+        self.init(.length(value))
+    }
 }

Sources/CSS/Properties/Flex.swift

@@ -9,7 +9,7 @@
 public struct Flex: Property {
     /// Value options for the `flex` property.
     public enum Value: Sendable {
-        case values(FlexGrow.Value, FlexShrink.Value, FlexBasis.Value)
+        case values(FlexGrow.Value, FlexShrink.Value?, FlexBasis.Value?)
         /// Same as 1 1 auto.
         case auto
         /// Same as 0 0 auto.
@@ -22,7 +22,8 @@ public struct Flex: Property {
         var rawValue: String {
             switch self {
             case .values(let grow, let shrink, let basis):
-                return [grow.rawValue, shrink.rawValue, basis.rawValue]
+                return [grow.rawValue, shrink?.rawValue, basis?.rawValue]
+                    .compactMap { $0 }
                     .joined(separator: " ")
             case .auto:
                 return "auto"
@@ -57,9 +58,17 @@ public struct Flex: Property {
     ///   - basis: The basis value.
     public init(
         _ grow: FlexGrow.Value,
-        _ shrink: FlexShrink.Value,
-        _ basis: FlexBasis.Value
+        _ shrink: FlexShrink.Value? = nil,
+        _ basis: FlexBasis.Value? = nil
     ) {
         self.init(.values(grow, shrink, basis))
     }
+
+    public init(
+        _ grow: Int,
+        _ shrink: FlexShrink.Value? = nil,
+        _ basis: FlexBasis.Value? = nil
+    ) {
+        self.init(.number(grow), shrink, basis)
+    }
 }

Sources/CSS/Properties/FontFamily.swift

@@ -41,4 +41,16 @@ public struct FontFamily: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ values: [String]
+    ) {
+        self.init(.family(values.joined(separator: ",")))
+    }
+
+    public init(
+        _ values: String...
+    ) {
+        self.init(values)
+    }
 }

Sources/CSS/Properties/FontSize.swift

@@ -7,6 +7,7 @@
 /// CSS `font-size` property.
 /// Provides typed values for this declaration.
 public struct FontSize: Property {
+
     /// Value options for the `font-size` property.
     public enum Value: Sendable {
         /// Sets the font-size to a medium size. This is default.
@@ -77,4 +78,10 @@ public struct FontSize: Property {
         self.value = value.rawValue
         self.isImportant = false
     }
+
+    public init(
+        _ value: UnitRepresentable
+    ) {
+        self.init(.length(value))
+    }
 }

Sources/CSS/Properties/Gap.swift

@@ -16,9 +16,21 @@ public struct Gap: Property {
     /// - Parameters:
     ///   - row: The row value.
     ///   - col: The col value.
-    public init(_ row: RowGap.Value, _ col: ColumnGap.Value) {
+    public init(
+        _ row: RowGap.Value,
+        _ col: ColumnGap.Value? = nil
+    ) {
         self.name = "gap"
-        self.value = [row.rawValue, col.rawValue].joined(separator: " ")
+        self.value = [row.rawValue, col?.rawValue]
+            .compactMap { $0 }
+            .joined(separator: " ")
         self.isImportant = false
     }
+
+    public init(
+        _ row: UnitRepresentable,
+        _ col: UnitRepresentable? = nil
+    ) {
+        self.init(.length(row), col.map { .length($0) })
+    }
 }