React.Stylesheet

createStyleContext :: forall label. IsSymbol label => SProxy label -> StyleContext

Takes a CombinedReducer and a default state, and returns both a root-level provider and connect component for using the Radox store

type StyledWithChildren styleProps = CSSRuleSet styleProps -> styleProps -> Array Props -> Array ReactElement -> ReactElement

type StyledNoChildren styleProps = CSSRuleSet styleProps -> styleProps -> Array Props -> ReactElement

type StyledElements = forall styleProps. { _data :: StyledWithChildren styleProps, a :: StyledWithChildren styleProps, abbr :: StyledWithChildren styleProps, address :: StyledWithChildren styleProps, article :: StyledWithChildren styleProps, aside :: StyledWithChildren styleProps, audio :: StyledWithChildren styleProps, b :: StyledWithChildren styleProps, bdi :: StyledWithChildren styleProps, bdo :: StyledWithChildren styleProps, big :: StyledWithChildren styleProps, blockquote :: StyledWithChildren styleProps, body :: StyledWithChildren styleProps, br :: StyledNoChildren styleProps, button :: StyledWithChildren styleProps, canvas :: StyledWithChildren styleProps, caption :: StyledWithChildren styleProps, cite :: StyledWithChildren styleProps, code :: StyledWithChildren styleProps, col :: StyledNoChildren styleProps, colgroup :: StyledWithChildren styleProps, datalist :: StyledWithChildren styleProps, dd :: StyledWithChildren styleProps, del :: StyledWithChildren styleProps, details :: StyledWithChildren styleProps, dfn :: StyledWithChildren styleProps, dialog :: StyledWithChildren styleProps, div :: StyledWithChildren styleProps, dl :: StyledWithChildren styleProps, dt :: StyledWithChildren styleProps, em :: StyledWithChildren styleProps, embed :: StyledNoChildren styleProps, fieldset :: StyledWithChildren styleProps, figcaption :: StyledWithChildren styleProps, figure :: StyledWithChildren styleProps, footer :: StyledWithChildren styleProps, form :: StyledWithChildren styleProps, h1 :: StyledWithChildren styleProps, h2 :: StyledWithChildren styleProps, h3 :: StyledWithChildren styleProps, h4 :: StyledWithChildren styleProps, h5 :: StyledWithChildren styleProps, h6 :: StyledWithChildren styleProps, head :: StyledWithChildren styleProps, header :: StyledWithChildren styleProps, hr :: StyledNoChildren styleProps, html :: StyledWithChildren styleProps, i :: StyledWithChildren styleProps, iframe :: StyledWithChildren styleProps, img :: StyledNoChildren styleProps, input :: StyledNoChildren styleProps, ins :: StyledWithChildren styleProps, kbd :: StyledWithChildren styleProps, keygen :: StyledNoChildren styleProps, label :: StyledWithChildren styleProps, legend :: StyledWithChildren styleProps, li :: StyledWithChildren styleProps, link :: StyledNoChildren styleProps, main :: StyledWithChildren styleProps, map :: StyledWithChildren styleProps, mark :: StyledWithChildren styleProps, menu :: StyledWithChildren styleProps, menuitem :: StyledNoChildren styleProps, meta :: StyledNoChildren styleProps, meter :: StyledWithChildren styleProps, nav :: StyledWithChildren styleProps, noscript :: StyledWithChildren styleProps, object :: StyledWithChildren styleProps, ol :: StyledWithChildren styleProps, optgroup :: StyledWithChildren styleProps, option :: StyledWithChildren styleProps, output :: StyledWithChildren styleProps, p :: StyledWithChildren styleProps, param :: StyledNoChildren styleProps, picture :: StyledWithChildren styleProps, pre :: StyledWithChildren styleProps, progress :: StyledWithChildren styleProps, q :: StyledWithChildren styleProps, rp :: StyledWithChildren styleProps, rt :: StyledWithChildren styleProps, ruby :: StyledWithChildren styleProps, s :: StyledWithChildren styleProps, samp :: StyledWithChildren styleProps, script :: StyledWithChildren styleProps, section :: StyledWithChildren styleProps, select :: StyledWithChildren styleProps, small :: StyledWithChildren styleProps, source :: StyledNoChildren styleProps, span :: StyledWithChildren styleProps, strong :: StyledWithChildren styleProps, style :: StyledWithChildren styleProps, sub :: StyledWithChildren styleProps, summary :: StyledWithChildren styleProps, sup :: StyledWithChildren styleProps, table :: StyledWithChildren styleProps, tbody :: StyledWithChildren styleProps, td :: StyledWithChildren styleProps, textarea :: StyledWithChildren styleProps, tfoot :: StyledWithChildren styleProps, th :: StyledWithChildren styleProps, thead :: StyledWithChildren styleProps, time :: StyledWithChildren styleProps, title :: StyledWithChildren styleProps, tr :: StyledWithChildren styleProps, track :: StyledNoChildren styleProps, u :: StyledWithChildren styleProps, ul :: StyledWithChildren styleProps, var :: StyledWithChildren styleProps, video :: StyledWithChildren styleProps, wbr :: StyledNoChildren styleProps }

