Need help with purifycss-webpack?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

webpack-contrib
789 Stars 52 Forks MIT License 206 Commits 45 Opened issues

Description

UNMAINTAINED, use https://github.com/FullHuman/purgecss-webpack-plugin

Services available

!
?

Need anything else?

Contributors list

UNMAINTAINED

Please use: https://github.com/FullHuman/purgecss-webpack-plugin


npm deps test coverage quality chat

PurifyCSS Plugin

PurifyCSS for Webpack.

This plugin uses PurifyCSS to remove unused selectors from your CSS. You should use it with the extract-text-webpack-plugin.

Without any CSS file being emitted as an asset, this plugin will do nothing. You can also use the

file
plugin to drop a CSS file into your output folder, but it is highly recommended to use the PurifyCSS plugin with the Extract Text plugin.

This plugin replaces earlier purifycss-webpack-plugin and it has a different API!

Install

npm i -D purifycss-webpack purify-css

Usage

Configure as follows:

const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = { entry: {...}, output: {...}, module: { rules: [ { test: /.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('[name].[contenthash].css'), // Make sure this is after ExtractTextPlugin! new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! paths: glob.sync(path.join(__dirname, 'app/*.html')), }) ] };

And, that's it! Your scripts and view files will be scanned for classes, and those that are unused will be stripped off your CSS - aka. "purified".

In order to use this plugin to look into multiple paths you will need to:

  1. npm install --save glob-all
  2. Add
    const glob = require('glob-all');
    at the top of your webpack config
  3. Then you can pass your paths to an array, like so:
paths: glob.sync([
  path.join(__dirname, '.php'),
  path.join(__dirname, 'partials/.php')
]),

You can pass an object (

 -> []
) to
paths
if you want to control the behavior per entry.

Options

This plugin, unlike the original PurifyCSS plugin, provides special features, such as scanning the dependency files. You can configure using the following fields:

| Property | Description |---------------------|------------ |

styleExtensions
| An array of file extensions for determining used classes within style files. Defaults to
['.css']
. |
moduleExtensions
| An array of file extensions for determining used classes within
node_modules
. Defaults to
[]
, but
['.html']
can be useful here. |
minimize
| Enable CSS minification. Alias to
purifyOptions.minify
. Disabled by default. |
paths
| An array of absolute paths or a path to traverse. This also accepts an object (
 -> 
). It can be a good idea glob these. |
purifyOptions
| Pass custom options to PurifyCSS. |
verbose
| Set this flag to get verbose output from the plugin. This sets
purifyOptions.info
, but you can override
info
separately if you want less logging.

The plugin does not emit sourcemaps even if you enable

sourceMap
option on loaders!

Usage with CSS Modules

PurifyCSS doesn't support classes that have been namespaced with CSS Modules. However, by adding a static string to

css-loader
's
localIdentName
, you can effectively whitelist these namespaced classes.

In this example,

purify
will be our whitelisted string. Note: Make sure this string doesn't occur in any of your other CSS class names. Keep in mind that whatever you choose will end up in your application at runtime - try to keep it short!
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                localIdentName: 'purify_[hash:base64:5]',
                modules: true
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    ...,
    new PurifyCSSPlugin({
      purifyOptions: {
        whitelist: ['*purify*']
      }
    })
  ]
};

Maintainers

    <a href="https://github.com/bebraw">Juho Vepsäläinen</a>
  </td>
  <td align="center">
    <img width="150" height="150" src="https://avatars2.githubusercontent.com/u/8420490?v=3&amp;s=150">

    <a href="https://github.com/d3viant0ne">Joshua Wiens</a>
  </td>
  <td align="center">
    <img width="150" height="150" src="https://avatars3.githubusercontent.com/u/533616?v=3&amp;s=150">

    <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
  </td>
  <td align="center">
    <img width="150" height="150" src="https://avatars3.githubusercontent.com/u/3408176?v=3&amp;s=150">

    <a href="https://github.com/TheLarkInn">Sean Larkin</a>
  </td>
</tr>

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.