Figure out a way to manage styles about clappr HOT 2 CLOSED

This is our current approach:

Given the following plugin structure,

src/plugins/spinner_three_bounce
├── index.js
└── public
    ├── spinner.css
    └── spinner.html

The index.js is the plugin's code. In the public/ directory is the plugins assets. We currently only support .css and .html files. The .html file supports underscore templating. These files are loaded during build, it's contents are extracted and parsed to a src/base/jst.js file, which exports a hash with all templating and styles, where the plugin's name is the key. So, for loading a plugins template, you must call it through JST['plugin_name']. To load a style, call JST.CSS['plugin_name']. This file must be used in development when referring to templates or styles. For example:

var JST = require('../../base/jst');
var FooPlugin = BaseObject.extend({
  template: JST['foo'],
  render: function() {
      this.style = JST.CSS['foo']; // here the style variable has all the css file content.
      return this;
  }
});

from clappr.

We also have to reset the style of all data attributes used by the player to avoid style collisions

from clappr.