riot-jss

JSS plugin for RiotJS.

JSS is css-in-js. It allows you to write styles in javascript object syntax.

Installation

npm i -S riot-jss

Usage

This plugin provides following functionality in a component scope:

1. Object classes - a map of original class names to compiled css classes.
2. Method jss({ className: true}) - switches classes based on a condition.
3. Method setStyles({...styles}) - set new styles and update component

Global plugin initialization

Install the plugin globbaly:

import {install} from 'riot'
import withJSS from 'riot-jss'
install(withJSS)
//

Local plugin initialization

Decorate component's exports:

<with-jss>
  <div class={jss({ myClass: true })}>
    Black Background
  </div>
  <script>
    import styles from './with-jss.js'
    import withJSS from 'riot-jss'
    export default withJSS({
      styles,
      state: {},
    })
  </script>
</with-jss>

Writing styles

In order to make the JSS work in scope of a riot component, just add a property called styles into your component exports. Property styles must be a valid JSS object.

export default{
  styles,
  ...
}

An example

<my-comonent>
  <div class={jss({ myClass: true })}>
    Black background class
    <p class={classes.text}>white text class</p>
  </div>
</my-component>

import styles from './my-component.jss'
export default {
  styles,
  state: {...}
}

my-compoent.jss

export default {
  myClass: {
    background: 'black'
  },
  text: {
    color: 'white'
  }
}

Licence

MIT