feature: Add CSS Style DSL and Class toggle utilities to uni.dom

[xerial]

Summary

Add CSS Style DSL and Class toggle utilities following React/Vue conventions:

• style object extends DomElement for dual purpose:
  • CSS style builder: style(style.display := "flex", style.gap := "8px")
  • <style> tag element: style("body { margin: 0; }")
• Raw style strings: style := "display: flex;" (Tailwind-friendly)
• Class toggle: cls.toggle("active") when condition
• 65+ type-safe CSS properties

Usage

import wvlet.uni.dom.all.*

val isActive = Rx.variable(false)

div(
  // Grouped CSS properties (React/Vue style)
  style(style.display := "flex", style.gap := "8px"),
  
  // Raw style string (Tailwind-friendly)
  style := "margin: 10px;",
  
  // Class toggle with static/reactive conditions
  cls := "base",
  cls.toggle("active") when isActive
)

// <style> tag element
head(style("body { margin: 0; }"))

Design

The style object extends DomElement("style", ...) to:

1. Override HtmlTags.style without type conflicts
2. Serve as both CSS builder and <style> tag
3. Allow style.display := "flex" syntax for properties

Test plan

• CSS styles tests (8 test cases)
• CSS class toggle tests (8 test cases)
• All existing tests pass (71 tests in domTest)

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello @xerial, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the uni.dom library by introducing a robust and flexible system for managing CSS styles and classes. It provides developers with a type-safe DSL for inline styling, alongside a powerful utility for conditionally applying CSS classes, which can react to changes in application state. These additions streamline front-end development, making it easier to create dynamic and well-styled user interfaces within the uni.dom framework.

Highlights

• Type-Safe CSS Style DSL: Introduced CssStyles with over 60 common CSS properties (e.g., display, gap, color) for type-safe inline styling using a := syntax.
• Raw CSS String Support: Added css := "..." to allow direct application of raw CSS strings, providing flexibility for complex styles or integration with frameworks like Tailwind CSS.
• Conditional CSS Class Toggling: Implemented cls.toggle("className") when condition for dynamically adding or removing CSS classes based on a condition.
• Reactive Class Toggling: The class toggling utility supports both static Boolean conditions and reactive Rx[Boolean] streams, enabling dynamic UI updates.
• Comprehensive Testing: New dedicated test files (CssStylesTest.scala, CssClassTest.scala) have been added with 7 and 8 test cases respectively, ensuring the robustness of the new styling features.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a type-safe CSS style DSL and utilities for toggling CSS classes, which significantly improves the developer experience for styling components in uni.dom. The implementation is well-structured and accompanied by a comprehensive set of tests. The changes are a great addition to the framework. I've provided a few suggestions to improve consistency in the new CssStyles DSL and to align the design document with the final implementation.

[gemini-code-assist]

The implementation of the reactive when in CssClass.scala is simpler and more direct than what is described in this plan. The implementation uses Rx[Boolean] directly, which is clearer. Also, the plan's method body returns an Rx but the signature says DomNode, which is a mismatch. The actual implementation correctly wraps the result in Embedded.

It would be good to update this design document to reflect the final implementation for future reference.

Suggested change

	// Reactive toggle - returns Rx that emits class or empty
	def when[A](rx: RxOps[A])(using ev: A =:= Boolean): DomNode =
	rx.map(v => when(ev(v)))
	// Reactive toggle - returns a DomNode that reactively updates the class
	def when(rx: Rx[Boolean]): DomNode =
	Embedded(rx.map(cond => when(cond)))

[gemini-code-assist]

The implementation of cls in HtmlAttrs.scala also includes a := operator for setting the class directly, for consistency with the new style DSL. This design document should be updated to include it.

Suggested change

	object cls extends DomAttributeOf("class"):
	def toggle(className: String): ClassToggle = ClassToggle(className)
	object cls extends DomAttributeOf("class"):
	def :=[V: EmbeddableAttribute](v: V): DomNode = apply(v)
	def toggle(className: String): ClassToggle = ClassToggle(className)

[gemini-code-assist]

For consistency with StyleProperty and to make style composition more robust, it's a good practice to ensure the raw CSS string ends with a semicolon. The current implementation passes the raw string as-is, while StyleProperty always adds a semicolon. This can lead to unexpected behavior if a user provides a style string without a trailing semicolon when combining it with other styles.

By ensuring a trailing semicolon, we make the behavior more predictable and less reliant on the browser's cssText parsing leniency.

    def :=(value: String): DomAttribute = {
      val trimmed = value.trim
      val finalValue = if (trimmed.nonEmpty && !trimmed.endsWith(";")) s"${trimmed};" else trimmed
      DomAttribute("style", finalValue, append = true)
    }