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?

o-stylist would

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 = CustomTheme

ThemeStyle

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 = CardTitle

const { ThemeStyle } = require( 'o-stylist' )

class DefaultFont extends ThemeStyle {
  definition ({ styles }) {
    styles.font = () => 'Serif'
    styles.fontSize = () => 24
  }
}

module.exports = DefaultFont

const { ThemeStyle } = require( 'o-stylist' )

class Title extends ThemeStyle {
  definition ({ styles, theme }) {
    styles.font = () => 'Serif'
    styles.fontSize = () => theme.DefaultFont.fontSize() * 2
  }
}

module.exports = Title

So 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 = ComponentCss

const { 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 )