Stitch.Combinators

This module defines most of the functions that are core to the DSL. Most of them are re-exported by Stitch, so you usually shouldn't need to import this module directly (unless you want to use CSS imports).

Documentation

(.=) :: Monad m => Text -> Text -> StitchT m () infix 8

Add a key-value property pair. For example, "color" .= "red" will add color: red to the CSS output.

(?) :: Monad m => Selector -> StitchT m a -> StitchT m a infixr 6

Nest a selector under the current selector. For example, this:

"h1" ? do
  "color" .= "red"
  "a" ?
    "text-decoration" .= "underline"

| results in the following being added to the CSS output:

h1 {
  color: red
}
h1 a {
  text-decoration: underline
}

(-:) :: Monad m => Text -> StitchT m a -> StitchT m a infixr 6

"pref" -: assignments prefixes all the keys of assignments with pref-. This can be useful for putting a bunch of grouped "font" or "border" properties together – for example, the following two actions function the same:

"font" -: do
  "size" .= "1.5rem"
  "family" .= "Helvetica"
  "weight" .= "bold"

"font-size" .= "1.5rem"
"font-family" .= "Helvetica"
"font-weight" .= "bold"

comment :: Monad m => Text -> StitchT m ()

Add a comment to the CSS output. The compressed printer won't add comments to the final CSS output.

cssImport :: Monad m => Text -> StitchT m ()

Add an @import statement to the top-level of the CSS output.