The future of loading CSS in React applications
Serve only the CSS you need, with no runtime overhead leveraging HTTP2. Because performance matters. More info: https://jakearchibald.com/2016/link-in-body/
Slow connection demo (thanks Jake Archibald) Notice how reloading is instant.
- Yarn:
yarn add progressive-css; yarn add -D filehound - Npm:
npm i -S progressive-css; npm i -D filehound
(filehound is a peer dependency)
import React, { Component } from 'react';
import withCSS from 'progressive-css';
// Must be named __CSS__ and cannot import its value
const __CSS__ = ['/styles/normalize.css', '/styles/Awesome.*.*.css'];
class Awesome extends Component {
render() {
return <div className="hello">Hello World</div>;
}
}
export default withCSS(__CSS__)(Awesome);Add the babel plugin
"plugins": [
// ... other plugins,
["progressive-css/babel-plugin", { root: "./", isProd: process.env.NODE_ENV === 'production' }]
]
<link rel="stylesheet" href="/styles/normalize.css" />
<link rel="stylesheet" href="/styles/Awesome.h4sh3d.min.css" />
<script> </script>
<div class="hello">Hello World</div>During development it will point to /styles/Awesome.css instead.
const __CSS__ = string[] Paths to stylesheets, resolved as <link href="path" />
MUST be named __CSS__ if using the babel plugin, with a static value (not imported).
A path can contain a glob but must be dot-delimited.
withCSS(_CSS_, scriptBlock: boolean = true, persist: boolean = false)(Component);
If scriptBlock is false, then it won't inject empty script tags to work around Firefox Flash Of Unstyled Content
persist will keep those stylesheets in CSS loaded in the document head even after the component unmounts
flushCSS()
If you perform server-side rendering you must let progressive-css know when to flush its CSS chunks. This is usually every time you call the reactDomServer methods (eg renderToString())
Example
// server-render.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { flushCSS } from 'progressive-css'
const getPage = (req, res) => {
const toRender = renderToString(<App />);
flushCSS();
const result = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8">
<title>Example</title>
</head>
<body>
<div id="root">${toRender}</div>
</body>
</html>
`;
res.status(200).send(result);
}flushCSS() returns an array of the loaded CSS paths that were cleared, which can optionally be used for things like preloading.
getCSS() returns an array of the currently loaded CSS paths without clearing them
const toRender = renderToString(<App />);
const cssChunks = flushCSS();
const result = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charSet="utf-8">
<title>Example</title>
${
cssChunks && cssChunks[0]
? cssChunks
.slice(0, 3)
.map((href) => `<link rel="preload" href="${href}" as="style">`)
.join('\n')
: ''
}
</head>
<body>
<div id="root">${toRender}</div>
</body>
</html>
`;const defaultOptions = {
root: './', // All CSS paths are resolved relative to this
isProd: false, // Enable to turn on file discovery and glob matching
replaceDir: undefined // [regexp|substr, newSubstr|function] Applies string.replace() to the directories
}Should be the last plugin. The css is resolved relative to ./ unless the root option specifies otherwise.
In production you must specify isProd: true.
replaceDir is useful for separating your production CSS files. For example:
replaceDir: ['/styles/', '/dist/'] turns
['/styles/normalize.css', '/styles/Awesome.*.*.css'];
into
['/dist/normalize.css', '/dist/Awesome.*.*.css'];
Server-side rendering works out of the box using the provided babel plugin.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent