style

$mol_style

Statically typed CSS style sheets. Following samples show which CSS code are generated from TS code.

Articles

• Продвинутый CSS-in-TS

BEM Block

$mol_page $mol_view

$mol_style_define( $mol_page , {
	flex: {
		direction: 'column',
	},
} )

[mol_page] {
	flex-direction: column;
}

BEM Element

$mol_page $mol_view
	sub /
		<= Body $mol_scroll
}

$mol_style_define( $mol_page , {
	Body: {
		overflow: 'scroll',
	},
} )

[mol_page_body] {
	overflow: scroll;
}

BEM Element of Element etc

$mol_scroll $mol_view
	sub /
		<= Strut $mol_view
$mol_page $mol_view
	sub /
		<= Body $mol_scroll

$mol_style_define( $mol_page , {
	Body: {
		Strut: {
			display: 'none',
		},
	},
} )

[mol_page_body_strut] {
	display: none;
}

Nested components by class name

$mol_button $mol_view
$my_app $mol_view

$mol_style_define( $my_app , {
	$mol_button: {
		cursor: 'pointer',
	},
} )

[my_app] [mol_button] {
	cursor: pointer;
}

Child components by class name

$mol_list $mol_view

$mol_style_define( $mol_list , {
	'>': {
		$mol_view: {
			display: 'block',
		},
	},
} )

[mol_list] > [mol_view] {
	display: block;
}

Attributes

$mol_link $mol_view
	attr *
		mol_link_current true

$mol_style_define( $mol_link , {
	'@': {
		mol_link_current: {
			'true': {
				color: 'black',
			},
		},
	},
} )

[mol_link][mol_link_current="true"] {
	color: black;
}

Pseudo classes

$mol_string $mol_view

$mol_style_define( $mol_string , {
	':focus': {
		outline: 'none',
	},
} )

[mol_string]:focus {
	outline: none;
}

Pseudo elements

$mol_text $mol_view

$mol_style_define( $mol_text , {
	'::first-child': {
		font: {
			weight: 'bolder',
		},
	},
} )

[mol_text]::first-child {
	font-weight: bolder;
}

Media queries

$mol_scroll $mol_view

$mol_style_define( $mol_scroll , {
	'@media': {
		'print': {
			overflow: 'visible',
		},
	},
} )

@media print {
	[mol_scroll] {
		overflow: visible;
	}
}

Theming

$mol_page $mol_view

$mol_style_define( $mol_page , {
	background: $mol_theme.back,
	boxShadow: `0 0 0 1px ${ $mol_theme.line }`,
} )

[mol_page] {
	background: var(--mol_theme_back);
	boxShadow: 0 0 0 1px var(--mol_theme_line);
}

CSS Units

const { px , per } = $mol_style_unit

$mol_style_define( $my_view , {
	width : per(50),
	height : px(50),
} )

[my_view] {
	width: 50%;
	height: 50px;
}

CSS Functions

const { calc , fit_content } = $mol_style_func
const { per } = $mol_style_unit

$mol_style_define( $my_view , {
	width : calc( `100% - 1px` ),
	height : fit_content( per(50) ),
} )

[my_view] {
	width: calc(100% - 1px);
	height: fit-content(50%);
}

Property groups

$mol_style_define( $my_view , {
	flex : {
		grow : 1,
		shrink : 0,
		basis : 'auto',
	},
} )

[my_view] {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: auto;
}