Copyright	(C) 2016-2026 David M. Johnson
License	BSD3-style (see the file LICENSE)
Maintainer	David M. Johnson <code@dmj.io>
Stability	experimental
Portability	non-portable
Safe Haskell	Safe-Inferred
Language	Haskell2010

Miso.CSS.Types

Contents

Types

Description

Overview

Miso.CSS.Types defines the core data types that back the CSS DSL in Miso.CSS. There are three layers:

Style — a single CSS property/value pair (("color", "red")).
Styles — one rule block: either a selector rule, a @keyframes animation, or a @media query.
StyleSheet — an ordered list of Styles rule blocks that together form a complete stylesheet.

In normal usage you never construct these types directly — the smart constructors in Miso.CSS (sheet_, selector_, keyframes_, media_) build them for you. This module is exported for downstream code that inspects or extends the CSS representation.

Type hierarchy

StyleSheet          -- rendered to a <style> tag
  └─ [Styles]       -- one rule block each
       ├─ Styles    (selector → [Style])
       ├─ KeyFrame  (animation-name → [(stop, [Style])])
       └─ Media     (media-query   → [(selector, [Style])])

Style = (MisoString, MisoString)   -- property, value

type Style = (MisoString, MisoString)
data Styles
- = Styles (MisoString, [Style])
- | KeyFrame MisoString [(MisoString, [Style])]
- | Media MisoString [(MisoString, [Style])]
newtype StyleSheet = StyleSheet {
- getStyleSheet :: [Styles]
}
newtype TransformFn = TransformFn {
- renderTransformFn :: MisoString
}
newtype KeyframeStop = KeyframeStop {
- getKeyframeStop :: (MisoString, [Style])
}
newtype MediaRule = MediaRule {
- getMediaRule :: (MisoString, [Style])
}
newtype MediaQuery = MediaQuery {
- renderMediaQuery :: MisoString
}

Types

type Style = (MisoString, MisoString) Source #

Type for a CSS Style

data Styles Source #

A CSS rule block. One of: a selector rule, a @keyframes animation, or a @media query.

Constructors

Styles (MisoString, [Style])
KeyFrame MisoString [(MisoString, [Style])]
Media MisoString [(MisoString, [Style])]

Instances

Instances details

Show Styles Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> Styles -> ShowS # show :: Styles -> String # showList :: [Styles] -> ShowS #
Eq Styles Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: Styles -> Styles -> Bool # (/=) :: Styles -> Styles -> Bool #

newtype StyleSheet Source #

Type for a CSS StyleSheet. Internally it maps From CSS selectors to Styles.

testSheet :: StyleSheet
testSheet =
   sheet_
   [ selector_ ".name"
       [ backgroundColor red
       , alignContent "top"
       ]
   , selector_ "#container"
       [ backgroundColor blue
       , alignContent "center"
       ]
   , keyframes_ "slide-in"
     [ from_ [ transforms [ translateX (pct 0) ] ]
     , at (pct 50)
       [ backgroundColor red
       , backgroundSize "10px"
       ]
     , to_ [ transforms [ translateX (pct 100) ] ]
     ]
   , media_ (screen_ and_ minWidth_ (px 480))
     [ rule_ "header" [ height "auto" ]
     , rule_ "ul"     [ display "block" ]
     ]
   ]

Constructors

StyleSheet
Fields getStyleSheet :: [Styles] Ordered list of CSS rule blocks that make up the stylesheet

Instances

Instances details

Show StyleSheet Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> StyleSheet -> ShowS # show :: StyleSheet -> String # showList :: [StyleSheet] -> ShowS #
Eq StyleSheet Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: StyleSheet -> StyleSheet -> Bool # (/=) :: StyleSheet -> StyleSheet -> Bool #

newtype TransformFn Source #

An individual CSS transform function. Construct values with translate, rotate, scale, etc., then combine with transforms.

transforms [ translate (px 10) (pct 50), rotate (deg 45), scaleX 1.5 ]

Constructors

TransformFn
Fields renderTransformFn :: MisoString The serialised CSS transform function string (e.g. `"rotate(45deg)"`)

Instances

Instances details

Show TransformFn Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> TransformFn -> ShowS # show :: TransformFn -> String # showList :: [TransformFn] -> ShowS #
Eq TransformFn Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: TransformFn -> TransformFn -> Bool # (/=) :: TransformFn -> TransformFn -> Bool #

newtype KeyframeStop Source #

A single stop in a '@keyframes' rule. Construct with from_, to_, or at.

Constructors

KeyframeStop
Fields getKeyframeStop :: (MisoString, [Style])

Instances

Instances details

Show KeyframeStop Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> KeyframeStop -> ShowS # show :: KeyframeStop -> String # showList :: [KeyframeStop] -> ShowS #
Eq KeyframeStop Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: KeyframeStop -> KeyframeStop -> Bool # (/=) :: KeyframeStop -> KeyframeStop -> Bool #

newtype MediaRule Source #

A selector rule inside a '@media' block. Construct with rule_.

Constructors

MediaRule
Fields getMediaRule :: (MisoString, [Style])

Instances

Instances details

Show MediaRule Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> MediaRule -> ShowS # show :: MediaRule -> String # showList :: [MediaRule] -> ShowS #
Eq MediaRule Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: MediaRule -> MediaRule -> Bool # (/=) :: MediaRule -> MediaRule -> Bool #

newtype MediaQuery Source #

A CSS media query. Construct with screen_, print_, all_, minWidth_, etc., and compose with and_, or_, not_.

Constructors

MediaQuery
Fields renderMediaQuery :: MisoString

Instances

Instances details

Show MediaQuery Source #
Instance details Defined in Miso.CSS.Types Methods showsPrec :: Int -> MediaQuery -> ShowS # show :: MediaQuery -> String # showList :: [MediaQuery] -> ShowS #
Eq MediaQuery Source #
Instance details Defined in Miso.CSS.Types Methods (==) :: MediaQuery -> MediaQuery -> Bool # (/=) :: MediaQuery -> MediaQuery -> Bool #

Overview

Type hierarchy

See also

Types

Instances

Instances

Instances

Instances

Instances

Instances