universal-styles
Universal Styles for CSS Modules and server side deferred rendering.
npm i -S universal-styles
Why?
I built this library to solve the many issues surrounding server-side rendering of css (specifically within library projects for my use case).
Usage
import universalStyles from 'universal-styles'
function addStyles(...args) {
if(typeof window === 'object') {
/** We are in a browser and can access the window */
/** ...CODE THAT TOUCHES WINDOW, DOCUMENT, etc. GOES HERE... */
} else {
/** We are on the server and need to defer until a browser is available */
const enqueue = universalStyles(addStyles)
enqueue(...args)
}
}
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.
global__universal__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)
/** RENDER SOME STUFF THAT CAUSES STYLE LOADERS TO GET ENQUEUED */
/** ... */
/** 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>
<html>
<head>
${styles}
</head>
<body>
${content}
</body>
</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