diff --git a/src/browser.js b/src/browser.js index 34f745e..ed699a7 100644 --- a/src/browser.js +++ b/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_'), }); } diff --git a/src/inject-declaration-compat-mixin.js b/src/inject-declaration-compat-mixin.js new file mode 100644 index 0000000..df494ca --- /dev/null +++ b/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); + } + }; diff --git a/src/server.js b/src/server.js index fdc8db5..819fa7a 100644 --- a/src/server.js +++ b/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 = ( {ctx.element}