A concise style string or a style object.
The unique class name prefix used for scoping (e.g., .AbdStl1).
Use this prefix with $ to apply the styles.
const cardClass = insertCss({
'&': 'bg:white p:$4 r:8px transition: background-color 0.3s;',
'&:hover': 'bg:#f5f5f5',
});
$('section', cardClass, () => {
$('p#Card content');
});
const formClass = insertCss({
'&': 'bg:#0004 p:$3 r:$2',
button: {
'&': 'bg:$primary fg:white p:$2 r:4px cursor:pointer',
'&:hover': 'bg:$primaryHover',
'&:disabled': 'bg:#ccc cursor:not-allowed',
'.icon': 'display:inline-block mr:$1',
'@media (max-width: 600px)': 'p:$1 font-size:14px'
}
});
$('form', formClass, () => {
$('button', () => {
$('span.icon text=🔥');
$('#Click Me');
});
});
Inserts CSS rules into the document, scoping them with a unique class name.
The
styleparameter can be either:&representing the root class) and values are concise style strings or nested objects. When the key does not contain&, it is treated as a descendant selector. So{p: "color:red"}becomes".AbdStlX p { color: red; }"withAbdStlXbeing the generated class name.Concise Style Strings
Concise style strings use two syntaxes (same as inline CSS in $):
key:value(no space after colon): The value ends at the next whitespace. Example:'m:$3 bg:red r:8px'key: value;(space after colon): The value continues until a semicolon. Example:'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'Both forms can be mixed:
'm:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'Supports the same CSS shortcuts as $ and CSS variable references with
$(e.g.,$primary,$3).