[go: up one dir, main page]

Skip to content

Server Side Rendering

James Yang edited this page Dec 23, 2016 · 3 revisions

Server Side Rendering

While cssobj = cssobj-core + plugin-localize + plugin-cssom

For server rendering, replace cssom with gencss, that's not strictly indentical, but is the right config:

Server Rendering = cssobj-core + plugin-localize + plugin-gencss

const cssobj_core = require('cssobj-core')
const cssobj_plugin_localize = require('cssobj-plugin-localize')
const cssobj_plugin_gencss = require('cssobj-plugin-gencss')

const cssobj = cssobj_core({
  plugins: [
    // order is important
    cssobj_plugin_localize({space: 'your_space_name', localNames: {}})  // will add result.mapClass prop etc.
    cssobj_plugin_gencss({indent:'\t', newLine: '\n'})  // will add result.css prop
  ]
})

// result.css is available
console.log(cssobj(your_obj1).css)
console.log(cssobj(your_obj2).css)

If you don't need localized class names (result.mapSel & result.mapClass), you should remove cssobj_plugin_localize lines in above.

Notice when you don't include cssobj_plugin_localize in your plugins, you CANNOT use result.mapClass, result.mapSel, result.space, result.localNames, since that 4 props was added by that plugin. Any call of the above 4 method/props will throw errors!

Caveat

The generated CSS don't have auto prefixed, you should use autoprefixer or some thing.