var obj = {
  '.nav': {
    '.item': {
      color: 'blue',
      '&.active': {
        color: 'red'
      }
    }
  }
}

// get result from cssobj
var result = cssobj(obj, {local: true})
// get local selector
$(result.mapSel('.nav .item')).append(...)
// get local class list
$('div').addClass(result.mapClass('!news item active'))

var component = {
  controller: function () {
    var self = this
    this.result = cssobj(obj, {local:true})
    this.updateCSS = () => {
      obj['.nav'].fontSize = '34px'
      self.result.update()
    }
  },
  view: function (ctrl) {
    var result = ctrl.result
    return m (
      result.mapSel('ul.nav'),
      m (
        result.mapSel('li.item'),
        {
          class: result.mapClass('!news item active'),
          onclick: ctrl.updateCSS
        },
        'cssobj is awesome!'
      )
    )
  }
}
m.mount(document.getElementById('container'), component)

// register a custom filter
Vue.filter('mapClass', function (value) {
  return this.result.mapClass(value)
})
// you component here
Vue.component('my-component', {
  template: '#my-template',
  data: function () {
    return {
      result: cssobj(obj, {local: true})
    }
  },
  methods: {
    updateCSS: function () {
      obj['.nav'].fontSize = '34px'
      this.result.update()
    }
  }
})
new Vue({
  el: '#app'
})

function CssobjCtrl($scope) {
  var result = cssobj(obj, {
    local: true
  })
  $scope.updateCSS = function() {
    obj['.nav'].fontSize = '34px'
    result.update()
  }
  $scope.mapClass = function(list) {
    return result.mapClass(list)
  }
}