Skip to content

v0.12.0 - CSS Code Extraction to swift-css

Choose a tag to compare

View all tags
@coenttb coenttb released this 16 Dec 20:35
0.12.0
2f7eac3

v0.12.0 - CSS Code Extraction to swift-css

This release represents a major architectural change that extracts CSS-related code from swift-html into the dedicated swift-css package. This creates a cleaner separation of concerns and enables CSS functionality to be used independently of HTML.

⚠️ Breaking Changes

Dependency Changes

You now need to add swift-css as a dependency to access CSS functionality:

.package(url: "https://github.com/coenttb/swift-css", from: "0.3.0")

Import Changes

// Before (0.11.x)
import HTML

// After (0.12.0)
import HTML
import CSS        // For core CSS functionality
import CSS_Theming // For themed colors with dark mode

🗑️ Removed from swift-html

The following code has been moved to swift-css:

Color System (6 files)

File New Location
DarkModeColor.swift CSS/DarkModeColor/
ColorConvertible.swift CSS/DarkModeColor/
ColorProperty.swift CSS/DarkModeColor/
Color.WithDarkMode.swift Deprecated
CSS_Standard.Color.swift CSS/DarkModeColor/
CSS_Standard.Color.Value.swift CSS/DarkModeColor/

CSS Color Property Extensions (24 files)

All moved to CSS/DarkModeColor/Properties/:

  • CSS+color.swift
  • CSS+backgroundColor.swift
  • CSS+accentColor.swift
  • CSS+caretColor.swift
  • CSS+outlineColor.swift
  • CSS+borderColor.swift
  • CSS+borderTopColor.swift, CSS+borderBottomColor.swift
  • CSS+borderLeftColor.swift, CSS+borderRightColor.swift
  • CSS+borderBlockColor.swift, CSS+borderBlockStartColor.swift, CSS+borderBlockEndColor.swift
  • CSS+borderInlineColor.swift, CSS+borderInlineStartColor.swift, CSS+borderInlineEndColor.swift
  • CSS+columnRuleColor.swift
  • CSS+textDecorationColor.swift
  • CSS+textEmphasisColor.swift
  • CSS+fill.swift, CSS+stroke.swift
  • CSS+floodColor.swift, CSS+stopColor.swift, CSS+lightingColor.swift

Layout Helpers (10 files)

All moved to CSS/Layout/:

  • Flex.swift
  • Margin.swift
  • Padding.swift
  • Position.swift
  • Side.swift
  • CSS+spacing.swift
  • CSS+gridItem.swift
  • CSS+gridContainer.swift
  • CSS+positioned.swift
  • CSS+frame.swift

Other Utilities (7 files)

File New Location
AlignItems.swift CSS/Alignment/
Border.swift CSS Theming/
CSS+border.swift CSS Theming/
CSS+text.swift CSS/
Media.swift CSS/
ListStyle.swift CSS/
VerticalAlign.swift CSS/

Test Files Removed

  • HTMLTheme Tests/Color Palette Tests.swift → Now in swift-css
  • HTMLTheme Tests/Theme Structure Tests.swift → Now in swift-css
  • HTMLTheme Tests/Theme Variants Tests.swift → Now in swift-css
  • HTMLTheme Tests/Dot Syntax Tests.swift → Now in swift-css
  • HTMLTheme Tests/HTMLTheme Tests.swift → Now in swift-css

🔄 Behavioral Changes

Color Resolution

Color statics (.red, .blue, .green, .gray800, etc.) now resolve to themed DarkModeColor values with automatic dark mode support:

// 0.11.x: .red resolved to CSS named color "red"
div.css.color(.red) // → color: red

// 0.12.0: .red resolves to themed DarkModeColor with dark mode
div.css.color(.red) // → color: #cc3333 + @media (prefers-color-scheme: dark) { color: #ff1a1a }

isSingleColor Optimization

When light == dark in a DarkModeColor, no dark mode media query is generated:

// Single color - no dark mode CSS generated
DarkModeColor(light: .red, dark: .red)
// → color: #cc3333

// Different colors - dark mode CSS generated  
DarkModeColor(light: .red, dark: .blue)
// → color: #cc3333 + @media (prefers-color-scheme: dark) { color: #3399ff }

Using Raw CSS Colors

To use raw CSS colors without dark mode, use explicit types:

// Raw CSS named color (no dark mode)
div.css.color(Color.color(.named(.red))) // → color: red

// Raw hex color (no dark mode)
div.css.color(Color.color(.hex("FF0000"))) // → color: #FF0000

📦 Migration Guide

Step 1: Update Package.swift

dependencies: [
    .package(url: "https://github.com/coenttb/swift-html", from: "0.12.0"),
    .package(url: "https://github.com/coenttb/swift-css", from: "0.3.0"),
]

Step 2: Update Imports

import HTML
import CSS
import CSS_Theming  // If using themed colors

Step 3: Update Color Usage (if needed)

If you relied on .red producing just color: red:

// Change from:
.css.color(.red)

// To (for raw CSS color):
.css.color(Color.color(.named(.red)))

// Or keep as-is to get themed dark mode support

Step 4: Update Tests

Update snapshot expectations to account for dark mode CSS output from themed colors.

🧪 Test Changes

  • All 122 swift-html tests pass
  • Test snapshots updated for themed color behavior
  • HTMLTheme test suite moved to swift-css (213 tests)

📚 Related Packages

Full Changelog

0.11.1...0.12.0

Assets 2
Loading