support raw CSS strings and Webpack styles in plugin style APIs

Author: goto-bus-stop

src/Plugin.js

@@ -8,6 +8,10 @@ import Settings from './models/Settings';
 import Style from './util/Style';
 import SettingsView from './views/users/settings/DefaultSettingsView';
 
+function isWebpackStyle(v) {
+  return Array.isArray(v) && typeof v.i === 'function';
+}
+
 const stubHook = () => {};
 const hooks = ['enable', 'disable'];
 
@@ -99,7 +103,14 @@ const Plugin = Class.extend({
 
   // Styles API
   createStyle(defaults = {}) {
-    const style = new Style(defaults);
+    const style = new Style();
+    if (typeof defaults === 'string') {
+      style.raw(defaults);
+    } else if (isWebpackStyle(defaults)) {
+      style.raw(defaults.toString());
+    } else {
+      style.set(defaults);
+    }
     this[stylesSymbol].push(style);
     return style;
   },

src/util/Style.js

@@ -9,6 +9,7 @@ const Style = Class.extend({
   init(defaults) {
     this.sistyl = new Sistyl(defaults);
     this.timeout = null;
+    this.rawStyles = [];
 
     this.refresh = this.refresh.bind(this);
     this.id = _.uniqueId('eps-');
@@ -23,6 +24,15 @@ const Style = Class.extend({
     this.refresh();
   },
 
+  raw(text) {
+    this.rawStyles.push(text);
+
+    // throttle updates
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.refresh, 1);
+    return this;
+  },
+
   $() {
     let el = this.el;
     if (popoutView._window) { // eslint-disable-line no-underscore-dangle
@@ -58,9 +68,8 @@ const Style = Class.extend({
   },
 
   toString() {
-    return this.sistyl.toString();
+    return `${this.sistyl} \n ${this.rawStyles.join('\n\n')}`;
   },
-
 });
 
 export default Style;