CSS Style Sheet Factory DSL
Glow is a library for generating CSS. It provides a type-safe DSL for creating a heirarchy of selectors and associated rules.
npm install ndugger/glow --save
import { createStyleSheet } from 'cortex-css'
const styleSheet = document.createElement('style')
styleSheet.textContent = createStyleSheet(css => {
css.select('button', css => {
css.write(`
background-color: blue;
color: white;
`)
css.selectHover(css => {
css.write(`
opacity: 0.85;
`)
})
})
})
document.head.append(styleSheet)
Usage With Cortex
import { Component, createElement } from 'cortex'
import { createStyleSheet } from 'cortex-css'
export class Example extends Component {
protected render() {
return [
createElement(HTMLButtonElement, { type: 'submit' },
createElement(HTMLSlotElement)
)
]
}
protected theme() {
return createStyleSheet(css => {
css.selectClass(HTMLButtonElement, css => {
css.write(`
background-color: blue;
color: white;
`)
css.selectHover(css => {
css.write(`
opacity: 0.85;
`)
})
})
})
}
}
Instead of writing raw CSS properties, you may also use css.assign()
and pass in a partial CSSStyleDeclaration
object. Note that this is less performant, as the object needs to be serialized into valid CSS before writing to the style sheet, but it can help with code correctness in some situations.
createStyleSheet(css => {
css.select('button', css => {
css.assign({
backgroundColor: 'blue',
color: 'white'
})
css.selectHover(css => {
css.assign({
opacity: '0.85'
})
})
})
})