Razzle Plugin PurgeCSS

This package contains a plugin to Remove unused CSS with Razzle.

Usage in Razzle Projects

• Install razzle-plugin-purgecss

  if you're using yarn

  yarn add razzle-plugin-purgecss --dev

  if you're using npm

  npm install razzle-plugin-purgecss --save-dev

• create a razzle.config.js file in root directory of project (next to the package.json) and put this content inside it

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          // This path options is required for PurgeCSS to analyzed all of yours content
          path: path.resolve(__dirname, 'src/**/*'),
        }
      }
    ],
  };

Options

• only You can specify entrypoints to the purgecss with the option only:

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          only: ['bundle', 'vendor'],
        }
      }
    ],
  };

• whitelist (default: []) You can whitelist selectors to stop PurgeCSS from removing them from your CSS. This can be accomplished with the options whitelist and whitelistPatterns.

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelist: ['random', 'yep', 'button'],
        }
      }
    ],
  };

• whitelistPatterns (default: []) You can whitelist selectors based on a regular expression with whitelistPatterns.

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelistPatterns: [/red$/],
        }
      }
    ],
  };

• keyframes (default: false) If you are using a CSS animation library such as animate.css, you can remove unused keyframes by setting the keyframes option to true.

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          keyframes: true
        }
      }
    ],
  };

• fontFace (default: false) If there are any unused @font-face rules in your css, you can remove them by setting the fontFace option to true

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          fontFace: true,
        }
      }
    ],
  };

• rejected (default: false) It can sometimes be more practical to scan through the removed list to see if there's anything obviously wrong. If you want to do it, use the rejected option.

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          rejected: true,
        }
      }
    ],
  };

See PurgeCSS for more information.