@xhoantran/next-purgecss NPM

Next PurgeCss

Next PurgeCss is a plugin that makes removing unused css in Next.js projects.

Next PurgeCss

Getting Started

NextPurgeCss works by adding its CLI in package.json file. Once you build your Next.js application, Next-PurgeCss will look into your build folder, get all the used selector, then purge the unused.

Installation

To install the library, run:

$ npm install @xhoantran/next-purgecss

Or if you prefer using Yarn:

$ yarn add @xhoantran/next-purgecss

Usage

Add next-purgecss as your postbuild script

"scripts": {
  "build": "next build",
  "postbuild": "next-purgecss"
}

Configuration

You can add the configuration directly in the Next.js config file (next.config.js).

module.exports = {
  rejected: true,
  rejectedCss: true,
  safelist: [
    "container-fluid",
    "navbar-collapse",
    "navbar-expand-lg",
    "navbar-nav",
  ],
};

Configuration Options

Property	Type	Description
`fontFace`	`boolean` (default false)	Set whether unused `@font-face` rules will be remove or not
`keyframes`	`boolean` (default false)	Set whether unused `keyframes` rules will be remove or not
`variables`	`boolean` (default false)	Set whether unused `variables` will be remove or not
`rejected`	`boolean` (default false)	Set `true` to scan through the removed list to see if there's anything obviously wrong
`safelist`	`string[]` or `object`	Indicate which selectors are safe to leave in the final CSS More Info
`blocklist`	array of `regrex` and `string`	Blocklist will block the CSS selectors from appearing in the final output CSS