Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lucleray/next-purgecss
nextjs + purgecss for smaller css bundles
https://github.com/lucleray/next-purgecss
next next-plugins nextjs plugins purgecss
Last synced: 5 days ago
JSON representation
nextjs + purgecss for smaller css bundles
- Host: GitHub
- URL: https://github.com/lucleray/next-purgecss
- Owner: lucleray
- Created: 2018-04-05T13:00:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-24T12:34:04.000Z (over 4 years ago)
- Last Synced: 2024-04-25T06:20:49.615Z (7 months ago)
- Topics: next, next-plugins, nextjs, plugins, purgecss
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/next-purgecss
- Size: 324 KB
- Stars: 133
- Watchers: 5
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-nextjs - Next PurgeCSS - Easily integrate [Purgecss](https://www.purgecss.com/), which helps you remove unused CSS from your bundle. (Extensions)
- fucking-awesome-nextjs - Next PurgeCSS - Easily integrate 🌎 [Purgecss](www.purgecss.com/), which helps you remove unused CSS from your bundle. (Extensions)
README
# next-purgecss
Next.js + Purgecss = 🔥
[Next.js](https://nextjs.org/) makes it easy to create SSR and static React applications.
[Purgecss](https://www.purgecss.com/) helps you remove unused CSS.
## Installation
> 🏎 Check out the [**examples folder**](examples) to see examples for your specific setup.
### 1. Install the packages
`next-purgecss` requires one of the following **css next plugins** :
- [next-css](https://github.com/zeit/next-plugins/tree/master/packages/next-css)
- [next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
- [next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
Just pick the one that fits your needs. In the following steps, I will use `next-css` but it works the same for the other **css next plugins**.
For example, install `next-css` and `next-purgecss` :
```
yarn add @zeit/next-css next-purgecss --dev
```
or with npm :
```
npm install @zeit/next-css next-purgecss --save-dev
```
### 2. Edit `next.config.js`.
```js
// next.config.js
const withCss = require('@zeit/next-css')
const withPurgeCss = require('next-purgecss')
module.exports = withCss(withPurgeCss())
```
## Options
### `purgeCssEnabled`
By default, `next-purgecss` will always remove unused CSS, regardless of build environment. You can change that by defining a function for the `purgeCssEnabled` option. The `purgeCssEnabled` function receives two arguments:
| Argument | Type | Description |
| --- | --- | --- |
| `dev` | `Boolean` | `true` in development mode (running `next`) or `false` in production mode (running `next start`) |
| `isServer` | `Boolean` | `true` during server side compilation or `false` during client side compilation |
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCssEnabled: ({ dev, isServer }) => (!dev && !isServer) // Only enable PurgeCSS for client-side production builds
})
)
```
### `purgeCssPaths`
By default, this plugin will scan `components` and `pages`
directories for classnames. You can change that by defining `purgeCssPaths`.
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCssPaths: [
'pages/**/*',
'components/**/*',
'other-components/**/*' // also scan other-components folder
]
})
)
```
### `purgeCss`
You can pass custom options to
[Purgecss](https://github.com/FullHuman/purgecss-webpack-plugin) by defining
`purgeCss` object in your `next.config.js`.
```js
// next.config.js
module.exports = withCss(
withPurgeCss({
purgeCss: {
whitelist: () => ['my-custom-class']
}
})
)
```
The list of available options are documented in [`purgecss-webpack-plugin`
docs](https://github.com/FullHuman/purgecss-webpack-plugin#options).
> ⚠️ `purgeCss.paths` will overwrite `purgeCssPaths`