As you can see, there is still some red (unused css) being loaded. Wasn’t purgecss supposed to take care of that?
Howdy! You’re going to have to provide some more details about your setup and show us exactly what changes to configs you’ve made in order to help ya out.
Sure, sorry about that. Basically all I did is the instructions that I saw here for Purge CSS
I ran the command and added those lines on webpack.config.optimize.js then ran a yarn build:production.
Here are the contents from my webpack.config.optimize.js
Thanks for the additional details 
One more thing - please drop that config in here directly within code blocks and not a screenshot of the code
'use strict'; // eslint-disable-line
const { default: ImageminPlugin } = require('imagemin-webpack-plugin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob-all');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const config = require('./config');
module.exports = {
plugins: [
new PurgecssPlugin({
paths: glob.sync([
'app/**/*.php',
'resources/views/**/*.php',
'resources/assets/scripts/**/*.js',
]),
whitelist: [ // Only if you need it!
'pr3','pv2','ph3',
'mb1',
'input',
'tracked-mega'
],
}),
new ImageminPlugin({
optipng: { optimizationLevel: 2 },
gifsicle: { optimizationLevel: 3 },
pngquant: { quality: '65-90', speed: 4 },
svgo: {
plugins: [
{ removeUnknownsAndDefaults: false },
{ cleanupIDs: false },
{ removeViewBox: false },
],
},
plugins: [imageminMozjpeg({ quality: 75 })],
disable: (config.enabled.watcher),
}),
new UglifyJsPlugin({
uglifyOptions: {
ecma: 5,
compress: {
warnings: true,
drop_console: true,
},
},
}),
],
};
Keep in mind that PurgeCSS is only going to remove CSS with a selector that does not appear anywhere in your project. So while the page you’re looking at in your screenshot may not include <b> or a <sub>, it may have found elements matching those selectors elsewhere in your project and therefore included them when building your CSS.
1 Like
Would those include selectors from the backend in WordPress? This is a plain brand new website I am building so I don’t know where else are those selectors being used. I literally only have one page . My plan was to start fresh and make sure PurgeCSS would work properly before starting so I could make sure all css is being used. I was planning to use Bootstrap, but my problem is that on my previous sites I installed bootstrap and it was loading lots of unused CSS so I decided to start fresh (using bootstrap) but with the PurgeCSS properly installed so I could use Bootstrap without loading all unnecessary CSS. Is PurgeCSS the right tool for this? or should I just go with something like Fundation or Bulma? … I really hope I can still use Bootstrap.
It’s looking for selectors in the files you defined here:
paths: glob.sync([
'app/**/*.php',
'resources/views/**/*.php',
'resources/assets/scripts/**/*.js',
]),
The post you linked to is also ~4 years old, so it’s possible things have changed with these packages in the interim. Have you read through the PurgeCSS documentation? Configuration | PurgeCSS
1 Like
I think I found where the problem was, it was actually some css being loaded from wp-include from the Useless Gutenberg editor. I got one more question, maybe a dumb one but is purifycss also optimizing .js files? The reason I ask is because I saw ‘resources/assets/scripts/**/*.js’, included there. Or is that path there to see which selectors are being used within JS code so it can optimize css not being used even on JS files?
1 Like
Are you using PurifyCSS or PurgeCSS? In either event, no, the answer to your question is that it is not doing anything with .js files.
This is correct.
I’m not certain what you mean by this.
PurgeCSS (and, I would imagine, similar tools) do the following:
- Build a list of all the CSS selectors you are using in your CSS files
- Build a list of all the CSS selectors you are using in any other file(s) you specify
- Any selectors that are in the list from step 1 but not the list from step 2 are removed from your compiled CSS along with their rules
Generally these tools don’t care much about what you are doing with those selectors or where they appear. There are implementation details and optimizations, but at the end of the day this tool is basically looking for things that look like CSS selectors (class="", id="", body, div, h1, etc) and assuming that they are.
Keep in mind that Chrome’s coverage is going to analyze what percentage of the CSS in the file is currently in use on the current page and your stylesheet is for you entire website. Unless you are creating individual CSS bundles per view, there will always be unused CSS.
Gotcha! don’t worry you answered all my questions, I really appreciate your help. I have one last question. So when running yarn build:production is it cleaning up the CSS that is produced after the yarn build:production? or does it clean up the SCSS before generating the main.css file? The reason I am asking is to know whether or not to include the path where all the SCSS will be.
What have you tried and what was the outcome?
Nothing really happens, but maybe there is no CSS to purge I suppose, I still see unused CSS being loaded on Chrome’s Coverage but I am taking into account what knowler said.