# Gatsby

TIP

This plugin has been created by @anantoghosh (opens new window) and this page is an extract from the ReadMe. You can find more information on the plugin repository (opens new window)

You can remove unused css from css/sass/less/stylus files and modules in your Gatsby project using PurgeCSS. Supports tailwind, bootstrap, bulma etc.

WARNING

This is NOT an install and forget type plugin. By default, it may remove required styles too.

📘 Read the latest docs here. (opens new window) • Changelog (opens new window) •

# Demo

When used in gatsby-starter-bootstrap (opens new window)

demo

When used in gatsby-starter-bootstrap-cv (opens new window) (installed by default)

demo

# Supported files

.css , .module.css
.scss, .sass, .module.scss, .module.sass (via gatsby-plugin-sass (opens new window))
.less, .module.less (via gatsby-plugin-less (opens new window))
.styl, .module.styl (via gatsby-plugin-stylus (opens new window))

# Installation

npm i gatsby-plugin-purgecss

# Usage

Add the plugin AFTER other css/postcss plugins

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# TLDR

Define options in gatsby-config.js, not purgecss.config.js.
If using tailwindcss, use the tailwind: true option (opens new window).
Use printRejected: true (opens new window) option to print the removed selectors.
Only files processed by Webpack will be purged.
my-selector will not match mySelector.
Whitelist required selectors or ignore files/folder using the Whitelist Solutions (opens new window) guide.
Ignore complete packages with ignore: ['packagename/'] (opens new window).
To only purge specific files/packages use purgeOnly: ['fileOrPackage/'] (opens new window).
Only js, jsx, ts, tsx files are scanned for selectors by default. If you want to add md or mdx use content: [path.join(process.cwd(), 'src/**/!(*.d).{ts,js,jsx,tsx,md,mdx}')] or better, just whitelist the required selectors.

← Grunt Vue →