https://github.com/gekorm/progressive-css
The future of loading CSS in React applications
https://github.com/gekorm/progressive-css
css react webpack
Last synced: 8 months ago
JSON representation
The future of loading CSS in React applications
- Host: GitHub
- URL: https://github.com/gekorm/progressive-css
- Owner: GeKorm
- License: mit
- Created: 2018-02-18T15:32:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-20T05:27:52.000Z (almost 8 years ago)
- Last Synced: 2025-07-13T20:50:33.639Z (11 months ago)
- Topics: css, react, webpack
- Language: JavaScript
- Size: 560 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# progressive-css
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]( https://jakearchibald-demos.herokuapp.com/progressive-css/) (thanks Jake Archibald)
Notice how reloading is instant.
### Install
- Yarn: `yarn add progressive-css; yarn add -D filehound`
- Npm: `npm i -S progressive-css; npm i -D filehound`
(filehound is a peer dependency)
### Example usage:
###### Awesome.js
```jsx
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
Hello World;
}
}
export default withCSS(__CSS__)(Awesome);
```
Add the babel plugin
###### .babelrc
```
"plugins": [
// ... other plugins,
["progressive-css/babel-plugin", { root: "./", isProd: process.env.NODE_ENV === 'production' }]
]
```
###### Output (production):
```html
Hello World
```
During development it will point to /styles/Awesome.css instead.
### API
#### React
`const __CSS__ = string[]` Paths to stylesheets, resolved as ``
**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
##### Server-side rendering
**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
```jsx
// 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();
flushCSS();
const result = `
Example
${toRender}
`;
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**
###### Example: preload the first 3 css chunks
```jsx
const toRender = renderToString();
const cssChunks = flushCSS();
const result = `
Example
${
cssChunks && cssChunks[0]
? cssChunks
.slice(0, 3)
.map((href) => ``)
.join('\n')
: ''
}
${toRender}
`;
```
#### Babel
```javascript
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'];`
### SSR
Server-side rendering works out of the box using the provided babel plugin.