Provides a cssSuffix to be used when constructing CSS class names. Simple hash codes are not suitable for this as they are not very human-readable and their computation can be more complex than needed.

HTMLTagBuilder

typealias HTMLTagBuilder = StyledDOMBuilder<HTMLTag>.() -> Unit

Import

class Import(url: String, types: List<String> = listOf())

INPUTBuilder

typealias INPUTBuilder = StyledDOMBuilder<INPUT>.() -> Unit

SPANBuilder

typealias SPANBuilder = StyledDOMBuilder<SPAN>.() -> Unit

Styled

object Styled

StyledBuilder

interface StyledBuilder<P : PropsWithClassName>

StyledDOMBuilder

interface StyledDOMBuilder<out T : Tag> : RDOMBuilder<T> , StyledBuilder<DOMProps>

StyledDOMBuilderImpl

class StyledDOMBuilderImpl<out T : Tag>(factory: (TagConsumer<Unit>) -> T) : RDOMBuilderImpl<T> , StyledDOMBuilder<T>

StyledElementBuilder

interface StyledElementBuilder<P : PropsWithClassName> : RElementBuilder<P> , StyledBuilder<P>

StyledElementBuilderImpl

class StyledElementBuilderImpl<P : PropsWithClassName>(val type: ElementType<P>, attrs: P = jso()) : RElementBuilderImpl<P> , StyledElementBuilder<P>

StyledHandler

typealias StyledHandler<P> = StyledElementBuilder<P>.() -> Unit

StyledNext

external interface StyledNext

StyleSheet

open class StyleSheet(name: String? = null, val isStatic: Boolean = true, imports: List<Import> = emptyList())

Represents a reusable piece of CSS code

UsedCssInfo

data class UsedCssInfo(val className: ClassName, var usedBy: Int, val groupId: Int)

Functions

animation

fun CssBuilder.animation(duration: Time = 0.s, timing: Timing = Timing.ease, delay: Time = 0.s, iterationCount: IterationCount = 1.times, direction: AnimationDirection = AnimationDirection.normal, fillMode: FillMode = FillMode.none, playState: PlayState = PlayState.running, builder: KeyframesBuilder.() -> Unit)

createPrefixer

external fun createPrefixer(data: dynamic): Record<String, Any?>

Online Documentation

css

inline fun <P : CustomStyledProps> RElementBuilder<P>.css(noinline handler: RuleSet)

inline fun CustomStyledProps.css(noinline handler: RuleSet)

inline fun StyledBuilder<*>.css(handler: RuleSet)

cssMarker

fun StyleSheet.cssMarker(): CssHolder

Use this function to assign a CSS class without any properties to an element

forwardCss

inline fun CustomStyledProps.forwardCss(builder: CssBuilder)

inline fun CustomStyledProps.forwardCss(props: CustomStyledProps)

getClassName

fun <T : StyleSheet> T.getClassName(getClass: (T) -> KProperty0<RuleSet>): String

getClassSelector

fun <T : StyleSheet> T.getClassSelector(getClass: (T) -> KProperty0<RuleSet>): String

injectGlobal

fun injectGlobal(css: RuleSet)

fun injectGlobal(css: CssBuilder)

Inject CSS rules defined in css into the DOM

inlineStyles

fun RDOMBuilder<*>.inlineStyles(prefix: Boolean = true, preserveExisting: Boolean = false, builder: StyledElementBuilder)

prefix

external fun prefix(style: dynamic): Record<String, Any?>

Online Documentation

styled

fun <P : PropsWithClassName> styled(type: ElementType<P>): RBuilder.(StyledHandler<P>) -> Unit

styledA

inline fun RBuilder.styledA(href: String? = null, target: String? = null, block: StyledDOMBuilder<A>.() -> Unit)

styledAbbr

inline fun RBuilder.styledAbbr(block: StyledDOMBuilder<ABBR>.() -> Unit)

styledAddress

inline fun RBuilder.styledAddress(block: StyledDOMBuilder<ADDRESS>.() -> Unit)

styledArea

inline fun RBuilder.styledArea(shape: AreaShape? = null, alt: String? = null, block: StyledDOMBuilder<AREA>.() -> Unit)

