Add inject-decl compat (#108)

src/browser.js

@@ -14,6 +14,10 @@ import type {FusionPlugin} from 'fusion-core';
 import {Provider as StyletronProvider} from 'styletron-react';
 import {Client as Styletron} from 'styletron-engine-atomic';
 
+import {injectDeclarationCompatMixin} from './inject-declaration-compat-mixin.js';
+
+const StyletronCompat = injectDeclarationCompatMixin(Styletron);
+
 let engine;
 
 const plugin =
@@ -22,7 +26,7 @@ const plugin =
     middleware: () => (ctx, next) => {
       if (ctx.element) {
         if (!engine) {
-          engine = new Styletron({
+          engine = new StyletronCompat({
             hydrate: document.getElementsByClassName('_styletron_hydrate_'),
           });
         }

src/inject-declaration-compat-mixin.js

@@ -0,0 +1,17 @@
+export const injectDeclarationCompatMixin = Base =>
+  class extends Base {
+    injectDeclaration({prop, val, media, pseudo}) {
+      let style = {[prop]: val};
+      if (pseudo) {
+        style = {
+          [pseudo]: style,
+        };
+      }
+      if (media) {
+        style = {
+          [media]: style,
+        };
+      }
+      return this.renderStyle(style);
+    }
+  };

src/server.js

@@ -14,12 +14,16 @@ import type {FusionPlugin} from 'fusion-core';
 import {Provider as StyletronProvider} from 'styletron-react';
 import {Server as Styletron} from 'styletron-engine-atomic';
 
+import {injectDeclarationCompatMixin} from './inject-declaration-compat-mixin.js';
+
+const StyletronCompat = injectDeclarationCompatMixin(Styletron);
+
 const plugin =
   __NODE__ &&
   createPlugin({
     middleware: () => (ctx, next) => {
       if (ctx.element) {
-        const engine = new Styletron();
+        const engine = new StyletronCompat();
 
         ctx.element = (
           <StyletronProvider value={engine}>{ctx.element}</StyletronProvider>