Css

This library provides an eDSL for creating the CSS files. It uses the Writer Monad to fill the CSS AST-like representation, which then can be rendered as a text.

Note: OverloadedStrings are necessary for comfort work

>>> :set -XOverloadedStrings

To create any Css rule you can use the rule function, which takes the name of the selector as an argument.

It also can be used for creating media queries.

>>> rule ".wrapper" (maxWidth "72rem")
.wrapper {
    max-width: 72rem;
}

Or, if you prefer infix notation:

>>> ".wrapper" ? (maxWidth "72rem")
.wrapper {
    max-width: 72rem;
}

Or, without any function if the type is specified:

>>> ".wrapper" (maxWidth "72rem") :: Css ()
.wrapper {
    max-width: 72rem;
}

Rules may be nested in other rules:

>>> rule "@media only screen and (min-width: 48rem)" (rule ".wrapper" (maxWidth "72rem"))
@media only screen and (min-width: 48rem) {
    .wrapper {
        max-width: 72rem;
    }
}

Css Monad also has a Semigroup and Monoid instance, so the elements are juxtaposed via semigroup's append:

>>> rule "body" (background "#000000") <> rule ".wrapper" (width "90vw" <> maxWidth "72rem")
body {
    background: #000000;
}
.wrapper {
    width: 90vw;
    max-width: 72rem;
}

Same example using do-notation:

-- This example requires OverloadedStrings and BlockArguments extensions

sampleStyles :: Css ()
sampleStyles = do
    "body" do
        background "#000000"

    ".wrapper" do
        width "90vw"
        maxWidth "72rem"

If some property is not provided in Properties you can create a new with either declaration or infix (|>):

>>> declaration "width" "90vw"
width: 90vw;
>>> "width" |> "90vw"
width: 90vw;

Or without functions if the type is specified:

-- Requires OverloadedStrings and BlockArguments

sampleStyles :: Css ()
sampleStyles = do
"body" do
    "background" "#000000"

Types

data Rule

AST-like CSS Rule representation

Constructors

Rule !Text !Rule !Rule

Rule: selector, inner rules/declarations, next

Declaration !Text !Text !Rule

Declaration: property, value, next

Leaf !Text

Leaf: text This is used to allow creating the declarations without using of functions

Empty

Empty

Instances

Monoid Rule

Monoid instance for CSS Rule

Defined in Css.Internal

Methods

mempty :: Rule

mappend :: Rule -> Rule -> Rule

mconcat :: [Rule] -> Rule

Semigroup Rule

Semigroup instance for CSS Rule

Defined in Css.Internal

Methods

(<>) :: Rule -> Rule -> Rule

sconcat :: NonEmpty Rule -> Rule

stimes :: Integral b => b -> Rule -> Rule

Show Rule

Show instance for the CSS Rule

Defined in Css.Internal

Methods

showsPrec :: Int -> Rule -> ShowS

show :: Rule -> String

showList :: [Rule] -> ShowS

MonadWriter Rule Css

MonadWriter instance for the Css monad

Defined in Css.Internal

Methods

writer :: (a, Rule) -> Css a

tell :: Rule -> Css ()

listen :: Css a -> Css (a, Rule)

pass :: Css (a, Rule -> Rule) -> Css a

newtype Css a

Css monad - newtype wrapper around Control.Monad.Writer.Writer monad

Constructors

Css

Fields

• runCss :: Writer Rule a

Instances

Applicative Css

Defined in Css.Internal

Methods

pure :: a -> Css a

(<*>) :: Css (a -> b) -> Css a -> Css b

liftA2 :: (a -> b -> c) -> Css a -> Css b -> Css c

(*>) :: Css a -> Css b -> Css b

(<*) :: Css a -> Css b -> Css a

Functor Css

Defined in Css.Internal

Methods

fmap :: (a -> b) -> Css a -> Css b

(<$) :: a -> Css b -> Css a

