Rendering

Just as PureScript code must be compiled to JavaScript to run in the web browser, CSS rules written using Tecton must be rendered to plain CSS strings. Tecton provides two rendering functions depending on your use case, as well as options for pretty-printing or compact output.

Inline styles

To render a group of declarations, use the renderInline function. As the name suggests, the output is appropriate for inline styles, i.e. for use in the style attribute of an HTML element. For example:

module Example where

import Prelude (Unit, ($), (<>))
import Effect (Effect)
import TryPureScript (render) as TryPureScript
import Unsafe.Coerce (unsafeCoerce)

import Color (rgb)
import Tecton
import Tecton.Rule as Rule

renderedInlineStyle :: String
renderedInlineStyle =
  renderInline Rule.do
    width := px 400
    height := px 200
    backgroundColor := rgb 0 5 56
    color := rgb 232 199 148
    display := flex
    alignItems := center
    justifyContent := center
    fontFamily := sansSerif
    fontSize := px 32
    fontWeight := 700

main :: Effect Unit
main =
  TryPureScript.render
    $ unsafeCoerce
    $ "<div style=\"" <> renderedInlineStyle <> "\">Hello world!</div>"

Style sheets

For a style sheet, which contains statements (e.g. selectors and at-rules) instead of "top-level" declarations, use the renderSheet function. This function accepts a configuration argument followed by the CSS parameter. For configuration, choose between the following options:

1. pretty prints the CSS output in a human-readable format.
2. compact optimizes the output for performance, for example removing unnecessary whitespace and using short hex strings for colors.

The following example demonstrates how to render a style sheet with each configuration. Open it in Try PureScript to compare the output.

module Example where

import Prelude (Unit, ($), (<>))
import Effect (Effect)
import TryPureScript (render) as TryPureScript
import Unsafe.Coerce (unsafeCoerce)

import Color (rgb)
import Tecton
import Tecton.Rule as Rule

containerClass = ClassName "container" :: ClassName

css :: CSS
css =
  universal &. containerClass ? Rule.do
    width := px 400
    height := px 200
    backgroundColor := rgb 0 5 56
    color := rgb 232 199 148
    display := flex
    alignItems := center
    justifyContent := center
    fontFamily := sansSerif
    fontSize := px 32
    fontWeight := 700

main :: Effect Unit
main =
  TryPureScript.render
    $ unsafeCoerce
    $ "<style>" <> renderSheet compact css <> "</style>" <>
      "<div class=\"" <> (\(ClassName c) -> c) containerClass <> "\">Hello world!</div>" <>
      "<pre><code>\npretty:\n\n" <>
      renderSheet pretty css <>
      "\n\ncompact:\n" <>
      renderSheet compact css <>
      "</pre></code>"