Messing around with PurgeCSS

[Piirka]

Hi all,

I have been doing some testing with PurgeCSS, but for some reason there are problems with whitelisting.

I have included block-library stylesheet into theme css and removed it from frontend (I like keep them in one stylesheet).

Questions:

1. Is purgecss-with-wordpress necessary anymore or is purgecss-with-gutenberg enought to include in this case?
2. For example .wp-block-columns and .wp-block-column gets purged even those are declared here: https://github.com/bfiessinger/purgecss-with-Gutenberg/blob/master/index.js#L38 I also compared block-library stylesheet to this and looks like those declarings are not up-to-date but it should whitelist .wp-block* classes at least. What could be the reason?
3. Reuseable blocks are nice but those are saved into database and I can not see the way how could those be included to as purgeCSS content. I have been thinking creating block templates into php file like this: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/#register_block_pattern so those will be included automatically. What other options there would be?

child-theme.scss

@import "theme/child_theme_variables";                   // <------- Add your variables into this file. Also add variables to overwrite Bootstrap variables here
@import "assets/bootstrap5/bootstrap";                             // <------- Loads Bootstrap4
@import "assets/understrap/theme/understrap";  // <------- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
@import "assets/understrap/theme/woocommerce"; // <------- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce

// Optional files - If you don´t use the corresponding scripts/fonts comment em out
//@import "assets/fontawesome/font-awesome";                           // <------- Font Awesome Icon font
@import "assets/underscores";                            // <------- Underscores media styles

@import "../../../../../wp-includes/css/dist/block-library/style";


// Any additional imported files //
@import "theme/child_theme";                             // <------- Add your styles into this file
@import "assets/understrap/theme/colors";           // <-------- This creates the necessary bootstrap color classes.
@import "assets/understrap/theme/blocks";           // <-------- This adds Bootstrap styles to blocks.
@import "assets/understrap/theme/contact-form7";    // <-------- Contact Form 7 - Bootstrap 4 support

functions.php

function understrap_child_remove_wp_block_library_css() {
	wp_dequeue_style( 'wp-block-library' );
} 
add_action( 'wp_enqueue_scripts', 'understrap_child_remove_wp_block_library_css', 100 );

postcss.config.js

'use strict'

const purgecssWordpress = require('purgecss-with-wordpress');
const purgecssGutenberg = require('purgecss-with-gutenberg');

module.exports = ctx => {
  return {
    map: ctx.file.dirname.includes('examples') ?
      false :
      {
        inline: false,
        annotation: true,
        sourcesContent: true
      },
    plugins: {
      autoprefixer: {
        cascade: false
      },
	  "postcss-understrap-palette-generator" : {
		colors: [
			"--bs-blue",
			"--bs-indigo",
			"--bs-purple",
			"--bs-pink",
			"--bs-red",
			"--bs-orange",
			"--bs-yellow",
			"--bs-green",
			"--bs-teal",
			"--bs-cyan",
			"--bs-white",
			"--bs-gray",
			"--bs-gray-dark"
		]
	  },
	  "@fullhuman/postcss-purgecss" : {
		content: [
			'../understrap/**/*.php', // this will include parent theme, child theme is in use
			'../understrap/**/*.js', // this will include parent theme, child theme is in use
			'**/*.php', 
			'**/*.js'
		],
		whitelist: [...purgecssWordpress.safelist, ...purgecssGutenberg.whitelist],
		whitelistPatterns: [...purgecssGutenberg.whitelistPatterns]
	  }
    }
  }
}

[Piirka]

Ah I was looking at old documentation, it should be safelist, not whitelist. Now it works as expected.

'use strict'

const purgecssWordpress = require('purgecss-with-wordpress');
const purgecssGutenberg = require('purgecss-with-gutenberg');