type StyleRenderMethod props localState = { classNames :: Array CSSSelector, localState :: localState, props :: props } -> ReactElement

type StyleProvider = ReactClass { children :: Array ReactElement }

type StyleContext = { consumer :: StyleConsumer, elements :: StyledElements, provider :: StyleProvider }

type StyleConsumer = forall localState props. props -> localState -> CSSRuleSet props -> StyleRenderMethod props localState -> ReactElement

data VirtualStylesheet (p :: Symbol)

Constructors

• MkVirtualStylesheet (HashMap (Array CSSSelector) InsertMediaRule)

Instances

• Semigroup (VirtualStylesheet p)
• Monoid (VirtualStylesheet p)

type UnpackedRule a = { id :: Int, item :: a, ruleText :: CSSText, selector :: CSSSelector }

type UnpackedMediaRule a = { id :: Int, item :: a, query :: MediaQueryText }

newtype StylesheetId

Unique ID for stylesheet in DOM

Constructors

• StylesheetId String

data Stylesheet (p :: Symbol)

Constructors

• Stylesheet CSSStyleSheet (Ref (VirtualStylesheet p))

newtype StyleRuleSet

Constructors

• StyleRuleSet (Array RuleType)

Instances

• Show StyleRuleSet
• Eq StyleRuleSet
• Semigroup StyleRuleSet
• Monoid StyleRuleSet
• Hashable StyleRuleSet

data RuleType

Constructors

• ClassType ClassRule
• MediaType MediaRule

Instances

• Show RuleType
• Eq RuleType

data MediaRule

Constructors

• MediaRule MediaQueryText (Array RuleType)

Instances

• Eq MediaRule
• Show MediaRule

newtype MediaQueryText

Description of media query

Constructors

• MediaQueryText String

Instances

• Eq MediaQueryText
• Ord MediaQueryText
• Semigroup MediaQueryText
• Monoid MediaQueryText
• Show MediaQueryText

data InsertRule

Data structure used internally to describe a single CSS rule

Constructors

• InsertRule CSSSelector CSSText

Instances

• Show InsertRule

data InsertMediaRule

A complete single rule or nested media rule

Constructors

• InsertMediaQuery MediaQueryText (Array InsertMediaRule)
• InsertStyleRule InsertRule

newtype ClassRule

Constructors

• ClassRule CSSText

Instances

• Eq ClassRule
• Show ClassRule
• Semigroup ClassRule
• Monoid ClassRule

newtype CSSText

CSS rules in text form

Constructors

• CSSText String

Instances

• Eq CSSText
• Ord CSSText
• Semigroup CSSText
• Monoid CSSText
• Hashable CSSText
• Show CSSText

data CSSSelector

CSS Selectors used in DOM, currently we only use class selectors

Constructors

• CSSClassSelector String

Instances

