Custom CSS styles

[MaxDesiatov]

I've been thinking about CSS-specific styles that one might want to add to further customize generated styles, somewhat similar in principle to the HTML view that allows injecting arbitrary HTML. I'm still not sure if there should be a modifier that allows adding arbitrary HTML attributes to a rendered HTML node, or specialized modifiers like cssStyle() for specifying styles and cssClassName() for specifying a class name.

I also had in mind something like protocol CustomCSSAttributes which would allow any user to conform their views (or existing views provided by Tokamak) to this protocol, providing their custom global attributes. The use case for this are popular styling libraries (and obviously proprietary design systems that people may use) that have existing CSS code. For example, Semantic UI requires buttons to have ui button classes on them:

<button class="ui button">
  Button
</button>

Tokamak could allow achieving that for all buttons globally like this:

extension Button: CustomCSSAttributes {
  var customAttributes: [String: String] { ["class": "ui button"] }
}

The protocol approach and the modifiers approach would not be mutually exclusive, the reasoning is that modifiers would apply tweaks only locally, while protocol conformance would be visible globally. There's some bikeshedding needed here, but overall what are your thoughts?

Don't know if creating a separate issue for this proposal would be more suitable.

[j-f1]

I was looking Into making type-safe version of this (maybe something like .margin(left: 2.em) or something?) but it seemed like a lot of work. Maybe it could be generated automatically?

[MaxDesiatov]

@carson-katri could your swift-css package become relevant in any way?

[carson-katri]

Yeah, it has pretty much all of the CSS properties input as enumerations. Here's the relevant discussion: https://github.com/swiftwasm/Tokamak/pull/114#issuecomment-650790894

[aehlke]

how does this fit into the new fiber renderer concept?