module.exports = ctx => {
  return {
    map: ctx.file.dirname.includes('examples') ?
      false :
      {
        inline: false,
        annotation: true,
        sourcesContent: true
      },
    plugins: {
      autoprefixer: {
        cascade: false
      },
	  "postcss-understrap-palette-generator" : {
		colors: [
			"--bs-blue",
			"--bs-indigo",
			"--bs-purple",
			"--bs-pink",
			"--bs-red",
			"--bs-orange",
			"--bs-yellow",
			"--bs-green",
			"--bs-teal",
			"--bs-cyan",
			"--bs-white",
			"--bs-gray",
			"--bs-gray-dark"
		]
	  },
	  "@fullhuman/postcss-purgecss" : {
		content: [
			'../understrap/**/*.php', // this will include parent theme, child theme is in use
			'../understrap/**/*.js', // this will include parent theme, child theme is in use
			'**/*.php', 
			'**/*.js'
		],
		safelist: [...purgecssWordpress.safelist, ...purgecssGutenberg.whitelist],
		safelistPatterns: [...purgecssGutenberg.whitelistPatterns]
	  }
    }
  }
}
´´´´

[bacoords]

How did it work out? What sort of filesize differences were you seeing?

[Piirka]

child-theme.min.css went from 286kb to 51kb.

I started all over with fresh install because I was trying out this in an old project.

Looked like both safelists were not up-to-date so I choosed different approach by adding purecss ignore comments directly to scss file.
Usually I have commented out unnecessary "Layout & components" from bootstrap.scss file but now it's not necessary.

Of course if Bootstrap classes are used in Gutenberg those won't be detected. One way is register block patters into php file. I have not looked way how to list classes from database. Any ideas how to approach this "problem"?

Example below.

'use strict'

module.exports = ctx => {
  return {
    map: ctx.file.dirname.includes('examples') ?
      false :
      {
        inline: false,
        annotation: true,
        sourcesContent: true
      },
    plugins: {
      autoprefixer: {
        cascade: false
      },
	  "postcss-understrap-palette-generator" : {
		colors: [
			"--bs-blue",
			"--bs-indigo",
			"--bs-purple",
			"--bs-pink",
			"--bs-red",
			"--bs-orange",
			"--bs-yellow",
			"--bs-green",
			"--bs-teal",
			"--bs-cyan",
			"--bs-white",
			"--bs-gray",
			"--bs-gray-dark"
		]
	  },
	  "@fullhuman/postcss-purgecss" : {
		content: [
			'../understrap/**/*.php', // this will include parent theme, child theme is in use
			'../understrap/**/*.js', // this will include parent theme, child theme is in use
			'**/*.php', 
			'**/*.js'
		]
	  }
    }
  }
}

@import "theme/child_theme_variables";                   // <------- Add your variables into this file. Also add variables to overwrite Bootstrap variables here
@import "assets/bootstrap5/bootstrap";                             // <------- Loads Bootstrap4

/* purgecss start ignore */
@import "assets/understrap/theme/understrap";  // <------- Loads the Understrap defaults. Just a few classes to incorporate BS in WP
@import "assets/understrap/theme/woocommerce"; // <------- Loads WooCommerce style fixes. Comment out if you aren't using WooCommerce
/* purgecss end ignore */

// Optional files - If you don´t use the corresponding scripts/fonts comment em out
@import "assets/fontawesome/font-awesome";                           // <------- Font Awesome Icon font

/* purgecss start ignore */
@import "assets/underscores";                            // <------- Underscores media styles
/* purgecss end ignore */

// Any additional imported files //

/* purgecss start ignore */
@import "theme/child_theme";                             // <------- Add your styles into this file
@import "assets/understrap/theme/colors";           // <-------- This creates the necessary bootstrap color classes.
@import "assets/understrap/theme/blocks";           // <-------- This adds Bootstrap styles to blocks.
@import "assets/understrap/theme/contact-form7";    // <-------- Contact Form 7 - Bootstrap 4 suppor
/* purgecss end ignore */

[bacoords]

I love the idea of purgeCSS but it's getting harder when Gutenberg basically fills the post content with so much HTML. You really have to be careful stripping out CSS now that end-users are adding so many more divs and classes than in previous WordPress versions.

I'm not sure if I have any advice on this, but it sounds like you'll need to manually ignore ANYTHING that your end user might be able to add into Gutenberg?

This is one of the reasons that the Understrap parent theme ships with the ENTIRE bootstrap codebase instead of a more streamlined version (like we typically do on our custom child themes). You just never know what the end user might be using.

[Piirka]

Same feelings here. This time I did not include Gutenbergs stylesheet into child-theme.css just to make it sure it won't strip out anything important. I keep digging this more and I will post if I come up with something clever.