o-stylist
Style and css definition
Installation
npm install o-stylist
Usage
What would happen if styles definition were written as object oriented programs are?
Theme
First, define a Theme, and add custom ThemeStyles
const { Theme } = require( 'o-stylist' )
const CardTitle = require( './CardTitle' )
const DefaultFont = require( './DefaultFont' )
const Title = require( './Title' )
class ProgramTheme extends Theme {
definition ({ theme }) {
theme.defineStyleFromClass({ themeStyleClass: CardTitle })
theme.defineStyleFromClass({ themeStyleClass: DefaultFont })
theme.defineStyleFromClass({ themeStyleClass: Title })
}
}
module.exports = CustomThemeThemeStyle
Then, define each ThemeStyle
const { ThemeStyle } = require( 'o-stylist' )
class CardTitle extends ThemeStyle {
definition ({ styles, theme }) {
styles.font = () => 'Times New Roman'
styles.fontSize = () => theme.DefaultFont.fontSize()
}
}
module.exports = CardTitleconst { ThemeStyle } = require( 'o-stylist' )
class DefaultFont extends ThemeStyle {
definition ({ styles }) {
styles.font = () => 'Serif'
styles.fontSize = () => 24
}
}
module.exports = DefaultFontconst { ThemeStyle } = require( 'o-stylist' )
class Title extends ThemeStyle {
definition ({ styles, theme }) {
styles.font = () => 'Serif'
styles.fontSize = () => theme.DefaultFont.fontSize() * 2
}
}
module.exports = TitleSo far, no css is involved, nor referenced
The definition of styles can be applied to pretty much anything with a key-value structure, like a Pdf builder, or ReactNative Styles
const programTheme = new ProgramTheme()
programTheme.Title.font()
programTheme.Title.fontSize()
programTheme.CardTitle.font()
programTheme.CardTitle.fontSize()Css integration
Then, if you do want to use it with css, integrate ProgramTheme to css definitions
class ComponentCss {
constructor ({ theme }) {
this.theme = theme
}
appendTo ({ css }) {
css.addFragment( `
.title {
font: ${ this.theme.Title.font() };
font-size: ${ this.theme.Title.fontSize() }px;
}
`
)
css.addFragment( `
.card-title {
font: ${ this.theme.CardTitle.font() };
font-size: ${ this.theme.CardTitle.fontSize() }px;
}
`
)
}
}
module.exports = ComponentCssconst { Css } = require( 'o-stylist' )
const theme = new ProgramTheme()
const componensCss = new ComponentCss({ theme })
const cssString = Css.fromDefinition({ cssDefinition: componensCss })Finally, add cssString to DOM document
const styleElement = document.createElement('style')
styleElement.innerHTML = cssString
document.head.appendChild( styleElement )