css-simple-0.1.0.0: eDSL for CSS
Copyright(c) Alexey Seledkov 2022
LicenseGPL-3
Maintainerqyutou@gmail.com
Stabilityexperimental
Portabilityportable
Safe HaskellSafe-Inferred
LanguageHaskell2010

Css

Description

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"
Synopsis

Types

data Rule Source #

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

Instances details
Monoid Rule Source #

Monoid instance for CSS Rule

Instance details

Defined in Css.Internal

Methods

mempty :: Rule #

mappend :: Rule -> Rule -> Rule #

mconcat :: [Rule] -> Rule #

Semigroup Rule Source #

Semigroup instance for CSS Rule

Instance details

Defined in Css.Internal

Methods

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

sconcat :: NonEmpty Rule -> Rule #

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

Show Rule Source #

Show instance for the CSS Rule

Instance details

Defined in Css.Internal

Methods

showsPrec :: Int -> Rule -> ShowS #

show :: Rule -> String #

showList :: [Rule] -> ShowS #

MonadWriter Rule Css Source #

MonadWriter instance for the Css monad

Instance details

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 Source #

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

Constructors

Css 

Fields

Instances

Instances details
Applicative Css Source # 
Instance details

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 Source # 
Instance details

Defined in Css.Internal

Methods

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

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

Monad Css Source # 
Instance details

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 Source #

MonadWriter instance for the Css monad

Instance details

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 ()) Source #

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

Instance details

Defined in Css.Internal

Methods

fromString :: String -> Css () #

Monoid (Css ()) Source #

Monoid instance for the Css monad

Instance details

Defined in Css.Internal

Methods

mempty :: Css () #

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

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

Semigroup (Css ()) Source #

Semigroup instance for the Css monad

Instance details

Defined in Css.Internal

Methods

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

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

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

Show (Css ()) Source #

Show instance for the Css monad

Instance details

Defined in Css.Internal

Methods

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

show :: Css () -> String #

showList :: [Css ()] -> ShowS #

Rendering

data Config Source #

Rendering configuration

Constructors

Config 

Fields

pretty :: Config Source #

Pretty render configuration

compact :: Config Source #

Compact render configuration

renderRule Source #

Arguments

:: Rule

Rule to render

-> Text

Return as a Text

Used to render the Css Rules with pretty config

renderRuleWith Source #

Arguments

:: Rule

Rule to render

-> Config

Rendering configuration

-> Text

Return as a Text

Render the Css Rules with certain configuration

renderCss Source #

Arguments

:: Css ()

Css to render

-> Text

Return as a Text

Render the Css Monad with pretty config as Text

renderCssWith Source #

Arguments

:: Css ()

Css to render

-> Config

Configuration

-> Text

Return as a Text

Render the Css Monad with certain config as Text

putCss Source #

Arguments

:: Css ()

Css to render

-> IO ()

Print to stdoup

Render the Css Monad and print it to stdout

putCssWith Source #

Arguments

:: Css ()

Css to render

-> Config

Configuration

-> IO ()

Print to stdout

Render the CSS with certain configuration and print it to stdout

renderCssToFile Source #

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 Source #

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 Source #

Arguments

:: Text

Selector

-> Css ()

Inner Css

-> Css ()

Return in Css Monad

Create new rule

Examples

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

(?) Source #

Arguments

:: Text

Selector

-> Css ()

Inner Css

-> Css ()

Return in Css Monad

Infix version of rule

declaration Source #

Arguments

:: Text

Property

-> Text

Value

-> Css ()

Return in Css Monad

Create new declaration

Examples

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

(|>) Source #

Arguments

:: Text

Property

-> Text

Value

-> Css ()

Return in Css Monad

Infix version of declaration

This module contains (almost) all CSS3 properties