styledArticle

inline fun RBuilder.styledArticle(block: StyledDOMBuilder<ARTICLE>.() -> Unit)

styledAside

inline fun RBuilder.styledAside(block: StyledDOMBuilder<ASIDE>.() -> Unit)

styledAudio

inline fun RBuilder.styledAudio(block: StyledDOMBuilder<AUDIO>.() -> Unit)

styledB

inline fun RBuilder.styledB(block: StyledDOMBuilder<B>.() -> Unit)

styledBase

inline fun RBuilder.styledBase(block: StyledDOMBuilder<BASE>.() -> Unit)

styledBdi

inline fun RBuilder.styledBdi(block: StyledDOMBuilder<BDI>.() -> Unit)

styledBdo

inline fun RBuilder.styledBdo(block: StyledDOMBuilder<BDO>.() -> Unit)

styledBlockquote

inline fun RBuilder.styledBlockquote(block: StyledDOMBuilder<BLOCKQUOTE>.() -> Unit)

styledBody

inline fun RBuilder.styledBody(block: StyledDOMBuilder<BODY>.() -> Unit)

styledBr

inline fun RBuilder.styledBr(block: StyledDOMBuilder<BR>.() -> Unit)

styledButton

inline fun RBuilder.styledButton(formEncType: ButtonFormEncType? = null, formMethod: ButtonFormMethod? = null, type: ButtonType? = null, block: StyledDOMBuilder<BUTTON>.() -> Unit)

styledCanvas

inline fun RBuilder.styledCanvas(block: StyledDOMBuilder<CANVAS>.() -> Unit)

inline fun RBuilder.styledCanvas(content: String = "")

styledCaption

inline fun RBuilder.styledCaption(block: StyledDOMBuilder<CAPTION>.() -> Unit)

styledCite

inline fun RBuilder.styledCite(block: StyledDOMBuilder<CITE>.() -> Unit)

styledCode

inline fun RBuilder.styledCode(block: StyledDOMBuilder<CODE>.() -> Unit)

styledCol

inline fun RBuilder.styledCol(block: StyledDOMBuilder<COL>.() -> Unit)

styledColgroup

inline fun RBuilder.styledColgroup(block: StyledDOMBuilder<COLGROUP>.() -> Unit)

styledDatalist

inline fun RBuilder.styledDatalist(block: StyledDOMBuilder<DATALIST>.() -> Unit)

styledDd

inline fun RBuilder.styledDd(block: StyledDOMBuilder<DD>.() -> Unit)

styledDel

inline fun RBuilder.styledDel(block: StyledDOMBuilder<DEL>.() -> Unit)

styledDetails

inline fun RBuilder.styledDetails(block: StyledDOMBuilder<DETAILS>.() -> Unit)

styledDfn

inline fun RBuilder.styledDfn(block: StyledDOMBuilder<DFN>.() -> Unit)

styledDialog

inline fun RBuilder.styledDialog(block: StyledDOMBuilder<DIALOG>.() -> Unit)

styledDiv

inline fun RBuilder.styledDiv(block: StyledDOMBuilder<DIV>.() -> Unit)

styledDl

inline fun RBuilder.styledDl(block: StyledDOMBuilder<DL>.() -> Unit)

styledDt

inline fun RBuilder.styledDt(block: StyledDOMBuilder<DT>.() -> Unit)

styledEm

inline fun RBuilder.styledEm(block: StyledDOMBuilder<EM>.() -> Unit)

styledEmbed

inline fun RBuilder.styledEmbed(block: StyledDOMBuilder<EMBED>.() -> Unit)

styledFieldset

inline fun RBuilder.styledFieldset(block: StyledDOMBuilder<FIELDSET>.() -> Unit)

styledFigcaption

inline fun RBuilder.styledFigcaption(block: StyledDOMBuilder<FIGCAPTION>.() -> Unit)

styledFigure

inline fun RBuilder.styledFigure(block: StyledDOMBuilder<FIGURE>.() -> Unit)

styledFooter

inline fun RBuilder.styledFooter(block: StyledDOMBuilder<FOOTER>.() -> Unit)

