@xhoantran/next-purgecss

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