Webpack
Isomorphic CSS style loader forCSS style loader for Webpack that works similarly to
style-loader, but is optimized for
critical path CSS
rendering and also works great in the context of
isomorphic apps.
It provides two helper methods on to the styles
object - ._insertCss()
(injects CSS into the DOM) and ._getCss()
(returns a CSS string).
See getting started | changelog | Join #react-starter-kit chat room on Gitter to stay up to date
How to Install
$ npm install isomorphic-style-loader --save-dev
Getting Started
Webpack configuration:
moduleexports = /* ... */ module: rules: test: /\.css$/ use: 'isomorphic-style-loader' loader: 'css-loader' options: importLoaders: 1 'postcss-loader' /* ... */
Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.
React component example:
/* App.css */
/* App.js */ { return <div className=sroot> <h1 className=stitle>Hello world!</h1> </div> } sApp // <--
P.S.: It works great with CSS Modules!
Just decorate your React component with the
withStyles
higher-order component, and pass a function to your React app via insertCss
context variable (see React's context API)
that either calls styles._insertCss()
on a client or styles._getCss()
on the server. See server-side rendering example below:
const server = const port = processenvPORT || 3000 // Server-side rendering of the React appserver server
It should generate an HTML output similar to this one:
My Application Hello, World!
Regardless of how many styles components there are in the app.js
bundle,
only critical CSS is going to be rendered on the server inside the <head>
section of HTML document. Critical CSS is what actually used on the
requested web page, effectively dealing with
FOUC
issue and improving client-side performance.
CSS of the unmounted components will be removed from the DOM.
Then on client-side use hydrate to make your markup interactive:
const insertCss = { const removeCss = styles return removeCss} ReactDOM
React Hooks Support:
You can also use useStyles
inside your React Functional Components, instead of using withStyles
.
Please note that you still need to pass insertCss
function to StyleContext.Provider
from top of the tree.
const App = { ; return <div className=sroot> <h1 className=stitle>Hello world!</h1> </div> }; ;
Related Projects
- React Starter Kit — Isomorphic web app boilerplate (Express.js, React, Relay)
- Node.js API Starter — Project tempalte for building GraphQL API backends
License
The MIT License © 2015-present Kriasoft (@kriasoft). All rights reserved.
Made with ♥ by Konstantin Tarkus (@koistya, blog), Vladimir Kutepov (frenzzy) and contributors