Gatsby

Tips

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

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. • Changelog •

Demo

When used in gatsby-starter-bootstrap

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

Supported files

• .css , .module.css
• .scss, .sass, .module.scss, .module.sass (via gatsby-plugin-sass)
• .less, .module.less (via gatsby-plugin-less)
• .styl, .module.styl (via gatsby-plugin-stylus)

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
      }
    }
  ]
};

TLDR

• Define options in gatsby-config.js, not purgecss.config.js.
• If using tailwindcss, use the tailwind: true option.
• Use printRejected: true 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 guide.
• Ignore complete packages with ignore: ['packagename/'].
• To only purge specific files/packages use purgeOnly: ['fileOrPackage/'].
• 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.