@algosail/styles
v0.1.0
Published
Scoped CSS via tagged template literals.
Readme
@algosail/styles
Scoped CSS via tagged template literals. Class names are automatically renamed to avoid collisions.
Contents
css
css :: TemplateStringsArray -> Record String StringTagged template literal for scoped CSS. All class names (.name) are renamed to .name_uid and injected into <head> once. Returns a map from original name to scoped name.
const s = css`
.root {
display: flex;
gap: 8px;
}
.label {
font-weight: bold;
}
.label:hover {
color: red;
}
`
s.root // => 'root_3' (unique suffix assigned at runtime)
s.label // => 'label_3'
// Use with @algosail/dom
el('div', { class: s.root }, [el('span', { class: s.label }, ['Hello'])])Interpolated values work too:
const color = 'cornflowerblue'
const s = css`
.button {
background: ${color};
border-radius: 4px;
}
`Each call to css gets a unique suffix — styles from different calls never clash even if they use the same class names:
const a = css`
.box {
color: red;
}
`
const b = css`
.box {
color: blue;
}
`
a.box // => 'box_0'
b.box // => 'box_1'