node package manager



Universal Styles for CSS Modules and server side deferred rendering.

npm i -S universal-styles



I built this library to solve the many issues surrounding server-side rendering of css (specifically within library projects for my use case).


import universalStyles from 'universal-styles'
function addStyles(...args) {
  if(typeof window === 'object') {
    /** We are in a browser and can access the window */
  } else {
    /** We are on the server and need to defer until a browser is available */
    const enqueue = universalStyles(addStyles)

By default, this module will accrue styles and link css urls when server rendering into a global.universal object. If you do nothing, universal-styles should never throw, but the styles will not be applied to anything (from the server render). There are a few options depending on your needs to get the styles on the page, server-side.

1. replay function

  • Executes the same functions, with the same arguments, in the same order that were enqueued across all files.
  • Will try and access window and other DOM globals (if the enqueued functions did). If they do not exist, it will repeat the same server fallback over again.

2. serialize function

  • Prints out a raw string that can be embedded in a web page head template (if you are not server rendering with React).
  • Will embed all the style loading code with the styles and will run as soon as it is hit in the web page load.
  • Does not interact with window, document or other DOM globals. (EVENTUALLY)
/** ... */
/** Prints out raw string styles to template into head and clears the buffer out for the next server render */
const styles = global.__universal__.serialize()
const html = `<!doctype html>

3. reactStyles function (recommended for react apps)

  • Recommended for server-side rendering in React applications.
  • Prints out a React component that can be rendered into the head tag (full react-router example below).
  • Does not interact with window, document or other DOM globals. (EVENTUALLY)
  • By using a factory, this library needs no npm React dependency.
import React from 'react'
import { renderToString } from 'react-dom/server'
import { createMemoryHistory, match, RouterContext } from 'react-router'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
router.use((req, res, next) => {
  let memoryHistory = createMemoryHistory(req.path)
  let store = configureStore(memoryHistory)
  let history = syncHistoryWithStore(memoryHistory, store)
  /* react router match history */
  match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => {
    const content = renderToString(<Provider store={store}><RouterContext {...renderProps} /></Provider>)
    /** Returns a component that applies styles and clears the buffer for the next server render */
    const Styles = global.__universal__.reactStyles(React)
    const html = `<!doctype html>
          <Styles />