• Eq CSSSelector
• Ord CSSSelector
• Hashable CSSSelector
• Show CSSSelector

newtype CSSRuleSet p

CSSRuleSet is what we build up for a style

Constructors

• CSSRuleSet (Array (CSSRule p))

Instances

• Semigroup (CSSRuleSet p)
• Monoid (CSSRuleSet p)

data CSSRule p

Constructors

• Const CSSText
• Lens (p -> CSSText)
• MediaQuery MediaQueryText (CSSRuleSet p)

wrapInRuleSet :: Array RuleType -> StyleRuleSet

unpackRule :: IndexedRule CSSStyleRule -> Effect (UnpackedRule CSSStyleRule)

This takes an item and returns the selector and declaration text Useful for diffing etc

unpackMediaRule :: IndexedRule CSSMediaRule -> Effect (UnpackedMediaRule CSSMediaRule)

str :: forall props. String -> CSSRuleSet props

Create a rule that takes no props

readVirtualStylesheet :: forall p. Stylesheet p -> Effect (VirtualStylesheet p)

processStyle :: forall props. CSSRuleSet props -> props -> StyleRuleSet

mediaRule :: MediaQueryText -> Array RuleType -> RuleType

media :: forall props. String -> CSSRuleSet props -> CSSRuleSet props

Create a media query

keep :: StyleRuleSet -> Array InsertMediaRule

This commits the rendered StyleRuleSet into InsertMediaRules that we can store and apply to the CSSOM

insertRule :: forall a. HasRuleList a => a -> InsertRule -> Effect Unit

Insert new rule into stylesheet, deleting old one if name matches

insertRecursive :: forall a. HasRuleList a => a -> InsertMediaRule -> Effect Unit

getUnpackedStyleRules :: CSSRuleList -> Effect (Array (UnpackedRule CSSStyleRule))

Gets style rules for a rule list and fetches basic data about them

getUnpackedMediaRules :: CSSRuleList -> Effect (Array (UnpackedMediaRule CSSMediaRule))

getStylesheetId :: forall s. IsSymbol s => VirtualStylesheet s -> StylesheetId

getStyleRuleSelectorText :: CSSStyleRule -> Effect CSSSelector

Get the selector text of a CSSStyleRule

getStyleRuleDeclarationText :: CSSStyleRule -> Effect CSSText

Get the Style Declaration of a CSSStyleRule

getMediaRuleMediaText :: CSSMediaRule -> Effect MediaQueryText

Get the rule from the Media Rule

getFilteredRuleList :: CSSRuleList -> Effect CSSRules

Get all the rules of a stylesheet, split by type

getClasses :: InsertMediaRule -> Array CSSSelector

Get the generated CSS classes from the CSS. These are generated from hashes of the content

getCSSStylesheet :: forall p. Stylesheet p -> CSSStyleSheet

fun :: forall props. (props -> String) -> CSSRuleSet props

Create a rule that receives the props

findRuleBySelector :: CSSRuleList -> CSSSelector -> Effect (Maybe (UnpackedRule CSSStyleRule))

findMediaQueryByQuery :: CSSRuleList -> MediaQueryText -> Effect (Maybe (UnpackedMediaRule CSSMediaRule))

createStyleTag :: StylesheetId -> Effect CSSStyleSheet

createHashedInsertRule :: CSSText -> InsertRule

This creates a unique hash of the CSS that we'll use to make the classname

createBlankStylesheet :: forall p. IsSymbol p => Effect (Stylesheet p)

Create a StyleSheet in the DOM along with an empty VirtualStylesheet to record it's contents

createAndReturnCSSMediaRule :: forall a. HasRuleList a => a -> MediaQueryText -> Effect (Maybe (UnpackedMediaRule CSSMediaRule))

classRule :: CSSText -> RuleType

addStyle :: forall props p. Stylesheet p -> CSSRuleSet props -> props -> Effect (Array CSSSelector)

This is the top level big dog of a function, as such We provide the big Stylesheet doing-things-lump a function from props -> Styles some props and we get back a bunch of CSSSelectors (classes)