styledForm

inline fun RBuilder.styledForm(action: String? = null, encType: FormEncType? = null, method: FormMethod? = null, block: StyledDOMBuilder<FORM>.() -> Unit)

styledH1

inline fun RBuilder.styledH1(block: StyledDOMBuilder<H1>.() -> Unit)

styledH2

inline fun RBuilder.styledH2(block: StyledDOMBuilder<H2>.() -> Unit)

styledH3

inline fun RBuilder.styledH3(block: StyledDOMBuilder<H3>.() -> Unit)

styledH4

inline fun RBuilder.styledH4(block: StyledDOMBuilder<H4>.() -> Unit)

styledH5

inline fun RBuilder.styledH5(block: StyledDOMBuilder<H5>.() -> Unit)

styledH6

inline fun RBuilder.styledH6(block: StyledDOMBuilder<H6>.() -> Unit)

styledHead

inline fun RBuilder.styledHead(block: StyledDOMBuilder<HEAD>.() -> Unit)

styledHeader

inline fun RBuilder.styledHeader(block: StyledDOMBuilder<HEADER>.() -> Unit)

styledHr

inline fun RBuilder.styledHr(block: StyledDOMBuilder<HR>.() -> Unit)

styledHtml

inline fun RBuilder.styledHtml(block: StyledDOMBuilder<HTML>.() -> Unit)

styledI

inline fun RBuilder.styledI(block: StyledDOMBuilder<I>.() -> Unit)

styledIframe

inline fun RBuilder.styledIframe(sandbox: IframeSandbox? = null, block: StyledDOMBuilder<IFRAME>.() -> Unit)

inline fun RBuilder.styledIframe(sandbox: IframeSandbox? = null, content: String = "")

styledImg

inline fun RBuilder.styledImg(alt: String? = null, src: String? = null, block: StyledDOMBuilder<IMG>.() -> Unit)

styledInput

inline fun RBuilder.styledInput(type: InputType? = null, formEncType: InputFormEncType? = null, formMethod: InputFormMethod? = null, name: String? = null, block: StyledDOMBuilder<INPUT>.() -> Unit)

styledIns

inline fun RBuilder.styledIns(block: StyledDOMBuilder<INS>.() -> Unit)

styledKbd

inline fun RBuilder.styledKbd(block: StyledDOMBuilder<KBD>.() -> Unit)

styledLabel

inline fun RBuilder.styledLabel(block: StyledDOMBuilder<LABEL>.() -> Unit)

styledLegend

inline fun RBuilder.styledLegend(block: StyledDOMBuilder<LEGEND>.() -> Unit)

styledLi

inline fun RBuilder.styledLi(block: StyledDOMBuilder<LI>.() -> Unit)

styledLink

inline fun RBuilder.styledLink(href: String? = null, rel: String? = null, type: String? = null, block: StyledDOMBuilder<LINK>.() -> Unit)

styledMain

inline fun RBuilder.styledMain(block: StyledDOMBuilder<MAIN>.() -> Unit)

styledMap

inline fun RBuilder.styledMap(name: String? = null, block: StyledDOMBuilder<MAP>.() -> Unit)

styledMark

inline fun RBuilder.styledMark(block: StyledDOMBuilder<MARK>.() -> Unit)

styledMath

inline fun RBuilder.styledMath(block: StyledDOMBuilder<MATH>.() -> Unit)

styledMeta

inline fun RBuilder.styledMeta(name: String? = null, content: String? = null, block: StyledDOMBuilder<META>.() -> Unit)

styledMeter

inline fun RBuilder.styledMeter(block: StyledDOMBuilder<METER>.() -> Unit)

styledNav

inline fun RBuilder.styledNav(block: StyledDOMBuilder<NAV>.() -> Unit)

styledNoscript

inline fun RBuilder.styledNoscript(block: StyledDOMBuilder<NOSCRIPT>.() -> Unit)

styledObject

inline fun RBuilder.styledObject(block: StyledDOMBuilder<OBJECT>.() -> Unit)

styledOl

inline fun RBuilder.styledOl(block: StyledDOMBuilder<OL>.() -> Unit)

