purescript-tecton

Tecton is a domain-specific language for authoring CSS, embedded in PureScript. The unique capabilities of PureScript allow Tecton's strongly-typed interface to guard against a wide range of errors while offering a developer experience comparable to that of authoring CSS directly.

Quick example

Input

body ? Rule.do
  width := pct 100
  height := pct 100
  padding := px 16 ~ px 32

media screen { minWidth: px 768 } ?
  body ?
    padding := pct 5 ~ pct 10

Output

body {
  width: 100%;
  height: 100%;
  padding: 16px 32px;
}
@media screen and (min-width: 768px) {
  body {
    padding: 5% 10%;
  }
}

Many more examples are located in the examples and test subdirectories.

Installation

The preferred installation method is Spago.

spago install tecton

If your project's package set doesn't include tecton, then add it in your packages.dhall file first. For example:

let upstream = https://raw.githubusercontent.com/purescript/package-sets/psc-0.15.4-20221010/src/packages.dhall
in  upstream
  with tecton =
    { dependencies =
        [ "colors"
        , "either"
        , "foldable-traversable"
        , "integers"
        , "lists"
        , "numbers"
        , "prelude"
        , "record"
        , "strings"
        , "transformers"
        , "tuples"
        ]
    , repo =
        "https://github.com/nsaunders/purescript-tecton.git"
    , version =
        "master"
    }

Related

• purescript-tecton-halogen