Monad Css

Defined in Css.Internal

Methods

(>>=) :: Css a -> (a -> Css b) -> Css b

(>>) :: Css a -> Css b -> Css b

return :: a -> Css a

MonadWriter Rule Css

MonadWriter instance for the Css monad

Defined in Css.Internal

Methods

writer :: (a, Rule) -> Css a

tell :: Rule -> Css ()

listen :: Css a -> Css (a, Rule)

pass :: Css (a, Rule -> Rule) -> Css a

IsString (Css ())

IsString instance used to allow the creation of declarations NOTE: This is only for creating the Declarations, it doesn't do anything else.

Defined in Css.Internal

Methods

fromString :: String -> Css ()

Monoid (Css ())

Monoid instance for the Css monad

Defined in Css.Internal

Methods

mempty :: Css ()

mappend :: Css () -> Css () -> Css ()

mconcat :: [Css ()] -> Css ()

Semigroup (Css ())

Semigroup instance for the Css monad

Defined in Css.Internal

Methods

(<>) :: Css () -> Css () -> Css ()

sconcat :: NonEmpty (Css ()) -> Css ()

stimes :: Integral b => b -> Css () -> Css ()

Show (Css ())

Show instance for the Css monad

Defined in Css.Internal

Methods

showsPrec :: Int -> Css () -> ShowS

show :: Css () -> String

showList :: [Css ()] -> ShowS

Rendering

data Config

Rendering configuration

Constructors

Config

Fields

• _newline :: !Text

  Newline symbol

• _indent :: !Text

  Indentation

• _spacing :: !Text

  Small spacing

pretty :: Config

Pretty render configuration

compact :: Config

Compact render configuration

renderRule

Arguments

:: Rule

Rule to render

-> Text

Return as a Text

Used to render the Css Rules with pretty config

renderRuleWith

Arguments

:: Rule

Rule to render

-> Config

Rendering configuration

-> Text

Return as a Text

Render the Css Rules with certain configuration

renderCss

Arguments

:: Css ()

Css to render

-> Text

Return as a Text

Render the Css Monad with pretty config as Text

renderCssWith

Arguments

:: Css ()

Css to render

-> Config

Configuration

-> Text

Return as a Text

Render the Css Monad with certain config as Text

putCss

Arguments

:: Css ()

Css to render

-> IO ()

Print to stdoup

Render the Css Monad and print it to stdout

putCssWith

Arguments

:: Css ()

Css to render

-> Config

Configuration

-> IO ()

Print to stdout

Render the CSS with certain configuration and print it to stdout

renderCssToFile

Arguments

:: Css ()

Css to render

-> FilePath

Pathtofile

-> IO ()

Save the rendered Css to the file path

Render the Css Monad and save it to the filePath

renderCssToFileWith

Arguments

:: Css ()

Css to render

-> Config

Configuration

-> FilePath

Pathtofile

-> IO ()

Save the Css to the file

Render the Css Monad with certain config and save it to the filepath

eDSL

rule

Arguments

:: Text

Selector

-> Css ()

Inner Css

-> Css ()

Return in Css Monad

Create new rule

Examples

>>> rule "body" (background "#000000") <> rule ".wrapper" (width "90vw" <> maxWidth "72rem")
body {
    background: #000000;
}
.wrapper {
    width: 90vw;
    max-width: 72rem;
}

(?)

Arguments

:: Text

Selector

-> Css ()

Inner Css

-> Css ()

Return in Css Monad

Infix version of rule

declaration

Arguments

:: Text

Property

-> Text

Value

-> Css ()

Return in Css Monad

Create new declaration

Examples

>>> declaration "width" "90vw"
width: 90vw;

(|>)

Arguments

:: Text

Property

-> Text

Value

-> Css ()

Return in Css Monad

Infix version of declaration

This module contains (almost) all CSS3 properties

module Css.Properties