oliviertassinari-jss-plugin-syntax-rule-value-observable v10.0.2-0

JSS plugin that allows to use tc39 Observables

In order to create highly dynamic animations, you may want to use streams. Take a look at the tc39 observable proposal.

Sheet option link: true is required for this to function.

Plugins are not applied by default to observable rules or values.

Make sure you read how to use plugins in general.

Observable values

import {Observable} from 'rxjs'

const styles = {
  button: {
    color: new Observable(observer => {
      observer.next('red')
    })
  }
}

.button-1-2-3 {
  color: red;
}

Observable rules

Similar to observable values, you can declare observable rules. Stream should contain in this case the style object. Sheet option link: true is required for this to function.

import {Observable} from 'rxjs'

const styles = {
  button: new Observable(observer => {
    observer.next({
      color: 'red',
      opacity: 1
    })
  })
}

.button-1-2-3 {
  color: red;
  opacity: 1;
}

Applying plugins

By default for performance reasons, no plugin is applied to the values or rules returned from Observables. If you want to turn on the processing, you need to pass option process: true.

// Setup with particular plugins

import jss from 'oliviertassinari-jss'
import pluginObservable from 'jss-plugin-syntax-rule-value-observable'
import pluginCamelCase from 'jss-plugin-syntax-camel-case'
import pluginDefaultUnit from 'jss-plugin-syntax-default-unit'

jss.use(pluginObservable({process: true}), pluginCamelCase(), pluginDefaultUnit())

// Setup with default preset

import jss from 'oliviertassinari-jss'
import preset from 'jss-preset-default'

jss.setup(
  preset({
    observable: {process: true}
  })
)

import {Observable} from 'rxjs'

const styles = {
  button: new Observable(observer => {
    observer.next({
      marginLeft: 20
    })
  })
}

Note, that in this case property will have dashes and value default unit.

.button-1-2-3 {
  margin-left: 20px;
}

Demo

Simple

Issues

File a bug against cssinjs/jss prefixed with [jss-plugin-syntax-rule-value-observable].

Run tests

yarn
yarn test

License

MIT