Extensions - JeremS/cljss-core GitHub Wiki

cljss is designed to be extensible, or at least tries to. The way to do it is to implement some protocols. This way you can use your own data structure as valid 'words' of the dsl.

Protocols

The extension model rests primarily on the use of the protocols found in the namespace cljss.protocols

  • cljss.protocols.CssSelector implemented by everything that can be used as a css selector.

  • cljss.protocols.CssPropertyValue implemented by data that would be used as property values

Considerations

Right now, this guide doesn't speak about the CSSand CssPropertyValue protocols since adding its own data for rules or css property names is a bit more complicated.

Example

The cljss-units project is an example of such an extension. It's implementing the protocols to make units defined in units usable in cljss.

The extention allows rules like:

(css [:div#container :width (/ (px 10) 2)])
;=> "div { width: 5px; }"
; with (/ (px 10)) => (px 5)

To do so cljss protocols are extended this way:

(defrecord Pixel [mag]
  CssPropertyValue
  (compile-as-property-value [this]
    (str mag "px")))