styledOptgroup

inline fun RBuilder.styledOptgroup(label: String? = null, block: StyledDOMBuilder<OPTGROUP>.() -> Unit)

styledOption

inline fun RBuilder.styledOption(block: StyledDOMBuilder<OPTION>.() -> Unit)

inline fun RBuilder.styledOption(content: String = "")

styledOutput

inline fun RBuilder.styledOutput(block: StyledDOMBuilder<OUTPUT>.() -> Unit)

styledP

inline fun RBuilder.styledP(block: StyledDOMBuilder<P>.() -> Unit)

styledParam

inline fun RBuilder.styledParam(name: String? = null, value: String? = null, block: StyledDOMBuilder<PARAM>.() -> Unit)

styledPicture

inline fun RBuilder.styledPicture(block: StyledDOMBuilder<PICTURE>.() -> Unit)

styledPre

inline fun RBuilder.styledPre(block: StyledDOMBuilder<PRE>.() -> Unit)

styledProgress

inline fun RBuilder.styledProgress(block: StyledDOMBuilder<PROGRESS>.() -> Unit)

styledQ

inline fun RBuilder.styledQ(block: StyledDOMBuilder<Q>.() -> Unit)

styledRp

inline fun RBuilder.styledRp(block: StyledDOMBuilder<RP>.() -> Unit)

styledRt

inline fun RBuilder.styledRt(block: StyledDOMBuilder<RT>.() -> Unit)

styledRuby

inline fun RBuilder.styledRuby(block: StyledDOMBuilder<RUBY>.() -> Unit)

styledSamp

inline fun RBuilder.styledSamp(block: StyledDOMBuilder<SAMP>.() -> Unit)

styledScript

inline fun RBuilder.styledScript(type: String? = null, src: String? = null, block: StyledDOMBuilder<SCRIPT>.() -> Unit)

styledSection

inline fun RBuilder.styledSection(block: StyledDOMBuilder<SECTION>.() -> Unit)

styledSelect

inline fun RBuilder.styledSelect(block: StyledDOMBuilder<SELECT>.() -> Unit)

styledSmall

inline fun RBuilder.styledSmall(block: StyledDOMBuilder<SMALL>.() -> Unit)

styledSource

inline fun RBuilder.styledSource(block: StyledDOMBuilder<SOURCE>.() -> Unit)

styledSpan

inline fun RBuilder.styledSpan(block: StyledDOMBuilder<SPAN>.() -> Unit)

styledStrong

inline fun RBuilder.styledStrong(block: StyledDOMBuilder<STRONG>.() -> Unit)

styledStyle

inline fun RBuilder.styledStyle(type: String? = null, block: StyledDOMBuilder<STYLE>.() -> Unit)

inline fun RBuilder.styledStyle(type: String? = null, content: String = "")

styledSub

inline fun RBuilder.styledSub(block: StyledDOMBuilder<SUB>.() -> Unit)

styledSummary

inline fun RBuilder.styledSummary(block: StyledDOMBuilder<SUMMARY>.() -> Unit)

styledSup

inline fun RBuilder.styledSup(block: StyledDOMBuilder<SUP>.() -> Unit)

styledSvg

inline fun RBuilder.styledSvg(block: StyledDOMBuilder<SVG>.() -> Unit)

inline fun RBuilder.styledSvg(content: String = "")

styledTable

inline fun RBuilder.styledTable(block: StyledDOMBuilder<TABLE>.() -> Unit)

styledTag

inline fun <T : Tag> RBuilder.styledTag(block: StyledDOMBuilder<T>.() -> Unit, noinline factory: (TagConsumer<Unit>) -> T)

styledTbody

inline fun RBuilder.styledTbody(block: StyledDOMBuilder<TBODY>.() -> Unit)

styledTd

inline fun RBuilder.styledTd(block: StyledDOMBuilder<TD>.() -> Unit)

styledTextarea

inline fun RBuilder.styledTextarea(rows: String? = null, cols: String? = null, wrap: TextAreaWrap? = null, block: StyledDOMBuilder<TEXTAREA>.() -> Unit)