Next PurgeCss

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

Table of contents

• Next PurgeCss
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Add next-purgecss as your postbuild script
    • Configuration
    • Configuration Options
  • Built With
  • License

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 |

Built With

• PurgeCss

License

MIT License © Hoan Tran