Stylus Bootstrap could help

[crisward]

I've recently contributed stylus support for riot. https://github.com/riot/riot/pull/1069

There are a number of bootstrap stylus modules on npm - ie https://github.com/maxmx/bootstrap-stylus

These contain the css for each module as a separate styl file. If within each of your tags you included the variables and the individual needed styl files you would get the correct css and support for theming via the variables. Not sure how you'd specify the dependency or let the variable be overridden prior to compile, but it may save you a lot of work. Compiling the css with the specific modules like this obviously eliminates redundant css which could be very cool.

ie.

<btn>

  <button
    type="button"
    disabled={ disabled }
    data-option={ opts.option }
    data-size={ opts.size }
    onclick={ push }
    ><yield/></button>

  <script>
    this.disabled = undefined
    culculateProperties (e) {
      this.disabled =
        opts.hasOwnProperty('disabled') ? opts.disabled === '' || opts.disabled === 'disabled':
        opts.hasOwnProperty('__disabled') ? opts.__disabled === true :
        false
    }
    push (e) {
      if (this.disabled) return
      if (this.parent && opts.toggle) this.parent.trigger('inner-btn-toggle')
      if (opts.href) {
        e.preventUpdate = true
        location.href = opts.href
      }
      if (opts.onpush){
        opts.onpush(e)
        this.updateCaller(opts.onpush)
      }
    }
    this.on('update', this.culculateProperties)
    this.mixin('parentScope')
  </script>

  <style type="text/stylus">
   @import 'node_modules/bootstrap-stylus/bootstrap/variables.styl'
   @import 'node_modules/bootstrap-stylus/bootstrap/buttons.styl'
  </style>
</btn>