Not all classes being purified.

[oller]

Hi there,

I'm using the latest version of this plugin in conjunction with ExtractTextPlugin, it's executing fine, but isn't minifying as much as I would have expected.

For example, I have a typical bootstrap grid system component, with all the grid classes, .col-xs-3, .col-md-offset-1, .col-lg-push-11 etc. Not a single one is being removed, and I can search my codebase, and find no references to them.

My config:

        // Remove unused CSS styles
        new PurifyPlugin({
            basePath: config.app,
            paths: [
                "templates/**/*.html",
                "scripts/views/**/*.js",
                "scripts/*.js",
                "../../core/templates/**/*.html",
                "../../core/scripts/views/**/*.js"
            ],
            purifyOptions: {
                minify: true,
                info: true,
                rejected: true
            }
        }),

With paths as an empty array : 8.2% reduction With paths as above: 4.2% reduction

i.e. the files specified by paths account for that 4% difference.

To clarify, is the paths option only for additional templates/views that webpack wouldn't be aware of from tracing the apps dependency tree and bundling?

As the grid styles are the basic bootstrap grid system, I see it's in various node_modules packages docs, is there any chance purify is getting lost looking in there and counting those?

[IngwiePhoenix]

Hm, maybe this could be a problem in the upstream purifycss, but I am not certain. Gotta see what @kennyt has to say.

[mattdell]

I'm getting a similar issue. The majority of bootstrap CSS isn't being removed.

For me, I know that the dfn element isn't used anywhere in my project yet this CSS stays put.

dfn {
  font-style: italic;
}

[ekropotin]

Have the same issue with purifying classes of pureCSS.

[bebraw]

If you are using React, please set resolveExtensions: ['.html'].

Feel free to open issues with more detail so it's easier to debug what's going on.

[gfunk1230]

@bebraw only getting PurifyCSS has reduced the file size by ~22.0%. I am trying to get rid of unused bootstrap css but I dont think 22 percent is the right number since there is more css in my project that isnt used. Could you clarify if there is anything else I need to do in order to get rid of css from bootstrap. thanks

[bebraw]

@gfunk1230 Can you open a separate issue with a project to study?

[gfunk1230]

@mattdell @ekropotin @oller Did you guys ever get it working? I am having the same issue too. I tried using https://www.npmjs.com/package/purifycss-webpack-plugin which works in purifying the css but the reduction is low. Bootstrap classes are still in my style.css :(

[graemec23]

I'm having the same issue. I have a simple React Redux SPA, I just did a audit in Chrome and it says 69% of css is not used be used. On my webpack build it says Purify reduced filesize by ~25.4%

[oller]

@graemec23, just to sanity check, could it be Chrome is reporting 69% of declared classes not being used whereas purify is reporting file size reduction percentage. Are you comparing like with like?

[graemec23]

@oller I'm not comparing like for like, I thought the audit was of css not being used on the page, Its not just classes as table and h4 tags are on the list. I just thought that number was a bit low.. I am using BEM for css, could that be causing a issue with matching?

[gfunk1230]

@oller I agree with @graemec23. The number dont add up so would be great in having this looked into as I see n in other sites people discussing this issue. Purify seems like a great plugin but sadly not doing what you would expect it to do :(

[gfunk1230]

@bebraw @graemec23 opened up an issue here: https://github.com/webpack-contrib/purifycss-webpack/issues/82